WIP: chore: split runtime as core and entry (#3154)

Co-authored-by: ScriptedAlchemy <[email protected]>
Co-authored-by: Zack Jackson <[email protected]>

Author: 2heal1

.changeset/config.json

@@ -23,7 +23,8 @@
       "@module-federation/retry-plugin",
       "@module-federation/data-prefetch",
       "@module-federation/rsbuild-plugin",
-      "@module-federation/error-codes"
+      "@module-federation/error-codes",
+      "@module-federation/inject-external-runtime-core-plugin"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

.changeset/nervous-starfishes-whisper.md

@@ -0,0 +1,8 @@
+---
+'@module-federation/inject-external-runtime-core-plugin': patch
+'@module-federation/runtime-core': patch
+'@module-federation/enhanced': patch
+'@module-federation/runtime': patch
+---
+
+feat: add externalRuntime and provideExternalRuntime fields to help optimize assets size

apps/manifest-demo/3009-webpack-provider/webpack.config.js

@@ -46,6 +46,9 @@ module.exports = composePlugins(
             requiredVersion: '^18.3.1',
           },
         },
+        experiments: {
+          externalRuntime: true,
+        },
       }),
     );
 

apps/manifest-demo/3010-rspack-provider/rspack.config.js

@@ -101,6 +101,9 @@ module.exports = composePlugins(
           },
         },
         dataPrefetch: true,
+        experiments: {
+          externalRuntime: true,
+        },
       }),
     );
     (config.devServer = {

apps/manifest-demo/3011-rspack-manifest-provider/rspack.config.js

@@ -84,6 +84,9 @@ module.exports = composePlugins(
             requiredVersion: '^18.3.1',
           },
         },
+        experiments: {
+          externalRuntime: true,
+        },
       }),
     );
     (config.devServer = {

apps/manifest-demo/3012-rspack-js-entry-provider/rspack.config.js

@@ -85,6 +85,9 @@ module.exports = composePlugins(
           },
         },
         manifest: false,
+        experiments: {
+          externalRuntime: true,
+        },
       }),
     );
     (config.devServer = {

apps/manifest-demo/webpack-host/src/bootstrap.tsx

@@ -23,9 +23,6 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
         'modern-js-provider': 'app1@http://127.0.0.1:4001/mf-manifest.json',
       },
       filename: 'remoteEntry.js',
-      exposes: {
-        './Button': './src/Button.tsx',
-      },
       shared: {
         lodash: {},
         antd: {},
@@ -47,8 +44,12 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
         },
       },
       dataPrefetch: true,
-      experiments: { federationRuntime: 'hoisted' },
+      // experiments: { federationRuntime: 'hoisted' },
       runtimePlugins: [path.join(__dirname, './runtimePlugin.ts')],
+      experiments: {
+        provideExternalRuntime: true,
+        federationRuntime: 'hoisted',
+      },
     }),
   );
 

apps/manifest-demo/webpack-host/webpack.config.js

@@ -63,3 +63,22 @@ There should be no "eager consumption" errors possible, as the initialization of
 Instead of federation runtime initilizing in the entrypoint code, it is initialized in a RuntimeModule, within the webpack runtime.
 This allows module federation to be avaliable ahead of time, thus enabling "Async Startup" capabilities etc.
 
+## externalRuntime
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
+
+After setting `true`, the external MF runtime will be used and the runtime provided by the consumer will be used. (Please make sure your consumer has `provideExternalRuntime: true` set, otherwise it will not run properly!)
+
+## provideExternalRuntime
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
+
+::: warning note
+Make sure to only configure it on the topmost consumer! If multiple consumers inject runtime at the same time, the ones executed later will not overwrite the existing runtime.
+:::
+
+Setting `true` will inject the MF runtime at the consumer.

apps/website-new/docs/en/configure/experiments.mdx

@@ -63,5 +63,10 @@
     "type": "file",
     "name": "shareStrategy",
     "label": "shareStrategy"
+  },
+  {
+    "type": "file",
+    "name": "experiments",
+    "label": "experiments"
   }
 ]