WIP: use runtime api

.changeset/chatty-hornets-attend.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/nextjs-mf': minor
+'@module-federation/enhanced': minor
+---
+
+enable chunk hoisting when runtime is embedded

.changeset/kind-nails-roll.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': minor
+---
+
+Embedded runtime and async entry startup

.github/workflows/e2e-manifest.yml

@@ -43,4 +43,4 @@ jobs:
 
       - name: E2E Test for Manifest Demo
         if: steps.check-ci.outcome == 'success'
-        run: pnpm run app:manifest:dev & echo "done" && npx wait-on tcp:3009 && npx wait-on tcp:3012 && npx nx run-many --target=e2e --projects=manifest-webpack-host --parallel=1 && lsof -ti tcp:3013,3009,3010,3011,3012 | xargs kill
+        run: pnpm run app:manifest:dev & echo "done" && sleep 15 && npx wait-on tcp:3009 && npx wait-on tcp:3012 && npx nx run-many --target=e2e --projects=manifest-webpack-host --parallel=1 && lsof -ti tcp:3013,3009,3010,3011,3012 | xargs kill

.github/workflows/e2e-router.yml

@@ -43,4 +43,4 @@ jobs:
 
       - name: E2E Test for Runtime Demo
         if: steps.check-ci.outcome == 'success'
-        run: npx kill-port --port 2000,2001,2002,2003,2004,2200,2100 && pnpm run app:router:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=router-host-2000 --parallel=1 && lsof -ti tcp:2000,2001,2002,2003,2004,2200,2100 | xargs kill
+        run: npx kill-port --port 2000,2001,2002,2003,2004,2200,2100 && pnpm run app:router:dev & echo "done" && sleep 30 && npx nx run-many --target=test:e2e --projects=router-host-2000 --parallel=1 && lsof -ti tcp:2000,2001,2002,2003,2004,2200,2100 | xargs kill

.gitignore

@@ -5,8 +5,6 @@
 /tmp
 /out-tsc
 /build
-**/@mf-types
-**/@mf-types/**
 /docs
 /.nx
 # dependencies
@@ -51,17 +49,17 @@ migrations.json
 packages/**/dist
 apps/**/dist
 
+**/@mf-types
+**/@mf-types/**
+**/cypress/downloads
+
 # test cases
 !packages/enhanced/test/configCases/**/**/node_modules
 packages/enhanced/test/js
 .ignored
 **/.mf
 **/.mf/**
 
-/apps/manifest-demo/**/@mf-types/
-/apps/manifest-demo/webpack-host/@mf-types/
-/apps/manifest-demo/3008-webpack-host/@mf-types/
-
 # dts test cases
 **/dist-test
 **/dist-test/**

apps/3000-home/package.json

@@ -24,7 +24,8 @@
   },
   "devDependencies": {
     "@module-federation/nextjs-mf": "workspace:*",
-    "@module-federation/utilities": "workspace:*"
+    "@module-federation/utilities": "workspace:*",
+    "@module-federation/runtime": "workspace:*"
   },
   "scripts": {
     "start": "next start",

apps/3000-home/pages/_app.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
+import { init } from '@module-federation/runtime';
+console.log('logging init', typeof init);
 import App from 'next/app';
 import { Layout, version, ConfigProvider } from 'antd';
 import { StyleProvider } from '@ant-design/cssinjs';

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

@@ -0,0 +1,51 @@
+// import('./bootstrap');
+import React, { StrictMode, lazy } from 'react';
+import { init } from '@module-federation/runtime';
+import * as ReactDOM from 'react-dom/client';
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+  RouterProvider,
+} from 'react-router-dom';
+import App from './App';
+import Root from './Root';
+import customPlugin from './runtimePlugin';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Root />,
+    children: [
+      {
+        path: 'basic',
+        element: <App />,
+      },
+      {
+        path: 'preload',
+        Component: lazy(() => import('./Preload')),
+      },
+    ],
+  },
+]);
+
+init({
+  name: 'manifest_host',
+  remotes: [
+    {
+      name: 'rspack_provider',
+      alias: 'dynamic-remote',
+      entry: 'http://localhost:3010/mf-manifest.json',
+    },
+  ],
+  plugins: [customPlugin()],
+});
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+root.render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

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

@@ -33,6 +33,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
         'react-dom': {},
         'react-dom/': {},
       },
+      embedRuntime: true,
       runtimePlugins: [path.join(__dirname, './runtimePlugin.ts')],
     }),
   );
@@ -46,6 +47,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
   if (config.devServer) {
     config.devServer.client.overlay = false;
   }
+  config.entry = './src/index.tsx';
   //Temporary workaround - https://github.com/nrwl/nx/issues/16983
   config.experiments = { outputModule: false };
 
@@ -54,8 +56,10 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
     scriptType: 'text/javascript',
   };
   config.optimization = {
-    runtimeChunk: false,
+    runtimeChunk: 'single',
     minimize: false,
+    moduleIds: 'named',
+    chunkIds: 'named',
   };
   config.output.publicPath = 'http://localhost:3013/';
   return config;

apps/modernjs-ssr/dynamic-nested-remote/@mf-types/dynamic_remote/Image.d.ts

@@ -1,2 +1,2 @@
-export * from './compiled-types/Image';
-export { default } from './compiled-types/Image';
+export * from './compiled-types/src/components/Image';
+export { default } from './compiled-types/src/components/Image';

apps/modernjs-ssr/host/cypress/downloads/downloads.html

@@ -0,0 +1 @@
+Cr24

apps/runtime-demo/3005-runtime-host/src/Remote1.tsx

@@ -1,22 +1,15 @@
 import React, { Suspense, lazy } from 'react';
+import { loadRemote } from '@module-federation/runtime';
 
-export const WebpackSvgRemote = function () {
-  const WebpackSvgRemote = lazy(() => import('remote1/WebpackSvg'));
-  return (
-    <Suspense fallback="loading WebpackSvgRemote">
-      <WebpackSvgRemote />
-    </Suspense>
-  );
-};
+export const WebpackSvgRemote = React.lazy(async () => {
+  const WebpackSvgRemote = await loadRemote('remote1/WebpackSvg');
+  return WebpackSvgRemote;
+});
 
-export const WebpackPngRemote = function () {
-  const WebpackPngRemote = lazy(() => import('remote1/WebpackPng'));
-  return (
-    <Suspense fallback="loading WebpackPngRemote">
-      <WebpackPngRemote />
-    </Suspense>
-  );
-};
+export const WebpackPngRemote = React.lazy(async () => {
+  const WebpackPngRemote = await loadRemote('remote1/WebpackPng');
+  return WebpackPngRemote;
+});
 
 function Remote1() {
   return (

apps/runtime-demo/3005-runtime-host/src/Root.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense, lazy } from 'react';
-import TestRemoteHook from './test-remote-hook';
+// import TestRemoteHook from './test-remote-hook';
 import LocalBtn from './components/ButtonOldAnt';
 import WebpackPng from './webpack.png';
 import WebpackSvg from './webpack.svg';
@@ -31,9 +31,7 @@ const Root = () => (
               </div>
             </div>
           </td>
-          <td>
-            <TestRemoteHook />
-          </td>
+          <td>{/* <TestRemoteHook /> */}</td>
         </tr>
         <tr>
           <td>✅</td>

