feat(transloco): add intlmessageformat transpiler

angular.json

@@ -4,6 +4,7 @@
     "transloco": "libs/transloco",
     "transloco-locale": "libs/transloco-locale",
     "transloco-messageformat": "libs/transloco-messageformat",
+    "transloco-intlmessageformat": "libs/transloco-intlmessageformat",
     "transloco-optimize": "libs/transloco-optimize",
     "transloco-persist-lang": "libs/transloco-persist-lang",
     "transloco-persist-translations": "libs/transloco-persist-translations",

libs/transloco-intlmessageformat/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "translocoNxShell",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "transloco-nx-shell",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/transloco-intlmessageformat/CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).

libs/transloco-intlmessageformat/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2019-2021 Netanel Basal, Shahar Kazaz, and Itay Oded.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

libs/transloco-intlmessageformat/README.md

@@ -0,0 +1,3 @@
+# Transloco MessageFormat
+
+Please visit the [official Transloco docs](https://ngneat.github.io/transloco/docs/plugins/intlmessage-format).

libs/transloco-intlmessageformat/karma.conf.js

@@ -0,0 +1,16 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+const { join } = require('path');
+const getBaseKarmaConfig = require('../../karma.conf');
+
+module.exports = function (config) {
+  const baseConfig = getBaseKarmaConfig();
+  config.set({
+    ...baseConfig,
+    coverageIstanbulReporter: {
+      ...baseConfig.coverageIstanbulReporter,
+      dir: join(__dirname, '../../coverage/libs/transloco-intlmessageformat'),
+    },
+  });
+};

libs/transloco-intlmessageformat/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/transloco-intlmessageformat",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@formatjs/intl"
+  ]
+}

libs/transloco-intlmessageformat/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ngneat/transloco-intlmessageformat",
+  "version": "4.3.0",
+  "description": "Transpiler for Transloco that uses formatjs/intlmessageformat to compile translations using ICU syntax for handling pluralization and gender",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/ngneat/transloco/issues"
+  },
+  "homepage": "https://ngneat.github.io/transloco/docs/plugins/intlmessage-format",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ngneat/transloco"
+  },
+  "keywords": [
+    "angular",
+    "angular 2",
+    "declension",
+    "i18n",
+    "icu",
+    "gender",
+    "intlmessageformat",
+    "transloco",
+    "pluralization",
+    "translate"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": ">=13.0.0",
+    "@ngneat/transloco": ">=4.2.0",
+    "rxjs": ">=6.0.0"
+  },
+  "dependencies": {
+    "@formatjs/intl": "2.3.4",
+    "tslib": "^2.2.0"
+  }
+}

libs/transloco-intlmessageformat/project.json

@@ -0,0 +1,46 @@
+{
+  "projectType": "library",
+  "sourceRoot": "libs/transloco-intlmessageformat/src",
+  "prefix": "transloco-nx-shell",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/angular:package",
+      "outputs": ["dist/libs/transloco-intlmessageformat"],
+      "options": {
+        "updateBuildableProjectDepsInPackageJson": false,
+        "project": "libs/transloco-intlmessageformat/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/transloco-intlmessageformat/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/transloco-intlmessageformat/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@angular-devkit/build-angular:karma",
+      "options": {
+        "main": "libs/transloco-intlmessageformat/src/test-setup.ts",
+        "tsConfig": "libs/transloco-intlmessageformat/tsconfig.spec.json",
+        "karmaConfig": "libs/transloco-intlmessageformat/karma.conf.js"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": [
+          "libs/transloco-intlmessageformat/src/**/*.ts",
+          "libs/transloco-intlmessageformat/src/**/*.html"
+        ]
+      },
+      "outputs": ["{options.outputFile}"]
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version"
+    }
+  },
+  "tags": []
+}

libs/transloco-intlmessageformat/src/index.ts

