refactor: inline all bootstrap files and enable asyncStartup everywhere

advanced-api/automatic-vendor-sharing/app1/src/index.js

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

advanced-api/automatic-vendor-sharing/app2/src/index.js

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

advanced-api/dynamic-remotes-runtime-environment-variables/host/rspack.config.js

@@ -69,6 +69,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'host',
+      shareStrategy: 'loaded-first',
       runtimePlugins: [],
       shared: {
         react: {

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/index.js

@@ -1 +1,32 @@
-import './bootstrap';
+import App from './components/App';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import ErrorBoundary from './components/ErrorBoundary';
+
+// React 18 createRoot API
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </React.StrictMode>,
+);
+
+// Performance monitoring
+if (typeof window !== 'undefined' && window.performance) {
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      const perfData = performance.getEntriesByType('navigation')[0];
+      console.log('Host App Performance:', {
+        loadTime: Math.round(perfData.loadEventEnd - perfData.loadEventStart),
+        domContentLoaded: Math.round(
+          perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart,
+        ),
+        totalTime: Math.round(perfData.loadEventEnd - perfData.fetchStart),
+      });
+    }, 0);
+  });
+}

advanced-api/dynamic-remotes-runtime-environment-variables/host/webpack.config.js

@@ -44,6 +44,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'host',
+      shareStrategy: 'loaded-first',
       shared: {
         react: {
           singleton: true,

advanced-api/dynamic-remotes-runtime-environment-variables/remote/rspack.config.js

@@ -69,6 +69,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'remote',
+      shareStrategy: 'loaded-first',
       filename: 'remoteEntry.js',
       exposes: {
         './Widget': './src/components/WidgetWrapper',

advanced-api/dynamic-remotes-runtime-environment-variables/remote/src/index.js

@@ -1 +1,29 @@
-import './bootstrap';
+import App from './components/App';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+// React 18 createRoot API
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+
+// Performance monitoring for remote
+if (typeof window !== 'undefined' && window.performance) {
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      const perfData = performance.getEntriesByType('navigation')[0];
+      console.log('Remote App Performance:', {
+        loadTime: Math.round(perfData.loadEventEnd - perfData.loadEventStart),
+        domContentLoaded: Math.round(
+          perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart,
+        ),
+        totalTime: Math.round(perfData.loadEventEnd - perfData.fetchStart),
+      });
+    }, 0);
+  });
+}

advanced-api/dynamic-remotes-runtime-environment-variables/remote/webpack.config.js

@@ -45,6 +45,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'remote',
+      shareStrategy: 'loaded-first',
       filename: 'remoteEntry.js',
       exposes: {
         './Widget': './src/components/WidgetWrapper',

advanced-api/dynamic-remotes-synchronous-imports/app1/src/index.js

@@ -20,8 +20,11 @@ console.log(`[Dynamic Remote Init] Setting ${app2Module.urlGlobalVariable} to:`,
 // window.app3Url = '//different-host:4001';
 // window.app4Url = '//cdn.example.com/remotes';
 
-// Bootstrap the application after setting up dynamic configurations.
-//
-// With MF asyncStartup enabled in the config, we no longer need the dynamic
-// bootstrap import workaround.
-import './bootstrap';
+import App from './App.tsx';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+// Using React 18 createRoot API for better performance and concurrent features
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

advanced-api/dynamic-remotes-synchronous-imports/app1/webpack.config.js

@@ -34,6 +34,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: app1Module.name,
+      shareStrategy: 'loaded-first',
       filename: app1Module.fileName,
       dts: false,
       remotes: {

advanced-api/dynamic-remotes-synchronous-imports/app2/src/index.js

@@ -1 +1,8 @@
-import './bootstrap';
+import App from './App';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+// Using React 18 createRoot API for better performance and concurrent features
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

advanced-api/dynamic-remotes-synchronous-imports/app2/webpack.config.js

@@ -31,6 +31,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: app2Module.name,
+      shareStrategy: 'loaded-first',
       library: { type: 'var', name: app2Module.name },
       filename: app2Module.fileName,
       dts: false,

advanced-api/dynamic-remotes/app1/rspack.config.js

@@ -50,6 +50,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'app1',
+      shareStrategy: 'loaded-first',
       // adds react as shared module
       // version is inferred from package.json
       // there is no version check for the required version

advanced-api/dynamic-remotes/app1/src/index.js

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

advanced-api/dynamic-remotes/app1/webpack.config.js

@@ -33,6 +33,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'app1',
+      shareStrategy: 'loaded-first',
       // adds react as shared module
       // version is inferred from package.json
       // there is no version check for the required version

advanced-api/dynamic-remotes/app2/rspack.config.js

@@ -31,6 +31,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'app2',
+      shareStrategy: 'loaded-first',
       filename: 'remoteEntry.js',
       exposes: {
         './Widget': './src/Widget',

advanced-api/dynamic-remotes/app2/src/index.js

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

advanced-api/dynamic-remotes/app2/webpack.config.js

@@ -26,6 +26,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'app2',
+      shareStrategy: 'loaded-first',
       filename: 'remoteEntry.js',
       exposes: {
         './Widget': './src/Widget',

advanced-api/dynamic-remotes/app3/rspack.config.js

@@ -28,6 +28,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'app3',
+      shareStrategy: 'loaded-first',
       filename: 'remoteEntry.js',
       exposes: {
         './Widget': './src/Widget',

advanced-api/dynamic-remotes/app3/src/index.js

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

advanced-api/dynamic-remotes/app3/webpack.config.js

@@ -25,6 +25,7 @@ module.exports = {
     new ModuleFederationPlugin({
       experiments: { asyncStartup: true },
       name: 'app3',
+      shareStrategy: 'loaded-first',
       filename: 'remoteEntry.js',
       exposes: {
         './Widget': './src/Widget',

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

@@ -21,6 +21,7 @@ export default defineConfig({
       appendPlugins([
         new ModuleFederationPlugin({
           name: 'app1',
+          shareStrategy: 'loaded-first',
           remotes: {
             app2: 'app2@http://localhost:3002/static/js/remoteEntry.js',
           },

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

@@ -21,6 +21,7 @@ export default defineConfig({
       appendPlugins([
         new ModuleFederationPlugin({
           name: 'app2',
+          shareStrategy: 'loaded-first',
           library: { type: 'window', name: 'app2' },
           runtime: false,
           filename: 'static/js/remoteEntry.js',

clo/host/modulefederation.config.js

@@ -2,6 +2,8 @@ const { dependencies } = require('./package.json');
 
 module.exports = {
   name: 'host',
+  shareStrategy: 'loaded-first',
+  experiments: { asyncStartup: true },
   remotes: {
     remote: 'remote@http://localhost:3002/remoteEntry.js',
   },