apps/runtime-demo/3005-runtime-host/src/bootstrap.tsx

@@ -14,6 +14,11 @@ init({
       alias: 'dynamic-remote',
       entry: 'http://127.0.0.1:3007/mf-manifest.json',
     },
+    {
+      name: 'runtime_remote1',
+      alias: 'remote1',
+      entry: 'http://127.0.0.1:3006/mf-manifest.json',
+    },
   ],
 });
 

apps/runtime-demo/3005-runtime-host/src/index.ts

@@ -6,4 +6,4 @@ import customPlugin from './runtimePlugin';
 
 registerGlobalPlugins([customPlugin()]);
 
-import('./bootstrap');
+require('./bootstrap');

apps/runtime-demo/3005-runtime-host/src/test-remote-hook.tsx

@@ -1,38 +1,38 @@
-import useCustomRemoteHook from 'remote1/useCustomRemoteHook';
+// import useCustomRemoteHook from 'remote1/useCustomRemoteHook';
 
-// function RemoteHookText() {
-//   // @ts-ignore ignore
-//   const RemoteText = React.lazy(async () => {
-//     //@ts-ignore
-//     const useCustomRemoteHook = await loadRemote('app2/useCustomRemoteHook') as ()=>string;
-//     console.log(111,useCustomRemoteHook)
-//     const text = useCustomRemoteHook.default();
-//     console.log(23424,text)
-//     return text;
-//   });
-//   return (
-//     <React.Suspense fallback="Loading Button">
-//       <div style={{ border: '1px solid red', padding: 5 }}>{RemoteText}</div>
-//     </React.Suspense>
-//   );
-// }
+// // function RemoteHookText() {
+// //   // @ts-ignore ignore
+// //   const RemoteText = React.lazy(async () => {
+// //     //@ts-ignore
+// //     const useCustomRemoteHook = await loadRemote('app2/useCustomRemoteHook') as ()=>string;
+// //     console.log(111,useCustomRemoteHook)
+// //     const text = useCustomRemoteHook.default();
+// //     console.log(23424,text)
+// //     return text;
+// //   });
+// //   return (
+// //     <React.Suspense fallback="Loading Button">
+// //       <div style={{ border: '1px solid red', padding: 5 }}>{RemoteText}</div>
+// //     </React.Suspense>
+// //   );
+// // }
 
