remote-components 0.0.43 → 0.0.45

package/README.md

@@ -8,4 +8,4 @@
 
 > This is a work in progress feature and not yet ready for production use. We are actively working on it and will provide updates as we make progress.
 
-📚 [Documentation](https://vercel.com/docs/microfrontends)
+📚 [Documentation](https://remote-components-docs.vercel.sh/)

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

@@ -1540,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();
 
@@ -1599,7 +1611,8 @@ if (typeof HTMLElement !== "undefined") {
     prevName;
     root = null;
     reactRoot;
-    additionalHeaders;
+    onRequest;
+    onResponse;
     static get observedAttributes() {
       return ["src", "name", "mode"];
     }
@@ -1663,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);
@@ -1710,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 {