@module-federation/modern-js 0.0.0-next-20240529103203 → 0.0.0-next-20240530085615

package/dist/cjs/runtime/MFReactComponent.js

@@ -29,7 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var MFReactComponent_exports = {};
 __export(MFReactComponent_exports, {
   MFReactComponent: () => MFReactComponent,
-  collectLinks: () => collectLinks
+  collectAssets: () => collectAssets
 });
 module.exports = __toCommonJS(MFReactComponent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -51,30 +51,58 @@ function getLoadedRemoteInfos(instance, id) {
     expose
   };
 }
-function collectLinks(id) {
-  const links = [];
+function getTargetModuleInfo(id) {
   const instance = (0, import_runtime.getInstance)();
   if (!instance) {
-    return links;
+    return;
   }
   const loadedRemoteInfo = getLoadedRemoteInfos(instance, id);
   if (!loadedRemoteInfo) {
-    return links;
+    return;
   }
   const snapshot = loadedRemoteInfo.snapshot;
   if (!snapshot) {
-    return links;
+    return;
   }
   const publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
   if (!publicPath) {
-    return links;
+    return;
   }
   const modules = "modules" in snapshot ? snapshot.modules : [];
-  if (modules) {
-    const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
-    if (!targetModule) {
-      return links;
-    }
+  const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
+  if (!targetModule) {
+    return;
+  }
+  const remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
+  if (!remoteEntry) {
+    return;
+  }
+  return {
+    module: targetModule,
+    publicPath,
+    remoteEntry
+  };
+}
+function collectAssets(options) {
+  const { id, injectLink = true, injectScript = true } = options;
+  const links = [];
+  const scripts = [];
+  const instance = (0, import_runtime.getInstance)();
+  if (!instance || !injectLink && !injectScript) {
+    return [
+      ...scripts,
+      ...links
+    ];
+  }
+  const moduleAndPublicPath = getTargetModuleInfo(id);
+  if (!moduleAndPublicPath) {
+    return [
+      ...scripts,
+      ...links
+    ];
+  }
+  const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
+  if (injectLink) {
     [
       ...targetModule.assets.css.sync,
       ...targetModule.assets.css.async
@@ -83,23 +111,42 @@ function collectLinks(id) {
         href: `${publicPath}${file}`,
         rel: "stylesheet",
         type: "text/css"
-      }, index));
+      }, `${file.split(".")[0]}_${index}`));
+    });
+  }
+  if (injectScript) {
+    scripts.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
+      async: true,
+      src: `${publicPath}${remoteEntry}`,
+      crossOrigin: "anonymous"
+    }, remoteEntry.split(".")[0]));
+    [
+      ...targetModule.assets.js.sync
+    ].forEach((file, index) => {
+      scripts.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
+        async: true,
+        src: `${publicPath}${file}`,
+        crossOrigin: "anonymous"
+      }, `${file.split(".")[0]}_${index}`));
     });
   }
-  return links;
+  return [
+    ...scripts,
+    ...links
+  ];
 }
 function MFReactComponent(props) {
   const { loading = "loading...", id, fallback } = props;
   const Component = /* @__PURE__ */ import_react.default.lazy(() => (0, import_runtime.loadRemote)(id).then((mod) => {
-    const links = collectLinks(id);
+    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)("div", {
+      default: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
         children: [
-          links,
+          assets,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Com, {})
         ]
       })
@@ -127,5 +174,5 @@ function MFReactComponent(props) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MFReactComponent,
-  collectLinks
+  collectAssets
 });

package/dist/cjs/runtime/index.js

@@ -20,7 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var runtime_exports = {};
 __export(runtime_exports, {
   MFReactComponent: () => import_MFReactComponent.MFReactComponent,
-  collectLinks: () => import_MFReactComponent.collectLinks
+  collectAssets: () => import_MFReactComponent.collectAssets
 });
 module.exports = __toCommonJS(runtime_exports);
 __reExport(runtime_exports, require("@module-federation/enhanced/runtime"), module.exports);
@@ -28,6 +28,6 @@ var import_MFReactComponent = require("./MFReactComponent");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MFReactComponent,
-  collectLinks,
+  collectAssets,
   ...require("@module-federation/enhanced/runtime")
 });

package/dist/esm/runtime/MFReactComponent.js

@@ -1,7 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
 function getLoadedRemoteInfos(instance, id) {
@@ -19,56 +19,92 @@ function getLoadedRemoteInfos(instance, id) {
     expose
   });
 }
