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

package/dist/esm/runtime/index.js

@@ -1,8 +1,8 @@
 export * from "@module-federation/enhanced/runtime";
-import { MFReactComponent, collectAssets } from "./MFReactComponent";
-import { LiveReload } from "./LiveReload";
+import { createRemoteSSRComponent, collectSSRAssets } from "./createRemoteSSRComponent";
+import { SSRLiveReload } from "./SSRLiveReload";
 export {
-  LiveReload,
-  MFReactComponent,
-  collectAssets
+  SSRLiveReload,
+  collectSSRAssets,
+  createRemoteSSRComponent
 };

package/dist/esm-node/cli/index.js

@@ -3,7 +3,7 @@ import { fs } from "@modern-js/utils";
 import { ModuleFederationPlugin as WebpackModuleFederationPlugin, AsyncBoundaryPlugin } from "@module-federation/enhanced";
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
 import { StreamingTargetPlugin, EntryChunkTrackerPlugin } from "@module-federation/node";
-import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, lookupIpv4 } from "./utils";
+import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, getIPV4 } from "./utils";
 import { updateStatsAndManifest } from "./manifest";
 import { MODERN_JS_SERVER_DIR } from "../constant";
 const SSR_PLUGIN_IDENTIFIER = "mfPluginSSR";
@@ -53,10 +53,13 @@ const moduleFederationPlugin = (userConfig = {}) => ({
             mfConfig: envConfig
           });
         };
-        const ipv4 = await lookupIpv4();
+        const ipv4 = 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/esm-node/cli/utils.js

@@ -1,7 +1,7 @@
 import { encodeName } from "@module-federation/sdk";
 import path from "path";
+import os from "os";
 import { bundle } from "@modern-js/node-bundle-require";
-import dns from "dns";
 import { LOCALHOST } from "../constant";
 const defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
 const getMFConfig = async (userConfig) => {
@@ -27,7 +27,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];
@@ -58,6 +58,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(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
@@ -141,16 +168,31 @@ function patchWebpackConfig(options) {
     };
   }
 }
-const lookupIpv4 = async () => {
+const localIpv4 = "127.0.0.1";
+const getIpv4Interfaces = () => {
   try {
-    const res = await dns.promises.lookup(LOCALHOST, {
-      family: 4
+    const interfaces = os.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",
@@ -193,9 +235,9 @@ function autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig) {
   }
 }
 export {
+  getIPV4,
   getMFConfig,
   getTargetEnvConfig,
-  lookupIpv4,
   patchMFConfig,
   patchWebpackConfig
 };

package/dist/esm-node/cli/utils.spec.js

@@ -69,6 +69,13 @@ describe("getTargetEnvConfig", async () => {
           eager: true,
           singleton: true
         }
+      },
+      dts: {
+        consumeTypes: {
+          runtimePkgs: [
+            "@modern-js/runtime/mf"
+          ]
+        }
       }
     });
   });

package/dist/esm-node/runtime/{LiveReload.js → SSRLiveReload.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-function LiveReload() {
+function SSRLiveReload() {
   if (process.env.NODE_ENV !== "development") {
     return null;
   }
@@ -15,5 +15,5 @@ function LiveReload() {
   });
 }
 export {
-  LiveReload
+  SSRLiveReload
 };

package/dist/esm-node/runtime/{MFReactComponent.js → createRemoteSSRComponent.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
-import { loadRemote, getInstance } from "@module-federation/enhanced/runtime";
+import { getInstance } from "@module-federation/enhanced/runtime";
 import { ErrorBoundary } from "react-error-boundary";
 function getLoadedRemoteInfos(instance, id) {
   const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
@@ -50,7 +50,7 @@ function getTargetModuleInfo(id) {
     remoteEntry
   };
 }
-function collectAssets(options) {
+function collectSSRAssets(options) {
   const { id, injectLink = true, injectScript = true } = typeof options === "string" ? {
     id: options
   } : options;
@@ -104,48 +104,62 @@ function collectAssets(options) {
     ...links
   ];
 }
-function MFReactComponent(props) {
-  const { loading = "loading...", id, remoteProps = {}, fallback } = props;
-  const Component = /* @__PURE__ */ React.lazy(() => 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__ */ _jsxs(_Fragment, {
-        children: [
-          assets,
-          /* @__PURE__ */ _jsx(Com, {
-            ...remoteProps
-          })
-        ]
-      })
-    };
-  }).catch((err) => {
-    if (!fallback) {
-      throw err;
-    }
-    const FallbackFunctionComponent = fallback;
-    const FallbackNode = /* @__PURE__ */ _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__ */ React.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__ */ _jsxs(_Fragment, {
+              children: [
+                assets,
+                /* @__PURE__ */ _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__ */ _jsx(FallbackFunctionComponent, {
+          error: err,
+          resetErrorBoundary: () => {
+            console.log('SSR mode not support "resetErrorBoundary" !');
+          }
+        });
+        return {
+          default: () => FallbackNode
+        };
       }
     });
-    return {
-      default: () => FallbackNode
-    };
-  }));
-  return /* @__PURE__ */ _jsx(ErrorBoundary, {
-    FallbackComponent: fallback,
-    children: /* @__PURE__ */ _jsx(React.Suspense, {
-      fallback: loading,
-      children: /* @__PURE__ */ _jsx(Component, {})
-    })
-  });
+    return /* @__PURE__ */ _jsx(ErrorBoundary, {
+      FallbackComponent: info.fallback,
+      children: /* @__PURE__ */ _jsx(React.Suspense, {
+        fallback: info.loading,
+        children: /* @__PURE__ */ _jsx(LazyComponent, {})
+      })
+    });
+  };
 }
 export {
-  MFReactComponent,
-  collectAssets
+  collectSSRAssets,
+  createRemoteSSRComponent
 };

