remote-components 0.0.42 → 0.0.44

package/dist/{component-loader-2ca91ad8.d.ts → component-loader-26b1f55e.d.ts}

@@ -7,6 +7,68 @@ interface RemoteComponentMetadata {
     id: string;
     type: 'nextjs' | 'remote-component' | 'unknown';
 }
+/**
+ * Hook function that intercepts remote component fetch requests.
+ * Can be used to modify request options, provide a custom response, or inspect the request.
+ *
+ * @param url - The URL being fetched
+ * @param init - The fetch init options being used
+ * @returns Optional Response to use instead of fetching, or void/undefined to proceed with normal fetch
+ *
+ * @example
+ * // Log all remote component requests
+ * const onRequest = async (url, init) => {
+ *   console.log('Fetching remote component from:', url.href);
+ * };
+ *
+ * @example
+ * // Add custom headers
+ * const onRequest = async (url, init) => {
+ *   (init.headers as Headers).set('X-Custom-Header', 'value');
+ * };
+ *
+ * @example
+ * // Provide a cached response
+ * const onRequest = async (url) => {
+ *   const cached = cache.get(url.href);
+ *   if (cached) {
+ *     return new Response(cached);
+ *   }
+ * };
+ */
+type OnRequestHook = (url: URL, init: RequestInit) => Promise<Response | undefined> | Response | undefined;
+/**
+ * Hook function that is called after a remote component fetch completes.
+ * Can be used to inspect the response, check for redirects, or transform the response.
+ *
+ * @param url - The original URL that was requested
+ * @param response - The Response object from the fetch
+ * @returns Optional Response to use instead of the original, or void/undefined to use the original response
+ *
+ * @example
+ * // Check for redirects
+ * const onResponse = async (url, response) => {
+ *   if (response.redirected) {
+ *     console.log(`Redirected from ${url.href} to ${response.url}`);
+ *   }
+ * };
+ *
+ * @example
+ * // Cache the response
+ * const onResponse = async (url, response) => {
+ *   const cloned = response.clone();
+ *   cache.set(url.href, await cloned.text());
+ * };
+ *
+ * @example
+ * // Transform the response
+ * const onResponse = async (url, response) => {
+ *   const text = await response.text();
+ *   const modified = text.replace(/foo/g, 'bar');
+ *   return new Response(modified, response);
+ * };
+ */
+type OnResponseHook = (url: URL, response: Response) => Promise<Response | undefined> | Response | undefined;
 
 interface RemoteComponentProps {
     /** The src provided to the `<RemoteComponent>` component. May be relative or absolute URL. */
@@ -79,4 +141,4 @@ type LoadRemoteComponentProps = Pick<RemoteComponentProps, 'name' | 'bundle' | '
  */
 declare function loadRemoteComponent({ url, name, rscName, bundle, route, runtime, data, nextData, scripts, shared, remoteShared, container, }: LoadRemoteComponentProps): Promise<LoaderResult>;
 
-export { GlobalScope as G, LoadRemoteComponentProps as L, MountOrUnmountFunction as M, RemoteComponentProps as R, LoaderResult as a, loadRemoteComponent as l };
+export { GlobalScope as G, LoadRemoteComponentProps as L, MountOrUnmountFunction as M, OnRequestHook as O, RemoteComponentProps as R, OnResponseHook as a, LoaderResult as b, loadRemoteComponent as l };

package/dist/html/host.cjs

@@ -287,6 +287,7 @@ var init_const = __esm({
 // 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,
@@ -296,8 +297,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(
@@ -308,14 +315,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")) {
@@ -327,7 +337,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}"]`
     );
@@ -336,6 +351,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}`
@@ -355,6 +371,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"
@@ -381,10 +398,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}`
@@ -396,6 +421,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);
   }
 }
@@ -403,6 +432,7 @@ var init_chunk_loader = __esm({
   "src/shared/client/chunk-loader.ts"() {
     "use strict";
     init_error();
+    init_logger();
     init_const();
   }
 });
@@ -1510,23 +1540,35 @@ init_webpack_adapter();
 init_error();
 
 // 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/html/host/index.tsx
 init_utils();
 
@@ -1569,7 +1611,8 @@ if (typeof HTMLElement !== "undefined") {
     prevName;
     root = null;
     reactRoot;
-    additionalHeaders;
+    onRequest;
+    onResponse;
     static get observedAttributes() {
       return ["src", "name", "mode"];
     }
@@ -1633,16 +1676,6 @@ if (typeof HTMLElement !== "undefined") {
       }
       this.name = this.getAttribute("name") || "__vercel_remote_component";
       this.bundle = "default";
-      const additionalHeadersString = this.getAttribute("additional-headers");
-      if (additionalHeadersString) {
-        this.additionalHeaders = additionalHeadersString.split(";").reduce((headers, headerPair) => {
-          const [key, value] = headerPair.split(":");
-          if (key && value) {
-            headers.set(key.trim(), value.trim());
-          }
-          return headers;
-        }, new Headers());
-      }
       if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
         this.load().catch((e) => {
           console.error(e);
@@ -1680,10 +1713,13 @@ if (typeof HTMLElement !== "undefined") {
       if (!remoteComponentChild && url) {
         const fetchInit = {
           method: "GET",
-          headers: remoteFetchHeaders(this.additionalHeaders),
+          headers: remoteFetchHeaders(),
           credentials: this.getAttribute("credentials") || "same-origin"
         };
-        const res = await fetch(url, fetchInit);
+        const res = await fetchWithHooks(url, fetchInit, {
+          onRequest: this.onRequest,
+          onResponse: this.onResponse
+        });
         if (!res.ok) {
           let error = failedToFetchRemoteComponentError(url.href, res);
           try {