@module-federation/bridge-react 2.8.0 → 2.8.2

package/dist/base.cjs.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const createHelpers = require("./createHelpers-19BP0xtB.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-FKp6nQa-.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DeTbkGlM.js");
 const lazyUtils = require("./utils-5dGErM3C.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-D66kL1aM.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 const createRemoteAppComponent = createHelpers.createRemoteAppComponentFactory(createHelpers.RemoteAppWrapper);
 const createRemoteComponent = createHelpers.createDeprecatedRemoteComponentFactory(
   createRemoteAppComponent

package/dist/base.es.js

@@ -1,9 +1,9 @@
 import { c as createRemoteAppComponentFactory, a as createDeprecatedRemoteComponentFactory, R as RemoteAppWrapper } from "./createHelpers-BSHeKyd-.mjs";
 import { b } from "./createHelpers-BSHeKyd-.mjs";
-import { a, c, b as b2, l } from "./lazy-load-component-plugin-DEu-DfZt.mjs";
+import { a, c, b as b2, l } from "./lazy-load-component-plugin-DQFjLSsW.mjs";
 import { C, a as a2, E, c as c2, b as b3, d, g, r, s } from "./utils-BBP3hEeV.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-CTZuFBqh.mjs";
+import { p } from "./prefetch-BJZbf9LF.mjs";
 const createRemoteAppComponent = createRemoteAppComponentFactory(RemoteAppWrapper);
 const createRemoteComponent = createDeprecatedRemoteComponentFactory(
   createRemoteAppComponent

package/dist/data-fetch-utils.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lazyUtils = require("./utils-5dGErM3C.js");
-const prefetch = require("./prefetch-D66kL1aM.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 async function callDataFetch() {
   const dataFetch = globalThis[lazyUtils.DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/data-fetch-utils.es.js

@@ -1,7 +1,7 @@
 import { y as DATA_FETCH_FUNCTION } from "./utils-BBP3hEeV.mjs";
 import { C, a, c, b, d, g, r } from "./utils-BBP3hEeV.mjs";
-import { d as dataFetchFunction } from "./prefetch-CTZuFBqh.mjs";
-import { i, p } from "./prefetch-CTZuFBqh.mjs";
+import { d as dataFetchFunction } from "./prefetch-BJZbf9LF.mjs";
+import { i, p } from "./prefetch-BJZbf9LF.mjs";
 async function callDataFetch() {
   const dataFetch = globalThis[DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/data-fetch.cjs.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-FKp6nQa-.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DeTbkGlM.js");
 const lazyUtils = require("./utils-5dGErM3C.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-D66kL1aM.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 exports.autoFetchDataPlugin = lazyLoadComponentPlugin.autoFetchData;
 exports.collectSSRAssets = lazyLoadComponentPlugin.collectSSRAssets;
 exports.createLazyComponent = lazyLoadComponentPlugin.createLazyComponent;

package/dist/data-fetch.es.js

@@ -1,7 +1,7 @@
-import { a, c, b, l } from "./lazy-load-component-plugin-DEu-DfZt.mjs";
+import { a, c, b, l } from "./lazy-load-component-plugin-DQFjLSsW.mjs";
 import { C, a as a2, E, c as c2, b as b2, d, f, g, r, s } from "./utils-BBP3hEeV.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-CTZuFBqh.mjs";
+import { p } from "./prefetch-BJZbf9LF.mjs";
 export {
   C as CacheSize,
   a2 as CacheTime,

package/dist/index.cjs.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const createHelpers = require("./createHelpers-19BP0xtB.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-FKp6nQa-.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DeTbkGlM.js");
 const lazyUtils = require("./utils-5dGErM3C.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
 const React = require("react");
 const ReactRouterDOM = require("react-router-dom");
 const index = require("./index-DbjGCKOr.js");
-const prefetch = require("./prefetch-D66kL1aM.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {

package/dist/index.es.js

@@ -1,12 +1,12 @@
 import { R as RemoteAppWrapper, c as createRemoteAppComponentFactory, a as createDeprecatedRemoteComponentFactory } from "./createHelpers-BSHeKyd-.mjs";
 import { b } from "./createHelpers-BSHeKyd-.mjs";
-import { a, c, b as b2, l } from "./lazy-load-component-plugin-DEu-DfZt.mjs";
+import { a, c, b as b2, l } from "./lazy-load-component-plugin-DQFjLSsW.mjs";
 import { C, a as a2, E, c as c2, b as b3, d, g, r, s } from "./utils-BBP3hEeV.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
 import React__default, { forwardRef, useContext, useState, useEffect } from "react";
 import * as ReactRouterDOM from "react-router-dom";
 import { p as pathJoin, L as LoggerInstance } from "./index-Bs2NxD2z.mjs";
-import { p } from "./prefetch-CTZuFBqh.mjs";
+import { p } from "./prefetch-BJZbf9LF.mjs";
 function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);

package/dist/lazy/HydratedStylesheetAssets.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function HydratedStylesheetAssets({ hrefs }: {
+    hrefs: string[];
+}): React.JSX.Element;

package/dist/lazy/createLazyComponent.d.ts

@@ -23,6 +23,6 @@ export type CreateLazyComponentOptions<T, E extends keyof T> = {
 type ReactKey = {
     key?: React.Key | null;
 };
-export declare function collectSSRAssets(options: IProps): ReactNode[];
+export declare function collectSSRAssets(options: IProps): React.ReactNode[];
 export declare function createLazyComponent<T, E extends keyof T>(options: CreateLazyComponentOptions<T, E>): (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? ReactKey : Parameters<T[E]>[0] & ReactKey : ReactKey) => React.JSX.Element;
 export {};

package/dist/{lazy-load-component-plugin-DEu-DfZt.mjs → lazy-load-component-plugin-DQFjLSsW.mjs}

@@ -1,6 +1,6 @@
-import { i as injectDataFetch, p as prefetch } from "./prefetch-CTZuFBqh.mjs";
+import { i as injectDataFetch, p as prefetch } from "./prefetch-BJZbf9LF.mjs";
 import { i as initDataFetchMap, k as isDataLoaderExpose, m as getDataFetchInfo, n as getDataFetchMapKey, l as logger, o as getDataFetchItem, p as DATA_FETCH_CLIENT_SUFFIX, q as MF_DATA_FETCH_TYPE, t as isCSROnly, M as MF_DATA_FETCH_STATUS, j as loadDataFetchModule, e as getDataFetchMap, u as isServerEnv, v as getDataFetchIdWithErrorMsgs, w as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, x as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, y as DATA_FETCH_FUNCTION, z as getLoadedRemoteInfos, h as fetchData$1, A as setDataFetchItemLoadedStatus, F as FS_HREF } from "./utils-BBP3hEeV.mjs";
-import React__default, { useRef, useState, Suspense, useEffect } from "react";
+import React__default, { useRef, useState, useEffect, Suspense } from "react";
 const autoFetchData = () => {
   initDataFetchMap();
   injectDataFetch();
@@ -69,6 +69,142 @@ const autoFetchData = () => {
     }
   };
 };
+const EMPTY_HREFS = /* @__PURE__ */ new Set();
+const stylesheetStores = /* @__PURE__ */ new WeakMap();
+function isActiveStylesheet(link) {
+  const rel = link.rel.toLowerCase().split(/\s+/u);
+  const media = link.media.trim().toLowerCase();
+  const type = link.type.trim().toLowerCase().split(";", 1)[0].trim();
+  return rel.includes("stylesheet") && !rel.includes("alternate") && !link.disabled && !link.hasAttribute("disabled") && (!media || media === "all") && (!type || type === "text/css");
+}
+function collectHeadStylesheetHrefs(document) {
+  var _a;
+  const hrefs = /* @__PURE__ */ new Set();
+  (_a = document.head) == null ? void 0 : _a.querySelectorAll("link[href]").forEach((link) => {
+    if (isActiveStylesheet(link)) {
+      hrefs.add(link.href);
+    }
+  });
+  return hrefs;
+}
+function haveSameHrefs(current, next) {
+  if (current.size !== next.size) {
+    return false;
+  }
+  for (const href of current) {
+    if (!next.has(href)) {
+      return false;
+    }
+  }
+  return true;
+}
+function observeHead(store) {
+  store.observer.disconnect();
+  const { document, head, observer } = store;
+  if (head) {
+    observer.observe(head, {
+      attributes: true,
+      attributeFilter: ["disabled", "href", "media", "rel", "type"],
+      childList: true,
+      subtree: true
+    });
+  }
+  if (document.documentElement) {
+    observer.observe(document.documentElement, { childList: true });
+  }
+}
+function refreshHeadStylesheets(store) {
+  if (!store.subscribers.size) {
+    return;
+  }
+  const head = store.document.head;
+  if (head !== store.head) {
+    store.head = head;
+    observeHead(store);
+  }
+  const hrefs = collectHeadStylesheetHrefs(store.document);
+  if (haveSameHrefs(store.hrefs, hrefs)) {
+    return;
+  }
+  store.hrefs = hrefs;
+  store.subscribers.forEach((subscriber) => subscriber(hrefs));
+}
+function getStylesheetStore(document) {
+  var _a;
+  const current = stylesheetStores.get(document);
+  if (current) {
+    return current;
+  }
+  const MutationObserver = ((_a = document.defaultView) == null ? void 0 : _a.MutationObserver) ?? globalThis.MutationObserver;
+  let store;
+  const observer = new MutationObserver(() => refreshHeadStylesheets(store));
+  store = {
+    document,
+    head: document.head,
+    hrefs: collectHeadStylesheetHrefs(document),
+    observer,
+    subscribers: /* @__PURE__ */ new Set()
+  };
+  observeHead(store);
+  stylesheetStores.set(document, store);
+  return store;
+}
+function subscribeToHeadStylesheets(document, subscriber) {
+  const store = getStylesheetStore(document);
+  let subscribed = true;
+  store.subscribers.add(subscriber);
+  subscriber(store.hrefs);
+  return () => {
+    if (!subscribed) {
+      return;
+    }
+    subscribed = false;
+    store.subscribers.delete(subscriber);
+    if (!store.subscribers.size) {
+      store.observer.disconnect();
+      if (stylesheetStores.get(document) === store) {
+        stylesheetStores.delete(document);
+      }
+    }
+  };
+}
+function resolveHref(href, document) {
+  try {
+    return new URL(href, document.baseURI).href;
+  } catch {
+    return href;
+  }
+}
+function HydratedStylesheetAssets({ hrefs }) {
+  const firstLinkRef = useRef(null);
+  const ownerDocumentRef = useRef(null);
+  const [headHrefs, setHeadHrefs] = useState(EMPTY_HREFS);
+  useEffect(() => {
+    var _a;
+    const link = firstLinkRef.current;
+    if (!link) {
+      return;
+    }
+    const ownerDocument = link.ownerDocument;
+    ownerDocumentRef.current = ownerDocument;
+    if (link.getRootNode() !== ownerDocument || ((_a = ownerDocument.head) == null ? void 0 : _a.contains(link))) {
+      return;
+    }
+    return subscribeToHeadStylesheets(ownerDocument, setHeadHrefs);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, hrefs.map(
+    (href, index) => ownerDocumentRef.current && headHrefs.has(resolveHref(href, ownerDocumentRef.current)) ? null : /* @__PURE__ */ React__default.createElement(
+      "link",
+      {
+        key: href,
+        ref: index === 0 ? firstLinkRef : void 0,
+        href,
+        rel: "stylesheet",
+        type: "text/css"
+      }
+    )
+  ));
+}
 function isPromise(obj) {
   return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
 }
@@ -235,65 +371,51 @@ function getTargetModuleInfo(id, instance) {
     remoteEntry
   };
 }
-function collectSSRAssets(options) {
+function collectSSRAssetDescriptors(options) {
   const {
     id,
     injectLink = true,
     injectScript = false
   } = typeof options === "string" ? { id: options } : options;
-  const links = [];
-  const scripts = [];
+  const stylesheetHrefs = [];
+  const scriptSrcs = [];
   const instance = options.instance;
   if (!instance || !injectLink && !injectScript) {
-    return [...scripts, ...links];
+    return { scriptSrcs, stylesheetHrefs };
   }
   const moduleAndPublicPath = getTargetModuleInfo(id, instance);
   if (!moduleAndPublicPath) {
-    return [...scripts, ...links];
+    return { scriptSrcs, stylesheetHrefs };
   }
   const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
   if (injectLink) {
-    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file, index) => {
-      links.push(
-        /* @__PURE__ */ React__default.createElement(
-          "link",
-          {
-            key: `${file.split(".")[0]}_${index}`,
-            href: `${publicPath}${file}`,
-            rel: "stylesheet",
-            type: "text/css"
-          }
-        )
-      );
+    const seenStylesheetHrefs = /* @__PURE__ */ new Set();
+    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file) => {
+      const href = `${publicPath}${file}`;
+      if (seenStylesheetHrefs.has(href)) {
+        return;
+      }
+      seenStylesheetHrefs.add(href);
+      stylesheetHrefs.push(href);
     });
   }
   if (injectScript) {
-    scripts.push(
-      /* @__PURE__ */ React__default.createElement(
-        "script",
-        {
-          async: true,
-          key: remoteEntry.split(".")[0],
-          src: `${publicPath}${remoteEntry}`,
-          crossOrigin: "anonymous"
-        }
-      )
-    );
-    [...targetModule.assets.js.sync].sort().forEach((file, index) => {
-      scripts.push(
-        /* @__PURE__ */ React__default.createElement(
-          "script",
-          {
-            key: `${file.split(".")[0]}_${index}`,
-            async: true,
-            src: `${publicPath}${file}`,
-            crossOrigin: "anonymous"
-          }
-        )
-      );
+    scriptSrcs.push(`${publicPath}${remoteEntry}`);
+    [...targetModule.assets.js.sync].sort().forEach((file) => {
+      scriptSrcs.push(`${publicPath}${file}`);
     });
   }
-  return [...scripts, ...links];
+  return { scriptSrcs, stylesheetHrefs };
+}
+function renderScriptAssets(scriptSrcs) {
+  return scriptSrcs.map((src) => /* @__PURE__ */ React__default.createElement("script", { key: src, async: true, src, crossOrigin: "anonymous" }));
+}
+function collectSSRAssets(options) {
+  const { scriptSrcs, stylesheetHrefs } = collectSSRAssetDescriptors(options);
+  return [
+    ...renderScriptAssets(scriptSrcs),
+    ...stylesheetHrefs.map((href) => /* @__PURE__ */ React__default.createElement("link", { key: href, href, rel: "stylesheet", type: "text/css" }))
+  ];
 }
 function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
   var _a;
@@ -407,12 +529,16 @@ function createLazyComponent(options) {
       { name: instance.name, version: instance == null ? void 0 : instance.options.version }
     ) : void 0;
     logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
-    const assets = collectSSRAssets({
+    const { scriptSrcs, stylesheetHrefs } = collectSSRAssetDescriptors({
       id: moduleId,
       instance,
       injectLink,
       injectScript
     });
+    const assets = [
+      ...renderScriptAssets(scriptSrcs),
+      /* @__PURE__ */ React__default.createElement(HydratedStylesheetAssets, { key: "stylesheets", hrefs: stylesheetHrefs })
+    ];
     const Com = m[exportName];
     if (exportName in m && typeof Com === "function") {
       return {

package/dist/{lazy-load-component-plugin-FKp6nQa-.js → lazy-load-component-plugin-DeTbkGlM.js}

@@ -1,5 +1,5 @@
 "use strict";
-const prefetch = require("./prefetch-D66kL1aM.js");
+const prefetch = require("./prefetch-CfMDdqO-.js");
 const lazyUtils = require("./utils-5dGErM3C.js");
 const React = require("react");
 const autoFetchData = () => {
@@ -70,6 +70,142 @@ const autoFetchData = () => {
     }
   };
 };
+const EMPTY_HREFS = /* @__PURE__ */ new Set();
+const stylesheetStores = /* @__PURE__ */ new WeakMap();
+function isActiveStylesheet(link) {
+  const rel = link.rel.toLowerCase().split(/\s+/u);
+  const media = link.media.trim().toLowerCase();
+  const type = link.type.trim().toLowerCase().split(";", 1)[0].trim();
+  return rel.includes("stylesheet") && !rel.includes("alternate") && !link.disabled && !link.hasAttribute("disabled") && (!media || media === "all") && (!type || type === "text/css");
+}
+function collectHeadStylesheetHrefs(document) {
+  var _a;
+  const hrefs = /* @__PURE__ */ new Set();
+  (_a = document.head) == null ? void 0 : _a.querySelectorAll("link[href]").forEach((link) => {
+    if (isActiveStylesheet(link)) {
+      hrefs.add(link.href);
+    }
+  });
+  return hrefs;
+}
+function haveSameHrefs(current, next) {
+  if (current.size !== next.size) {
+    return false;
+  }
+  for (const href of current) {
+    if (!next.has(href)) {
+      return false;
+    }
+  }
+  return true;
+}
+function observeHead(store) {
+  store.observer.disconnect();
+  const { document, head, observer } = store;
+  if (head) {
+    observer.observe(head, {
+      attributes: true,
+      attributeFilter: ["disabled", "href", "media", "rel", "type"],
+      childList: true,
+      subtree: true
+    });
+  }
+  if (document.documentElement) {
+    observer.observe(document.documentElement, { childList: true });
+  }
+}
+function refreshHeadStylesheets(store) {
+  if (!store.subscribers.size) {
+    return;
+  }
+  const head = store.document.head;
+  if (head !== store.head) {
+    store.head = head;
+    observeHead(store);
+  }
+  const hrefs = collectHeadStylesheetHrefs(store.document);
+  if (haveSameHrefs(store.hrefs, hrefs)) {
+    return;
+  }
+  store.hrefs = hrefs;
+  store.subscribers.forEach((subscriber) => subscriber(hrefs));
+}
+function getStylesheetStore(document) {
+  var _a;
+  const current = stylesheetStores.get(document);
+  if (current) {
+    return current;
+  }
+  const MutationObserver = ((_a = document.defaultView) == null ? void 0 : _a.MutationObserver) ?? globalThis.MutationObserver;
+  let store;
+  const observer = new MutationObserver(() => refreshHeadStylesheets(store));
+  store = {
+    document,
+    head: document.head,
+    hrefs: collectHeadStylesheetHrefs(document),
+    observer,
+    subscribers: /* @__PURE__ */ new Set()
+  };
+  observeHead(store);
+  stylesheetStores.set(document, store);
+  return store;
+}
+function subscribeToHeadStylesheets(document, subscriber) {
+  const store = getStylesheetStore(document);
+  let subscribed = true;
+  store.subscribers.add(subscriber);
+  subscriber(store.hrefs);
+  return () => {
+    if (!subscribed) {
+      return;
+    }
+    subscribed = false;
+    store.subscribers.delete(subscriber);
+    if (!store.subscribers.size) {
+      store.observer.disconnect();
+      if (stylesheetStores.get(document) === store) {
+        stylesheetStores.delete(document);
+      }
+    }
+  };
+}
+function resolveHref(href, document) {
+  try {
+    return new URL(href, document.baseURI).href;
+  } catch {
+    return href;
+  }
+}
+function HydratedStylesheetAssets({ hrefs }) {
+  const firstLinkRef = React.useRef(null);
+  const ownerDocumentRef = React.useRef(null);
+  const [headHrefs, setHeadHrefs] = React.useState(EMPTY_HREFS);
+  React.useEffect(() => {
+    var _a;
+    const link = firstLinkRef.current;
+    if (!link) {
+      return;
+    }
+    const ownerDocument = link.ownerDocument;
+    ownerDocumentRef.current = ownerDocument;
+    if (link.getRootNode() !== ownerDocument || ((_a = ownerDocument.head) == null ? void 0 : _a.contains(link))) {
+      return;
+    }
+    return subscribeToHeadStylesheets(ownerDocument, setHeadHrefs);
+  }, []);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hrefs.map(
+    (href, index) => ownerDocumentRef.current && headHrefs.has(resolveHref(href, ownerDocumentRef.current)) ? null : /* @__PURE__ */ React.createElement(
+      "link",
+      {
+        key: href,
+        ref: index === 0 ? firstLinkRef : void 0,
+        href,
+        rel: "stylesheet",
+        type: "text/css"
+      }
+    )
+  ));
+}
 function isPromise(obj) {
   return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
 }
@@ -236,65 +372,51 @@ function getTargetModuleInfo(id, instance) {
     remoteEntry
   };
 }
-function collectSSRAssets(options) {
+function collectSSRAssetDescriptors(options) {
   const {
     id,
     injectLink = true,
     injectScript = false
   } = typeof options === "string" ? { id: options } : options;
-  const links = [];
-  const scripts = [];
+  const stylesheetHrefs = [];
+  const scriptSrcs = [];
   const instance = options.instance;
   if (!instance || !injectLink && !injectScript) {
-    return [...scripts, ...links];
+    return { scriptSrcs, stylesheetHrefs };
   }
   const moduleAndPublicPath = getTargetModuleInfo(id, instance);
   if (!moduleAndPublicPath) {
-    return [...scripts, ...links];
+    return { scriptSrcs, stylesheetHrefs };
   }
   const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
   if (injectLink) {
-    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file, index) => {
-      links.push(
-        /* @__PURE__ */ React.createElement(
-          "link",
-          {
-            key: `${file.split(".")[0]}_${index}`,
-            href: `${publicPath}${file}`,
-            rel: "stylesheet",
-            type: "text/css"
-          }
-        )
-      );
+    const seenStylesheetHrefs = /* @__PURE__ */ new Set();
+    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file) => {
+      const href = `${publicPath}${file}`;
+      if (seenStylesheetHrefs.has(href)) {
+        return;
+      }
+      seenStylesheetHrefs.add(href);
+      stylesheetHrefs.push(href);
     });
   }
   if (injectScript) {
-    scripts.push(
-      /* @__PURE__ */ React.createElement(
-        "script",
-        {
-          async: true,
-          key: remoteEntry.split(".")[0],
-          src: `${publicPath}${remoteEntry}`,
-          crossOrigin: "anonymous"
-        }
-      )
-    );
-    [...targetModule.assets.js.sync].sort().forEach((file, index) => {
-      scripts.push(
-        /* @__PURE__ */ React.createElement(
-          "script",
-          {
-            key: `${file.split(".")[0]}_${index}`,
-            async: true,
-            src: `${publicPath}${file}`,
-            crossOrigin: "anonymous"
-          }
-        )
-      );
+    scriptSrcs.push(`${publicPath}${remoteEntry}`);
+    [...targetModule.assets.js.sync].sort().forEach((file) => {
+      scriptSrcs.push(`${publicPath}${file}`);
     });
   }
-  return [...scripts, ...links];
+  return { scriptSrcs, stylesheetHrefs };
+}
+function renderScriptAssets(scriptSrcs) {
+  return scriptSrcs.map((src) => /* @__PURE__ */ React.createElement("script", { key: src, async: true, src, crossOrigin: "anonymous" }));
+}
+function collectSSRAssets(options) {
+  const { scriptSrcs, stylesheetHrefs } = collectSSRAssetDescriptors(options);
+  return [
+    ...renderScriptAssets(scriptSrcs),
+    ...stylesheetHrefs.map((href) => /* @__PURE__ */ React.createElement("link", { key: href, href, rel: "stylesheet", type: "text/css" }))
+  ];
 }
 function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
   var _a;
@@ -408,12 +530,16 @@ function createLazyComponent(options) {
       { name: instance.name, version: instance == null ? void 0 : instance.options.version }
     ) : void 0;
     lazyUtils.logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
-    const assets = collectSSRAssets({
+    const { scriptSrcs, stylesheetHrefs } = collectSSRAssetDescriptors({
       id: moduleId,
       instance,
       injectLink,
       injectScript
     });
+    const assets = [
+      ...renderScriptAssets(scriptSrcs),
+      /* @__PURE__ */ React.createElement(HydratedStylesheetAssets, { key: "stylesheets", hrefs: stylesheetHrefs })
+    ];
     const Com = m[exportName];
     if (exportName in m && typeof Com === "function") {
       return {

package/dist/lazy-load-component-plugin.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-FKp6nQa-.js");
-require("./prefetch-D66kL1aM.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-DeTbkGlM.js");
+require("./prefetch-CfMDdqO-.js");
 exports.default = lazyLoadComponentPlugin.lazyLoadComponentPlugin;
 exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin.lazyLoadComponentPlugin;

package/dist/lazy-load-component-plugin.es.js

@@ -1,5 +1,5 @@
-import { l, l as l2 } from "./lazy-load-component-plugin-DEu-DfZt.mjs";
-import "./prefetch-CTZuFBqh.mjs";
+import { l, l as l2 } from "./lazy-load-component-plugin-DQFjLSsW.mjs";
+import "./prefetch-BJZbf9LF.mjs";
 export {
   l as default,
   l2 as lazyLoadComponentPlugin

package/dist/{prefetch-CTZuFBqh.mjs → prefetch-BJZbf9LF.mjs}

@@ -621,18 +621,46 @@ const runtimeDescMap = {
   ...runtimeDescMap
 });
 const importCallback = ".then(callbacks[0]).catch(callbacks[1])";
-async function loadEsmEntry({ entry, remoteEntryExports }) {
+const esmRemoteEntryLoadErrorMessages = [
+  "Failed to fetch dynamically imported module",
+  "Importing a module script failed",
+  "error loading dynamically imported module"
+];
+function isEsmRemoteEntryLoadError(err) {
+  if (!(err instanceof TypeError)) return false;
+  return esmRemoteEntryLoadErrorMessages.some((loadErrorMessage) => err.message.includes(loadErrorMessage));
+}
+function isEsmRemoteType(type) {
+  return type === "esm" || type === "module";
+}
+async function loadEsmEntry({ entry, remoteEntryExports, name, getEntryUrl }) {
   return new Promise((resolve, reject) => {
+    const rejectEntry = (loadError) => {
+      if (isEsmRemoteEntryLoadError(loadError)) {
+        const originalMsg = loadError instanceof Error ? loadError.message : String(loadError);
+        try {
+          error(RUNTIME_008, runtimeDescMap, {
+            remoteName: name,
+            resourceUrl: url
+          }, originalMsg);
+        } catch (runtimeError) {
+          reject(runtimeError);
+          return;
+        }
+      }
+      reject(loadError);
+    };
+    const url = getEntryUrl ? getEntryUrl(entry) : entry;
     try {
-      if (!remoteEntryExports) if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== "undefined") new Function("callbacks", `import("${entry}")${importCallback}`)([resolve, reject]);
+      if (!remoteEntryExports) if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== "undefined") new Function("callbacks", `import("${url}")${importCallback}`)([resolve, rejectEntry]);
       else import(
         /* webpackIgnore: true */
         /* @vite-ignore */
-        entry
-      ).then(resolve).catch(reject);
+        url
+      ).then(resolve).catch(rejectEntry);
       else resolve(remoteEntryExports);
     } catch (e) {
-      error(`Failed to load ESM entry from "${entry}". ${e instanceof Error ? e.message : String(e)}`);
+      error(`Failed to load ESM entry from "${url}". ${e instanceof Error ? e.message : String(e)}`);
     }
   });
 }
@@ -688,29 +716,25 @@ async function loadEntryScript({ name, globalName, entry, remoteInfo, loaderHook
 }
 async function loadEntryDom({ remoteInfo, remoteEntryExports, loaderHook, getEntryUrl, resourceContext }) {
   const { entry, entryGlobalName: globalName, name, type } = remoteInfo;
-  switch (type) {
-    case "esm":
-    case "module":
-      return loadEsmEntry({
-        entry,
-        remoteEntryExports
-      });
-    case "system":
-      return loadSystemJsEntry({
-        entry,
-        remoteEntryExports
-      });
-    default:
-      return loadEntryScript({
-        entry,
-        globalName,
-        name,
-        remoteInfo,
-        loaderHook,
-        getEntryUrl,
-        resourceContext
-      });
-  }
+  if (isEsmRemoteType(type)) return loadEsmEntry({
+    entry,
+    remoteEntryExports,
+    name,
+    getEntryUrl
+  });
+  if (type === "system") return loadSystemJsEntry({
+    entry,
+    remoteEntryExports
+  });
+  return loadEntryScript({
+    entry,
+    globalName,
+    name,
+    remoteInfo,
+    loaderHook,
+    getEntryUrl,
+    resourceContext
+  });
 }
 async function loadEntryNode({ remoteInfo, loaderHook, resourceContext }) {
   const { entry, entryGlobalName: globalName, name, type } = remoteInfo;
@@ -969,7 +993,7 @@ function preloadAssets(remoteInfo, host, assets, useLinkPreload = true, baseCont
       results.push(waitForRemoteEntryPreload(host, remoteInfo, entryRemoteInfo, createResourceContext(baseContext, "remoteEntry")));
     });
     if (useLinkPreload) {
-      const defaultAttrs = {
+      const defaultAttrs2 = {
         rel: "preload",
         as: "style"
       };
@@ -978,12 +1002,12 @@ function preloadAssets(remoteInfo, host, assets, useLinkPreload = true, baseCont
           host,
           remoteInfo,
           url: cssUrl,
-          attrs: defaultAttrs,
+          attrs: defaultAttrs2,
           context: createResourceContext(baseContext, "css")
         }));
       });
     } else {
-      const defaultAttrs = {
+      const defaultAttrs2 = {
         rel: "stylesheet",
         type: "text/css"
       };
@@ -992,41 +1016,39 @@ function preloadAssets(remoteInfo, host, assets, useLinkPreload = true, baseCont
           host,
           remoteInfo,
           url: cssUrl,
-          attrs: defaultAttrs,
+          attrs: defaultAttrs2,
           needDeleteLink: false,
           context: createResourceContext(baseContext, "css")
         }));
       });
     }
+    let preloadJsAsset = waitForScriptPreload;
+    let defaultAttrs = {
+      fetchpriority: "high",
+      type: "text/javascript"
+    };
     if (useLinkPreload) {
-      const defaultAttrs = {
+      preloadJsAsset = waitForLinkPreload;
+      defaultAttrs = {
         rel: "preload",
         as: "script"
       };
-      jsAssetsWithoutEntry.forEach((jsUrl) => {
-        results.push(waitForLinkPreload({
-          host,
-          remoteInfo,
-          url: jsUrl,
-          attrs: defaultAttrs,
-          context: createResourceContext(baseContext, "js")
-        }));
-      });
-    } else {
-      const defaultAttrs = {
-        fetchpriority: "high",
-        type: (remoteInfo == null ? void 0 : remoteInfo.type) === "module" ? "module" : "text/javascript"
+    } else if (isEsmRemoteType(remoteInfo.type)) {
+      preloadJsAsset = waitForLinkPreload;
+      defaultAttrs = {
+        rel: "modulepreload",
+        fetchpriority: "high"
       };
-      jsAssetsWithoutEntry.forEach((jsUrl) => {
-        results.push(waitForScriptPreload({
-          host,
-          remoteInfo,
-          url: jsUrl,
-          attrs: defaultAttrs,
-          context: createResourceContext(baseContext, "js")
-        }));
-      });
     }
+    jsAssetsWithoutEntry.forEach((jsUrl) => {
+      results.push(preloadJsAsset({
+        host,
+        remoteInfo,
+        url: jsUrl,
+        attrs: defaultAttrs,
+        context: createResourceContext(baseContext, "js")
+      }));
+    });
   }
   return Promise.all(results);
 }

package/dist/{prefetch-D66kL1aM.js → prefetch-CfMDdqO-.js}

@@ -622,18 +622,46 @@ const runtimeDescMap = {
   ...runtimeDescMap
 });
 const importCallback = ".then(callbacks[0]).catch(callbacks[1])";
-async function loadEsmEntry({ entry, remoteEntryExports }) {
+const esmRemoteEntryLoadErrorMessages = [
+  "Failed to fetch dynamically imported module",
+  "Importing a module script failed",
+  "error loading dynamically imported module"
+];
+function isEsmRemoteEntryLoadError(err) {
+  if (!(err instanceof TypeError)) return false;
+  return esmRemoteEntryLoadErrorMessages.some((loadErrorMessage) => err.message.includes(loadErrorMessage));
+}
+function isEsmRemoteType(type) {
+  return type === "esm" || type === "module";
+}
+async function loadEsmEntry({ entry, remoteEntryExports, name, getEntryUrl }) {
   return new Promise((resolve, reject) => {
+    const rejectEntry = (loadError) => {
+      if (isEsmRemoteEntryLoadError(loadError)) {
+        const originalMsg = loadError instanceof Error ? loadError.message : String(loadError);
+        try {
+          error(RUNTIME_008, runtimeDescMap, {
+            remoteName: name,
+            resourceUrl: url
+          }, originalMsg);
+        } catch (runtimeError) {
+          reject(runtimeError);
+          return;
+        }
+      }
+      reject(loadError);
+    };
+    const url = getEntryUrl ? getEntryUrl(entry) : entry;
     try {
-      if (!remoteEntryExports) if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== "undefined") new Function("callbacks", `import("${entry}")${importCallback}`)([resolve, reject]);
+      if (!remoteEntryExports) if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== "undefined") new Function("callbacks", `import("${url}")${importCallback}`)([resolve, rejectEntry]);
       else import(
         /* webpackIgnore: true */
         /* @vite-ignore */
-        entry
-      ).then(resolve).catch(reject);
+        url
+      ).then(resolve).catch(rejectEntry);
       else resolve(remoteEntryExports);
     } catch (e) {
-      error(`Failed to load ESM entry from "${entry}". ${e instanceof Error ? e.message : String(e)}`);
+      error(`Failed to load ESM entry from "${url}". ${e instanceof Error ? e.message : String(e)}`);
     }
   });
 }
@@ -689,29 +717,25 @@ async function loadEntryScript({ name, globalName, entry, remoteInfo, loaderHook
 }
 async function loadEntryDom({ remoteInfo, remoteEntryExports, loaderHook, getEntryUrl, resourceContext }) {
   const { entry, entryGlobalName: globalName, name, type } = remoteInfo;
-  switch (type) {
-    case "esm":
-    case "module":
-      return loadEsmEntry({
-        entry,
-        remoteEntryExports
-      });
-    case "system":
-      return loadSystemJsEntry({
-        entry,
-        remoteEntryExports
-      });
-    default:
-      return loadEntryScript({
-        entry,
-        globalName,
-        name,
-        remoteInfo,
-        loaderHook,
-        getEntryUrl,
-        resourceContext
-      });
-  }
+  if (isEsmRemoteType(type)) return loadEsmEntry({
+    entry,
+    remoteEntryExports,
+    name,
+    getEntryUrl
+  });
+  if (type === "system") return loadSystemJsEntry({
+    entry,
+    remoteEntryExports
+  });
+  return loadEntryScript({
+    entry,
+    globalName,
+    name,
+    remoteInfo,
+    loaderHook,
+    getEntryUrl,
+    resourceContext
+  });
 }
 async function loadEntryNode({ remoteInfo, loaderHook, resourceContext }) {
   const { entry, entryGlobalName: globalName, name, type } = remoteInfo;
@@ -970,7 +994,7 @@ function preloadAssets(remoteInfo, host, assets, useLinkPreload = true, baseCont
       results.push(waitForRemoteEntryPreload(host, remoteInfo, entryRemoteInfo, createResourceContext(baseContext, "remoteEntry")));
     });
     if (useLinkPreload) {
-      const defaultAttrs = {
+      const defaultAttrs2 = {
         rel: "preload",
         as: "style"
       };
@@ -979,12 +1003,12 @@ function preloadAssets(remoteInfo, host, assets, useLinkPreload = true, baseCont
           host,
           remoteInfo,
           url: cssUrl,
-          attrs: defaultAttrs,
+          attrs: defaultAttrs2,
           context: createResourceContext(baseContext, "css")
         }));
       });
     } else {
-      const defaultAttrs = {
+      const defaultAttrs2 = {
         rel: "stylesheet",
         type: "text/css"
       };
@@ -993,41 +1017,39 @@ function preloadAssets(remoteInfo, host, assets, useLinkPreload = true, baseCont
           host,
           remoteInfo,
           url: cssUrl,
-          attrs: defaultAttrs,
+          attrs: defaultAttrs2,
           needDeleteLink: false,
           context: createResourceContext(baseContext, "css")
         }));
       });
     }
+    let preloadJsAsset = waitForScriptPreload;
+    let defaultAttrs = {
+      fetchpriority: "high",
+      type: "text/javascript"
+    };
     if (useLinkPreload) {
-      const defaultAttrs = {
+      preloadJsAsset = waitForLinkPreload;
+      defaultAttrs = {
         rel: "preload",
         as: "script"
       };
-      jsAssetsWithoutEntry.forEach((jsUrl) => {
-        results.push(waitForLinkPreload({
-          host,
-          remoteInfo,
-          url: jsUrl,
-          attrs: defaultAttrs,
-          context: createResourceContext(baseContext, "js")
-        }));
-      });
-    } else {
-      const defaultAttrs = {
-        fetchpriority: "high",
-        type: (remoteInfo == null ? void 0 : remoteInfo.type) === "module" ? "module" : "text/javascript"
+    } else if (isEsmRemoteType(remoteInfo.type)) {
+      preloadJsAsset = waitForLinkPreload;
+      defaultAttrs = {
+        rel: "modulepreload",
+        fetchpriority: "high"
       };
-      jsAssetsWithoutEntry.forEach((jsUrl) => {
-        results.push(waitForScriptPreload({
-          host,
-          remoteInfo,
-          url: jsUrl,
-          attrs: defaultAttrs,
-          context: createResourceContext(baseContext, "js")
-        }));
-      });
     }
+    jsAssetsWithoutEntry.forEach((jsUrl) => {
+      results.push(preloadJsAsset({
+        host,
+        remoteInfo,
+        url: jsUrl,
+        attrs: defaultAttrs,
+        context: createResourceContext(baseContext, "js")
+      }));
+    });
   }
   return Promise.all(results);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -147,7 +147,7 @@
     }
   },
   "dependencies": {
-    "@module-federation/sdk": "2.8.0"
+    "@module-federation/sdk": "2.8.2"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -179,9 +179,9 @@
     "typescript": "7.0.2",
     "vite": "^5.4.21",
     "hono": "4.12.26",
-    "@module-federation/bridge-shared": "2.8.0",
-    "@module-federation/runtime": "2.8.0",
-    "@module-federation/runtime-core": "2.8.0"
+    "@module-federation/runtime": "2.8.2",
+    "@module-federation/bridge-shared": "2.8.2",
+    "@module-federation/runtime-core": "2.8.2"
   },
   "scripts": {
     "dev": "vite",