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/build-and-test.yml

@@ -2,7 +2,7 @@ name: Build Affected Packages
 
 on:
   pull_request:
-    branches: [main]
+    branches: [main, '**']
   push:
     branches: [main]
 
@@ -62,9 +62,14 @@ jobs:
     uses: ./.github/workflows/e2e-node.yml
     secrets: inherit
 
-  e2e-next:
+  e2e-next-dev:
+    needs: checkout-install
+    uses: ./.github/workflows/e2e-next-dev.yml
+    secrets: inherit
+
+  e2e-next-prod:
     needs: checkout-install
-    uses: ./.github/workflows/e2e-next.yml
+    uses: ./.github/workflows/e2e-next-prod.yml
     secrets: inherit
 
   e2e-modern-ssr:

.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-next-dev.yml

@@ -0,0 +1,52 @@
+name: E2E Test for Next.js Dev
+
+on:
+  workflow_call:
+
+jobs:
+  e2e-next-dev:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Pnpm
+        run: corepack enable
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'pnpm'
+
+      - name: Set Nx SHA
+        uses: nrwl/nx-set-shas@v3
+
+      - name: Set SKIP_DEVTOOLS_POSTINSTALL environment variable
+        run: echo "SKIP_DEVTOOLS_POSTINSTALL=true" >> $GITHUB_ENV
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Install Cypress
+        run: npx cypress install
+
+      - name: Run Build for All
+        run: npx nx run-many --targets=build --projects=tag:type:pkg
+
+      - name: Run condition check script
+        id: check-ci
+        run: node tools/scripts/ci-is-affected.mjs --appName=3000-home
+
+      - name: E2E Test for Next.js Dev
+        if: steps.check-ci.outcome == 'success'
+        run: |
+          pnpm run app:next:dev > /dev/null 2>&1 &
+          sleep 1 &&
+          npx wait-on tcp:3001 &&
+          npx wait-on tcp:3002 &&
+          npx wait-on tcp:3000 &&
+          npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
+          lsof -ti tcp:3000,3001,3002 | xargs kill

.github/workflows/e2e-next.yml → .github/workflows/e2e-next-prod.yml

@@ -1,11 +1,10 @@
-# .github/workflows/e2e-next-dev.yml
-name: E2E Test for Next.js Dev
+name: E2E Test for Next.js Prod
 
 on:
   workflow_call:
 
 jobs:
-  e2e-next:
+  e2e-next-prod:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
@@ -52,14 +51,3 @@ jobs:
           npx wait-on tcp:3000 &&
           npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
           lsof -ti tcp:3000,3001,3002 | xargs kill
-
-      - name: E2E Test for Next.js Dev
-        if: steps.check-ci.outcome == 'success'
-        run: |
-          pnpm run app:next:dev > /dev/null 2>&1 &
-          sleep 1 &&
-          npx wait-on tcp:3001 &&
-          npx wait-on tcp:3002 &&
-          npx wait-on tcp:3000 &&
-          npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
-          lsof -ti tcp:3000,3001,3002 | 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/cypress/e2e/app.cy.ts

@@ -22,10 +22,12 @@ describe('3000-home/', () => {
     it('should display welcome message', () => {
       getH1().contains('This is SPA combined');
     });
-    it('Api endpoint works', () => {
-      const urls = ['/api/test'];
-      urls.forEach((url) => {
-        cy.request(url); // This makes a GET request, not a full page visit
+  });
+
+  describe('API endpoint should return json', () => {
+    it('Query Endpoint', () => {
+      cy.request('/api/test').then((response) => {
+        expect(response.headers['content-type']).to.include('application/json');
       });
     });
   });

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');