feat(nf): support angular i18n

Author: manfredsteyer

libs/native-federation-core/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@softarc/native-federation",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "type": "commonjs",
   "license": "MIT",
   "dependencies": {
     "json5": "^2.2.0",
     "npmlog": "^6.0.2",
-    "@softarc/native-federation-runtime": "2.0.23"
+    "@softarc/native-federation-runtime": "2.0.25"
   }
 }

libs/native-federation-core/src/lib/core/build-for-federation.ts

@@ -27,7 +27,7 @@ export async function buildForFederation(
   fedOptions: FederationOptions,
   externals: string[],
   buildParams = defaultBuildParams
-) {
+): Promise<FederationInfo> {
   let artefactInfo: ArtefactInfo | undefined;
 
   if (!buildParams.skipMappingsAndExposed) {

libs/native-federation-esbuild/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softarc/native-federation-esbuild",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "type": "commonjs",
   "dependencies": {
     "@rollup/plugin-commonjs": "^22.0.2",

libs/native-federation-node/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@softarc/native-federation-node",
-  "version": "2.0.23"
+  "version": "2.0.25"
 }

libs/native-federation-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softarc/native-federation-runtime",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "dependencies": {
     "tslib": "^2.3.0"
   },

libs/native-federation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/native-federation",
-  "version": "19.0.11",
+  "version": "19.0.13",
   "main": "src/index.js",
   "generators": "./collection.json",
   "builders": "./builders.json",
@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.19.0",
-    "@softarc/native-federation": "2.0.23",
-    "@softarc/native-federation-runtime": "2.0.23",
+    "@softarc/native-federation": "2.0.25",
+    "@softarc/native-federation-runtime": "2.0.25",
     "@types/browser-sync": "^2.29.0",
     "@chialab/esbuild-plugin-commonjs": "^0.18.0",
     "browser-sync": "^3.0.2",

libs/native-federation/src/builders/build/builder.ts

@@ -14,7 +14,6 @@ import {
   createBuilder,
 } from '@angular-devkit/architect';
 
-import { DevServerBuilderOptions } from '@angular-devkit/build-angular';
 import { normalizeOptions } from '@angular-devkit/build-angular/src/builders/dev-server/options';
 
 import { setLogLevel, logger } from '@softarc/native-federation/build';
@@ -33,7 +32,7 @@ import { targetFromTargetString } from '@angular-devkit/architect';
 import { NfBuilderSchema } from './schema';
 import { reloadBrowser, setError } from '../../utils/dev-server';
 import { RebuildHubs } from '../../utils/rebuild-events';
-import { updateIndexHtml, updateScriptTags } from '../../utils/updateIndexHtml';
+import { updateScriptTags } from '../../utils/updateIndexHtml';
 import { existsSync, mkdirSync, rmSync } from 'fs';
 import {
   EsBuildResult,
@@ -45,6 +44,8 @@ import { createSharedMappingsPlugin } from '../../utils/shared-mappings-plugin';
 // import { NextHandleFunction } from 'vite';
 import { PluginBuild } from 'esbuild';
 import { FederationInfo } from '@softarc/native-federation-runtime';
+import { getI18nConfig, translateFederationArtefacts } from '../../utils/i18n';
+import { createOrUpdateGithubRelease } from 'nx/src/command-line/release/utils/github';
 
 function _buildApplication(options, context, pluginsOrExtensions) {
   let extensions;
@@ -122,7 +123,7 @@ export async function* runBuilder(
     options.baseHref = nfOptions.baseHref;
   }
 
-  if(nfOptions.outputPath){
+  if (nfOptions.outputPath) {
     options.outputPath = nfOptions.outputPath;
   }
 
@@ -134,7 +135,6 @@ export async function* runBuilder(
   setLogLevel(options.verbose ? 'verbose' : 'info');
 
   const outputPath = options.outputPath;
-
   const outputOptions: Required<
     Exclude<ApplicationBuilderOptions['outputPath'], string>
   > = {
@@ -145,9 +145,12 @@ export async function* runBuilder(
     base: typeof outputPath === 'string' ? outputPath : outputPath.base,
   };
 
+  const i18n = await getI18nConfig(context);
+
   const browserOutputPath = path.join(
     outputOptions.base,
-    outputOptions.browser
+    outputOptions.browser,
+    i18n?.sourceLocale || ''
   );
 
   const fedOptions: FederationOptions = {
@@ -235,12 +238,18 @@ export async function* runBuilder(
     });
   }
 
+  let federationResult: FederationInfo;
   try {
-    await buildForFederation(config, fedOptions, externals);
+    federationResult = await buildForFederation(config, fedOptions, externals);
   } catch (e) {
     process.exit(1);
   }
 
+  const hasLocales = i18n?.locales && Object.keys(i18n.locales).length > 0;
+  if (!runServer && hasLocales) {
+    translateFederationArtefacts(i18n, outputOptions.base, federationResult);
+  }
+
   options.deleteOutputPath = false;
 
   const appBuilderName = '@angular-devkit/build-angular:application';
@@ -261,6 +270,7 @@ export async function* runBuilder(
       )
     : buildApplication(options, context, {
         codePlugins: plugins as any,
+        indexHtmlTransformer: transformIndexHtml(nfOptions),
       });
 
   // builderRun.output.subscribe(async (output) => {
@@ -285,9 +295,9 @@ export async function* runBuilder(
       );
     }
 
-    if (write && !runServer && !nfOptions.skipHtmlTransform) {
-      updateIndexHtml(fedOptions, nfOptions);
-    }
+    // if (write && !runServer && !nfOptions.skipHtmlTransform) {
+    //   updateIndexHtml(fedOptions, nfOptions);
+    // }
 
     // if (!runServer) {
     //   yield output;

libs/native-federation/src/schematics/init/schematic.ts

@@ -21,6 +21,7 @@ import {
 
 import {
   addPackageJsonDependency,
+  getPackageJsonDependency,
   NodeDependencyType,
 } from '@schematics/angular/utility/dependencies';
 
@@ -40,6 +41,10 @@ type NormalizedOptions = {
   port: number;
 };
 
+type PackageJson = {
+  dependencies: Record<string, string>;
+};
+
 export function updatePackageJson(tree: Tree): void {
   const packageJson = tree.readJson('package.json');
 
@@ -72,6 +77,9 @@ export default function config(options: MfSchematicSchema): Rule {
   return async function (tree, context) {
     const workspaceFileName = getWorkspaceFileName(tree);
     const workspace = JSON.parse(tree.read(workspaceFileName).toString('utf8'));
+    const packageJson = JSON.parse(
+      tree.read('package.json').toString('utf8')
+    ) as PackageJson;
 
     const normalized = normalizeOptions(options, workspace, tree);
 
@@ -126,6 +134,14 @@ export default function config(options: MfSchematicSchema): Rule {
     // updatePackageJson(tree);
     // patchAngularBuild(tree);
 
+    addPackageJsonDependency(tree, {
+      name: '@angular/animations',
+      type: NodeDependencyType.Default,
+      version:
+        getPackageJsonDependency(tree, '@angular/core')?.version || 'latest',
+      overwrite: false,
+    });
+
     addPackageJsonDependency(tree, {
       name: 'es-module-shims',
       type: NodeDependencyType.Default,

libs/native-federation/src/utils/angular-esbuild-adapter.ts

@@ -420,7 +420,7 @@ export function loadEsmModule<T>(modulePath: string | URL): Promise<T> {
 //
 //  Usually, ngServerMode is set during bundling. However, we need to infer this
 //  value at runtime as we are using the same shared bundle for @angular/core
-//  on the server and in the browser. 
+//  on the server and in the browser.
 //
 function setNgServerMode(): void {
   const fileToPatch = 'node_modules/@angular/core/fesm2022/core.mjs';
@@ -432,10 +432,7 @@ function setNgServerMode(): void {
       if (!content.includes(lineToAdd)) {
         content = lineToAdd + '\n' + content;
         fs.writeFileSync(fileToPatch, content);
-        console.log('patched!');
-      } else {
-        console.log('not patched!');
-      }
+      } 
     }
   } catch (e) {
     console.error(

libs/native-federation/src/utils/i18n.ts

@@ -0,0 +1,99 @@
+import { BuilderContext } from '@angular-devkit/architect';
+import { logger } from '@softarc/native-federation/build';
+import { execSync } from 'child_process';
+import path from 'path';
+import fs from 'fs';
+import { FederationInfo } from '@softarc/native-federation-runtime';
+
+export type WorkspaceConfig = {
+  i18n?: I18nConfig;
+};
+
+export type I18nConfig = {
+  sourceLocale: string;
+  locales: Record<string, string>;
+};
+
+export async function getI18nConfig(
+  context: BuilderContext
+): Promise<I18nConfig | undefined> {
+  const workspaceConfig = (await context.getProjectMetadata(
+    context.target?.project || ''
+  )) as WorkspaceConfig;
+
+  const i18nConfig = workspaceConfig?.i18n;
+  return i18nConfig;
+}
+
+export async function translateFederationArtefacts(
+  i18n: I18nConfig,
+  outputPath: string,
+  federationResult: FederationInfo
+) {
+
+  logger.info('Writing Translations');
+
+  const translationFiles =
+    '"' +
+    Object.values(i18n.locales || {})
+      .map((value) => JSON.stringify(value))
+      .join(' ')
+      .replace(/"/g, '') +
+    '"';
+
+  const locales = Object.keys(i18n.locales);
+  const targetLocales = locales.join(' ');
+
+  const sourceLocale = i18n.sourceLocale;
+
+  const translationOutPath = path.join(outputPath, 'browser', '{{LOCALE}}');
+
+  const federationFiles = [
+    ...federationResult.shared.map((s) => s.outFileName),
+    ...federationResult.exposes.map((e) => e.outFileName),
+  ];
+
+  // Here, we use a glob with an exhaustive list i/o `"*.js"`
+  // to improve performance
+  const sourcePattern = '{' + federationFiles.join(',') + '}';
+
+  const sourceLocalePath = path.join(
+    outputPath,
+    'browser',
+    sourceLocale,
+  );
+
+  const cmd = `node node_modules/.bin/localize-translate -r ${sourceLocalePath} -s "${sourcePattern}" -t ${translationFiles} -o ${translationOutPath} --target-locales ${targetLocales} -l ${sourceLocale}`;
+
+  ensureDistFolders(locales, outputPath);
+  copyRemoteEntry(locales, outputPath, sourceLocalePath);
+
+  logger.debug('Running: ' + cmd);
+
+  execCommand(cmd, 'Successfully translated');
+}
+
+function execCommand(cmd: string, defaultSuccessInfo: string) {
+    try {
+        const output = execSync(cmd);
+        logger.info(output.toString() || defaultSuccessInfo);
+    } catch (error) {
+        logger.error(error.message);
+    }
+}
+
+function copyRemoteEntry(locales: string[], outputPath: string, sourceLocalePath: string) {
+    const remoteEntry = path.join(sourceLocalePath, 'remoteEntry.json');
+
+    for (const locale of locales) {
+        const localePath = path.join(outputPath, 'browser', locale, 'remoteEntry.json');
+        fs.copyFileSync(remoteEntry, localePath);
+    }
+}
+
+function ensureDistFolders(locales: string[], outputPath: string) {
+    for (const locale of locales) {
+        const localePath = path.join(outputPath, 'browser', locale);
+        fs.mkdirSync(localePath, { recursive: true })
+    }
+}