feat: support rspack

module-federation · Jul 24, 2024 · d9cb521 · d9cb521
1 parent 6154a5d
commit d9cb521
Show file tree

Hide file tree

Showing 11 changed files with 577 additions and 132 deletions.
diff --git a/apps/modernjs-ssr/nested-remote/modern.config.ts b/apps/modernjs-ssr/nested-remote/modern.config.ts
@@ -1,5 +1,6 @@
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js';
+import { config } from 'process';
 
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
@@ -9,12 +10,20 @@ export default defineConfig({
   runtime: {
     router: true,
   },
+  source: {
+    // enableAsyncEntry:true,
+  },
   server: {
     ssr: {
       mode: 'stream',
     },
     port: 3052,
   },
+  tools: {
+    rspack: (config) => {
+      // config.resolve?.extensions?.unshift('.server.jsx')
+    },
+  },
   plugins: [
     appTools({
       bundler: 'experimental-rspack',

diff --git a/apps/modernjs-ssr/nested-remote/package.json b/apps/modernjs-ssr/nested-remote/package.json
@@ -25,18 +25,18 @@
     "dist/"
   ],
   "dependencies": {
-    "@modern-js/runtime": "2.56.1",
+    "@modern-js/runtime": "0.0.0-next-20240724071459",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "@module-federation/modern-js": "workspace:*",
     "@babel/runtime": "7.24.4",
     "antd": "4.24.15"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "2.56.1",
-    "@modern-js/eslint-config": "2.56.1",
-    "@modern-js/tsconfig": "2.56.1",
-    "@modern-js-app/eslint-config": "2.56.1",
+    "@modern-js/app-tools": "0.0.0-next-20240724071459",
+    "@modern-js/eslint-config": "0.0.0-next-20240724071459",
+    "@modern-js/tsconfig": "0.0.0-next-20240724071459",
+    "@modern-js-app/eslint-config": "0.0.0-next-20240724071459",
     "typescript": "~5.0.4",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",

diff --git a/apps/modernjs-ssr/nested-remote/src/routes/layout.tsx b/apps/modernjs-ssr/nested-remote/src/routes/layout.tsx
@@ -1,6 +1,7 @@
 import { Outlet } from '@modern-js/runtime/router';
 
 export default function Layout() {
+  console.log('layout');
   return (
     <div>
       <Outlet />

diff --git a/apps/modernjs-ssr/remote/module-federation.config.ts b/apps/modernjs-ssr/remote/module-federation.config.ts
@@ -7,7 +7,7 @@ export default createModuleFederationConfig({
     './Button': './src/components/Button.tsx',
   },
   shared: {
-    react: { singleton: true, eager: true },
-    'react-dom': { singleton: true, eager: true },
+    react: { singleton: true },
+    'react-dom': { singleton: true },
   },
 });
diff --git a/apps/modernjs-ssr/remote/package.json b/apps/modernjs-ssr/remote/package.json
@@ -25,18 +25,18 @@
     "dist/"
   ],
   "dependencies": {
-    "@modern-js/runtime": "2.56.1",
+    "@modern-js/runtime": "0.0.0-next-20240724071459",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "@module-federation/modern-js": "workspace:*",
     "@babel/runtime": "7.24.4",
     "antd": "4.24.15"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "2.56.1",
-    "@modern-js/eslint-config": "2.56.1",
-    "@modern-js/tsconfig": "2.56.1",
-    "@modern-js-app/eslint-config": "2.56.1",
+    "@modern-js/app-tools": "0.0.0-next-20240724071459",
+    "@modern-js/eslint-config": "0.0.0-next-20240724071459",
+    "@modern-js/tsconfig": "0.0.0-next-20240724071459",
+    "@modern-js-app/eslint-config": "0.0.0-next-20240724071459",
     "typescript": "~5.0.4",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",

diff --git a/apps/modernjs-ssr/remote/src/routes/page.tsx b/apps/modernjs-ssr/remote/src/routes/page.tsx
@@ -1,92 +1,11 @@
 // @ts-nocheck
 import { Helmet } from '@modern-js/runtime/head';
+import Image from '../components/Image';
 import './index.css';
 
 const Index = () => (
   <div className="container-box">
-    <Helmet>
-      <link
-        rel="icon"
-        type="image/x-icon"
-        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
-      />
-    </Helmet>
-    <main>
-      <div className="title">
-        Welcome to
-        <img
-          className="logo"
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"
-          alt="Modern.js Logo"
-        />
-        <p className="name">Modern.js</p>
-      </div>
-      <p className="description">
-        Get started by editing <code className="code">src/routes/page.tsx</code>
-      </p>
-      <div className="grid">
-        <a
-          href="https://modernjs.dev/guides/get-started/introduction.html"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="card"
-        >
-          <h2>
-            Guide
-            <img
-              className="arrow-right"
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-            />
-          </h2>
-          <p>Follow the guides to use all features of Modern.js.</p>
-        </a>
-        <a
-          href="https://modernjs.dev/tutorials/foundations/introduction.html"
-          target="_blank"
-          className="card"
-          rel="noreferrer"
-        >
-          <h2>
-            Tutorials
-            <img
-              className="arrow-right"
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-            />
-          </h2>
-          <p>Learn to use Modern.js to create your first application.</p>
-        </a>
-        <a
-          href="https://modernjs.dev/configure/app/usage.html"
-          target="_blank"
-          className="card"
-          rel="noreferrer"
-        >
-          <h2>
-            Config
-            <img
-              className="arrow-right"
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-            />
-          </h2>
-          <p>Find all configuration options provided by Modern.js.</p>
-        </a>
-        <a
-          href="https://github.com/web-infra-dev/modern.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="card"
-        >
-          <h2>
-            Github
-            <img
-              className="arrow-right"
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-            />
-          </h2>
-          <p>View the source code of Github, feel free to contribute.</p>
-        </a>
-      </div>
-    </main>
+    <Image />
   </div>
 );
 

diff --git a/packages/dts-plugin/src/core/configurations/remotePlugin.ts b/packages/dts-plugin/src/core/configurations/remotePlugin.ts
@@ -80,7 +80,6 @@ const readTsConfig = (
     typescript.sys,
     dirname(resolvedTsConfigPath),
   );
-
   const rootDir = getEffectiveRootDir(configContent);
 
   const outDir = resolve(
@@ -106,9 +105,11 @@ const readTsConfig = (
   };
 
   delete rawTsConfigJson.compilerOptions?.paths;
+  delete rawTsConfigJson.compilerOptions?.baseUrl;
 
   const filesToCompile = [
     ...Object.values(mapComponentsToExpose),
+    ...configContent.fileNames.filter((filename) => filename.endsWith('.d.ts')),
     ...additionalFilesToCompile,
   ];
 

diff --git a/packages/modernjs/src/cli/configPlugin.ts b/packages/modernjs/src/cli/configPlugin.ts
@@ -47,16 +47,6 @@ export function modifyBundlerConfig<T extends Bundler>(options: {
     modernjsConfig,
     mfConfig,
   });
-
-  if (bundlerType === 'webpack') {
-    config.ignoreWarnings = config.ignoreWarnings || [];
-    config.ignoreWarnings.push((warning) => {
-      if (warning.message.includes('external script')) {
-        return true;
-      }
-      return false;
-    });
-  }
 }
 
 export const moduleFederationConfigPlugin = (

diff --git a/packages/modernjs/src/cli/ssrPlugin.ts b/packages/modernjs/src/cli/ssrPlugin.ts
@@ -22,7 +22,7 @@ export const moduleFederationSSRPlugin = (
     '@modern-js/plugin-module-federation-config',
     '@modern-js/plugin-module-federation',
   ],
-  setup: async ({ useConfigContext }) => {
+  setup: async ({ useConfigContext, useAppContext }) => {
     const modernjsConfig = useConfigContext();
     const enableSSR = Boolean(modernjsConfig?.server?.ssr);
     if (!enableSSR) {
@@ -43,7 +43,16 @@ export const moduleFederationSSRPlugin = (
         return { entrypoint, plugins };
       },
       config: async () => {
+        const bundlerType =
+          useAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack';
+
         return {
+          source: {
+            enableAsyncEntry:
+              bundlerType === 'rspack'
+                ? modernjsConfig.source?.enableAsyncEntry ?? true
+                : modernjsConfig.source?.enableAsyncEntry,
+          },
           tools: {
             rspack(config, { isServer }) {
               if (isServer) {
@@ -126,6 +135,9 @@ export const moduleFederationSSRPlugin = (
               ],
             },
             bundlerChain(chain, { isServer }) {
+              if (isServer) {
+                chain.target('async-node');
+              }
               if (isDev && !isServer) {
                 chain.externals({
                   '@module-federation/node/utils': 'NOT_USED_IN_BROWSER',

diff --git a/packages/modernjs/src/cli/utils.ts b/packages/modernjs/src/cli/utils.ts
@@ -216,6 +216,43 @@ export function patchBundlerConfig<T extends Bundler>(options: {
 
   delete bundlerConfig.optimization?.runtimeChunk;
 
+  bundlerConfig.ignoreWarnings = bundlerConfig.ignoreWarnings || [];
+  const ignoredMsgs = [
+    'external script',
+    'process.env.WS_NO_BUFFER_UTIL',
+    `Can't resolve 'utf-8-validate`,
+  ];
+  bundlerConfig.ignoreWarnings.push((warning) => {
+    if (ignoredMsgs.some((msg) => warning.message.includes(msg))) {
+      return true;
+    }
+    return false;
+  });
+
+  bundlerConfig.watchOptions = bundlerConfig.watchOptions || {};
+  if (!Array.isArray(bundlerConfig.watchOptions.ignored)) {
+    if (bundlerConfig.watchOptions.ignored) {
+      bundlerConfig.watchOptions.ignored = [
+        bundlerConfig.watchOptions.ignored as string,
+      ];
+    } else {
+      bundlerConfig.watchOptions.ignored = [];
+    }
+  }
+  if (mfConfig.dts !== false) {
+    if (
+      typeof mfConfig.dts === 'object' &&
+      typeof mfConfig.dts.consumeTypes === 'object' &&
+      mfConfig.dts.consumeTypes.remoteTypesFolder
+    ) {
+      bundlerConfig.watchOptions.ignored.push(
+        mfConfig.dts.consumeTypes.remoteTypesFolder,
+      );
+    } else {
+      bundlerConfig.watchOptions.ignored.push('@mf-types');
+    }
+  }
+
   if (bundlerConfig.output) {
     if (!bundlerConfig.output?.chunkLoadingGlobal) {
       bundlerConfig.output.chunkLoadingGlobal = `chunk_${mfConfig.name}`;