ModernJS async boundary

basic-host-remote/app1/modern.config.js

@@ -1,28 +1,58 @@
 import appTools, { defineConfig } from '@modern-js/app-tools';
+import { ModuleFederationPlugin } from '@module-federation/enhanced';
+import { RuntimeGlobals } from 'webpack';
 
+const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin');
+
+class AsyncEntryStartupPlugin {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('AsyncEntryStartupPlugin', compilation => {
+      JavascriptModulesPlugin.getCompilationHooks(compilation).renderStartup.tap(
+        'AsyncEntryStartupPlugin',
+        (source, renderContext, upperContext) => {
+          if (upperContext.chunk.hasRuntime()) {
+            return source;
+          }
+          const startup = [
+            'var promiseTrack = [];',
+            `if(__webpack_require__.f && __webpack_require__.f.remotes) __webpack_require__.f.remotes(${JSON.stringify(
+              upperContext.chunk.id,
+            )}, promiseTrack);`,
+            `if(__webpack_require__.f && __webpack_require__.f.consumes) __webpack_require__.f.consumes(${JSON.stringify(
+              upperContext.chunk.id,
+            )}, promiseTrack);`,
+            `var __webpack_exports__ = Promise.all(promiseTrack).then(function() {`,
+            source.source(),
+            'return __webpack_exports__;',
+            `});`,
+          ].join('\n');
+
+          return startup;
+        },
+      );
+    });
+  }
+}
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
   server: {
     port: 3001,
   },
