feat(nf): add angular linker

Author: manfredsteyer

angular-architects-module-federation-14.3.10.tgz

@@ -77,7 +77,12 @@ function normalizeSharedMappings(
     sharedMappings: config.sharedMappings,
   });
 
-  const result = paths.filter((p) => !isInSkipList(p.key, skip));
+  const result = paths.filter((p) => 
+    !isInSkipList(p.key, skip) && p.key.includes('*'));
+
+  if (paths.find(p => p.key.includes('*'))) {
+    console.warn('Sharing mapped paths with wildcards (*) not supported');
+  }
 
   return result;
 }

libs/native-federation-core/src/lib/config/with-native-federation.ts

@@ -13,6 +13,7 @@ export interface BuildAdapterOptions {
   mappedPaths: MappedPath[];
   packageName?: string;
   esm?: boolean;
+  kind: 'shared-package' | 'shared-mapping' | 'exposed';
 }
 
 export type BuildAdapter = (options: BuildAdapterOptions) => Promise<void>;

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

@@ -26,6 +26,7 @@ export async function bundleExposed(
       external: externals,
       outfile: outFilePath,
       mappedPaths: config.sharedMappings,
+      kind: 'exposed',
     });
 
     const hash = hashFile(outFilePath);

libs/native-federation-core/src/lib/core/bundle-exposed.ts

@@ -27,6 +27,7 @@ export async function bundleSharedMappings(
         external: externals,
         outfile: outFilePath,
         mappedPaths: [],
+        kind: 'shared-mapping'
       });
 
       const hash = hashFile(outFilePath);

libs/native-federation-core/src/lib/core/bundle-shared-mappings.ts

@@ -46,10 +46,12 @@ export async function bundleShared(
           mappedPaths: config.sharedMappings,
           packageName: pi.packageName,
           esm: pi.esm,
+          kind: 'shared-package',
         });
       }
       catch(e) {
         console.error('Error bundling', pi.packageName);
+        console.error(e);
         console.info(`If you don't need this package, skip it in your federation.config.js!`);
         continue;
       }
@@ -71,9 +73,17 @@ export async function bundleShared(
       fedOptions.outputPath,
       outFileName
     );
-    fs.copyFileSync(cachedFile, fullOutputPath);
+
+    copyFileIfExists(cachedFile, fullOutputPath);
     copySrcMapIfExists(cachedFile, fullOutputPath);
   }
 
   return result;
 }
+
+function copyFileIfExists(cachedFile: string, fullOutputPath: string) {
+  if (fs.existsSync(cachedFile)) {
+    fs.copyFileSync(cachedFile, fullOutputPath);
+  }
+}
+

libs/native-federation-core/src/lib/core/bundle-shared.ts

@@ -11,7 +11,7 @@ export const DEFAULT_SKIP_LIST: SkipList = [
   '@angular-architects/native-federation-runtime',
   'es-module-shims',
   'zone.js',
-  'tslib',
+  // 'tslib',
   /\/schematics(\/|$)/,
   (pkg) => pkg.startsWith('@angular/') && !!pkg.match(/\/testing(\/|$)/)
 ];

libs/native-federation-core/src/lib/core/default-skip-list.ts

@@ -21,6 +21,13 @@
     "@rollup/plugin-replace": "^4.0.0",
     "rollup": "^2.79.0",
     "rollup-plugin-node-externals": "^4.1.1",
-    "esbuild": "^0.15.5"
+    "esbuild": "^0.15.5",
+    "@babel/core": "^7.19.0",
+    "@softarc/native-federation": "1.0.0",
+    "@softarc/native-federation-runtime": "1.0.0",
+    "@rollup/plugin-json": "^4.1.0"
+  },
+  "peerDependencies": {
+    "@angular/compiler-cli": "*"
   }
 }

libs/native-federation/package.json