-function collectLinks(id) {
-  var links = [];
+function getTargetModuleInfo(id) {
   var instance = getInstance();
   if (!instance) {
-    return links;
+    return;
   }
   var loadedRemoteInfo = getLoadedRemoteInfos(instance, id);
   if (!loadedRemoteInfo) {
-    return links;
+    return;
   }
   var snapshot = loadedRemoteInfo.snapshot;
   if (!snapshot) {
-    return links;
+    return;
   }
   var publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
   if (!publicPath) {
-    return links;
+    return;
   }
   var modules = "modules" in snapshot ? snapshot.modules : [];
-  if (modules) {
-    var targetModule = modules.find(function(m) {
-      return m.modulePath === loadedRemoteInfo.expose;
-    });
-    if (!targetModule) {
-      return links;
-    }
+  var targetModule = modules.find(function(m) {
+    return m.modulePath === loadedRemoteInfo.expose;
+  });
+  if (!targetModule) {
+    return;
+  }
+  var remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
+  if (!remoteEntry) {
+    return;
+  }
+  return {
+    module: targetModule,
+    publicPath,
+    remoteEntry
+  };
+}
+function collectAssets(options) {
+  var id = options.id, _options_injectLink = options.injectLink, injectLink = _options_injectLink === void 0 ? true : _options_injectLink, _options_injectScript = options.injectScript, injectScript = _options_injectScript === void 0 ? true : _options_injectScript;
+  var links = [];
+  var scripts = [];
+  var instance = getInstance();
+  if (!instance || !injectLink && !injectScript) {
+    return _to_consumable_array(scripts).concat(_to_consumable_array(links));
+  }
+  var moduleAndPublicPath = getTargetModuleInfo(id);
+  if (!moduleAndPublicPath) {
+    return _to_consumable_array(scripts).concat(_to_consumable_array(links));
+  }
+  var targetModule = moduleAndPublicPath.module, publicPath = moduleAndPublicPath.publicPath, remoteEntry = moduleAndPublicPath.remoteEntry;
+  if (injectLink) {
     _to_consumable_array(targetModule.assets.css.sync).concat(_to_consumable_array(targetModule.assets.css.async)).forEach(function(file, index) {
       links.push(/* @__PURE__ */ _jsx("link", {
         href: "".concat(publicPath).concat(file),
         rel: "stylesheet",
         type: "text/css"
-      }, index));
+      }, "".concat(file.split(".")[0], "_").concat(index)));
+    });
+  }
+  if (injectScript) {
+    scripts.push(/* @__PURE__ */ _jsx("script", {
+      async: true,
+      src: "".concat(publicPath).concat(remoteEntry),
+      crossOrigin: "anonymous"
+    }, remoteEntry.split(".")[0]));
+    _to_consumable_array(targetModule.assets.js.sync).forEach(function(file, index) {
+      scripts.push(/* @__PURE__ */ _jsx("script", {
+        async: true,
+        src: "".concat(publicPath).concat(file),
+        crossOrigin: "anonymous"
+      }, "".concat(file.split(".")[0], "_").concat(index)));
     });
   }