-const TestRemoteHook = () => {
-  const text = useCustomRemoteHook();
+// const TestRemoteHook = () => {
+//   const text = useCustomRemoteHook();
 
-  return (
-    <>
-      <div>
-        Page with custom remote hook. You must see text in red box below:
-        <div
-          className="remote1-text"
-          style={{ border: '1px solid red', padding: 5 }}
-        >
-          {text}
-        </div>
-      </div>
-    </>
-  );
-};
+//   return (
+//     <>
+//       <div>
+//         Page with custom remote hook. You must see text in red box below:
+//         <div
+//           className="remote1-text"
+//           style={{ border: '1px solid red', padding: 5 }}
+//         >
+//           {text}
+//         </div>
+//       </div>
+//     </>
+//   );
+// };
 
-export default TestRemoteHook;
+// export default TestRemoteHook;

apps/runtime-demo/3005-runtime-host/webpack.config.js

@@ -15,30 +15,31 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
   config.plugins.push(
     new ModuleFederationPlugin({
       name: 'runtime_host',
-      remotes: {
-        // remote2: 'runtime_remote2@http://localhost:3007/remoteEntry.js',
-        remote1: 'runtime_remote1@http://127.0.0.1:3006/mf-manifest.json',
-        // remote1: `promise new Promise((resolve)=>{
-        //   const raw = 'runtime_remote1@http://127.0.0.1:3006/remoteEntry.js'
-        //   const [_, remoteUrlWithVersion] = raw.split('@')
-        //   const script = document.createElement('script')
-        //   script.src = remoteUrlWithVersion
-        //   script.onload = () => {
-        //     const proxy = {
-        //       get: (request) => window.runtime_remote1.get(request),
-        //       init: (arg) => {
-        //         try {
-        //           return window.runtime_remote1.init(arg)
-        //         } catch(e) {
-        //           console.log('runtime_remote1 container already initialized')
-        //         }
-        //       }
-        //     }
-        //     resolve(proxy)
-        //   }
-        //   document.head.appendChild(script);
-        // })`,
-      },
+      embedRuntime: true,
+      // remotes: {
+      //   // remote2: 'runtime_remote2@http://localhost:3007/remoteEntry.js',
+      //   // remote1: 'runtime_remote1@http://127.0.0.1:3006/mf-manifest.json',
+      //   // remote1: `promise new Promise((resolve)=>{
+      //   //   const raw = 'runtime_remote1@http://127.0.0.1:3006/remoteEntry.js'
+      //   //   const [_, remoteUrlWithVersion] = raw.split('@')
+      //   //   const script = document.createElement('script')
+      //   //   script.src = remoteUrlWithVersion
+      //   //   script.onload = () => {
+      //   //     const proxy = {
+      //   //       get: (request) => window.runtime_remote1.get(request),
+      //   //       init: (arg) => {
+      //   //         try {
+      //   //           return window.runtime_remote1.init(arg)
+      //   //         } catch(e) {
+      //   //           console.log('runtime_remote1 container already initialized')
+      //   //         }
+      //   //       }
+      //   //     }
+      //   //     resolve(proxy)
+      //   //   }
+      //   //   document.head.appendChild(script);
+      //   // })`,
+      // },
       // library: { type: 'var', name: 'runtime_remote' },
       filename: 'remoteEntry.js',
       exposes: {

apps/runtime-demo/3006-runtime-remote/project.json

@@ -13,7 +13,7 @@
         "outputPath": "apps/runtime-demo/3006-runtime-remote/dist",
         "index": "apps/runtime-demo/3006-runtime-remote/src/index.html",
         "baseHref": "/",
-        "main": "apps/runtime-demo/3006-runtime-remote/src/index.ts",
+        "main": "apps/runtime-demo/3006-runtime-remote/src/index.tsx",
         "tsConfig": "apps/runtime-demo/3006-runtime-remote/tsconfig.app.json",
         "styles": [],
         "scripts": [],

apps/runtime-demo/3006-runtime-remote/webpack.config.js

@@ -93,7 +93,7 @@ module.exports = composePlugins(
       scriptType: 'text/javascript',
     };
     config.optimization = {
-      ...config.optimization,
+      // ...config.optimization,
       runtimeChunk: false,
       minimize: false,
     };

apps/runtime-demo/3007-runtime-remote/project.json

@@ -13,7 +13,7 @@
         "outputPath": "apps/runtime-demo/3007-runtime-remote/dist",
         "index": "apps/runtime-demo/3007-runtime-remote/src/index.html",
         "baseHref": "/",
-        "main": "apps/runtime-demo/3007-runtime-remote/src/index.ts",
+        "main": "apps/runtime-demo/3007-runtime-remote/src/index.tsx",
         "tsConfig": "apps/runtime-demo/3007-runtime-remote/tsconfig.app.json",
         "styles": [],
         "scripts": [],