feat(nf): compensate missing exports in edge cases, e. g. for react

Author: manfredsteyer

libs/mf-runtime/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@angular-architects/module-federation-runtime",
   "license": "MIT",
-  "version": "15.0.2",
+  "version": "15.0.3",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0"

libs/mf-tools/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@angular-architects/module-federation-tools",
-  "version": "15.0.2",
+  "version": "15.0.3",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",
     "@angular/router": ">=15.0.0",
-    "@angular-architects/module-federation": "^15.0.2",
+    "@angular-architects/module-federation": "^15.0.3",
     "@angular/platform-browser": ">=15.0.0",
     "rxjs": ">= 6.0.0"
   },

libs/mf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation",
-  "version": "15.0.2",
+  "version": "15.0.3",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
@@ -17,7 +17,7 @@
   "schematics": "./collection.json",
   "builders": "./builders.json",
   "dependencies": {
-    "@angular-architects/module-federation-runtime": "15.0.2",
+    "@angular-architects/module-federation-runtime": "15.0.3",
     "word-wrap": "^1.2.3",
     "callsite": "^1.0.0",
     "node-fetch": "^2.6.7",

libs/mf/src/utils/with-mf-plugin.ts

@@ -5,7 +5,7 @@ import { ModifyEntryPlugin } from './modify-entry-plugin';
 import ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 
 export function withModuleFederationPlugin(config: unknown) {
-  const sharedMappings = config['sharedMappings'] || [];
+  const sharedMappings = config['sharedMappings'];
   delete config['sharedMappings'];
 
   const skip = [
@@ -16,8 +16,12 @@ export function withModuleFederationPlugin(config: unknown) {
 
   delete config['skip'];
 
+  if (sharedMappings) {
+    sharedMappings.filter(m => !skip.includes(m));
+  }
+
   const mappings = new SharedMappings();
-  mappings.register(findRootTsConfigJson(), sharedMappings.filter(m => !skip.includes(m)));
+  mappings.register(findRootTsConfigJson(), sharedMappings);
 
   setDefaults(config, mappings, skip);
   const modifyEntryPlugin = createModifyEntryPlugin(config);

libs/native-federation-esbuild/package.json

@@ -9,6 +9,8 @@
     "rollup": "^2.79.0",
     "rollup-plugin-node-externals": "^4.1.1",
     "esbuild": "^0.15.5",
-    "npmlog": "^6.0.2"
+    "npmlog": "^6.0.2",
+    "acorn": "^8.8.1"
+
   }
 }

libs/native-federation-esbuild/src/lib/adapter.ts

@@ -7,6 +7,8 @@ import * as esbuild from 'esbuild';
 import { rollup } from 'rollup';
 import resolve from '@rollup/plugin-node-resolve';
 import { externals } from 'rollup-plugin-node-externals';
+import { collectExports } from './collect-exports';
+import * as fs from 'fs';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const commonjs = require('@rollup/plugin-commonjs');
@@ -18,9 +20,15 @@ export const esBuildAdapter: BuildAdapter = createEsBuildAdapter({
   plugins: [],
 });
 
+export type ReplacementConfig = {
+  file: string, 
+  tryCompensateMissingExports: boolean
+};
+
 export interface EsBuildAdapterConfig {
   plugins: esbuild.Plugin[];
-  fileReplacements?: Record<string, string>
+  fileReplacements?: Record<string, string | ReplacementConfig>
+  skipRollup?: boolean,
 }
 
 export function createEsBuildAdapter(config: EsBuildAdapterConfig) {
@@ -35,7 +43,7 @@ export function createEsBuildAdapter(config: EsBuildAdapterConfig) {
       await prepareNodePackage(entryPoint, external, tmpFolder, config);
     }
 
-    await esbuild.build({
+    const r = await esbuild.build({
       entryPoints: [isPkg ? tmpFolder : entryPoint],
       external,
       outfile,
@@ -57,19 +65,52 @@ export function createEsBuildAdapter(config: EsBuildAdapterConfig) {
       target: ['esnext'],
       plugins: [...config.plugins],
     });
+
+    postProcess(config, entryPoint, outfile);
   };
 }
 
+function postProcess(config: EsBuildAdapterConfig, entryPoint: string, outfile: string) {
+  if (config.fileReplacements) {
+    const replacements = normalize(config.fileReplacements);
+    
+    const normalizedPath = entryPoint.replace(/\\/g, '/');
+    const key = Object.keys(replacements).find(key => normalizedPath.endsWith(key))
+
+    if (key && replacements[key] && replacements[key].tryCompensateMissingExports) {
+      const file = replacements[key].file;
+      compensateExports(file, outfile);
+    }
+  }
+}
+
+function compensateExports(entryPoint: string, outfile: string): void {
+  const inExports = collectExports(entryPoint);
+  const outExports = collectExports(outfile);
+
+  if (!outExports.hasDefaultExport || outExports.hasFurtherExports) {
+    return;
+  }
+  const defaultName = outExports.defaultExportName;
+
+  let exports = '/*Try to compensate missing exports*/\n\n';
+  for (const exp of inExports.exports) {
+    exports += `let ${exp}$softarc = ${defaultName}.${exp};\n`;
+    exports += `export { ${exp}$softarc as ${exp} };\n`;
+  }
+
+  fs.appendFileSync(outfile, exports, 'utf-8');
+}
+
 async function prepareNodePackage(
   entryPoint: string,
   external: string[],
   tmpFolder: string,
   config: EsBuildAdapterConfig,
 ) {
 
-
   if (config.fileReplacements) {
-    entryPoint = replaceEntryPoint(entryPoint, config.fileReplacements);
+    entryPoint = replaceEntryPoint(entryPoint, normalize(config.fileReplacements));
   }
 
   const result = await rollup({
@@ -102,11 +143,27 @@ function inferePkgName(entryPoint: string) {
     .replace(/[^A-Za-z0-9.]/g, '_');
 }
 
-function replaceEntryPoint(entryPoint: string, fileReplacements: Record<string, string>): string {
+function normalize(config: Record<string, string | ReplacementConfig>): Record<string,ReplacementConfig> {
+  const result: Record<string,ReplacementConfig> = {};
+  for (const key in config) {
+    if (typeof config[key] === 'string') {
+      result[key] = {
+        file: config[key] as string,
+        tryCompensateMissingExports: false
+      }
+    }
+    else {
+      result[key] = config[key] as ReplacementConfig;
+    }
+  }
+  return result;
+}
+
+function replaceEntryPoint(entryPoint: string, fileReplacements: Record<string, ReplacementConfig>): string {
   entryPoint = entryPoint.replace(/\\/g, '/');
 
   for(const key in fileReplacements) {
-    entryPoint = entryPoint.replace(new RegExp(`${key}$`), fileReplacements[key]);
+    entryPoint = entryPoint.replace(new RegExp(`${key}$`), fileReplacements[key].file);
   }
 
   return entryPoint;

libs/native-federation-esbuild/src/lib/collect-exports.ts

@@ -0,0 +1,81 @@
+import * as fs from "fs";
+import { parse } from "acorn";
+
+type Node = any;
+
+type visitFn = (node: Node) => void;
+
+export function collectExports(path: string) {
+  const src = fs.readFileSync(path, "utf8");
+
+  const parseTree = parse(src, {
+    ecmaVersion: "latest",
+    allowHashBang: true,
+    sourceType: "module",
+  });
+
+  let hasDefaultExport = false;
+  let hasFurtherExports = false;
+  let defaultExportName = "";
+  const exports: string[] = [];
+
+  traverse(parseTree, (node) => {
+    if (
+      node.type === "AssignmentExpression" &&
+      node?.left?.object?.name === "exports" // &&
+    ) {
+      exports.push(node.left.property?.name);
+      return;
+    }
+
+    if (hasDefaultExport && hasFurtherExports) {
+      return;
+    }
+
+    if (node.type !== "ExportNamedDeclaration") {
+      return;
+    }
+
+    if (!node.specifiers) {
+      hasFurtherExports = true;
+      return;
+    }
+
+    for (const s of node.specifiers) {
+      if (isDefaultExport(s)) {
+        defaultExportName = s?.local?.name;
+        hasDefaultExport = true;
+      } else {
+        hasFurtherExports = true;
+      }
+    }
+  });
+
+  return {
+    hasDefaultExport,
+    hasFurtherExports,
+    defaultExportName,
+    exports,
+  };
+}
+
+function traverse(node: Node, visit: visitFn) {
+  visit(node);
+  for (const key in node) {
+    const prop = node[key];
+    if (prop && typeof prop === "object") {
+      traverse(prop as Node, visit);
+    } else if (Array.isArray(prop)) {
+      for (const sub of prop) {
+        traverse(sub, visit);
+      }
+    }
+  }
+}
+
+function isDefaultExport(exportSpecifier: Node) {
+    return (
+      exportSpecifier.exported?.type === "Identifier" &&
+      exportSpecifier.exported?.name === "default"
+    );
+}

libs/native-federation-esbuild/src/lib/react-replacements.ts

@@ -1,12 +1,35 @@
-export const reactReplacements = {
-    dev: {
-        'node_modules/react/index.js': 'node_modules/react/cjs/react.development.js',
-        'node_modules/react/jsx-dev-runtime.js' : 'node_modules/react/cjs/react-jsx-dev-runtime.development.js',
-        'node_modules/react/jsx-runtime.js': 'node_modules/react/cjs/react-jsx-runtime.development.js'
-    },
-    prod: {
-        'node_modules/react/index.js': 'node_modules/react/cjs/react.production.min.js',
-        'node_modules/react/jsx-dev-runtime.js' : 'node_modules/react/cjs/react-jsx-dev-runtime.production.min.js',
-        'node_modules/react/jsx-runtime.js': 'node_modules/react/cjs/react-jsx-runtime.production.min.js'
-    }
-}
+import { ReplacementConfig } from './adapter';
+
+export const reactReplacements: Record<
+  string,
+  Record<string, ReplacementConfig>
+> = {
+  dev: {
+    'node_modules/react/index.js': {
+      file: 'node_modules/react/cjs/react.development.js',
+      tryCompensateMissingExports: true,
+    },
+    'node_modules/react/jsx-dev-runtime.js': {
+      file: 'node_modules/react/cjs/react-jsx-dev-runtime.development.js',
+      tryCompensateMissingExports: true,
+    },
+    'node_modules/react/jsx-runtime.js': {
+      file: 'node_modules/react/cjs/react-jsx-runtime.development.js',
+      tryCompensateMissingExports: true,
+    },
+  },
+  prod: {
+    'node_modules/react/index.js': {
+      file: 'node_modules/react/cjs/react.production.min.js',
+      tryCompensateMissingExports: true,
+    },
+    'node_modules/react/jsx-dev-runtime.js': {
+      file: 'node_modules/react/cjs/react-jsx-dev-runtime.production.min.js',
+      tryCompensateMissingExports: true,
+    },
+    'node_modules/react/jsx-runtime.js': {
+      file: 'node_modules/react/cjs/react-jsx-runtime.production.min.js',
+      tryCompensateMissingExports: true,
+    },
+  },
+};