-  return links;
+  return _to_consumable_array(scripts).concat(_to_consumable_array(links));
 }
 function MFReactComponent(props) {
   var _props_loading = props.loading, loading = _props_loading === void 0 ? "loading..." : _props_loading, id = props.id, fallback = props.fallback;
   var Component = /* @__PURE__ */ React.lazy(function() {
     return loadRemote(id).then(function(mod) {
-      var links = collectLinks(id);
+      var assets = collectAssets(props);
       if (!mod) {
         throw new Error("load remote failed");
       }
       var Com = typeof mod === "object" ? "default" in mod ? mod.default : mod : mod;
       return {
         default: function() {
-          return /* @__PURE__ */ _jsxs("div", {
+          return /* @__PURE__ */ _jsxs(_Fragment, {
             children: [
-              links,
+              assets,
               /* @__PURE__ */ _jsx(Com, {})
             ]
           });
@@ -101,5 +137,5 @@ function MFReactComponent(props) {
 }
 export {
   MFReactComponent,
-  collectLinks
+  collectAssets
 };

package/dist/esm/runtime/index.js

@@ -1,6 +1,6 @@
 export * from "@module-federation/enhanced/runtime";
-import { MFReactComponent, collectLinks } from "./MFReactComponent";
+import { MFReactComponent, collectAssets } from "./MFReactComponent";
 export {
   MFReactComponent,
-  collectLinks
+  collectAssets
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
 function getLoadedRemoteInfos(instance, id) {
@@ -17,30 +17,58 @@ function getLoadedRemoteInfos(instance, id) {
     expose
   };
 }
-function collectLinks(id) {
-  const links = [];
+function getTargetModuleInfo(id) {
   const instance = getInstance();
   if (!instance) {
-    return links;
+    return;
   }
   const loadedRemoteInfo = getLoadedRemoteInfos(instance, id);
   if (!loadedRemoteInfo) {
-    return links;
+    return;
   }
   const snapshot = loadedRemoteInfo.snapshot;
   if (!snapshot) {
-    return links;
+    return;
   }
   const publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
   if (!publicPath) {
-    return links;
+    return;
   }
   const modules = "modules" in snapshot ? snapshot.modules : [];
-  if (modules) {
-    const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
-    if (!targetModule) {
-      return links;
-    }
+  const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
+  if (!targetModule) {
+    return;
+  }
+  const remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
+  if (!remoteEntry) {
+    return;
+  }
+  return {
+    module: targetModule,
+    publicPath,
+    remoteEntry
+  };
+}
+function collectAssets(options) {
+  const { id, injectLink = true, injectScript = true } = options;
+  const links = [];
+  const scripts = [];
+  const instance = getInstance();
+  if (!instance || !injectLink && !injectScript) {
+    return [
+      ...scripts,
+      ...links
+    ];
+  }
+  const moduleAndPublicPath = getTargetModuleInfo(id);
+  if (!moduleAndPublicPath) {
+    return [
+      ...scripts,
+      ...links
+    ];
+  }
+  const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
+  if (injectLink) {
     [
       ...targetModule.assets.css.sync,
       ...targetModule.assets.css.async
@@ -49,23 +77,42 @@ function collectLinks(id) {
         href: `${publicPath}${file}`,
         rel: "stylesheet",
         type: "text/css"
-      }, index));
+      }, `${file.split(".")[0]}_${index}`));
+    });
+  }
+  if (injectScript) {
+    scripts.push(/* @__PURE__ */ _jsx("script", {
+      async: true,
+      src: `${publicPath}${remoteEntry}`,
+      crossOrigin: "anonymous"
+    }, remoteEntry.split(".")[0]));
+    [
+      ...targetModule.assets.js.sync
+    ].forEach((file, index) => {
+      scripts.push(/* @__PURE__ */ _jsx("script", {
+        async: true,
+        src: `${publicPath}${file}`,
+        crossOrigin: "anonymous"
+      }, `${file.split(".")[0]}_${index}`));
     });
   }
-  return links;
+  return [
+    ...scripts,
+    ...links
+  ];
 }
 function MFReactComponent(props) {
   const { loading = "loading...", id, fallback } = props;
   const Component = /* @__PURE__ */ React.lazy(() => loadRemote(id).then((mod) => {
-    const links = collectLinks(id);
+    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("div", {
+      default: () => /* @__PURE__ */ _jsxs(_Fragment, {
         children: [
-          links,
+          assets,
           /* @__PURE__ */ _jsx(Com, {})
         ]
       })
@@ -92,5 +139,5 @@ function MFReactComponent(props) {
 }
 export {
   MFReactComponent,
-  collectLinks
+  collectAssets
 };

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

@@ -1,6 +1,6 @@
 export * from "@module-federation/enhanced/runtime";
-import { MFReactComponent, collectLinks } from "./MFReactComponent";
+import { MFReactComponent, collectAssets } from "./MFReactComponent";
 export {
   MFReactComponent,
-  collectLinks
+  collectAssets
 };

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

@@ -1,9 +1,11 @@
 import React from 'react';
 interface IProps {
     id: string;
+    injectScript?: boolean;
+    injectLink?: boolean;
     loading?: React.ReactNode;
     fallback?: ((err: Error) => React.FC | React.ReactElement) | React.FC | React.ReactElement;
 }
-declare function collectLinks(id: string): React.ReactNode[];
+declare function collectAssets(options: IProps): React.ReactNode[];
 declare function MFReactComponent(props: IProps): React.JSX.Element;
-export { MFReactComponent, collectLinks };
+export { MFReactComponent, collectAssets };

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

@@ -1,2 +1,2 @@
 export * from '@module-federation/enhanced/runtime';
-export { MFReactComponent, collectLinks } from './MFReactComponent';
+export { MFReactComponent, collectAssets } from './MFReactComponent';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/modern-js",
-  "version": "0.0.0-next-20240529103203",
+  "version": "0.0.0-next-20240530085615",
   "files": [
     "dist/",
     "types.d.ts",
@@ -46,10 +46,10 @@
     "@modern-js/utils": "^2.49.2",
     "@modern-js/node-bundle-require": "^2.49.2",
     "node-fetch": "~3.3.0",
-    "@module-federation/sdk": "0.0.0-next-20240529103203",
-    "@module-federation/enhanced": "0.0.0-next-20240529103203",
-    "@module-federation/node": "0.0.0-next-20240529103203",
-    "@module-federation/dts-plugin": "0.0.0-next-20240529103203"
+    "@module-federation/sdk": "0.0.0-next-20240530085615",
+    "@module-federation/enhanced": "0.0.0-next-20240530085615",
+    "@module-federation/node": "0.0.0-next-20240530085615",
+    "@module-federation/dts-plugin": "0.0.0-next-20240530085615"
   },
   "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-20240529103203"
+    "@module-federation/manifest": "0.0.0-next-20240530085615"
   },
   "peerDependencies": {
     "react": ">=17",