@@ -37,7 +37,7 @@ export async function runBuilder(
   const config = await loadFederationConfig(fedOptions);
   const externals = getExternals(config);
 
-  options.externalDependencies = externals;
+  options.externalDependencies = externals.filter(e => e !== 'tslib');
   const output = await build(config, options, context);
 
   await buildForFederation(config, fedOptions, externals);

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

@@ -1,38 +1,110 @@
-import { BuildAdapter } from '@softarc/native-federation/build';
+import { BuildAdapter, MappedPath } from '@softarc/native-federation/build';
 import * as esbuild from 'esbuild';
 import { createCompilerPlugin } from '@angular-devkit/build-angular/src/builders/browser-esbuild/compiler-plugin';
 import { createSharedMappingsPlugin } from './shared-mappings-plugin';
-import { prepareNodePackage } from './prepare-node-package';
+import { prepareNodePackage as runRollup } from './prepare-node-package';
 
-const SKIP_PACKAGE_PREPARATION = ['@angular', '@ngrx', 'rxjs', 'zone.js'];
+import * as fs from 'fs';
+import * as path from 'path';
+
+import { PluginItem, transformAsync } from '@babel/core';
+
+// const SKIP_PACKAGE_PREPARATION = ['@angular', '@ngrx', 'rxjs', 'zone.js'];
 
 export const AngularEsBuildAdapter: BuildAdapter = async (options) => {
-  const { entryPoint, tsConfigPath, external, outfile, mappedPaths, packageName, esm } = options;
+  const {
+    entryPoint,
+    tsConfigPath,
+    external,
+    outfile,
+    mappedPaths,
+    packageName,
+    esm,
+    kind,
+  } = options;
+
+  // const pNameOrEmpty = packageName ?? '';
+
+  // const preparePackage = entryPoint.includes("node_modules")
+  //   &&  !(SKIP_PACKAGE_PREPARATION.find(p => pNameOrEmpty?.split('/')[0] === p)
+  //   || esm);
+
+  // const pkgName = preparePackage ? inferePkgName(entryPoint) : "";
+  // const tmpFolder = `node_modules/.tmp/native-federation/${pkgName}`;
+
+  if (kind === 'shared-package') {
+    await runRollup(entryPoint, external, outfile);
+  } else {
+    await runEsbuild(
+      entryPoint,
+      external,
+      outfile,
+      tsConfigPath,
+      mappedPaths,
+      // kind === 'shared-package' ? [] : null,
+      // kind === 'shared-package' ? path.dirname(entryPoint) : undefined,
+    );
+  }
 
-  const pNameOrEmpty = packageName ?? '';
+  if (kind === 'shared-package' && fs.existsSync(outfile)) {
+    await link(outfile);
+  }
+};
+
+async function link(outfile: string) {
+  console.log('linking shared package');
+  const code = fs.readFileSync(outfile, 'utf-8');
+
+  try {
+    const linkerEsm = await loadEsmModule<{ default: PluginItem; }>(
+      '@angular/compiler-cli/linker/babel'
+    );
+
+    const linker = linkerEsm.default;
 
-  const preparePackage = entryPoint.includes("node_modules")
-    &&  !(SKIP_PACKAGE_PREPARATION.find(p => pNameOrEmpty?.split('/')[0] === p)
-    || esm);
+    const result = await transformAsync(code, {
+      filename: outfile,
+      // inputSourceMap: (useInputSourcemap ? undefined : false) as undefined,
+      // sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
+      compact: false,
+      configFile: false,
+      babelrc: false,
+      browserslistConfigFile: false,
+      plugins: [linker],
+    });
 
-  const pkgName = preparePackage ? inferePkgName(entryPoint) : "";
-  const tmpFolder = `node_modules/.tmp/native-federation/${pkgName}`;
+    fs.writeFileSync(outfile, result.code, 'utf-8');
+  } catch (e) {
+    console.error('error linking', e);
 
-  if (preparePackage) {
-    await prepareNodePackage(entryPoint, external, tmpFolder);
+    if (fs.existsSync(`${outfile}.error`)) {
+      fs.unlinkSync(`${outfile}.error`);
+    }
+    fs.renameSync(outfile, `${outfile}.error`);
   }
+}
 
+async function runEsbuild(
+  entryPoint: string,
+  external: string[],
+  outfile: string,
+  tsConfigPath: string,
+  mappedPaths: MappedPath[],
+  plugins: esbuild.Plugin[] | null = null,
+  absWorkingDir: string | undefined = undefined
+) {
   await esbuild.build({
     entryPoints: [entryPoint],
     external,
+    // absWorkingDir,
     outfile,
     bundle: true,
     sourcemap: true,
     minify: true,
-    platform: 'node',
+    platform: 'browser',
     format: 'esm',
     target: ['esnext'],
-    plugins: [
+    plugins: plugins || [
       createCompilerPlugin(
         {
           sourcemap: true,
@@ -51,11 +123,10 @@ export const AngularEsBuildAdapter: BuildAdapter = async (options) => {
         : []),
     ],
   });
-};
-
-function inferePkgName(entryPoint: string) {
-  return entryPoint
-    .replace(/.*?node_modules/g, "")
-    .replace(/[^A-Za-z0-9.]/g, "_");
 }
 
+export function loadEsmModule<T>(modulePath: string | URL): Promise<T> {
+  return new Function('modulePath', `return import(modulePath);`)(
+    modulePath
+  ) as Promise<T>;
+}

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

@@ -1,37 +1,49 @@
-import { rollup } from "rollup";
-import resolve from "@rollup/plugin-node-resolve";
-import { externals } from "rollup-plugin-node-externals";
+import { rollup } from 'rollup';
+import resolve from '@rollup/plugin-node-resolve';
+import { externals } from 'rollup-plugin-node-externals';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const commonjs = require("@rollup/plugin-commonjs");
+const commonjs = require('@rollup/plugin-commonjs');
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const replace = require("@rollup/plugin-replace");
+const replace = require('@rollup/plugin-replace');
 
-export async function prepareNodePackage(entryPoint: string, external: string[], tmpFolder: string) {
-    
-    console.log('Preparing package ...');
-    
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const json = require('@rollup/plugin-json');
+
+
+export async function prepareNodePackage(
+  entryPoint: string,
+  external: string[],
+  outfile: string
+) {
+  console.log('Converting package to esm ...');
+
+  try {
     const result = await rollup({
       input: entryPoint,
-  
+
       plugins: [
+        json(),
         commonjs(),
         externals({ include: external }),
         resolve(),
         replace({
           preventAssignment: true,
           values: {
-            "process.env.NODE_ENV": '"development"',
+            'process.env.NODE_ENV': '"development"',
           },
         }),
       ],
     });
-  
+
     await result.write({
-      format: "esm",
-      file: tmpFolder,
+      format: 'esm',
+      file: outfile,
       sourcemap: true,
-      exports: "named",
+      exports: 'named',
     });
-  }
+  } catch (e) {
+    console.error('Error', e);
+  }
+}