@@ -0,0 +1,6 @@
+export {
+  TRANSLOCO_INTL_MESSAGE_FORMAT_CONFIG,
+  IntlMessageFormatConfig,
+} from './lib/intlmessageformat.config';
+export { TranslocoIntlMessageFormatModule } from './lib/intlmessageformat.module';
+export { IntlMessageFormatTranspiler } from './lib/intlmessageformat.transpiler';

libs/transloco-intlmessageformat/src/lib/intlmessageformat.config.ts

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+
+import IntlMessageFormat from 'intl-messageformat';
+import { Formats } from 'intl-messageformat/src/formatters';
+import { Options } from 'intl-messageformat/src/core';
+
+export const TRANSLOCO_INTL_MESSAGE_FORMAT_CONFIG =
+    new InjectionToken<IntlMessageFormatConfig>('TRANSLOCO_INTL_MESSAGE_FORMAT_CONFIG');
+
+export type MFLocale = ConstructorParameters<typeof IntlMessageFormat>[1];
+
+export interface IntlMessageFormatConfig {
+    locales?: MFLocale;
+    formats?: Partial<Formats>
+    opts?: Options,
+    enableCache?: boolean;
+}

libs/transloco-intlmessageformat/src/lib/intlmessageformat.factory.ts

@@ -0,0 +1,42 @@
+import { MFLocale } from './intlmessageformat.config';
+
+import IntlMessageFormat from 'intl-messageformat';
+import { Formats, PrimitiveType } from 'intl-messageformat/src/formatters';
+import { Options } from 'intl-messageformat/src/core';
+import { MessageFormatElement } from '@formatjs/icu-messageformat-parser';
+
+export type MFFactoryFn = (message: string | MessageFormatElement[], values?: Record<string, PrimitiveType>) => string | string[] | undefined;
+
+export function defaultFactory(
+    locales: MFLocale,
+    formats?: Partial<Formats>,
+    opts?: Options
+): MFFactoryFn {
+    return (message: string | MessageFormatElement[], values?: Record<string, PrimitiveType>) => {
+        return new IntlMessageFormat(message, locales, formats, opts).format<string>(values);
+    }
+}
+
+const cache = new Map<string, string | string[] | undefined>();
+
+export function cachedFactory(
+    locales: MFLocale,
+    formats?: Partial<Formats>,
+    opts?: Options
+): MFFactoryFn {
+    return (message: string | MessageFormatElement[], values?: Record<string, PrimitiveType>) => {
+        const localeKey = `__${locales?.toString() || IntlMessageFormat.defaultLocale}__`;
+
+        const cacheKey = `${localeKey}${values}`;
+        const cachedMsg = cache.get(cacheKey);
+
+        if (cachedMsg) {
+            return cachedMsg;
+        }
+
+        const msg = defaultFactory(locales, formats, opts)(message, values);
+        cache.set(cacheKey, msg);
+
+        return msg;
+    }
+}

libs/transloco-intlmessageformat/src/lib/intlmessageformat.module.ts

@@ -0,0 +1,25 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { TRANSLOCO_TRANSPILER } from '@ngneat/transloco';
+import { IntlMessageFormatTranspiler } from './intlmessageformat.transpiler';
+import {
+    TRANSLOCO_INTL_MESSAGE_FORMAT_CONFIG,
+    IntlMessageFormatConfig,
+} from './intlmessageformat.config';
+
+@NgModule()
+export class TranslocoIntlMessageFormatModule {
+    static forRoot(
+        config?: IntlMessageFormatConfig
+    ): ModuleWithProviders<TranslocoIntlMessageFormatModule> {
+        return {
+            ngModule: TranslocoIntlMessageFormatModule,
+            providers: [
+                {provide: TRANSLOCO_INTL_MESSAGE_FORMAT_CONFIG, useValue: config},
+                {
+                    provide: TRANSLOCO_TRANSPILER,
+                    useClass: IntlMessageFormatTranspiler,
+                },
+            ],
+        };
+    }
+}