refactor(core): separate fileReplacements from compensating missing exports

Author: manfredsteyer

libs/native-federation-core/README.md

@@ -91,9 +91,8 @@ const tsConfig = 'tsconfig.json';
 const outputPath = `dist/${projectName}`;
 
 /*
-    *  Step 1: Initialize Native Federation
+  *  Step 1: Initialize Native Federation
 */
-
 await federationBuilder.init({
     options: {
         workspaceRoot: path.join(__dirname, '..'),
@@ -324,6 +323,38 @@ The script with the type `esms-options` configures the polyfill. This library wa
 
 To make the polyfill to load your EcmaScript modules (bundles) in shim mode, assign the type `module-shim`.
 
+## React and Other CommonJS Libs
+
+Native Federation uses Web Standards like EcmaScript Modules. Most libs and frameworks support them meanwhile. Unfortunately, React still uses CommonJS (und UMD). We do our best to convert these libs to EcmaScript Modules. In the case of React there are some challenges due to the dynamic way the React bundles use the ``exports`` object. 
+
+As the community is moving to EcmaScrpt Modules, we expect that these issues will vanish over time. In between, we provide some solutions for dealing with CommonJS-based libraries using ``exports`` in a dynamic way.
+
+One of them is ``fileReplacemnts``:
+
+```javascript
+import { reactReplacements } from '@softarc/native-federation-esbuild/src/lib/react-replacements';
+import { createEsBuildAdapter } from '@softarc/native-federation-esbuild';
+
+[...]
+
+createEsBuildAdapter({ 
+  plugins: [],
+  fileReplacements: reactReplacements.prod
+})
+```
+
+Please note that the adapter comes with ``fileReplacements`` settings for React for both, ``dev`` mode and ``prod`` mode. For similar libraries you can add your own replacements. Also, using the ``compensateExports`` property, you can activate some additional logic for such libraries to make sure the exports are not lost 
+
+```javascript
+createEsBuildAdapter({ 
+  plugins: [],
+  fileReplacements: reactReplacements.prod,
+  compensateExports: [new RegExp('/my-lib/')]
+})
+```
+
+The default value for ``compensateExports`` is ``[new RegExp('/react/')]``.
+
 ## More: Blog Articles
 
 Find out more about our work including Micro Frontends and Module Federation but also about alternatives to these approaches in our [blog](https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/).

libs/native-federation-core/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@softarc/native-federation",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0",
   "type": "commonjs",
   "dependencies": {
     "json5": "^2.2.0",
     "npmlog": "^6.0.2",
-    "@softarc/native-federation-runtime": "1.1.0-beta.0"
+    "@softarc/native-federation-runtime": "1.1.0"
   }
 }

libs/native-federation-esbuild/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softarc/native-federation-esbuild",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0",
   "type": "commonjs",
   "dependencies": {
     "@rollup/plugin-commonjs": "^22.0.2",
@@ -11,6 +11,5 @@
     "esbuild": "^0.15.5",
     "npmlog": "^6.0.2",
     "acorn": "^8.8.1"
-
   }
 }

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

@@ -21,17 +21,22 @@ export const esBuildAdapter: BuildAdapter = createEsBuildAdapter({
 });
 
 export type ReplacementConfig = {
-  file: string, 
-  tryCompensateMissingExports: boolean
+  file: string
 };
 
 export interface EsBuildAdapterConfig {
   plugins: esbuild.Plugin[];
   fileReplacements?: Record<string, string | ReplacementConfig>
   skipRollup?: boolean,
+  compensateExports?: RegExp[]
 }
 
 export function createEsBuildAdapter(config: EsBuildAdapterConfig) {
+  
+  if (!config.compensateExports) {
+    config.compensateExports = [new RegExp('/react/')];
+  }
+  
   return async (options: BuildAdapterOptions) => {
     const { entryPoint, external, outfile, watch } = options;
 
@@ -43,7 +48,7 @@ export function createEsBuildAdapter(config: EsBuildAdapterConfig) {
       await prepareNodePackage(entryPoint, external, tmpFolder, config);
     }
 
-    const r = await esbuild.build({
+    await esbuild.build({
       entryPoints: [isPkg ? tmpFolder : entryPoint],
       external,
       outfile,
@@ -66,27 +71,18 @@ export function createEsBuildAdapter(config: EsBuildAdapterConfig) {
       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);
+    const normEntryPoint = entryPoint.replace(/\\/g, '/');
+    if (isPkg && config?.compensateExports?.find(regExp => regExp.exec(normEntryPoint))) {
+      logger.verbose('compensate exports for ' + tmpFolder);
+      compensateExports(tmpFolder, outfile);
     }
-  }
+
+  };
 }
 
-function compensateExports(entryPoint: string, outfile: string): void {
+function compensateExports(entryPoint: string, outfile?: string): void {
   const inExports = collectExports(entryPoint);
-  const outExports = collectExports(outfile);
+  const outExports = outfile ? collectExports(outfile) : inExports;
 
   if (!outExports.hasDefaultExport || outExports.hasFurtherExports) {
     return;
@@ -99,7 +95,8 @@ function compensateExports(entryPoint: string, outfile: string): void {
     exports += `export { ${exp}$softarc as ${exp} };\n`;
   }
 
-  fs.appendFileSync(outfile, exports, 'utf-8');
+  const target = outfile ?? entryPoint;
+  fs.appendFileSync(target, exports, 'utf-8');
 }
 
 async function prepareNodePackage(
@@ -135,6 +132,7 @@ async function prepareNodePackage(
     sourcemap: true,
     exports: 'named',
   });
+
 }
 
 function inferePkgName(entryPoint: string) {
@@ -149,7 +147,6 @@ function normalize(config: Record<string, string | ReplacementConfig>): Record<s
     if (typeof config[key] === 'string') {
       result[key] = {
         file: config[key] as string,
-        tryCompensateMissingExports: false
       }
     }
     else {

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

@@ -7,29 +7,23 @@ export const reactReplacements: Record<
   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,
     },
   },
 };

libs/native-federation-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softarc/native-federation-runtime",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0",
   "peerDependencies": {},
   "dependencies": {
     "tslib": "^2.3.0"

libs/native-federation/package.json

@@ -23,8 +23,8 @@
     "rollup-plugin-node-externals": "^4.1.1",
     "esbuild": "^0.15.5",
     "@babel/core": "^7.19.0",
-    "@softarc/native-federation": "1.1.0-beta.0",
-    "@softarc/native-federation-runtime": "1.1.0-beta.0",
+    "@softarc/native-federation": "1.1.0",
+    "@softarc/native-federation-runtime": "1.1.0",
     "@rollup/plugin-json": "^4.1.0",
     "cross-spawn": "^7.0.3",
     "rollup-plugin-terser": "^7.0.2",

update-local.bat

@@ -1,6 +1,6 @@
-call npm unpublish @softarc/native-federation@1.1.0-beta.0 --registry http://localhost:4873
-call npm unpublish @softarc/native-federation-runtime@1.1.0-beta.0 --registry http://localhost:4873
-call npm unpublish @softarc/native-federation-esbuild@1.1.0-beta.0 --registry http://localhost:4873
+call npm unpublish @softarc/native-federation@1.1.0 --registry http://localhost:4873
+call npm unpublish @softarc/native-federation-runtime@1.1.0 --registry http://localhost:4873
+call npm unpublish @softarc/native-federation-esbuild@1.1.0 --registry http://localhost:4873
 call npm unpublish @angular-architects/native-federation@1.1.0-beta.0 --registry http://localhost:4873
 
 call nx build native-federation