-  // dev: {
-  //   // set publicPath
-  //   assetPrefix: 'http://localhost:3001/',
-  // },
   runtime: {
     router: true,
   },
   source: {
     // automatically generated asynchronous boundary via Dynamic Import, allowing the page code to consume remote modules generated by the module federation.
-    enableAsyncEntry: true,
+    enableAsyncEntry: false,
   },
   tools: {
     webpack: (config, { webpack, appendPlugins }) => {
       delete config.optimization.splitChunks;
       config.output.publicPath = 'auto';
 
       appendPlugins([
-        new webpack.container.ModuleFederationPlugin({
+        new AsyncEntryStartupPlugin(),
+        new ModuleFederationPlugin({
           name: 'app1',
           remotes: {
             app2: 'app2@http://localhost:3002/static/js/remoteEntry.js',

basic-host-remote/app1/package.json

@@ -32,6 +32,7 @@
     "react-dom": "~18.2.0"
   },
   "devDependencies": {
+    "@module-federation/enhanced": "^0.1.0",
     "@modern-js/app-tools": "2.32.0",
     "@modern-js/eslint-config": "2.32.0",
     "@modern-js/tsconfig":"2.32.0",

basic-host-remote/app2/modern.config.js

@@ -1,4 +1,38 @@
 import appTools, { defineConfig } from '@modern-js/app-tools';
+import { ModuleFederationPlugin } from '@module-federation/enhanced';
+import { RuntimeGlobals } from 'webpack';
+
+const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin');
+
+class AsyncEntryStartupPlugin {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('AsyncEntryStartupPlugin', compilation => {
+      JavascriptModulesPlugin.getCompilationHooks(compilation).renderStartup.tap(
+        'AsyncEntryStartupPlugin',
+        (source, renderContext, upperContext) => {
+          if (upperContext.chunk.hasRuntime()) {
+            return source;
+          }
+          const startup = [
+            'var promiseTrack = [];',
+            `if(__webpack_require__.f && __webpack_require__.f.remotes) __webpack_require__.f.remotes(${JSON.stringify(
+              upperContext.chunk.id,
+            )}, promiseTrack);`,
+            `if(__webpack_require__.f && __webpack_require__.f.consumes) __webpack_require__.f.consumes(${JSON.stringify(
+              upperContext.chunk.id,
+            )}, promiseTrack);`,
+            `var __webpack_exports__ = Promise.all(promiseTrack).then(function() {`,
+            source.source(),
+            'return __webpack_exports__;',
+            `});`,
+          ].join('\n');
+
+          return startup;
+        },
+      );
+    });
+  }
+}
 
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
@@ -14,21 +48,22 @@ export default defineConfig({
   },
   source: {
     // automatically generated asynchronous boundary via Dynamic Import, allowing the page code to consume remote modules generated by the module federation.
-    enableAsyncEntry: true,
+    enableAsyncEntry: false,
   },
   tools: {
     webpack: (config, { webpack, appendPlugins }) => {
       delete config.optimization.splitChunks;
       config.output.publicPath = 'auto';
 
       appendPlugins([
-        new webpack.container.ModuleFederationPlugin({
+        new AsyncEntryStartupPlugin(),
+        new ModuleFederationPlugin({
           name: 'app2',
           library: { type: 'window', name: 'app2' },
           runtime: false,
           filename: 'static/js/remoteEntry.js',
           exposes: {
-            './Button': './src/components/Button.js',
+            './Button': './src/components/button.js',
           },
           shared: {
             react: { singleton: true },

basic-host-remote/app2/package.json

@@ -32,6 +32,7 @@
     "react-dom": "~18.2.0"
   },
   "devDependencies": {
+    "@module-federation/enhanced": "^0.1.0",
     "@modern-js/app-tools": "2.32.0",
     "@modern-js/eslint-config": "2.32.0",
     "@modern-js/tsconfig":"2.32.0",

complete-react-case/component-app/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "webpack": "webpack --watch",
-    "serve": "serve dist -p 3001",
+    "serve": "serve dist -p 3001 --cors",
     "start": "concurrently \"npm run webpack\" \"npm run serve\""
   },
   "keywords": [],

complete-react-case/component-app/webpack.config.js

@@ -9,6 +9,11 @@ module.exports = {
     publicPath: 'http://localhost:3001/',
     clean: true,
   },
+  devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
   resolve: {
     extensions: ['.jsx', '.js', '.json', '.css', '.scss', '.jpg', 'jpeg', 'png'],
   },

complete-react-case/lib-app/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "webpack": "webpack --watch",
-    "serve": "serve dist -p 3000",
+    "serve": "serve dist -p 3000 --cors",
     "start": "concurrently \"npm run webpack\" \"npm run serve\""
   },
   "keywords": [],

complete-react-case/lib-app/webpack.config.js

@@ -8,6 +8,11 @@ module.exports = {
     publicPath: 'http://localhost:3000/',
     clean: true,
   },
+  devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
   module: {},
   plugins: [
     new ModuleFederationPlugin({

complete-react-case/main-app/index.js

@@ -1 +1,33 @@
-import('./bootstrap.js');
+// top level await based
+const promises = []
+__webpack_require__.f.remotes('main',promises);
+await Promise.all(promises);
+console.log(promises)
+const thing = await new Promise((r)=>r('test'))
+console.log(thing);
+
+
+if(globalThis.neverTrue) {
+  // dynamic import data uri
+  import('data:text/javascript,export default 42');
+}
+export default {}
+
+
+// promise based
+
+
+// const promises = []
+// __webpack_require__.f.remotes('main',promises);
+
+// const exportedModule = Promise.all(promises).then(()=>{
+//   // can also be
+//   // return require('./bootstrap')
+//   return import(/* webpackMode: "eager" */'./bootstrap');
+// })
+// import(/* webpackMode: "eager" */'./bootstrap');
+// if(globalThis.neverTrue) {
+//   // dynamic import data uri
+//   import('data:text/javascript,export default 42');
+// }
+// export default exportedModule

complete-react-case/main-app/package.json

@@ -2,10 +2,9 @@
   "name": "complete-react-case_main-app",
   "version": "1.0.0",
   "description": "",
-  "main": "webpack.config.js",
   "scripts": {
     "webpack": "webpack --watch",
-    "serve": "serve dist -p 3002",
+    "serve": "serve dist -p 3002 --cors",
     "start": "concurrently \"npm run webpack\" \"npm run serve\""
   },
   "keywords": [],

complete-react-case/main-app/webpack.config.js

@@ -5,6 +5,10 @@ module.exports = {
   entry: './index.js',
   mode: 'development',
   devtool: 'hidden-source-map',
+  cache:false,
+  // experiments: {
+  //   topLevelAwait: true
+  // },
   output: {
     publicPath: 'http://localhost:3002/',
     clean: true,
@@ -28,6 +32,11 @@ module.exports = {
       },
     ],
   },
+  devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
   plugins: [
     new ModuleFederationPlugin({
       name: 'main_app',

yarn.lock

@@ -7578,7 +7578,7 @@
     "@module-federation/utilities" "^1.3.0"
     node-fetch "^2.6.0"
 
-"@module-federation/[email protected]":
+"@module-federation/[email protected]", "@module-federation/enhanced@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@module-federation/enhanced/-/enhanced-0.1.0.tgz#65d855e941c473e4f0cd12cc1c069ae9c8fdc6f3"
   integrity sha512-CymUY20htVd55Ff0G8tNeh1q3at/6xRa26Db8KcO1537aV41CFC5qRcTWd58EG9pgJhu9psyJPVaAjFXliB66g==