remote-components 0.0.27 → 0.0.29

package/dist/html/host.js

@@ -599,16 +599,70 @@ function sharedPolyfills(shared) {
           }
         };
       },
+      usePathname() {
+        return location.pathname;
+      },
+      useParams() {
+        return {};
+      },
       useSearchParams() {
         return new URLSearchParams(location.search);
       },
+      useSelectedLayoutSegment() {
+        return null;
+      },
+      useSelectedLayoutSegments() {
+        return [];
+      },
       __esModule: true
     })),
     "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
       default: ({
+        scroll: _,
+        replace,
+        prefetch,
+        onNavigate,
         children,
         ...props
-      }) => /* @__PURE__ */ jsx("a", { ...props, href: props.href, suppressHydrationWarning: true, children: children ?? null }),
+      }) => {
+        if (prefetch) {
+          console.warn(
+            "Next.js Link prefetch is not supported in remote components"
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            ...props,
+            href: props.href,
+            onClick: (e) => {
+              e.preventDefault();
+              let preventDefaulted = false;
+              e.preventDefault = () => {
+                preventDefaulted = true;
+                e.defaultPrevented = true;
+              };
+              if (typeof props.onClick === "function") {
+                props.onClick(e);
+              }
+              onNavigate?.(e);
+              if (preventDefaulted) {
+                return;
+              }
+              if (replace) {
+                history.replaceState({}, "", props.href);
+              } else {
+                history.pushState({}, "", props.href);
+              }
+            },
+            suppressHydrationWarning: true,
+            children: children ?? null
+          }
+        );
+      },
+      useLinkStatus() {
+        return { pending: false };
+      },
       __esModule: true
     })),
     "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
@@ -675,10 +729,22 @@ var imageImpl;
 var init_polyfill = __esm({
   "src/shared/client/polyfill.tsx"() {
     "use strict";
-    imageImpl = (bundle) => function RemoteImage({ priority: _, ...props }) {
+    imageImpl = (bundle) => function RemoteImage({
+      fill: _fill,
+      loader: _loader,
+      quality: _quality,
+      priority: _priority,
+      loading: _loading,
+      placeholder: _placeholder,
+      blurDataURL: _blurDataURL,
+      unoptimized: _unoptimized,
+      overrideSrc: _overrideSrc,
+      src,
+      ...props
+    }) {
       const newSrc = applyBundleUrlToImagePropsSrc(
         bundle,
-        typeof props.src === "string" ? props.src : props.src.src
+        typeof src === "string" ? src : src.src
       );
       return (
         // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
@@ -948,6 +1014,24 @@ init_const();
 // src/html/host/index.tsx
 init_utils();
 
+// src/shared/ssr/fetch-headers.ts
+function remoteFetchHeaders(additionalHeaders) {
+  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.
+     */
+    ...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/client/apply-origin.ts
 var tagNames = [
   "img",
@@ -963,12 +1047,20 @@ var tagNames = [
 function applyOriginToNodes(doc, url) {
   if (url.origin !== location.origin) {
     const nodes = doc.querySelectorAll(
-      tagNames.map((type) => `${type}[src],${type}[srcset]`).join(",")
+      tagNames.map(
+        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
+      ).join(",")
     );
     nodes.forEach((node) => {
       if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
         node.src = new URL(node.getAttribute("src") ?? "/", url).href;
       }
+      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
+        node.setAttribute(
+          "href",
+          new URL(node.getAttribute("href") ?? "/", url).href
+        );
+      }
       if (node.hasAttribute("srcset")) {
         const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
           const [urlPart, descriptor] = entry.trim().split(/\s+/);
@@ -981,6 +1073,18 @@ function applyOriginToNodes(doc, url) {
           node.setAttribute("srcset", srcSet);
         }
       }
+      if (node.hasAttribute("imagesrcset")) {
+        const srcSet = node.getAttribute("imagesrcset")?.split(",").map((entry) => {
+          const [urlPart, descriptor] = entry.trim().split(/\s+/);
+          if (!urlPart)
+            return entry;
+          const absoluteUrl = new URL(urlPart, url).href;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("imagesrcset", srcSet);
+        }
+      }
     });
   }
 }
@@ -1060,6 +1164,16 @@ 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) => {
           throw new Error(`Failed to load remote component: ${e}`);
@@ -1082,9 +1196,7 @@ if (typeof HTMLElement !== "undefined") {
       if (!remoteComponentChild && url) {
         const fetchInit = {
           method: "GET",
-          headers: {
-            Accept: "text/html"
-          },
+          headers: remoteFetchHeaders(this.additionalHeaders),
           credentials: this.getAttribute("credentials") || "same-origin"
         };
         const res = await fetch(url, fetchInit);