remote-components 0.0.43 → 0.0.45

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

@@ -1453,23 +1453,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;
@@ -1564,12 +1576,13 @@ function RemoteComponent({
   credentials = "same-origin",
   name: nameProp = "__vercel_remote_component",
   shared = {},
-  additionalHeaders,
   children,
   onBeforeLoad,
   onLoad,
   onError,
-  onChange
+  onChange,
+  onRequest,
+  onResponse
 }) {
   const instanceId = (0, import_react2.useId)();
   const name = (0, import_react2.useMemo)(() => {
@@ -1673,10 +1686,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,
@@ -1985,13 +2001,14 @@ function RemoteComponent({
     name,
     shared,
     shadowRoot,
-    additionalHeaders,
     reset,
     id,
     onBeforeLoad,
     onLoad,
     onError,
-    onChange
+    onChange,
+    onRequest,
+    onResponse
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;