remote-components 0.0.43 → 0.0.44

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LoadRemoteComponentProps } from '../component-loader-2ca91ad8.js';
+import { L as LoadRemoteComponentProps, O as OnRequestHook, a as OnResponseHook } from '../component-loader-26b1f55e.js';
 import 'react';
 
 declare module 'react/jsx-runtime' {
@@ -31,8 +31,6 @@ interface RemoteComponentProps {
     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. */
@@ -48,6 +46,16 @@ interface RemoteComponentProps {
         previousName: string | undefined;
         nextName: string | undefined;
     }) => void;
+    /**
+     * Called when a fetch request is made to retrieve the remote component payload.
+     * Can be used to intercept requests, modify headers, or provide a custom response.
+     */
+    onRequest?: OnRequestHook;
+    /**
+     * Called after a fetch completes to retrieve the remote component payload.
+     * Can be used to inspect the response (e.g., check for redirects) or transform it.
+     */
+    onResponse?: OnResponseHook;
 }
 /**
  * RemoteComponent is a React component that fetches and renders a remote component.
@@ -85,6 +93,6 @@ interface RemoteComponentProps {
  * />
  * ```
  */
-declare function RemoteComponent({ src, isolate, mode, reset, credentials, name: nameProp, shared, additionalHeaders, children, onBeforeLoad, onLoad, onError, onChange, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
+declare function RemoteComponent({ src, isolate, mode, reset, credentials, name: nameProp, shared, children, onBeforeLoad, onLoad, onError, onChange, onRequest, onResponse, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
 
-export { RemoteComponent, RemoteComponentProps };
+export { OnRequestHook, OnResponseHook, RemoteComponent, RemoteComponentProps };

package/dist/react/index.js

@@ -1423,23 +1423,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;
@@ -1531,12 +1543,13 @@ 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(() => {
@@ -1640,10 +1653,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,
@@ -1953,13 +1969,14 @@ function RemoteComponent({
     name,
     shared,
     shadowRoot,
-    additionalHeaders,
     reset,
     id,
     onBeforeLoad,
     onLoad,
     onError,
-    onChange
+    onChange,
+    onRequest,
+    onResponse
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;