@module-federation/modern-js 0.0.0-next-20240623084034 → 0.0.0-next-20240625025206

package/README.md

@@ -1 +1,260 @@
 # @module-federation/modern-js
+
+This plugin provides Module Federation supporting functions for Modern.js
+
+## Supports
+
+- modern.js ^2.52.0
+- Server-Side Rendering
+
+We highly recommend referencing this application which takes advantage of the best capabilities:
+[module-federation example](https://github.com/module-federation/core/tree/feat/modernjs-ssr/apps/modernjs-ssr)
+
+## Quick Start
+
+### Installation
+
+You can install the plugin with the following commands:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs
+  command={{
+    npm: 'npm add @module-federation/modern-js --save',
+    yarn: 'yarn add @module-federation/modern-js --save',
+    pnpm: 'pnpm add @module-federation/modern-js --save',
+    bun: 'bun add @module-federation/modern-js --save',
+  }}
+/>
+
+### Apply Plugin
+
+Apply this plugin in `plugins` of `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+export default defineConfig({
+  dev: {
+    port: 3005,
+  },
+  runtime: {
+    router: true,
+  },
+  // moduleFederationPlugin is a plug-in for modern.js, which can make certain modifications to the build/runtime
+  plugins: [appTools(), moduleFederationPlugin()],
+});
+```
+
+Then create the `module-federation.config.ts` file and write the required configuration:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@http://localhost:3006/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+### Type support
+
+add `/// <reference types='@module-federation/modern-js/types' />` in `modern-app-env.d.ts` to get type support.
+
+```diff title='modern-app-env.d.ts'
++ /// <reference types='@module-federation/modern-js/types' />
+```
+
+## Server-Side Rendering
+
+:::info
+For a better performance experience, Module Federation X Modern.js SSR only supports stream SSR.
+:::
+
+There is no difference between using Module Federation in SSR scenarios and CSR scenarios. Developers can just keep following the original development behavior.
+
+But for a better user experience, we provide supporting functions/components to help developers better use Module Federation.
+
+### createRemoteSSRComponent
+
+```ts
+declare function createRemoteSSRComponent(
+  props: CreateRemoteSSRComponentOptions
+): (props: ComponentType) => React.JSX.Element;
+
+type CreateRemoteSSRComponentOptions = {
+  loader: () => Promise<T>;
+  loading: React.ReactNode;
+  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+  injectScript?: boolean;
+  injectLink?: boolean;
+  export?: E;
+};
+
+type ComponentType = T[E] extends (...args: any) => any
+  ? Parameters<T[E]>[0] extends undefined
+    ? Record<string, never>
+    : Parameters<T[E]>[0]
+  : Record<string, never>;
+```
+
+This function will also help inject the corresponding style tag/script while loading the component. This behavior can help avoid the CSS flickering problem caused by streaming rendering and accelerate the PID (first screen interactive time).
+
+#### Example
+
+```tsx
+import React, { FC, memo, useEffect } from 'react';
+import { registerRemotes, createRemoteSSRComponent } from '@modern-js/runtime/mf';
+// The remote declared in the build plug-in can be imported directly at the top level
+import RemoteComp from 'remote/Image';
+
+
+const RemoteSSRComponent = createRemoteSSRComponent({
+  // The remote declared in the build plug-in can also be loaded using this function: loader: () => import('remote/Image'),
+  loader: () => loadRemote('dynamic_remote/Image'),
+  loading: <div>loading...</div>,
+  fallback: ({ error }) => {
+    if (error instanceof Error && error.message.includes('not exist')) {
+      return <div>fallback - not existed id</div>;
+    }
+    return <div>fallback</div>;
+  },
+});
+
+const Product: FC = () => {
+  registerRemotes([
+    {
+      name: 'dynamic_remote',
+      entry: 'http://localhost:3008/mf-manifest.json',
+    },
+  ]);
+
+  const fallback = (err: Error) => {
+    if (err.message.includes('does not exist in container')) {
+      return <div>404</div>;
+    }
+    throw err;
+  };
+
+  return <>
+    <RemoteSSRComponent />
+    <RemoteComp />
+  </>;
+};
+export default Product;
+```
+
+#### loading
+
+- Type:`React.ReactNode`
+- Required: Yes
+- Default value: `undefined`
+
+Set module loading status.
+
+#### fallback
+
+- Type:`((err: Error) => React.ReactElement)`
+- Required: Yes
+- Default value: `undefined`
+
+A fault-tolerant component that is rendered when the component fails to **load** or **render**.
+
+Note: This component only renders this fault-tolerant component on the client side when **rendering** fails.
+
+#### injectLink
+
+- Type:`boolean`
+- Required: No
+- Default value: `true`
+
+Whether to inject the style of the corresponding component.
+
+#### injectScript
+
+- Type:`boolean`
+- Required: No
+- Default value: `true`
+
+Whether to inject the script of the corresponding component.
+
+### collectSSRAssets
+
+```ts
+declare function createRemoteSSRComponent(
+  props: CollectSSRAssetsOptions
+): React.ReactNode[];
+
+type CollectSSRAssetsOptions = {
+  id: string;
+  injectScript?: boolean;
+  injectLink?: boolean;
+};
+```
+
+This function collects producer-related scripts and styles rendered on the server side and returns the script/link tag.
+
+#### Example
+
+```tsx
+import React from 'react';
+import { collectSSRAssets } from '@modern-js/runtime/mf';
+import Comp from 'remote/Image';
+
+export default (): JSX.Element => (
+  <div>
+    {collectSSRAssets({ id: 'remote/Image' })}
+    <Comp />
+  </div>
+);
+```
+
+#### injectLink
+
+- Type:`boolean`
+- Required: No
+- Default value: `true`
+
+Whether to inject the style of the corresponding component.
+
+#### injectScript
+
+- Type:`boolean`
+- Required: No
+- Default value: `true`
+
+Whether to inject the script of the corresponding component.
+
+### SSRLiveReload
+
+:::info
+This component will not take effect in the production environment!
+:::
+
+```ts
+declare function SSRLiveReload(): React.JSX.Element | null;
+```
+
+When remote components are updated, page reloads occur automatically.
+
+#### Example
+
+```tsx
+import { Outlet } from '@modern-js/runtime/router';
+import { SSRLiveReload } from '@modern-js/runtime/mf';
+
+export default function Layout() {
+  return (
+    <div>
+      <SSRLiveReload />
+      <Outlet />
+    </div>
+  );
+}
+```

package/dist/cjs/cli/index.js

@@ -89,10 +89,13 @@ const moduleFederationPlugin = (userConfig = {}) => ({
             mfConfig: envConfig
           });
         };
