remote-components 0.2.2 → 0.3.1

package/dist/internal/host/shared/polyfill.js

@@ -1,55 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import { createRemoteImageLoader } from "#internal/host/shared/remote-image-loader";
 import { logWarn } from "#internal/utils/logger";
-function applyBundleUrlToSrc(bundle, src) {
-  const self = globalThis;
-  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
-    return src;
-  }
-  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
-  if (!path) {
-    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
-  }
-  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
-}
-function applyBundleUrlToImagePropsSrc(bundle, src) {
-  if (typeof src === "string") {
-    return applyBundleUrlToSrc(bundle, src);
-  }
-  const propSrc = src;
-  return applyBundleUrlToSrc(bundle, propSrc.src);
-}
-const imageImpl = (bundle, resolveClientUrl) => 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 src === "string" ? src : src.src
-  );
-  const proxiedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
-  return (
-    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        decoding: "async",
-        style: { color: "transparent" },
-        ...props,
-        src: proxiedSrc,
-        suppressHydrationWarning: true
-      }
-    )
-  );
-};
 function sharedPolyfills(shared, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
@@ -140,17 +91,13 @@ function sharedPolyfills(shared, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      Image: imageImpl(bundle, resolveClientUrl),
-      __esModule: true
-    })),
-    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      default: imageImpl(bundle, resolveClientUrl),
-      getImageProps: (_imgProps) => {
-        throw new Error(
-          "Next.js getImageProps() is not implemented in remote components"
-        );
-      },
+    // Instead of replacing next/image entirely, we let the real Next.js Image
+    // component load from the remote bundle and only replace its default loader.
+    // This gives us full next/image fidelity (fill, priority, srcSet, blur
+    // placeholders, error handling) while routing image optimization through the
+    // remote app's /_next/image endpoint.
+    "next/dist/shared/lib/image-loader": self.__remote_component_host_shared_modules__?.["next/dist/shared/lib/image-loader"] ?? shared?.["next/dist/shared/lib/image-loader"] ?? ((bundle) => Promise.resolve({
+      default: createRemoteImageLoader(bundle, resolveClientUrl),
       __esModule: true
     })),
     "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
@@ -190,12 +137,11 @@ function sharedPolyfills(shared, resolveClientUrl) {
   polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
   polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
   polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
-  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/dist/esm/shared/lib/image-loader"] = polyfill["next/dist/shared/lib/image-loader"];
   polyfill["next/script"] = polyfill["next/dist/client/script"];
   return polyfill;
 }
 export {
-  applyBundleUrlToImagePropsSrc,
   sharedPolyfills
 };
 //# sourceMappingURL=polyfill.js.map

