comprehensive-demo-react18: inline bootstrap and enable async startup (webpack/rspack)

Author: ScriptedAlchemy

comprehensive-demo-react18/app-01/rspack.config.js

@@ -25,6 +25,7 @@ module.exports = {
   },
   experiments: {
     css: true,
+    mfAsyncStartup: true,
   },
 
   module: {

comprehensive-demo-react18/app-01/src/bootstrap.jsx

@@ -1 +1,5 @@
-import('./bootstrap');
+import App from './App';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<App />, document.getElementById('root'));

comprehensive-demo-react18/app-01/src/index.jsx

@@ -69,6 +69,7 @@ module.exports = {
     new ModuleFederationPlugin({
       name: 'app_01',
       filename: 'remoteEntry.js',
+      experiments: { asyncStartup: true },
       remotes: {
         app_02: 'app_02@http://localhost:3002/remoteEntry.js',
         app_03: 'app_03@http://localhost:3003/remoteEntry.js',

comprehensive-demo-react18/app-01/webpack.config.js

@@ -18,6 +18,10 @@ module.exports = {
   optimization: {
     minimize: false,
   },
+  experiments: {
+    css: true,
+    mfAsyncStartup: true,
+  },
   devServer: {
     port: 3002,
     hot: true,

comprehensive-demo-react18/app-02/rspack.config.js

@@ -65,6 +65,7 @@ module.exports = {
     new ModuleFederationPlugin({
       name: 'app_02',
       filename: 'remoteEntry.js',
+      experiments: { asyncStartup: true },
       remotes: {
         app_01: 'app_01@http://localhost:3001/remoteEntry.js',
         app_03: 'app_03@http://localhost:3003/remoteEntry.js',

comprehensive-demo-react18/app-02/webpack.config.js

@@ -29,6 +29,10 @@ module.exports = {
     publicPath: 'auto',
     uniqueName: 'app3',
   },
+  experiments: {
+    css: true,
+    mfAsyncStartup: true,
+  },
 
   module: {
     rules: [

comprehensive-demo-react18/app-03/rspack.config.js

@@ -59,6 +59,7 @@ module.exports = {
     new ModuleFederationPlugin({
       name: 'app_03',
       filename: 'remoteEntry.js',
+      experiments: { asyncStartup: true },
       remotes: {
         app_01: 'app_01@http://localhost:3001/remoteEntry.js',
       },

comprehensive-demo-react18/app-03/webpack.config.js

@@ -0,0 +1,71 @@
+{
+  "id": "app_04",
+  "name": "app_04",
+  "metaData": {
+    "name": "app_04",
+    "type": "app",
+    "buildInfo": {
+      "buildVersion": "1.0.0",
+      "buildName": "comprehensive-demo-react18_app-04"
+    },
+    "remoteEntry": {
+      "name": "remoteEntry.js",
+      "path": "",
+      "type": "global"
+    },
+    "types": {
+      "path": "",
+      "name": "",
+      "zip": "",
+      "api": ""
+    },
+    "globalName": "app_04",
+    "pluginVersion": "0.17.1",
+    "prefetchInterface": false,
+    "publicPath": "auto"
+  },
+  "shared": [],
+  "remotes": [],
+  "exposes": [
+    {
+      "id": "app_04:App",
+      "name": "App",
+      "assets": {
+        "js": {
+          "sync": [
+            "875.875.js",
+            "__federation_expose_App.874.js"
+          ],
+          "async": []
+        },
+        "css": {
+          "sync": [
+            "__federation_expose_App.874.css"
+          ],
+          "async": []
+        }
+      },
+      "path": "./App"
+    },
+    {
+      "id": "app_04:loadApp",
+      "name": "loadApp",
+      "assets": {
+        "js": {
+          "sync": [
+            "875.875.js",
+            "__federation_expose_loadApp.474.js"
+          ],
+          "async": []
+        },
+        "css": {
+          "sync": [
+            "__federation_expose_loadApp.474.css"
+          ],
+          "async": []
+        }
+      },
+      "path": "./loadApp"
+    }
+  ]
+}

comprehensive-demo-react18/app-04/public/mf-manifest.json

@@ -0,0 +1,75 @@
+{
+  "id": "app_04",
+  "name": "app_04",
+  "metaData": {
+    "name": "app_04",
+    "type": "app",
+    "buildInfo": {
+      "buildVersion": "1.0.0",
+      "buildName": "comprehensive-demo-react18_app-04"
+    },
+    "remoteEntry": {
+      "name": "remoteEntry.js",
+      "path": "",
+      "type": "global"
+    },
+    "types": {
+      "path": "",
+      "name": "",
+      "zip": "",
+      "api": ""
+    },
+    "globalName": "app_04",
+    "pluginVersion": "0.17.1",
+    "prefetchInterface": false,
+    "publicPath": "auto"
+  },
+  "shared": [],
+  "remotes": [],
+  "exposes": [
+    {
+      "path": "./App",
+      "id": "app_04:App",
+      "name": "App",
+      "requires": [],
+      "file": "src/main.js",
+      "assets": {
+        "js": {
+          "sync": [
+            "875.875.js",
+            "__federation_expose_App.874.js"
+          ],
+          "async": []
+        },
+        "css": {
+          "sync": [
+            "__federation_expose_App.874.css"
+          ],
+          "async": []
+        }
+      }
+    },
+    {
+      "path": "./loadApp",
+      "id": "app_04:loadApp",
+      "name": "loadApp",
+      "requires": [],
+      "file": "src/loadApp.js",
+      "assets": {
+        "js": {
+          "sync": [
+            "875.875.js",
+            "__federation_expose_loadApp.474.js"
+          ],
+          "async": []
+        },
+        "css": {
+          "sync": [
+            "__federation_expose_loadApp.474.css"
+          ],
+          "async": []
+        }
+      }
+    }
+  ]
+}