remote-components 0.0.42 → 0.0.43

package/dist/next/host/client/index.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(client_exports);
 var Image = __toESM(require("next/image"), 1);
 
 // src/react/index.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/shared/client/apply-origin.ts
@@ -624,6 +624,7 @@ function getBundleKey(bundle) {
 // src/shared/client/chunk-loader.ts
 function createChunkLoader(runtime) {
   return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
     const self = globalThis;
     const {
       bundle,
@@ -633,8 +634,14 @@ function createChunkLoader(runtime) {
       bundle: scriptBundle ?? "",
       id: chunkId
     };
+    logDebug(
+      "ChunkLoader",
+      `Parsed chunk - bundle: "${bundle}", path: "${path}", prefix: "${prefix}"`
+    );
     const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    logDebug("ChunkLoader", `Remote runtime: "${remoteRuntime}"`);
     if (remoteRuntime === RUNTIME_WEBPACK) {
+      logDebug("ChunkLoader", "Skipping chunk load - webpack runtime detected");
       return Promise.resolve(void 0);
     }
     const url = new URL(
@@ -645,14 +652,17 @@ function createChunkLoader(runtime) {
       self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
     ).href;
     if (url.endsWith(".css")) {
+      logDebug("ChunkLoader", `Skipping CSS file: "${url}"`);
       return;
     }
     if (!self.__remote_components_turbopack_chunk_loader_promise__) {
       self.__remote_components_turbopack_chunk_loader_promise__ = {};
     }
     if (self.__remote_components_turbopack_chunk_loader_promise__[url]) {
+      logDebug("ChunkLoader", `Returning cached promise for: "${url}"`);
       return self.__remote_components_turbopack_chunk_loader_promise__[url];
     }
+    logDebug("ChunkLoader", `Fetching chunk from: "${url}"`);
     self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
       fetch(url).then((res) => res.text()).then((code) => {
         if (code.includes("globalThis.TURBOPACK")) {
@@ -664,7 +674,12 @@ function createChunkLoader(runtime) {
   };
 }
 async function handleTurbopackChunk(code, bundle, url) {
+  logDebug(
+    "ChunkLoader",
+    `Handling Turbopack chunk - bundle: "${bundle}", url: "${url}"`
+  );
   if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
+    logDebug("ChunkLoader", `Skipping worker chunk: "${url}"`);
     const preloadLinks = document.querySelectorAll(
       `link[rel="preload"][href="${new URL(url).pathname}"]`
     );
@@ -673,6 +688,7 @@ async function handleTurbopackChunk(code, bundle, url) {
   }
   const self = globalThis;
   const bundleKey = getBundleKey(bundle);
+  logDebug("ChunkLoader", `Bundle key: "${bundleKey}"`);
   const transformedCode = code.replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(
     /TURBOPACK_WORKER_LOCATION/g,
     `TURBOPACK_WORKER_LOCATION_${bundleKey}`
@@ -692,6 +708,7 @@ async function handleTurbopackChunk(code, bundle, url) {
       )
     ).href}$1$2.js.map`
   );
+  logDebug("ChunkLoader", `Creating blob script for: "${url}"`);
   await new Promise((scriptResolve, scriptReject) => {
     const blob = new Blob([transformedCode], {
       type: "application/javascript; charset=UTF-8"
@@ -718,10 +735,18 @@ async function handleTurbopackChunk(code, bundle, url) {
     document.head.appendChild(script);
   });
   const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`];
+  logDebug(
+    "ChunkLoader",
+    `Processing chunk lists for bundle "${bundle}": ${chunkLists?.length ?? 0} lists`
+  );
   const loadChunkLists = [];
   while (chunkLists?.length) {
     const { chunks } = chunkLists.shift() ?? { chunks: [] };
     if (chunks.length > 0) {
+      logDebug(
+        "ChunkLoader",
+        `Loading ${chunks.length} additional chunks for bundle "${bundle}": [${chunks.join(", ")}]`
+      );
       chunks.forEach((id) => {
         const chunkLoadResult = self.__webpack_chunk_load__?.(
           `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
@@ -733,6 +758,10 @@ async function handleTurbopackChunk(code, bundle, url) {
     }
   }
   if (loadChunkLists.length > 0) {
+    logDebug(
+      "ChunkLoader",
+      `Waiting for ${loadChunkLists.length} additional chunks to load`
+    );
     await Promise.all(loadChunkLists);
   }
 }
@@ -1450,12 +1479,57 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
-// src/react/index.tsx
-var import_jsx_runtime2 = (
-  // TODO: remove wrapper div by converting HTML to RSC or React tree
-  require("react/jsx-runtime")
-);
-var import_react2 = require("react");
+// src/react/hooks/use-shadow-root.ts
+var import_react = require("react");
+function useShadowRoot({
+  isolate,
+  mode,
+  keySuffix
+}) {
+  const shadowRootContainerRef = (0, import_react.useRef)(null);
+  const [shadowRoot, setShadowRoot] = (0, import_react.useState)(() => {
+    const self = globalThis;
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
+    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
+    self[shadowRootKey] = null;
+    return ssrShadowRoot;
+  });
+  (0, import_react.useLayoutEffect)(() => {
+    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+      let shadowRootElement = null;
+      const element = document.querySelector(
+        `[data-remote-component-id="shadowroot_${keySuffix}"]`
+      );
+      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
+      if (!shadowRootElement && element) {
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+          self[shadowRootKey] = shadowRootElement;
+        } catch {
+        }
+      }
+      if (shadowRootElement) {
+        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
+          node.remove();
+        });
+        setShadowRoot(shadowRootElement);
+      }
+    } else if (isolate === false && shadowRoot) {
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+      self[shadowRootKey] = null;
+      setShadowRoot(null);
+    }
+  }, [isolate, shadowRoot, mode, keySuffix]);
+  return { shadowRoot, shadowRootContainerRef };
+}
+
+// src/react/utils/parse-remote-html.ts
+var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
     return html;
@@ -1475,7 +1549,13 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
-var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
+
+// src/react/index.tsx
+var import_jsx_runtime2 = (
+  // TODO: remove wrapper div by converting HTML to RSC or React tree
+  require("react/jsx-runtime")
+);
+var import_react3 = require("react");
 function RemoteComponent({
   src,
   isolate,
@@ -1491,7 +1571,8 @@ function RemoteComponent({
   onError,
   onChange
 }) {
-  const name = (0, import_react.useMemo)(() => {
+  const instanceId = (0, import_react2.useId)();
+  const name = (0, import_react2.useMemo)(() => {
     if (typeof src === "string") {
       const url2 = new URL(
         src,
@@ -1505,28 +1586,23 @@ function RemoteComponent({
     }
     return nameProp;
   }, [src, nameProp]);
-  const [data, setData] = (0, import_react.useState)(null);
-  const url = (0, import_react.useMemo)(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
+  const [data, setData] = (0, import_react2.useState)(null);
+  const url = (0, import_react2.useMemo)(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
   const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
-  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}`;
-  const [remoteComponent, setRemoteComponent] = (0, import_react.useState)(null);
-  const shadowRootContainerRef = (0, import_react.useRef)(null);
-  const [shadowRoot, setShadowRoot] = (0, import_react.useState)(() => {
-    const self = globalThis;
-    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
-    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${keySuffix}"]`
-    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
-    self[shadowRootKey] = null;
-    return ssrShadowRoot;
+  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}_${escapeString(instanceId)}`;
+  const [remoteComponent, setRemoteComponent] = (0, import_react2.useState)(null);
+  const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
+    isolate,
+    mode,
+    keySuffix
   });
-  const htmlRef = (0, import_react.useRef)(
+  const htmlRef = (0, import_react2.useRef)(
     typeof document !== "undefined" ? document.querySelector(
       `[data-remote-component-id="shadowroot_${keySuffix}"]`
     )?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ?? document.querySelector(`div[data-bundle][data-route][id^="${name}"]`)?.innerHTML ?? document.querySelector("div[data-bundle][data-route]")?.innerHTML : null
   );
-  const endTemplateRef = (0, import_react.useRef)(null);
-  const childrenRef = (0, import_react.useRef)(
+  const endTemplateRef = (0, import_react2.useRef)(null);
+  const childrenRef = (0, import_react2.useRef)(
     typeof document !== "undefined" ? (() => {
       let el = document.querySelector(`template[id="${name}_start"]`);
       const elements = [];
@@ -1539,44 +1615,28 @@ function RemoteComponent({
       return elements;
     })() : []
   );
-  const prevSrcRef = (0, import_react.useRef)(null);
-  const componentHydrationHtml = (0, import_react.useRef)(null);
-  const prevIsRemoteComponentRef = (0, import_react.useRef)(false);
-  const prevUrlRef = (0, import_react.useRef)(null);
-  const prevRemoteComponentContainerRef = (0, import_react.useRef)(null);
-  const unmountRef = (0, import_react.useRef)(null);
-  const prevNameRef = (0, import_react.useRef)(void 0);
-  (0, import_react.useLayoutEffect)(() => {
+  const prevSrcRef = (0, import_react2.useRef)(null);
+  const componentHydrationHtml = (0, import_react2.useRef)(null);
+  const prevIsRemoteComponentRef = (0, import_react2.useRef)(false);
+  const prevUrlRef = (0, import_react2.useRef)(null);
+  const prevRemoteComponentContainerRef = (0, import_react2.useRef)(null);
+  const unmountRef = (0, import_react2.useRef)(null);
+  const prevNameRef = (0, import_react2.useRef)(void 0);
+  (0, import_react2.useLayoutEffect)(() => {
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+    return () => {
+      delete globalThis[shadowRootKey];
+    };
+  }, [keySuffix]);
+  (0, import_react2.useLayoutEffect)(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
         el.remove();
       });
       childrenRef.current = [];
     }
-    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
-      const self = globalThis;
-      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
-      let shadowRootElement = null;
-      const element = document.querySelector(
-        `[data-remote-component-id="shadowroot_${keySuffix}"]`
-      );
-      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
-      if (!shadowRootElement && element) {
-        try {
-          shadowRootElement = element.attachShadow({ mode });
-          self[shadowRootKey] = shadowRootElement;
-        } catch {
-        }
-      }
-      if (shadowRootElement) {
-        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
-          node.remove();
-        });
-        setShadowRoot(shadowRootElement);
-      }
-    }
-  }, [isolate, shadowRoot, remoteComponent, mode, keySuffix]);
-  (0, import_react.useLayoutEffect)(() => {
+  }, [remoteComponent]);
+  (0, import_react2.useLayoutEffect)(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
         "style[data-remote-components-reset]"
@@ -1599,13 +1659,13 @@ function RemoteComponent({
       }
     }
   }, [shadowRoot, remoteComponent, name]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (src && src !== prevSrcRef.current) {
       const previousSrc = prevSrcRef.current;
       const previousName = prevNameRef.current;
       prevSrcRef.current = src;
       onBeforeLoad?.(src);
-      (0, import_react.startTransition)(async () => {
+      (0, import_react2.startTransition)(async () => {
         try {
           let html = getRemoteComponentHtml(
             htmlRef.current ?? (endTemplateRef.current?.previousElementSibling?.tagName === "div" ? endTemplateRef.current.previousElementSibling.innerHTML : "")
@@ -1943,7 +2003,7 @@ function RemoteComponent({
     runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
   const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
-  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react2.createElement)(
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react3.createElement)(
     "link",
     {
       ...link,