remote-components 0.0.42 → 0.0.44

package/dist/next/host/client/index.d.ts

@@ -1,54 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { L as LoadRemoteComponentProps } from '../../../component-loader-2ca91ad8.js';
-
-declare module 'react/jsx-runtime' {
-    namespace JSX {
-        interface IntrinsicElements {
-            template: {
-                shadowrootmode?: 'open' | 'closed';
-                id?: string;
-                ref?: React.Ref<HTMLTemplateElement>;
-                dangerouslySetInnerHTML?: {
-                    __html: string;
-                };
-                children?: React.ReactNode;
-            };
-        }
-    }
-}
-interface RemoteComponentProps {
-    /** The source URL of the remote component. */
-    src?: string | URL;
-    /** Whether to isolate the remote component using a Shadow DOM wrapper. */
-    isolate?: boolean;
-    /** The shadow DOM mode to use when isolating the remote component. */
-    mode?: 'open' | 'closed';
-    /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */
-    reset?: boolean;
-    /** The credentials to use for the fetch request. Defaults to `same-origin`. */
-    credentials?: RequestCredentials;
-    name?: string;
-    /** Shared modules to include in the remote component's context. */
-    shared?: LoadRemoteComponentProps['shared'];
-    /** Additional headers to use when fetching the remote component. */
-    additionalHeaders?: Headers | Record<string, string>;
-    /** The children to use as a loading fallback until the remote component is loaded. */
-    children?: React.ReactNode;
-    /** Called right before a new remote component load starts. */
-    onBeforeLoad?: (src: string | URL) => void;
-    /** Called when the remote component has been successfully loaded and mounted. */
-    onLoad?: (src: string | URL) => void;
-    /** Called when an error occurs while loading or mounting the remote component. */
-    onError?: (error: unknown) => void;
-    /** Called when a different remote component is loaded into the same wrapper. */
-    onChange?: (info: {
-        previousSrc: string | URL | null;
-        nextSrc: string | URL | null;
-        previousName: string | undefined;
-        nextName: string | undefined;
-    }) => void;
-}
+import { RemoteComponentProps } from '../../../react/index.js';
+import '../../../component-loader-26b1f55e.js';
 
 /**
  * RemoteComponent - Client-side component for rendering remote components

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

@@ -7,10 +7,11 @@ import * as Image from "next/image";
 import {
   startTransition,
   useEffect,
-  useLayoutEffect,
+  useId,
+  useLayoutEffect as useLayoutEffect2,
   useMemo,
-  useRef,
-  useState
+  useRef as useRef2,
+  useState as useState2
 } from "react";
 import { createPortal } from "react-dom";
 
@@ -598,6 +599,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,
@@ -607,8 +609,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(
@@ -619,14 +627,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")) {
@@ -638,7 +649,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}"]`
     );
@@ -647,6 +663,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}`
@@ -666,6 +683,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"
@@ -692,10 +710,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}`
@@ -707,6 +733,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);
   }
 }
@@ -1398,23 +1428,35 @@ async function loadStaticRemoteComponent(scripts, url) {
 }
 
 // src/shared/ssr/fetch-headers.ts
-function remoteFetchHeaders(additionalHeaders) {
+function remoteFetchHeaders() {
   return {
     /**
      * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
-     * Ensure the automation bypass secret is the same on the client and host.
-     * Otherwise, manually specify x-vercel-protection-bypass for the remote in the `additionalHeaders` parameter.
+     * If the remote component uses vercel deployment protection, ensure the host and remote vercel
+     * projects share a common automation bypass secret, and the shared secret is used as the
+     * VERCEL_AUTOMATION_BYPASS_SECRET env var in the host project.
      */
     ...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
       "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
     } : {},
-    ...Object.fromEntries(
-      additionalHeaders instanceof Headers ? additionalHeaders.entries() : Object.entries(additionalHeaders ?? {})
-    ),
     Accept: "text/html"
   };
 }
 