package/dist/internal/host/shared/polyfill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/shared/polyfill.tsx"],"sourcesContent":["import type { ImageProps, StaticImageData } from 'next/image';\nimport type { LinkProps } from 'next/link';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { logWarn } from '#internal/utils/logger';\n\nfunction applyBundleUrlToSrc(bundle: string, src: string) {\n  const self = globalThis as typeof globalThis & {\n    __remote_bundle_url__?: Record<string, URL>;\n  };\n\n  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {\n    return src;\n  }\n\n  const { assetPrefix, path } =\n    /^(?<assetPrefix>.*?)\\/_next\\/(?<path>.*)/.exec(src)?.groups ?? {};\n  if (!path) {\n    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;\n  }\n  return `${\n    self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n  }${assetPrefix}/_next/${path}`;\n}\n\nexport function applyBundleUrlToImagePropsSrc(\n  bundle: string,\n  src: ImageProps['src'],\n) {\n  if (typeof src === 'string') {\n    return applyBundleUrlToSrc(bundle, src);\n  }\n  const propSrc = src as StaticImageData;\n  return applyBundleUrlToSrc(bundle, propSrc.src);\n}\n\nconst imageImpl = (\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) =>\n  function RemoteImage({\n    fill: _fill,\n    loader: _loader,\n    quality: _quality,\n    priority: _priority,\n    loading: _loading,\n    placeholder: _placeholder,\n    blurDataURL: _blurDataURL,\n    unoptimized: _unoptimized,\n    overrideSrc: _overrideSrc,\n    src,\n    ...props\n  }: ImageProps) {\n    const newSrc = applyBundleUrlToImagePropsSrc(\n      bundle,\n      typeof src === 'string' ? src : (src as StaticImageData).src,\n    );\n    const proxiedSrc = resolveClientUrl?.(newSrc) ?? newSrc;\n\n    return (\n      // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text\n      <img\n        decoding=\"async\"\n        style={{ color: 'transparent' }}\n        {...props}\n        src={proxiedSrc}\n        suppressHydrationWarning\n      />\n    );\n  };\n\n// polyfill Next.js App Router client API (minimal)\n// implementations are minimal and do not cover all use cases\n// developer can override these shared modules from configuration\nexport function sharedPolyfills(\n  shared?: Record<string, () => Promise<unknown>>,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const self = globalThis as typeof globalThis & {\n    __remote_component_host_shared_modules__?: Record<\n      string,\n      () => Promise<unknown>\n    >;\n  };\n  const polyfill = {\n    'next/dist/client/components/navigation':\n      self.__remote_component_host_shared_modules__?.['next/navigation'] ??\n      shared?.['next/navigation'] ??\n      (() =>\n        Promise.resolve({\n          useRouter() {\n            return {\n              push: (routerUrl: string) => {\n                history.pushState({}, '', routerUrl);\n              },\n              replace: (routerUrl: string) => {\n                history.replaceState({}, '', routerUrl);\n              },\n              back: () => {\n                history.back();\n              },\n            };\n          },\n          usePathname() {\n            return location.pathname;\n          },\n          useParams() {\n            return {};\n          },\n          useSearchParams() {\n            return new URLSearchParams(location.search);\n          },\n          useSelectedLayoutSegment() {\n            return null;\n          },\n          useSelectedLayoutSegments() {\n            return [];\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/app-dir/link':\n      self.__remote_component_host_shared_modules__?.['next/link'] ??\n      shared?.['next/link'] ??\n      (() =>\n        Promise.resolve({\n          default: ({\n            scroll: _,\n            replace,\n            prefetch,\n            onNavigate,\n            children,\n            ...props\n          }: React.PropsWithChildren<LinkProps>) => {\n            if (prefetch) {\n              logWarn(\n                'Polyfill',\n                'Next.js Link prefetch is not supported in remote components',\n              );\n            }\n            return (\n              <a\n                {...props}\n                href={props.href as string}\n                onClick={(e) => {\n                  e.preventDefault();\n                  let preventDefaulted = false;\n                  e.preventDefault = () => {\n                    preventDefaulted = true;\n                    e.defaultPrevented = true;\n                  };\n                  if (typeof props.onClick === 'function') {\n                    props.onClick(e);\n                  }\n                  onNavigate?.(e);\n                  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n                  if (preventDefaulted) {\n                    return;\n                  }\n                  if (replace) {\n                    history.replaceState({}, '', props.href as string);\n                  } else {\n                    history.pushState({}, '', props.href as string);\n                  }\n                }}\n                suppressHydrationWarning\n              >\n                {children ?? null}\n              </a>\n            );\n          },\n          useLinkStatus() {\n            return { pending: false };\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/app-dir/form':\n      self.__remote_component_host_shared_modules__?.['next/form'] ??\n      shared?.['next/form'] ??\n      (() =>\n        Promise.resolve({\n          default: () => {\n            // TODO: implement <Form> component for non-Next.js host applications\n            throw new Error('Next.js <Form> component not implemented');\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/image-component':\n      self.__remote_component_host_shared_modules__?.['next/image'] ??\n      shared?.['next/image'] ??\n      ((bundle: string) =>\n        Promise.resolve({\n          Image: imageImpl(bundle, resolveClientUrl),\n          __esModule: true,\n        })),\n    'next/image':\n      self.__remote_component_host_shared_modules__?.['next/image'] ??\n      shared?.['next/image'] ??\n      ((bundle: string) =>\n        Promise.resolve({\n          default: imageImpl(bundle, resolveClientUrl),\n          getImageProps: (_imgProps: ImageProps) => {\n            throw new Error(\n              'Next.js getImageProps() is not implemented in remote components',\n            );\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/script':\n      self.__remote_component_host_shared_modules__?.['next/script'] ??\n      shared?.['next/script'] ??\n      (() =>\n        Promise.resolve({\n          // TODO: implement <Script> component for non-Next.js host applications\n          // do not throw an error for now\n          default: () => null,\n          __esModule: true,\n        })),\n    'next/router':\n      self.__remote_component_host_shared_modules__?.['next/router'] ??\n      shared?.['next/router'] ??\n      (() =>\n        // TODO: incomplete implementation\n        Promise.resolve({\n          useRouter() {\n            return {\n              push: (routerUrl: string) => {\n                history.pushState({}, '', routerUrl);\n              },\n              replace: (routerUrl: string) => {\n                history.replaceState({}, '', routerUrl);\n              },\n              back: () => {\n                history.back();\n              },\n            };\n          },\n          __esModule: true,\n        })),\n    'next/dist/build/polyfills/process': () =>\n      Promise.resolve({\n        default: {\n          env: {\n            NODE_ENV: 'production',\n          },\n        },\n        __esModule: true,\n      }),\n  } as Record<string, () => Promise<unknown>>;\n\n  polyfill['next/navigation'] = polyfill[\n    'next/dist/client/components/navigation'\n  ] as () => Promise<unknown>;\n  polyfill['next/link'] = polyfill[\n    'next/dist/client/app-dir/link'\n  ] as () => Promise<unknown>;\n  polyfill['next/form'] = polyfill[\n    'next/dist/client/app-dir/form'\n  ] as () => Promise<unknown>;\n  polyfill['next/dist/api/image'] = polyfill[\n    'next/dist/client/image-component'\n  ] as () => Promise<unknown>;\n  polyfill['next/script'] = polyfill[\n    'next/dist/client/script'\n  ] as () => Promise<unknown>;\n\n  return polyfill;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/host/shared/polyfill.tsx"],"sourcesContent":["import type { LinkProps } from 'next/link';\nimport { createRemoteImageLoader } from '#internal/host/shared/remote-image-loader';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { logWarn } from '#internal/utils/logger';\n\n// polyfill Next.js App Router client API (minimal)\n// implementations are minimal and do not cover all use cases\n// developer can override these shared modules from configuration\nexport function sharedPolyfills(\n  shared?: Record<string, () => Promise<unknown>>,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const self = globalThis as typeof globalThis & {\n    __remote_component_host_shared_modules__?: Record<\n      string,\n      () => Promise<unknown>\n    >;\n  };\n  const polyfill = {\n    'next/dist/client/components/navigation':\n      self.__remote_component_host_shared_modules__?.['next/navigation'] ??\n      shared?.['next/navigation'] ??\n      (() =>\n        Promise.resolve({\n          useRouter() {\n            return {\n              push: (routerUrl: string) => {\n                history.pushState({}, '', routerUrl);\n              },\n              replace: (routerUrl: string) => {\n                history.replaceState({}, '', routerUrl);\n              },\n              back: () => {\n                history.back();\n              },\n            };\n          },\n          usePathname() {\n            return location.pathname;\n          },\n          useParams() {\n            return {};\n          },\n          useSearchParams() {\n            return new URLSearchParams(location.search);\n          },\n          useSelectedLayoutSegment() {\n            return null;\n          },\n          useSelectedLayoutSegments() {\n            return [];\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/app-dir/link':\n      self.__remote_component_host_shared_modules__?.['next/link'] ??\n      shared?.['next/link'] ??\n      (() =>\n        Promise.resolve({\n          default: ({\n            scroll: _,\n            replace,\n            prefetch,\n            onNavigate,\n            children,\n            ...props\n          }: React.PropsWithChildren<LinkProps>) => {\n            if (prefetch) {\n              logWarn(\n                'Polyfill',\n                'Next.js Link prefetch is not supported in remote components',\n              );\n            }\n            return (\n              <a\n                {...props}\n                href={props.href as string}\n                onClick={(e) => {\n                  e.preventDefault();\n                  let preventDefaulted = false;\n                  e.preventDefault = () => {\n                    preventDefaulted = true;\n                    e.defaultPrevented = true;\n                  };\n                  if (typeof props.onClick === 'function') {\n                    props.onClick(e);\n                  }\n                  onNavigate?.(e);\n                  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n                  if (preventDefaulted) {\n                    return;\n                  }\n                  if (replace) {\n                    history.replaceState({}, '', props.href as string);\n                  } else {\n                    history.pushState({}, '', props.href as string);\n                  }\n                }}\n                suppressHydrationWarning\n              >\n                {children ?? null}\n              </a>\n            );\n          },\n          useLinkStatus() {\n            return { pending: false };\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/app-dir/form':\n      self.__remote_component_host_shared_modules__?.['next/form'] ??\n      shared?.['next/form'] ??\n      (() =>\n        Promise.resolve({\n          default: () => {\n            // TODO: implement <Form> component for non-Next.js host applications\n            throw new Error('Next.js <Form> component not implemented');\n          },\n          __esModule: true,\n        })),\n    // Instead of replacing next/image entirely, we let the real Next.js Image\n    // component load from the remote bundle and only replace its default loader.\n    // This gives us full next/image fidelity (fill, priority, srcSet, blur\n    // placeholders, error handling) while routing image optimization through the\n    // remote app's /_next/image endpoint.\n    'next/dist/shared/lib/image-loader':\n      self.__remote_component_host_shared_modules__?.[\n        'next/dist/shared/lib/image-loader'\n      ] ??\n      shared?.['next/dist/shared/lib/image-loader'] ??\n      ((bundle: string) =>\n        Promise.resolve({\n          default: createRemoteImageLoader(bundle, resolveClientUrl),\n          __esModule: true,\n        })),\n    'next/dist/client/script':\n      self.__remote_component_host_shared_modules__?.['next/script'] ??\n      shared?.['next/script'] ??\n      (() =>\n        Promise.resolve({\n          // TODO: implement <Script> component for non-Next.js host applications\n          // do not throw an error for now\n          default: () => null,\n          __esModule: true,\n        })),\n    'next/router':\n      self.__remote_component_host_shared_modules__?.['next/router'] ??\n      shared?.['next/router'] ??\n      (() =>\n        // TODO: incomplete implementation\n        Promise.resolve({\n          useRouter() {\n            return {\n              push: (routerUrl: string) => {\n                history.pushState({}, '', routerUrl);\n              },\n              replace: (routerUrl: string) => {\n                history.replaceState({}, '', routerUrl);\n              },\n              back: () => {\n                history.back();\n              },\n            };\n          },\n          __esModule: true,\n        })),\n    'next/dist/build/polyfills/process': () =>\n      Promise.resolve({\n        default: {\n          env: {\n            NODE_ENV: 'production',\n          },\n        },\n        __esModule: true,\n      }),\n  } as Record<string, () => Promise<unknown>>;\n\n  polyfill['next/navigation'] = polyfill[\n    'next/dist/client/components/navigation'\n  ] as () => Promise<unknown>;\n  polyfill['next/link'] = polyfill[\n    'next/dist/client/app-dir/link'\n  ] as () => Promise<unknown>;\n  polyfill['next/form'] = polyfill[\n    'next/dist/client/app-dir/form'\n  ] as () => Promise<unknown>;\n  polyfill['next/dist/esm/shared/lib/image-loader'] = polyfill[\n    'next/dist/shared/lib/image-loader'\n  ] as () => Promise<unknown>;\n  polyfill['next/script'] = polyfill[\n    'next/dist/client/script'\n  ] as () => Promise<unknown>;\n\n  return polyfill;\n}\n"],"mappings":"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","names":[]}

package/dist/internal/host/shared/remote-image-loader.cjs

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var remote_image_loader_exports = {};
+__export(remote_image_loader_exports, {
+  createRemoteImageLoader: () => createRemoteImageLoader
+});
+module.exports = __toCommonJS(remote_image_loader_exports);
+function getRemoteBundleOrigin(bundle) {
+  const self = globalThis;
+  return self.__remote_bundle_url__?.[bundle]?.origin ?? "";
+}
+function createRemoteImageLoader(bundle, resolveClientUrl) {
+  const loader = Object.assign(
+    ({
+      config,
+      src,
+      width,
+      quality
+    }) => {
+      const q = quality ?? 75;
+      const remoteOrigin = getRemoteBundleOrigin(bundle);
+      const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;
+      const basePath = isCrossOrigin ? `${remoteOrigin}${config.path ?? "/_next/image"}` : config.path ?? `${remoteOrigin}/_next/image`;
+      const url = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
+      return resolveClientUrl?.(url) ?? url;
+    },
+    // Signals to getImgProps that this is a default loader (not a user-defined
+    // one), enabling srcSet generation with device/image sizes from the config.
+    { __next_img_default: true }
+  );
+  return loader;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createRemoteImageLoader
+});
+//# sourceMappingURL=remote-image-loader.cjs.map

package/dist/internal/host/shared/remote-image-loader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/remote-image-loader.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nfunction getRemoteBundleOrigin(bundle: string): string {\n  const self = globalThis as typeof globalThis & {\n    __remote_bundle_url__?: Record<string, URL>;\n  };\n  return self.__remote_bundle_url__?.[bundle]?.origin ?? '';\n}\n\n/**\n * Replacement for `next/dist/shared/lib/image-loader`.\n *\n * Uses `config.path` (which includes the remote's asset prefix, e.g.\n * `/vc-ap-xxx/_next/image`) to generate URLs that match the server-rendered\n * HTML and avoid hydration mismatches. Under the microfrontends proxy these\n * relative paths are routed to the correct app.\n *\n * For cross-origin deployments (standalone host on a different domain),\n * `config.path` is a relative path that would incorrectly resolve to the host\n * origin, so we prefix it with the remote origin to produce an absolute URL\n * pointing at the remote's optimizer.\n *\n * When `resolveClientUrl` is provided (deployment protection), the final URL\n * is routed through the host's proxy.\n */\nexport function createRemoteImageLoader(\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const loader = Object.assign(\n    ({\n      config,\n      src,\n      width,\n      quality,\n    }: {\n      config: { path?: string };\n      src: string;\n      width: number;\n      quality?: number;\n    }) => {\n      const q = quality ?? 75;\n      const remoteOrigin = getRemoteBundleOrigin(bundle);\n      const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;\n      const basePath = isCrossOrigin\n        ? `${remoteOrigin}${config.path ?? '/_next/image'}`\n        : (config.path ?? `${remoteOrigin}/_next/image`);\n      const url = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;\n      return resolveClientUrl?.(url) ?? url;\n    },\n    // Signals to getImgProps that this is a default loader (not a user-defined\n    // one), enabling srcSet generation with device/image sizes from the config.\n    { __next_img_default: true as const },\n  );\n  return loader;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,SAAS,sBAAsB,QAAwB;AACrD,QAAM,OAAO;AAGb,SAAO,KAAK,wBAAwB,MAAM,GAAG,UAAU;AACzD;AAkBO,SAAS,wBACd,QACA,kBACA;AACA,QAAM,SAAS,OAAO;AAAA,IACpB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,MAKM;AACJ,YAAM,IAAI,WAAW;AACrB,YAAM,eAAe,sBAAsB,MAAM;AACjD,YAAM,gBAAgB,gBAAgB,iBAAiB,SAAS;AAChE,YAAM,WAAW,gBACb,GAAG,eAAe,OAAO,QAAQ,mBAChC,OAAO,QAAQ,GAAG;AACvB,YAAM,MAAM,GAAG,gBAAgB,mBAAmB,GAAG,OAAO,WAAW;AACvE,aAAO,mBAAmB,GAAG,KAAK;AAAA,IACpC;AAAA;AAAA;AAAA,IAGA,EAAE,oBAAoB,KAAc;AAAA,EACtC;AACA,SAAO;AACT;","names":[]}

package/dist/internal/host/shared/remote-image-loader.d.ts

@@ -0,0 +1,30 @@
+import { InternalResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
+
+/**
+ * Replacement for `next/dist/shared/lib/image-loader`.
+ *
+ * Uses `config.path` (which includes the remote's asset prefix, e.g.
+ * `/vc-ap-xxx/_next/image`) to generate URLs that match the server-rendered
+ * HTML and avoid hydration mismatches. Under the microfrontends proxy these
+ * relative paths are routed to the correct app.
+ *
+ * For cross-origin deployments (standalone host on a different domain),
+ * `config.path` is a relative path that would incorrectly resolve to the host
+ * origin, so we prefix it with the remote origin to produce an absolute URL
+ * pointing at the remote's optimizer.
+ *
+ * When `resolveClientUrl` is provided (deployment protection), the final URL
+ * is routed through the host's proxy.
+ */
+declare function createRemoteImageLoader(bundle: string, resolveClientUrl?: InternalResolveClientUrl): (({ config, src, width, quality, }: {
+    config: {
+        path?: string;
+    };
+    src: string;
+    width: number;
+    quality?: number;
+}) => string) & {
+    __next_img_default: true;
+};
+
+export { createRemoteImageLoader };

package/dist/internal/host/shared/remote-image-loader.js

@@ -0,0 +1,29 @@
+function getRemoteBundleOrigin(bundle) {
+  const self = globalThis;
+  return self.__remote_bundle_url__?.[bundle]?.origin ?? "";
+}
+function createRemoteImageLoader(bundle, resolveClientUrl) {
+  const loader = Object.assign(
+    ({
+      config,
+      src,
+      width,
+      quality
+    }) => {
+      const q = quality ?? 75;
+      const remoteOrigin = getRemoteBundleOrigin(bundle);
+      const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;
+      const basePath = isCrossOrigin ? `${remoteOrigin}${config.path ?? "/_next/image"}` : config.path ?? `${remoteOrigin}/_next/image`;
+      const url = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
+      return resolveClientUrl?.(url) ?? url;
+    },
+    // Signals to getImgProps that this is a default loader (not a user-defined
+    // one), enabling srcSet generation with device/image sizes from the config.
+    { __next_img_default: true }
+  );
+  return loader;
+}
+export {
+  createRemoteImageLoader
+};
+//# sourceMappingURL=remote-image-loader.js.map

package/dist/internal/host/shared/remote-image-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/remote-image-loader.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nfunction getRemoteBundleOrigin(bundle: string): string {\n  const self = globalThis as typeof globalThis & {\n    __remote_bundle_url__?: Record<string, URL>;\n  };\n  return self.__remote_bundle_url__?.[bundle]?.origin ?? '';\n}\n\n/**\n * Replacement for `next/dist/shared/lib/image-loader`.\n *\n * Uses `config.path` (which includes the remote's asset prefix, e.g.\n * `/vc-ap-xxx/_next/image`) to generate URLs that match the server-rendered\n * HTML and avoid hydration mismatches. Under the microfrontends proxy these\n * relative paths are routed to the correct app.\n *\n * For cross-origin deployments (standalone host on a different domain),\n * `config.path` is a relative path that would incorrectly resolve to the host\n * origin, so we prefix it with the remote origin to produce an absolute URL\n * pointing at the remote's optimizer.\n *\n * When `resolveClientUrl` is provided (deployment protection), the final URL\n * is routed through the host's proxy.\n */\nexport function createRemoteImageLoader(\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const loader = Object.assign(\n    ({\n      config,\n      src,\n      width,\n      quality,\n    }: {\n      config: { path?: string };\n      src: string;\n      width: number;\n      quality?: number;\n    }) => {\n      const q = quality ?? 75;\n      const remoteOrigin = getRemoteBundleOrigin(bundle);\n      const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;\n      const basePath = isCrossOrigin\n        ? `${remoteOrigin}${config.path ?? '/_next/image'}`\n        : (config.path ?? `${remoteOrigin}/_next/image`);\n      const url = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;\n      return resolveClientUrl?.(url) ?? url;\n    },\n    // Signals to getImgProps that this is a default loader (not a user-defined\n    // one), enabling srcSet generation with device/image sizes from the config.\n    { __next_img_default: true as const },\n  );\n  return loader;\n}\n"],"mappings":"AAEA,SAAS,sBAAsB,QAAwB;AACrD,QAAM,OAAO;AAGb,SAAO,KAAK,wBAAwB,MAAM,GAAG,UAAU;AACzD;AAkBO,SAAS,wBACd,QACA,kBACA;AACA,QAAM,SAAS,OAAO;AAAA,IACpB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,MAKM;AACJ,YAAM,IAAI,WAAW;AACrB,YAAM,eAAe,sBAAsB,MAAM;AACjD,YAAM,gBAAgB,gBAAgB,iBAAiB,SAAS;AAChE,YAAM,WAAW,gBACb,GAAG,eAAe,OAAO,QAAQ,mBAChC,OAAO,QAAQ,GAAG;AACvB,YAAM,MAAM,GAAG,gBAAgB,mBAAmB,GAAG,OAAO,WAAW;AACvE,aAAO,mBAAmB,GAAG,KAAK;AAAA,IACpC;AAAA;AAAA;AAAA,IAGA,EAAE,oBAAoB,KAAc;AAAA,EACtC;AACA,SAAO;AACT;","names":[]}

package/dist/internal/runtime/constants.cjs

@@ -18,9 +18,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  DEFAULT_BUNDLE_NAME: () => DEFAULT_BUNDLE_NAME,
+  DEFAULT_COMPONENT_NAME: () => DEFAULT_COMPONENT_NAME,
   DEFAULT_ROUTE: () => DEFAULT_ROUTE,
-  NEXT_BUNDLE_PATH_RE: () => NEXT_BUNDLE_PATH_RE,
-  REMOTE_COMPONENT_REGEX: () => REMOTE_COMPONENT_REGEX,
   RUNTIME_SCRIPT: () => RUNTIME_SCRIPT,
   RUNTIME_TURBOPACK: () => RUNTIME_TURBOPACK,
   RUNTIME_WEBPACK: () => RUNTIME_WEBPACK,
@@ -28,20 +28,20 @@ __export(constants_exports, {
 });
 module.exports = __toCommonJS(constants_exports);
 var import_utils = require("#internal/utils");
+const DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
+const DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
 const DEFAULT_ROUTE = "/";
 const RUNTIME_WEBPACK = "webpack";
 const RUNTIME_TURBOPACK = "turbopack";
 const RUNTIME_SCRIPT = "script";
-const REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-const NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
 function getBundleKey(bundle) {
   return (0, import_utils.escapeString)(bundle);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DEFAULT_BUNDLE_NAME,
+  DEFAULT_COMPONENT_NAME,
   DEFAULT_ROUTE,
-  NEXT_BUNDLE_PATH_RE,
-  REMOTE_COMPONENT_REGEX,
   RUNTIME_SCRIPT,
   RUNTIME_TURBOPACK,
   RUNTIME_WEBPACK,

package/dist/internal/runtime/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/runtime/constants.ts"],"sourcesContent":["import { escapeString } from '#internal/utils';\n\nexport const DEFAULT_ROUTE = '/';\n\nexport const RUNTIME_WEBPACK = 'webpack';\nexport const RUNTIME_TURBOPACK = 'turbopack';\nexport const RUNTIME_SCRIPT = 'script';\n\nexport const REMOTE_COMPONENT_REGEX =\n  /(?<prefix>.*?)\\[(?<bundle>[^\\]]+)\\](?:%20| )(?<id>.+)/;\n\n// Matches Next.js bundle-prefixed paths like /_next/[bundle-name] /static/...\n// Used to strip the bundle identifier before loading scripts via the standard /_next/ path.\nexport const NEXT_BUNDLE_PATH_RE = /\\/_next\\/\\[.+\\](?:%20| )/;\n\nexport function getBundleKey(bundle: string): string {\n  return escapeString(bundle);\n}\n\nexport type Runtime =\n  | typeof RUNTIME_WEBPACK\n  | typeof RUNTIME_TURBOPACK\n  | typeof RUNTIME_SCRIPT;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B;AAEtB,MAAM,gBAAgB;AAEtB,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AAEvB,MAAM,yBACX;AAIK,MAAM,sBAAsB;AAE5B,SAAS,aAAa,QAAwB;AACnD,aAAO,2BAAa,MAAM;AAC5B;","names":[]}
+{"version":3,"sources":["../../../src/runtime/constants.ts"],"sourcesContent":["import { escapeString } from '#internal/utils';\n\nexport const DEFAULT_BUNDLE_NAME = '__vercel_remote_bundle';\nexport const DEFAULT_COMPONENT_NAME = '__vercel_remote_component';\nexport const DEFAULT_ROUTE = '/';\n\nexport const RUNTIME_WEBPACK = 'webpack';\nexport const RUNTIME_TURBOPACK = 'turbopack';\nexport const RUNTIME_SCRIPT = 'script';\n\nexport function getBundleKey(bundle: string): string {\n  return escapeString(bundle);\n}\n\nexport type Runtime =\n  | typeof RUNTIME_WEBPACK\n  | typeof RUNTIME_TURBOPACK\n  | typeof RUNTIME_SCRIPT;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B;AAEtB,MAAM,sBAAsB;AAC5B,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AAEtB,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AAEvB,SAAS,aAAa,QAAwB;AACnD,aAAO,2BAAa,MAAM;AAC5B;","names":[]}

package/dist/internal/runtime/constants.d.ts

@@ -1,10 +1,10 @@
+declare const DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
+declare const DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
 declare const DEFAULT_ROUTE = "/";
 declare const RUNTIME_WEBPACK = "webpack";
 declare const RUNTIME_TURBOPACK = "turbopack";
 declare const RUNTIME_SCRIPT = "script";
-declare const REMOTE_COMPONENT_REGEX: RegExp;
-declare const NEXT_BUNDLE_PATH_RE: RegExp;
 declare function getBundleKey(bundle: string): string;
 type Runtime = typeof RUNTIME_WEBPACK | typeof RUNTIME_TURBOPACK | typeof RUNTIME_SCRIPT;
 
-export { DEFAULT_ROUTE, NEXT_BUNDLE_PATH_RE, REMOTE_COMPONENT_REGEX, RUNTIME_SCRIPT, RUNTIME_TURBOPACK, RUNTIME_WEBPACK, Runtime, getBundleKey };
+export { DEFAULT_BUNDLE_NAME, DEFAULT_COMPONENT_NAME, DEFAULT_ROUTE, RUNTIME_SCRIPT, RUNTIME_TURBOPACK, RUNTIME_WEBPACK, Runtime, getBundleKey };

package/dist/internal/runtime/constants.js

@@ -1,17 +1,17 @@
 import { escapeString } from "#internal/utils";
+const DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
+const DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
 const DEFAULT_ROUTE = "/";
 const RUNTIME_WEBPACK = "webpack";
 const RUNTIME_TURBOPACK = "turbopack";
 const RUNTIME_SCRIPT = "script";
-const REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-const NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
 function getBundleKey(bundle) {
   return escapeString(bundle);
 }
 export {
+  DEFAULT_BUNDLE_NAME,
+  DEFAULT_COMPONENT_NAME,
   DEFAULT_ROUTE,
-  NEXT_BUNDLE_PATH_RE,
-  REMOTE_COMPONENT_REGEX,
   RUNTIME_SCRIPT,
   RUNTIME_TURBOPACK,
   RUNTIME_WEBPACK,

package/dist/internal/runtime/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/runtime/constants.ts"],"sourcesContent":["import { escapeString } from '#internal/utils';\n\nexport const DEFAULT_ROUTE = '/';\n\nexport const RUNTIME_WEBPACK = 'webpack';\nexport const RUNTIME_TURBOPACK = 'turbopack';\nexport const RUNTIME_SCRIPT = 'script';\n\nexport const REMOTE_COMPONENT_REGEX =\n  /(?<prefix>.*?)\\[(?<bundle>[^\\]]+)\\](?:%20| )(?<id>.+)/;\n\n// Matches Next.js bundle-prefixed paths like /_next/[bundle-name] /static/...\n// Used to strip the bundle identifier before loading scripts via the standard /_next/ path.\nexport const NEXT_BUNDLE_PATH_RE = /\\/_next\\/\\[.+\\](?:%20| )/;\n\nexport function getBundleKey(bundle: string): string {\n  return escapeString(bundle);\n}\n\nexport type Runtime =\n  | typeof RUNTIME_WEBPACK\n  | typeof RUNTIME_TURBOPACK\n  | typeof RUNTIME_SCRIPT;\n"],"mappings":"AAAA,SAAS,oBAAoB;AAEtB,MAAM,gBAAgB;AAEtB,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AAEvB,MAAM,yBACX;AAIK,MAAM,sBAAsB;AAE5B,SAAS,aAAa,QAAwB;AACnD,SAAO,aAAa,MAAM;AAC5B;","names":[]}
+{"version":3,"sources":["../../../src/runtime/constants.ts"],"sourcesContent":["import { escapeString } from '#internal/utils';\n\nexport const DEFAULT_BUNDLE_NAME = '__vercel_remote_bundle';\nexport const DEFAULT_COMPONENT_NAME = '__vercel_remote_component';\nexport const DEFAULT_ROUTE = '/';\n\nexport const RUNTIME_WEBPACK = 'webpack';\nexport const RUNTIME_TURBOPACK = 'turbopack';\nexport const RUNTIME_SCRIPT = 'script';\n\nexport function getBundleKey(bundle: string): string {\n  return escapeString(bundle);\n}\n\nexport type Runtime =\n  | typeof RUNTIME_WEBPACK\n  | typeof RUNTIME_TURBOPACK\n  | typeof RUNTIME_SCRIPT;\n"],"mappings":"AAAA,SAAS,oBAAoB;AAEtB,MAAM,sBAAsB;AAC5B,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AAEtB,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AAEvB,SAAS,aAAa,QAAwB;AACnD,SAAO,aAAa,MAAM;AAC5B;","names":[]}

package/dist/internal/runtime/html/parse-remote-html.cjs

@@ -18,7 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var parse_remote_html_exports = {};
 __export(parse_remote_html_exports, {
-  extractComponentMetadata: () => extractComponentMetadata,
   extractLinks: () => extractLinks,
   extractRemoteShared: () => extractRemoteShared,
   extractScripts: () => extractScripts,
@@ -31,6 +30,7 @@ __export(parse_remote_html_exports, {
 });
 module.exports = __toCommonJS(parse_remote_html_exports);
 var import_constants = require("#internal/runtime/constants");
+var import_metadata = require("#internal/runtime/metadata");
 var import_error = require("#internal/utils/error");
 function validateSingleComponent(doc, name, url) {
   if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
@@ -50,14 +50,6 @@ function resolveComponentName(component, nextData, fallbackName) {
   const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
   return { name, isRemoteComponent };
 }
-function extractComponentMetadata(component, nextData, name, url) {
-  return {
-    name,
-    bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default",
-    route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || import_constants.DEFAULT_ROUTE),
-    runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || import_constants.RUNTIME_SCRIPT)
-  };
-}
 function extractRemoteShared(doc, name, nextData) {
   const remoteSharedEl = doc.querySelector(
     `#${name}_shared[data-remote-components-shared]`
@@ -69,7 +61,7 @@ function extractRemoteShared(doc, name, nextData) {
 function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
   if (!component || !(rsc || nextData || isRemoteComponent)) {
     throw new import_error.RemoteComponentsError(
-      `Remote Component not found on ${url}.${name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+      `Remote Component not found on ${url}.${name !== import_constants.DEFAULT_COMPONENT_NAME ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
     );
   }
 }
@@ -95,10 +87,15 @@ function parseRemoteComponentDocument(doc, name, url) {
     name
   );
   const rsc = doc.querySelector(`#${resolvedName}_rsc`);
-  const metadata = extractComponentMetadata(
-    component,
-    nextData,
-    resolvedName,
+  const metadata = (0, import_metadata.buildMetadata)(
+    {
+      name: resolvedName,
+      bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle,
+      route: component?.getAttribute("data-route") ?? nextData?.page,
+      runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? import_constants.RUNTIME_SCRIPT,
+      id: component?.getAttribute("id"),
+      type: component?.getAttribute("data-type")
+    },
     url
   );
   const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
@@ -126,7 +123,6 @@ function parseRemoteComponentDocument(doc, name, url) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  extractComponentMetadata,
   extractLinks,
   extractRemoteShared,
   extractScripts,

package/dist/internal/runtime/html/parse-remote-html.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtime/html/parse-remote-html.ts"],"sourcesContent":["import type { NextData } from '#internal/host/server/types';\nimport { DEFAULT_ROUTE, RUNTIME_SCRIPT } from '#internal/runtime/constants';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\nimport {\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\n\nexport interface ParsedRemoteComponent {\n  /** The DOM element representing the remote component content. */\n  component: Element;\n  /** Resolved name of the remote component (with _ssr suffix stripped). */\n  name: string;\n  /** Whether the component is a <remote-component> custom element. */\n  isRemoteComponent: boolean;\n  /** Component metadata: bundle, route, runtime. */\n  metadata: {\n    name: string;\n    bundle: string;\n    route: string;\n    runtime: RemoteComponentMetadata['runtime'];\n  };\n  /** Parsed __NEXT_DATA__ or __REMOTE_NEXT_DATA__, or null. */\n  nextData: NextData | null;\n  /** The RSC flight data script element, or null. */\n  rsc: Element | null;\n  /** Shared module map extracted from the component's shared data script. */\n  remoteShared: Record<string, string>;\n  /** Link elements extracted from the document (outside the component). */\n  links: HTMLLinkElement[];\n  /** Script elements extracted from the component or document. */\n  scripts: HTMLScriptElement[];\n}\n\n/**\n * Validates that the document does not contain multiple unnamed remote components.\n * When multiple components exist, the consumer must specify a name to select one.\n */\nexport function validateSingleComponent(\n  doc: Document,\n  name: string,\n  url: string,\n): void {\n  if (\n    (doc.querySelectorAll('div[data-bundle][data-route]').length > 1 &&\n      !doc.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`)) ||\n    (doc.querySelectorAll('remote-component:not([src])').length > 1 &&\n      !doc.querySelector(`remote-component[name=\"${name}\"]`))\n  ) {\n    throw multipleRemoteComponentsError(url);\n  }\n}\n\n/**\n * Finds the remote component element in the parsed HTML document using the\n * standard querySelector chain. Returns null if no component is found.\n */\nexport function findComponentElement(\n  doc: Document,\n  name: string,\n): Element | null {\n  return (\n    doc.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`) ??\n    doc.querySelector('div[data-bundle][data-route]') ??\n    doc.querySelector('div#__next') ??\n    doc.querySelector(`remote-component[name=\"${name}\"]:not([src])`) ??\n    doc.querySelector('remote-component:not([src])')\n  );\n}\n\n/**\n * Parses the __NEXT_DATA__ or __REMOTE_NEXT_DATA__ script element from the document.\n */\nexport function parseNextData(doc: Document): NextData | null {\n  return JSON.parse(\n    (\n      doc.querySelector('#__NEXT_DATA__') ??\n      doc.querySelector('#__REMOTE_NEXT_DATA__')\n    )?.textContent ?? 'null',\n  ) as NextData | null;\n}\n\n/**\n * Resolves the component name from the element's id attribute, the name attribute\n * (for <remote-component> elements), nextData, or a fallback value.\n * Strips the _ssr suffix from the id if present.\n */\nexport function resolveComponentName(\n  component: Element | null,\n  nextData: NextData | null,\n  fallbackName: string,\n): { name: string; isRemoteComponent: boolean } {\n  const isRemoteComponent =\n    component?.tagName.toLowerCase() === 'remote-component';\n\n  const name =\n    component?.getAttribute('id')?.replace(/_ssr$/, '') ||\n    (isRemoteComponent && component?.getAttribute('name')) ||\n    (nextData ? '__next' : fallbackName);\n\n  return { name, isRemoteComponent };\n}\n\n/**\n * Extracts component metadata (bundle, route, runtime) from the component element\n * and Next.js data.\n */\nexport function extractComponentMetadata(\n  component: Element | null,\n  nextData: NextData | null,\n  name: string,\n  url: URL,\n): ParsedRemoteComponent['metadata'] {\n  return {\n    name,\n    bundle:\n      component?.getAttribute('data-bundle') ||\n      nextData?.props.__REMOTE_COMPONENT__?.bundle ||\n      'default',\n    route:\n      component?.getAttribute('data-route') ??\n      nextData?.page ??\n      (url.pathname || DEFAULT_ROUTE),\n    runtime: (component?.getAttribute('data-runtime') ??\n      (nextData?.props.__REMOTE_COMPONENT__?.runtime ||\n        RUNTIME_SCRIPT)) as RemoteComponentMetadata['runtime'],\n  };\n}\n\n/**\n * Extracts the shared module map from the document and removes the element.\n * Falls back to nextData's shared modules if available.\n */\nexport function extractRemoteShared(\n  doc: Document,\n  name: string,\n  nextData: NextData | null,\n): Record<string, string> {\n  const remoteSharedEl = doc.querySelector(\n    `#${name}_shared[data-remote-components-shared]`,\n  );\n  const remoteShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ??\n    ((JSON.parse(remoteSharedEl?.textContent ?? '{}') ?? {}) as Record<\n      string,\n      string\n    >);\n  remoteSharedEl?.remove();\n  return remoteShared;\n}\n\n/**\n * Validates that a remote component was found in the document and that it has\n * RSC data, Next.js data, or is a <remote-component> element.\n * Acts as a type assertion - narrows component to non-null on success.\n */\nexport function validateComponentFound(\n  component: Element | null,\n  rsc: Element | null,\n  nextData: NextData | null,\n  isRemoteComponent: boolean,\n  url: string,\n  name: string,\n): asserts component is Element {\n  if (!component || !(rsc || nextData || isRemoteComponent)) {\n    throw new RemoteComponentsError(\n      `Remote Component not found on ${url}.${\n        name !== '__vercel_remote_component'\n          ? ` The name for the <RemoteComponent> is \"${name}\". Check <RemoteComponent> usage.`\n          : ''\n      } Did you forget to wrap the content in <RemoteComponent>?`,\n    );\n  }\n}\n\n/**\n * Extracts link elements from the document that are not inside the component.\n */\nexport function extractLinks(\n  doc: Document,\n  component: Element,\n): HTMLLinkElement[] {\n  return Array.from(doc.querySelectorAll<HTMLLinkElement>('link[href]')).filter(\n    (link) => !component.contains(link),\n  );\n}\n\n/**\n * Extracts script elements from the component or document, depending on whether\n * the component is a <remote-component> custom element.\n */\nexport function extractScripts(\n  doc: Document,\n  component: Element,\n  isRemoteComponent: boolean,\n): HTMLScriptElement[] {\n  return Array.from(\n    (isRemoteComponent ? component : doc).querySelectorAll<HTMLScriptElement>(\n      'script[src],script[data-src]',\n    ),\n  );\n}\n\n/**\n * Parses a remote component HTML document and extracts all data needed for\n * loading and hydrating the component. This is the main orchestrator that\n * calls the individual extraction functions.\n */\nexport function parseRemoteComponentDocument(\n  doc: Document,\n  name: string,\n  url: URL,\n): ParsedRemoteComponent {\n  validateSingleComponent(doc, name, url.href);\n\n  const component = findComponentElement(doc, name);\n  const nextData = parseNextData(doc);\n\n  const { name: resolvedName, isRemoteComponent } = resolveComponentName(\n    component,\n    nextData,\n    name,\n  );\n\n  const rsc = doc.querySelector(`#${resolvedName}_rsc`);\n  const metadata = extractComponentMetadata(\n    component,\n    nextData,\n    resolvedName,\n    url,\n  );\n  const remoteShared = extractRemoteShared(doc, resolvedName, nextData);\n\n  validateComponentFound(\n    component,\n    rsc,\n    nextData,\n    isRemoteComponent,\n    url.href,\n    resolvedName,\n  );\n\n  const links = extractLinks(doc, component);\n  const scripts = extractScripts(doc, component, isRemoteComponent);\n\n  return {\n    component,\n    name: resolvedName,\n    isRemoteComponent,\n    metadata,\n    nextData,\n    rsc,\n    remoteShared,\n    links,\n    scripts,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/runtime/html/parse-remote-html.ts"],"sourcesContent":["import type { NextData } from '#internal/host/server/types';\nimport {\n  DEFAULT_COMPONENT_NAME,\n  RUNTIME_SCRIPT,\n} from '#internal/runtime/constants';\nimport {\n  buildMetadata,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport {\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\n\nexport interface ParsedRemoteComponent {\n  /** The DOM element representing the remote component content. */\n  component: Element;\n  /** Resolved name of the remote component (with _ssr suffix stripped). */\n  name: string;\n  /** Whether the component is a <remote-component> custom element. */\n  isRemoteComponent: boolean;\n  /** Component metadata: bundle, route, runtime. */\n  metadata: RemoteComponentMetadata;\n  /** Parsed __NEXT_DATA__ or __REMOTE_NEXT_DATA__, or null. */\n  nextData: NextData | null;\n  /** The RSC flight data script element, or null. */\n  rsc: Element | null;\n  /** Shared module map extracted from the component's shared data script. */\n  remoteShared: Record<string, string>;\n  /** Link elements extracted from the document (outside the component). */\n  links: HTMLLinkElement[];\n  /** Script elements extracted from the component or document. */\n  scripts: HTMLScriptElement[];\n}\n\n/**\n * Validates that the document does not contain multiple unnamed remote components.\n * When multiple components exist, the consumer must specify a name to select one.\n */\nexport function validateSingleComponent(\n  doc: Document,\n  name: string,\n  url: string,\n): void {\n  if (\n    (doc.querySelectorAll('div[data-bundle][data-route]').length > 1 &&\n      !doc.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`)) ||\n    (doc.querySelectorAll('remote-component:not([src])').length > 1 &&\n      !doc.querySelector(`remote-component[name=\"${name}\"]`))\n  ) {\n    throw multipleRemoteComponentsError(url);\n  }\n}\n\n/**\n * Finds the remote component element in the parsed HTML document using the\n * standard querySelector chain. Returns null if no component is found.\n */\nexport function findComponentElement(\n  doc: Document,\n  name: string,\n): Element | null {\n  return (\n    doc.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`) ??\n    doc.querySelector('div[data-bundle][data-route]') ??\n    doc.querySelector('div#__next') ??\n    doc.querySelector(`remote-component[name=\"${name}\"]:not([src])`) ??\n    doc.querySelector('remote-component:not([src])')\n  );\n}\n\n/**\n * Parses the __NEXT_DATA__ or __REMOTE_NEXT_DATA__ script element from the document.\n */\nexport function parseNextData(doc: Document): NextData | null {\n  return JSON.parse(\n    (\n      doc.querySelector('#__NEXT_DATA__') ??\n      doc.querySelector('#__REMOTE_NEXT_DATA__')\n    )?.textContent ?? 'null',\n  ) as NextData | null;\n}\n\n/**\n * Resolves the component name from the element's id attribute, the name attribute\n * (for <remote-component> elements), nextData, or a fallback value.\n * Strips the _ssr suffix from the id if present.\n */\nexport function resolveComponentName(\n  component: Element | null,\n  nextData: NextData | null,\n  fallbackName: string,\n): { name: string; isRemoteComponent: boolean } {\n  const isRemoteComponent =\n    component?.tagName.toLowerCase() === 'remote-component';\n\n  const name =\n    component?.getAttribute('id')?.replace(/_ssr$/, '') ||\n    (isRemoteComponent && component?.getAttribute('name')) ||\n    (nextData ? '__next' : fallbackName);\n\n  return { name, isRemoteComponent };\n}\n\n/**\n * Extracts the shared module map from the document and removes the element.\n * Falls back to nextData's shared modules if available.\n */\nexport function extractRemoteShared(\n  doc: Document,\n  name: string,\n  nextData: NextData | null,\n): Record<string, string> {\n  const remoteSharedEl = doc.querySelector(\n    `#${name}_shared[data-remote-components-shared]`,\n  );\n  const remoteShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ??\n    ((JSON.parse(remoteSharedEl?.textContent ?? '{}') ?? {}) as Record<\n      string,\n      string\n    >);\n  remoteSharedEl?.remove();\n  return remoteShared;\n}\n\n/**\n * Validates that a remote component was found in the document and that it has\n * RSC data, Next.js data, or is a <remote-component> element.\n * Acts as a type assertion - narrows component to non-null on success.\n */\nexport function validateComponentFound(\n  component: Element | null,\n  rsc: Element | null,\n  nextData: NextData | null,\n  isRemoteComponent: boolean,\n  url: string,\n  name: string,\n): asserts component is Element {\n  if (!component || !(rsc || nextData || isRemoteComponent)) {\n    throw new RemoteComponentsError(\n      `Remote Component not found on ${url}.${\n        name !== DEFAULT_COMPONENT_NAME\n          ? ` The name for the <RemoteComponent> is \"${name}\". Check <RemoteComponent> usage.`\n          : ''\n      } Did you forget to wrap the content in <RemoteComponent>?`,\n    );\n  }\n}\n\n/**\n * Extracts link elements from the document that are not inside the component.\n */\nexport function extractLinks(\n  doc: Document,\n  component: Element,\n): HTMLLinkElement[] {\n  return Array.from(doc.querySelectorAll<HTMLLinkElement>('link[href]')).filter(\n    (link) => !component.contains(link),\n  );\n}\n\n/**\n * Extracts script elements from the component or document, depending on whether\n * the component is a <remote-component> custom element.\n */\nexport function extractScripts(\n  doc: Document,\n  component: Element,\n  isRemoteComponent: boolean,\n): HTMLScriptElement[] {\n  return Array.from(\n    (isRemoteComponent ? component : doc).querySelectorAll<HTMLScriptElement>(\n      'script[src],script[data-src]',\n    ),\n  );\n}\n\n/**\n * Parses a remote component HTML document and extracts all data needed for\n * loading and hydrating the component. This is the main orchestrator that\n * calls the individual extraction functions.\n */\nexport function parseRemoteComponentDocument(\n  doc: Document,\n  name: string,\n  url: URL,\n): ParsedRemoteComponent {\n  validateSingleComponent(doc, name, url.href);\n\n  const component = findComponentElement(doc, name);\n  const nextData = parseNextData(doc);\n\n  const { name: resolvedName, isRemoteComponent } = resolveComponentName(\n    component,\n    nextData,\n    name,\n  );\n\n  const rsc = doc.querySelector(`#${resolvedName}_rsc`);\n  const metadata = buildMetadata(\n    {\n      name: resolvedName,\n      bundle:\n        component?.getAttribute('data-bundle') ||\n        nextData?.props.__REMOTE_COMPONENT__?.bundle,\n      route: component?.getAttribute('data-route') ?? nextData?.page,\n      runtime:\n        component?.getAttribute('data-runtime') ??\n        nextData?.props.__REMOTE_COMPONENT__?.runtime ??\n        RUNTIME_SCRIPT,\n      id: component?.getAttribute('id'),\n      type: component?.getAttribute('data-type'),\n    },\n    url,\n  );\n  const remoteShared = extractRemoteShared(doc, resolvedName, nextData);\n\n  validateComponentFound(\n    component,\n    rsc,\n    nextData,\n    isRemoteComponent,\n    url.href,\n    resolvedName,\n  );\n\n  const links = extractLinks(doc, component);\n  const scripts = extractScripts(doc, component, isRemoteComponent);\n\n  return {\n    component,\n    name: resolvedName,\n    isRemoteComponent,\n    metadata,\n    nextData,\n    rsc,\n    remoteShared,\n    links,\n    scripts,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/runtime/html/parse-remote-html.d.ts

@@ -13,12 +13,7 @@ interface ParsedRemoteComponent {
     /** Whether the component is a <remote-component> custom element. */
     isRemoteComponent: boolean;
     /** Component metadata: bundle, route, runtime. */
-    metadata: {
-        name: string;
-        bundle: string;
-        route: string;
-        runtime: RemoteComponentMetadata['runtime'];
-    };
+    metadata: RemoteComponentMetadata;
     /** Parsed __NEXT_DATA__ or __REMOTE_NEXT_DATA__, or null. */
     nextData: NextData | null;
     /** The RSC flight data script element, or null. */
@@ -53,11 +48,6 @@ declare function resolveComponentName(component: Element | null, nextData: NextD
     name: string;
     isRemoteComponent: boolean;
 };
-/**
- * Extracts component metadata (bundle, route, runtime) from the component element
- * and Next.js data.
- */
-declare function extractComponentMetadata(component: Element | null, nextData: NextData | null, name: string, url: URL): ParsedRemoteComponent['metadata'];
 /**
  * Extracts the shared module map from the document and removes the element.
  * Falls back to nextData's shared modules if available.
@@ -85,4 +75,4 @@ declare function extractScripts(doc: Document, component: Element, isRemoteCompo
  */
 declare function parseRemoteComponentDocument(doc: Document, name: string, url: URL): ParsedRemoteComponent;
 
-export { ParsedRemoteComponent, extractComponentMetadata, extractLinks, extractRemoteShared, extractScripts, findComponentElement, parseNextData, parseRemoteComponentDocument, resolveComponentName, validateComponentFound, validateSingleComponent };
+export { ParsedRemoteComponent, extractLinks, extractRemoteShared, extractScripts, findComponentElement, parseNextData, parseRemoteComponentDocument, resolveComponentName, validateComponentFound, validateSingleComponent };

package/dist/internal/runtime/html/parse-remote-html.js

@@ -1,4 +1,10 @@
-import { DEFAULT_ROUTE, RUNTIME_SCRIPT } from "#internal/runtime/constants";
+import {
+  DEFAULT_COMPONENT_NAME,
+  RUNTIME_SCRIPT
+} from "#internal/runtime/constants";
+import {
+  buildMetadata
+} from "#internal/runtime/metadata";
 import {
   multipleRemoteComponentsError,
   RemoteComponentsError
@@ -21,14 +27,6 @@ function resolveComponentName(component, nextData, fallbackName) {
   const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
   return { name, isRemoteComponent };
 }
-function extractComponentMetadata(component, nextData, name, url) {
-  return {
-    name,
-    bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default",
-    route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
-    runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
-  };
-}
 function extractRemoteShared(doc, name, nextData) {
   const remoteSharedEl = doc.querySelector(
     `#${name}_shared[data-remote-components-shared]`
@@ -40,7 +38,7 @@ function extractRemoteShared(doc, name, nextData) {
 function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
   if (!component || !(rsc || nextData || isRemoteComponent)) {
     throw new RemoteComponentsError(
-      `Remote Component not found on ${url}.${name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+      `Remote Component not found on ${url}.${name !== DEFAULT_COMPONENT_NAME ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
     );
   }
 }
@@ -66,10 +64,15 @@ function parseRemoteComponentDocument(doc, name, url) {
     name
   );
   const rsc = doc.querySelector(`#${resolvedName}_rsc`);
-  const metadata = extractComponentMetadata(
-    component,
-    nextData,
-    resolvedName,
+  const metadata = buildMetadata(
+    {
+      name: resolvedName,
+      bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle,
+      route: component?.getAttribute("data-route") ?? nextData?.page,
+      runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? RUNTIME_SCRIPT,
+      id: component?.getAttribute("id"),
+      type: component?.getAttribute("data-type")
+    },
     url
   );
   const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
@@ -96,7 +99,6 @@ function parseRemoteComponentDocument(doc, name, url) {
   };
 }
 export {
-  extractComponentMetadata,
   extractLinks,
   extractRemoteShared,
   extractScripts,