-        const ipv4 = await (0, import_utils2.lookupIpv4)();
+        const ipv4 = (0, import_utils2.getIPV4)();
         return {
           tools: {
             rspack(config) {
+              if (enableSSR) {
+                throw new Error("@module-federation/modern-js not support ssr for rspack bundler yet!");
+              }
               modifyBundlerConfig(config, false);
             },
             webpack(config, { isServer }) {

package/dist/cjs/cli/utils.js

@@ -28,17 +28,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
+  getIPV4: () => getIPV4,
   getMFConfig: () => getMFConfig,
   getTargetEnvConfig: () => getTargetEnvConfig,
-  lookupIpv4: () => lookupIpv4,
   patchMFConfig: () => patchMFConfig,
   patchWebpackConfig: () => patchWebpackConfig
 });
 module.exports = __toCommonJS(utils_exports);
 var import_sdk = require("@module-federation/sdk");
 var import_path = __toESM(require("path"));
+var import_os = __toESM(require("os"));
 var import_node_bundle_require = require("@modern-js/node-bundle-require");
-var import_dns = __toESM(require("dns"));
 var import_constant = require("../constant");
 const defaultPath = import_path.default.resolve(process.cwd(), "module-federation.config.ts");
 const getMFConfig = async (userConfig) => {
@@ -64,7 +64,7 @@ const replaceRemoteUrl = async (mfConfig) => {
   if (!mfConfig.remotes) {
     return;
   }
-  const ipv4 = await lookupIpv4();
+  const ipv4 = getIPV4();
   const handleRemoteObject = (remoteObject) => {
     Object.keys(remoteObject).forEach((remoteKey) => {
       const remote = remoteObject[remoteKey];
@@ -95,6 +95,33 @@ const patchMFConfig = (mfConfig, isServer) => {
   const runtimePlugins = [
     ...mfConfig.runtimePlugins || []
   ];
+  const ModernJSRuntime = "@modern-js/runtime/mf";
+  if (mfConfig.dts !== false) {
+    var _mfConfig_dts, _mfConfig_dts1;
+    if (typeof mfConfig.dts === "boolean" || mfConfig.dts === void 0) {
+      mfConfig.dts = {
+        consumeTypes: {
+          runtimePkgs: [
+            ModernJSRuntime
+          ]
+        }
+      };
+    } else if (((_mfConfig_dts = mfConfig.dts) === null || _mfConfig_dts === void 0 ? void 0 : _mfConfig_dts.consumeTypes) || ((_mfConfig_dts1 = mfConfig.dts) === null || _mfConfig_dts1 === void 0 ? void 0 : _mfConfig_dts1.consumeTypes) === void 0) {
+      var _mfConfig_dts2;
+      if (typeof mfConfig.dts.consumeTypes === "boolean" || ((_mfConfig_dts2 = mfConfig.dts) === null || _mfConfig_dts2 === void 0 ? void 0 : _mfConfig_dts2.consumeTypes) === void 0) {
+        mfConfig.dts.consumeTypes = {
+          runtimePkgs: [
+            ModernJSRuntime
+          ]
+        };
+      } else {
+        mfConfig.dts.consumeTypes.runtimePkgs = mfConfig.dts.consumeTypes.runtimePkgs || [];
+        if (!mfConfig.dts.consumeTypes.runtimePkgs.includes(ModernJSRuntime)) {
+          mfConfig.dts.consumeTypes.runtimePkgs.push(ModernJSRuntime);
+        }
+      }
+    }
+  }
   injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
@@ -178,16 +205,31 @@ function patchWebpackConfig(options) {
     };
   }
 }
-const lookupIpv4 = async () => {
+const localIpv4 = "127.0.0.1";
+const getIpv4Interfaces = () => {
   try {
-    const res = await import_dns.default.promises.lookup(import_constant.LOCALHOST, {
-      family: 4
+    const interfaces = import_os.default.networkInterfaces();
+    const ipv4Interfaces = [];
+    Object.values(interfaces).forEach((detail) => {
+      detail === null || detail === void 0 ? void 0 : detail.forEach((detail2) => {
+        const familyV4Value = typeof detail2.family === "string" ? "IPv4" : 4;
+        if (detail2.family === familyV4Value && detail2.address !== localIpv4) {
+          ipv4Interfaces.push(detail2);
+        }
+      });
     });
-    return res.address;
-  } catch (err) {
-    return "127.0.0.1";
+    return ipv4Interfaces;
+  } catch (_err) {
+    return [];
   }
 };
+const getIPV4 = () => {
+  const ipv4Interfaces = getIpv4Interfaces();
+  const ipv4Interface = ipv4Interfaces[0] || {
+    address: localIpv4
+  };
+  return ipv4Interface.address;
+};
 const SPLIT_CHUNK_MAP = {
   REACT: "lib-react",
   ROUTER: "lib-router",
@@ -231,9 +273,9 @@ function autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getIPV4,
   getMFConfig,
   getTargetEnvConfig,
-  lookupIpv4,
   patchMFConfig,
   patchWebpackConfig
 });

package/dist/cjs/cli/utils.spec.js

@@ -92,6 +92,13 @@ const mfConfig = {
           eager: true,
           singleton: true
         }
+      },
+      dts: {
+        consumeTypes: {
+          runtimePkgs: [
+            "@modern-js/runtime/mf"
+          ]
+        }
       }
     });
   });

package/dist/cjs/runtime/{LiveReload.js → SSRLiveReload.js}

@@ -16,13 +16,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var LiveReload_exports = {};
-__export(LiveReload_exports, {
-  LiveReload: () => LiveReload
+var SSRLiveReload_exports = {};
+__export(SSRLiveReload_exports, {
+  SSRLiveReload: () => SSRLiveReload
 });
-module.exports = __toCommonJS(LiveReload_exports);
+module.exports = __toCommonJS(SSRLiveReload_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function LiveReload() {
+function SSRLiveReload() {
   if (process.env.NODE_ENV !== "development") {
     return null;
   }
@@ -39,5 +39,5 @@ function LiveReload() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  LiveReload
+  SSRLiveReload
 });

package/dist/cjs/runtime/{MFReactComponent.js → createRemoteSSRComponent.js}

@@ -26,12 +26,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var MFReactComponent_exports = {};
-__export(MFReactComponent_exports, {
-  MFReactComponent: () => MFReactComponent,
-  collectAssets: () => collectAssets
+var createRemoteSSRComponent_exports = {};
+__export(createRemoteSSRComponent_exports, {
+  collectSSRAssets: () => collectSSRAssets,
+  createRemoteSSRComponent: () => createRemoteSSRComponent
 });
-module.exports = __toCommonJS(MFReactComponent_exports);
+module.exports = __toCommonJS(createRemoteSSRComponent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_runtime = require("@module-federation/enhanced/runtime");
@@ -84,7 +84,7 @@ function getTargetModuleInfo(id) {
     remoteEntry
   };
 }
-function collectAssets(options) {
+function collectSSRAssets(options) {
   const { id, injectLink = true, injectScript = true } = typeof options === "string" ? {
     id: options
   } : options;
@@ -138,49 +138,63 @@ function collectAssets(options) {
     ...links
   ];
 }
-function MFReactComponent(props) {
-  const { loading = "loading...", id, remoteProps = {}, fallback } = props;
-  const Component = /* @__PURE__ */ import_react.default.lazy(() => (0, import_runtime.loadRemote)(id).then((mod) => {
-    const assets = collectAssets(props);
-    if (!mod) {
-      throw new Error("load remote failed");
-    }
-    const Com = typeof mod === "object" ? "default" in mod ? mod.default : mod : mod;
-    return {
-      default: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          assets,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Com, {
-            ...remoteProps
-          })
-        ]
-      })
-    };
-  }).catch((err) => {
-    if (!fallback) {
-      throw err;
-    }
-    const FallbackFunctionComponent = fallback;
-    const FallbackNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackFunctionComponent, {
-      error: err,
-      resetErrorBoundary: () => {
-        console.log('SSR mode not support "resetErrorBoundary" !');
+function createRemoteSSRComponent(info) {
+  return (props) => {
+    const exportName = (info === null || info === void 0 ? void 0 : info.export) || "default";
+    const LazyComponent = /* @__PURE__ */ import_react.default.lazy(async () => {
+      try {
+        const m = await info.loader();
+        if (!m) {
+          throw new Error("load remote failed");
+        }
+        const moduleId = m && m[Symbol.for("mf_module_id")];
+        const assets = collectSSRAssets({
+          id: moduleId,
+          injectLink: info.injectLink,
+          injectScript: info.injectScript
+        });
+        const Com = m[exportName];
+        if (exportName in m && typeof Com === "function") {
+          return {
+            default: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+              children: [
+                assets,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Com, {
+                  ...props
+                })
+              ]
+            })
+          };
+        } else {
+          throw Error(`Make sure that ${moduleId} has the correct export when export is ${String(exportName)}`);
+        }
+      } catch (err) {
+        if (!info.fallback) {
+          throw err;
+        }
+        const FallbackFunctionComponent = info.fallback;
+        const FallbackNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackFunctionComponent, {
+          error: err,
+          resetErrorBoundary: () => {
+            console.log('SSR mode not support "resetErrorBoundary" !');
+          }
+        });
+        return {
+          default: () => FallbackNode
+        };
       }
     });
-    return {
-      default: () => FallbackNode
-    };
-  }));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_error_boundary.ErrorBoundary, {
-    FallbackComponent: fallback,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Suspense, {
-      fallback: loading,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {})
-    })
-  });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_error_boundary.ErrorBoundary, {
+      FallbackComponent: info.fallback,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Suspense, {
+        fallback: info.loading,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LazyComponent, {})
+      })
+    });
+  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  MFReactComponent,
-  collectAssets
+  collectSSRAssets,
+  createRemoteSSRComponent
 });

package/dist/cjs/runtime/index.js

@@ -19,18 +19,18 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var runtime_exports = {};
 __export(runtime_exports, {
-  LiveReload: () => import_LiveReload.LiveReload,
-  MFReactComponent: () => import_MFReactComponent.MFReactComponent,
-  collectAssets: () => import_MFReactComponent.collectAssets
+  SSRLiveReload: () => import_SSRLiveReload.SSRLiveReload,
+  collectSSRAssets: () => import_createRemoteSSRComponent.collectSSRAssets,
+  createRemoteSSRComponent: () => import_createRemoteSSRComponent.createRemoteSSRComponent
 });
 module.exports = __toCommonJS(runtime_exports);
 __reExport(runtime_exports, require("@module-federation/enhanced/runtime"), module.exports);
-var import_MFReactComponent = require("./MFReactComponent");
-var import_LiveReload = require("./LiveReload");
+var import_createRemoteSSRComponent = require("./createRemoteSSRComponent");
+var import_SSRLiveReload = require("./SSRLiveReload");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  LiveReload,
-  MFReactComponent,
-  collectAssets,
+  SSRLiveReload,
+  collectSSRAssets,
+  createRemoteSSRComponent,
   ...require("@module-federation/enhanced/runtime")
 });