+// src/shared/ssr/fetch-with-hooks.ts
+async function fetchWithHooks(url, init, options = {}) {
+  const { onRequest, onResponse } = options;
+  let res = await onRequest?.(url, init);
+  if (!res) {
+    res = await fetch(url, init);
+  }
+  const transformedRes = await onResponse?.(url, res);
+  if (transformedRes) {
+    res = transformedRes;
+  }
+  return res;
+}
+
 // src/shared/ssr/get-client-or-server-url.ts
 function getClientOrServerUrl(src, serverFallback) {
   const fallback = typeof location !== "undefined" ? location.href : serverFallback;
@@ -1424,9 +1466,57 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
-// src/react/index.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-import { createElement as createElement2 } from "react";
+// src/react/hooks/use-shadow-root.ts
+import { useLayoutEffect, useRef, useState } from "react";
+function useShadowRoot({
+  isolate,
+  mode,
+  keySuffix
+}) {
+  const shadowRootContainerRef = useRef(null);
+  const [shadowRoot, setShadowRoot] = 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;
+  });
+  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;
@@ -1446,7 +1536,10 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
-var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
+
+// src/react/index.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
 function RemoteComponent({
   src,
   isolate,
@@ -1455,13 +1548,15 @@ function RemoteComponent({
   credentials = "same-origin",
   name: nameProp = "__vercel_remote_component",
   shared = {},
-  additionalHeaders,
   children,
   onBeforeLoad,
   onLoad,
   onError,
-  onChange
+  onChange,
+  onRequest,
+  onResponse
 }) {
+  const instanceId = useId();
   const name = useMemo(() => {
     if (typeof src === "string") {
       const url2 = new URL(
@@ -1476,28 +1571,23 @@ function RemoteComponent({
     }
     return nameProp;
   }, [src, nameProp]);
-  const [data, setData] = useState(null);
+  const [data, setData] = useState2(null);
   const url = 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] = useState(null);
-  const shadowRootContainerRef = useRef(null);
-  const [shadowRoot, setShadowRoot] = 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] = useState2(null);
+  const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
+    isolate,
+    mode,
+    keySuffix
   });
-  const htmlRef = useRef(
+  const htmlRef = useRef2(
     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 = useRef(null);
-  const childrenRef = useRef(
+  const endTemplateRef = useRef2(null);
+  const childrenRef = useRef2(
     typeof document !== "undefined" ? (() => {
       let el = document.querySelector(`template[id="${name}_start"]`);
       const elements = [];
@@ -1510,44 +1600,28 @@ function RemoteComponent({
       return elements;
     })() : []
   );
-  const prevSrcRef = useRef(null);
-  const componentHydrationHtml = useRef(null);
-  const prevIsRemoteComponentRef = useRef(false);
-  const prevUrlRef = useRef(null);
-  const prevRemoteComponentContainerRef = useRef(null);
-  const unmountRef = useRef(null);
-  const prevNameRef = useRef(void 0);
-  useLayoutEffect(() => {
+  const prevSrcRef = useRef2(null);
+  const componentHydrationHtml = useRef2(null);
+  const prevIsRemoteComponentRef = useRef2(false);
+  const prevUrlRef = useRef2(null);
+  const prevRemoteComponentContainerRef = useRef2(null);
+  const unmountRef = useRef2(null);
+  const prevNameRef = useRef2(void 0);
+  useLayoutEffect2(() => {
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+    return () => {
+      delete globalThis[shadowRootKey];
+    };
+  }, [keySuffix]);
+  useLayoutEffect2(() => {
     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]);
-  useLayoutEffect(() => {
+  }, [remoteComponent]);
+  useLayoutEffect2(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
         "style[data-remote-components-reset]"
@@ -1584,10 +1658,13 @@ function RemoteComponent({
           if (!html && src) {
             const fetchInit = {
               method: "GET",
-              headers: remoteFetchHeaders(additionalHeaders),
+              headers: remoteFetchHeaders(),
               credentials
             };
-            const res = await fetch(url, fetchInit);
+            const res = await fetchWithHooks(url, fetchInit, {
+              onRequest,
+              onResponse
+            });
             if (!res.ok) {
               let error = failedToFetchRemoteComponentError(
                 url.href,
@@ -1897,13 +1974,14 @@ function RemoteComponent({
     name,
     shared,
     shadowRoot,
-    additionalHeaders,
     reset,
     id,
     onBeforeLoad,
     onLoad,
     onError,
-    onChange
+    onChange,
+    onRequest,
+    onResponse
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;