@module-federation/bridge-react 2.8.1 → 2.9.0

package/dist/{lazy-load-component-plugin-DBTxuAYf.js → lazy-load-component-plugin-CRqjWQ5N.js}

@@ -1,5 +1,5 @@
 "use strict";
-const prefetch = require("./prefetch-QJLnti7A.js");
+const prefetch = require("./prefetch-CMvAw8F3.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-DlagtX0O.mjs → lazy-load-component-plugin-CyRfqVSE.mjs}

@@ -1,6 +1,6 @@
-import { i as injectDataFetch, p as prefetch } from "./prefetch-BzCq3MT3.mjs";
+import { i as injectDataFetch, p as prefetch } from "./prefetch-xvZIEaJL.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.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-DBTxuAYf.js");
-require("./prefetch-QJLnti7A.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-CRqjWQ5N.js");
+require("./prefetch-CMvAw8F3.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-DlagtX0O.mjs";
-import "./prefetch-BzCq3MT3.mjs";
+import { l, l as l2 } from "./lazy-load-component-plugin-CyRfqVSE.mjs";
+import "./prefetch-xvZIEaJL.mjs";
 export {
   l as default,
   l2 as lazyLoadComponentPlugin