package/dist/esm-node/runtime/index.js

@@ -1,8 +1,8 @@
 export * from "@module-federation/enhanced/runtime";
-import { MFReactComponent, collectAssets } from "./MFReactComponent";
-import { LiveReload } from "./LiveReload";
+import { createRemoteSSRComponent, collectSSRAssets } from "./createRemoteSSRComponent";
+import { SSRLiveReload } from "./SSRLiveReload";
 export {
-  LiveReload,
-  MFReactComponent,
-  collectAssets
+  SSRLiveReload,
+  collectSSRAssets,
+  createRemoteSSRComponent
 };

package/dist/types/cli/utils.d.ts

@@ -14,6 +14,7 @@ export declare const patchMFConfig: (mfConfig: moduleFederationPlugin.ModuleFede
     runtime?: moduleFederationPlugin.EntryRuntime | undefined;
     shareScope?: string | undefined;
     shared?: moduleFederationPlugin.Shared | undefined;
+    getPublicPath?: string | undefined;
     implementation?: string | undefined;
     manifest?: boolean | moduleFederationPlugin.PluginManifestOptions | undefined;
     dev?: boolean | moduleFederationPlugin.PluginDevOptions | undefined;
@@ -31,6 +32,7 @@ export declare function getTargetEnvConfig(mfConfig: moduleFederationPlugin.Modu
     runtime?: moduleFederationPlugin.EntryRuntime | undefined;
     shareScope?: string | undefined;
     shared?: moduleFederationPlugin.Shared | undefined;
+    getPublicPath?: string | undefined;
     implementation?: string | undefined;
     manifest?: boolean | moduleFederationPlugin.PluginManifestOptions | undefined;
     dev?: boolean | moduleFederationPlugin.PluginDevOptions | undefined;
@@ -43,4 +45,4 @@ export declare function patchWebpackConfig<T>(options: {
     modernjsConfig: UserConfig<AppTools>;
     mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions;
 }): void;
-export declare const lookupIpv4: () => Promise<string>;
+export declare const getIPV4: () => string;

package/dist/types/runtime/SSRLiveReload.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SSRLiveReload(): import("react").JSX.Element | null;

package/dist/types/runtime/createRemoteSSRComponent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
+type IProps = {
+    id: string;
+    injectScript?: boolean;
+    injectLink?: boolean;
+};
+export declare function collectSSRAssets(options: IProps): React.ReactNode[];
+export declare function createRemoteSSRComponent<T, E extends keyof T>(info: {
+    loader: () => Promise<T>;
+    loading: React.ReactNode;
+    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+    injectScript?: boolean;
+    injectLink?: boolean;
+    export?: E;
+}): (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? Record<string, never> : Parameters<T[E]>[0] : Record<string, never>) => React.JSX.Element;
+export {};

package/dist/types/runtime/index.d.ts

@@ -1,3 +1,3 @@
 export * from '@module-federation/enhanced/runtime';
-export { MFReactComponent, collectAssets } from './MFReactComponent';
-export { LiveReload } from './LiveReload';
+export { createRemoteSSRComponent, collectSSRAssets, } from './createRemoteSSRComponent';
+export { SSRLiveReload } from './SSRLiveReload';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/modern-js",
-  "version": "0.0.0-next-20240623084034",
+  "version": "0.0.0-next-20240625025206",
   "files": [
     "dist/",
     "types.d.ts",
@@ -47,9 +47,9 @@
     "@modern-js/node-bundle-require": "^2.49.2",
     "node-fetch": "~3.3.0",
     "react-error-boundary": "4.0.13",
-    "@module-federation/sdk": "0.0.0-next-20240623084034",
-    "@module-federation/enhanced": "0.0.0-next-20240623084034",
-    "@module-federation/node": "0.0.0-next-20240623084034"
+    "@module-federation/sdk": "0.0.0-next-20240625025206",
+    "@module-federation/enhanced": "0.0.0-next-20240625025206",
+    "@module-federation/node": "0.0.0-next-20240625025206"
   },
   "devDependencies": {
     "@modern-js/app-tools": "^2.49.2",
@@ -57,7 +57,7 @@
     "@modern-js/runtime": "^2.49.2",
     "@modern-js/module-tools": "^2.35.0",
     "@modern-js/tsconfig": "^2.35.0",
-    "@module-federation/manifest": "0.0.0-next-20240623084034"
+    "@module-federation/manifest": "0.0.0-next-20240625025206"
   },
   "peerDependencies": {
     "react": ">=17",

package/dist/types/runtime/LiveReload.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function LiveReload(): import("react").JSX.Element | null;

package/dist/types/runtime/MFReactComponent.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
-type Id = string;
-type IProps = {
-    id: Id;
-    loading: React.ReactNode;
-    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-    injectScript?: boolean;
-    injectLink?: boolean;
-    remoteProps?: Record<string, any>;
-};
-declare function collectAssets(options: IProps): React.ReactNode[];
-declare function MFReactComponent(props: IProps): React.JSX.Element;
-export { MFReactComponent, collectAssets };