feat(runtime): align async startup defaults across apps and adapters

apps/bundle-size/src/index.ts

@@ -1,3 +1,19 @@
+import React, { StrictMode } from 'react';
 import { init } from '@module-federation/enhanced/runtime';
+import * as ReactDOM from 'react-dom/client';
+import HelloWorld from './HelloWorld';
 
-require('./bootstrap');
+init({
+  name: 'bundle_size',
+  remotes: [], // No remote references needed
+});
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error('Failed to find the root element');
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  React.createElement(StrictMode, null, React.createElement(HelloWorld)),
+);

apps/esbuild/mfe1/federation.config.js

@@ -5,6 +5,9 @@ const {
 
 module.exports = withFederation({
   name: 'mfe1',
+  experiments: {
+    asyncStartup: true,
+  },
   filename: './mfe1/remoteEntry.js',
   exposes: {
     './component': './mfe1/app',

apps/esbuild/mfe1/main.ts

@@ -1,3 +1,8 @@
-(async () => {
-  await import('./bootstrap');
-})();
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './app';
+
+ReactDOM.render(
+  React.createElement(React.StrictMode, null, React.createElement(App, null)),
+  document.getElementById('root'),
+);

apps/esbuild/shell/federation.config.js

@@ -7,6 +7,9 @@ const {
 
 module.exports = withFederation({
   name: 'host',
+  experiments: {
+    asyncStartup: true,
+  },
   filename: './shell/remoteEntry.js',
   remotes: {
     mfe1: 'http://localhost:3001/remoteEntry.js',

apps/esbuild/shell/main.ts

@@ -1,5 +1,14 @@
 //@ts-nocheck
 
-(async () => {
-  import('./bootstrap');
-})();
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './app';
+
+import { of } from 'rxjs';
+
+console.log(of);
+
+ReactDOM.render(
+  React.createElement(React.StrictMode, null, React.createElement(App, null)),
+  document.getElementById('root'),
+);

apps/manifest-demo/3009-webpack-provider/src/index.ts

@@ -1 +1,12 @@
-import('./bootstrap');
+import React, { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error('Failed to find the root element');
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(React.createElement(StrictMode, null, React.createElement(App)));

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

@@ -117,6 +117,7 @@ module.exports = (_env, argv = {}) => {
           },
         },
         experiments: {
+          asyncStartup: true,
           externalRuntime: true,
         },
       }),

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

@@ -94,6 +94,7 @@ module.exports = (_env, argv = {}) => {
         },
         dataPrefetch: true,
         experiments: {
+          asyncStartup: true,
           externalRuntime: true,
         },
       }),

apps/manifest-demo/3010-rspack-provider/src/index.ts

@@ -1 +1,12 @@
-import('./bootstrap');
+import React, { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error('Failed to find the root element');
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(React.createElement(StrictMode, null, React.createElement(App)));

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

@@ -94,6 +94,7 @@ module.exports = (_env, argv = {}) => {
           },
         },
         experiments: {
+          asyncStartup: true,
           externalRuntime: true,
         },
       }),

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

@@ -95,6 +95,7 @@ module.exports = (_env, argv = {}) => {
         },
         manifest: false,
         experiments: {
+          asyncStartup: true,
           externalRuntime: true,
         },
       }),

apps/manifest-demo/3012-rspack-js-entry-provider/src/index.js

@@ -1 +1,7 @@
-import('./bootstrap');
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

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

@@ -1,4 +1,3 @@
-// import('./bootstrap');
 import React, { StrictMode, lazy } from 'react';
 import { init } from '@module-federation/runtime';
 import * as ReactDOM from 'react-dom/client';

apps/modern-component-data-fetch/host/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'host',
+  experiments: {
+    asyncStartup: true,
+  },
   remotes: {
     remote: 'provider@http://localhost:5002/mf-manifest.json',
     'provider-csr': 'provider_csr@http://localhost:5003/mf-manifest.json',

apps/modern-component-data-fetch/provider-csr/module-federation.config.ts

@@ -2,6 +2,9 @@ import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin'
 
 export default createModuleFederationConfig({
   name: 'provider_csr',
+  experiments: {
+    asyncStartup: true,
+  },
   filename: 'remoteEntry.js',
   exposes: {
     '.': './src/index.tsx',

apps/modern-component-data-fetch/provider/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'provider',
+  experiments: {
+    asyncStartup: true,
+  },
   filename: 'remoteEntry.js',
   exposes: {
     './BasicComponent': './src/components/BasicComponent/index.tsx',

apps/modernjs-ssr/dynamic-nested-remote/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'dynamic_nested_remote',
+  experiments: {
+    asyncStartup: true,
+  },
   filename: 'remoteEntry.js',
   exposes: {
     './Content': './src/components/Content.tsx',

apps/modernjs-ssr/dynamic-remote-new-version/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'dynamic_remote',
+  experiments: {
+    asyncStartup: true,
+  },
   exposes: {
     '.': './src/components/Image.tsx',
   },

apps/modernjs-ssr/dynamic-remote/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'dynamic_remote',
+  experiments: {
+    asyncStartup: true,
+  },
   filename: 'remoteEntry.js',
   exposes: {
     '.': './src/Index.tsx',

apps/modernjs-ssr/host/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'host',
+  experiments: {
+    asyncStartup: true,
+  },
   remotes: {
     remote: 'remote@http://localhost:3051/static/mf-manifest.json',
     nested_remote: 'nested_remote@http://localhost:3052/mf-manifest.json',

apps/modernjs-ssr/nested-remote/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'nested_remote',
+  experiments: {
+    asyncStartup: true,
+  },
   filename: 'remoteEntry.js',
   exposes: {
     './Content': './src/components/Content.tsx',

apps/modernjs-ssr/remote-new-version/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'remote',
+  experiments: {
+    asyncStartup: true,
+  },
   exposes: {
     './Image': './src/components/Image.tsx',
   },

apps/modernjs-ssr/remote/module-federation.config.ts

@@ -1,6 +1,9 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'remote',
+  experiments: {
+    asyncStartup: true,
+  },
   manifest: {
     filePath: 'static',
   },

apps/node-dynamic-remote-new-version/webpack.config.js

@@ -70,6 +70,9 @@ module.exports = (_env, argv = {}) => {
           axios: { singleton: true },
           lodash: { singleton: true },
         },
+        experiments: {
+          asyncStartup: true,
+        },
       }),
     ],
     watchOptions: {

apps/node-dynamic-remote/webpack.config.js

@@ -70,6 +70,9 @@ module.exports = (_env, argv = {}) => {
           axios: { singleton: true },
           lodash: { singleton: true },
         },
+        experiments: {
+          asyncStartup: true,
+        },
       }),
     ],
     watchOptions: {

apps/node-local-remote/webpack.config.js

@@ -68,6 +68,9 @@ module.exports = (_env, argv = {}) => {
         exposes: {
           './test': './src/expose.js',
         },
+        experiments: {
+          asyncStartup: true,
+        },
       }),
     ],
     watchOptions: {

apps/node-remote/module-federation.config.ts

@@ -2,6 +2,9 @@ import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin'
 
 export default createModuleFederationConfig({
   name: 'node_remote',
+  experiments: {
+    asyncStartup: true,
+  },
   filename: 'remoteEntry.js',
   exposes: {
     './test': './src/expose.js',