remote-components 0.3.1 → 0.3.2

package/dist/internal/host/nextjs/image-shared.cjs

@@ -22,12 +22,12 @@ __export(image_shared_exports, {
 });
 module.exports = __toCommonJS(image_shared_exports);
 var import_remote_image_loader = require("#internal/host/shared/remote-image-loader");
+var import_remote_scope = require("#internal/runtime/turbopack/remote-scope");
 var import_default_resolve_client_url = require("#internal/runtime/url/default-resolve-client-url");
 function resolveForBundle(unbound, bundle) {
   if (!unbound)
     return void 0;
-  const self = globalThis;
-  const remoteSrc = self.__remote_bundle_url__?.[bundle]?.href ?? "";
+  const remoteSrc = (0, import_remote_scope.getScope)(bundle)?.url.href ?? "";
   return (0, import_default_resolve_client_url.bindResolveClientUrl)(unbound, remoteSrc);
 }
 function createImageLoaderSharedEntries({

package/dist/internal/host/nextjs/image-shared.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/nextjs/image-shared.ts"],"sourcesContent":["import { createRemoteImageLoader } from '#internal/host/shared/remote-image-loader';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\ntype SharedImageModule = (bundle: string) => Promise<unknown>;\n\nfunction resolveForBundle(\n  unbound: ResolveClientUrl | undefined,\n  bundle: string,\n): InternalResolveClientUrl | undefined {\n  if (!unbound) return undefined;\n  const self = globalThis as typeof globalThis & {\n    __remote_bundle_url__?: Record<string, URL>;\n  };\n  const remoteSrc = self.__remote_bundle_url__?.[bundle]?.href ?? '';\n  return bindResolveClientUrl(unbound, remoteSrc);\n}\n\n/**\n * Creates shared module entries for `next/dist/shared/lib/image-loader` (and\n * its ESM alias). These ensure that any code path in the remote's bundle that\n * directly imports the image loader — rather than going through the shared\n * `next/image` entry — still routes image optimization requests to the remote\n * and through the host's proxy when deployment protection is active.\n *\n * Pass `bound` when the resolver already has `remoteSrc` applied (App Router —\n * `useResolveClientUrl` returns the bound form). Pass `unbound` when only the\n * raw 2-arg `ResolveClientUrl` is available (Pages Router, client-only\n * provider) — binding is deferred until the bundle URL is known at resolution\n * time.\n */\nexport function createImageLoaderSharedEntries({\n  bound,\n  unbound,\n}: {\n  bound?: InternalResolveClientUrl;\n  unbound?: ResolveClientUrl;\n} = {}): Record<string, SharedImageModule> {\n  const entry: SharedImageModule = (bundle: string) => {\n    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);\n    return Promise.resolve({\n      default: createRemoteImageLoader(bundle, resolveClientUrl),\n      __esModule: true,\n    });\n  };\n  return {\n    'next/dist/shared/lib/image-loader': entry,\n    'next/dist/esm/shared/lib/image-loader': entry,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAwC;AACxC,wCAAqC;AAQrC,SAAS,iBACP,SACA,QACsC;AACtC,MAAI,CAAC;AAAS,WAAO;AACrB,QAAM,OAAO;AAGb,QAAM,YAAY,KAAK,wBAAwB,MAAM,GAAG,QAAQ;AAChE,aAAO,wDAAqB,SAAS,SAAS;AAChD;AAeO,SAAS,+BAA+B;AAAA,EAC7C;AAAA,EACA;AACF,IAGI,CAAC,GAAsC;AACzC,QAAM,QAA2B,CAAC,WAAmB;AACnD,UAAM,mBAAmB,SAAS,iBAAiB,SAAS,MAAM;AAClE,WAAO,QAAQ,QAAQ;AAAA,MACrB,aAAS,oDAAwB,QAAQ,gBAAgB;AAAA,MACzD,YAAY;AAAA,IACd,CAAC;AAAA,EACH;AACA,SAAO;AAAA,IACL,qCAAqC;AAAA,IACrC,yCAAyC;AAAA,EAC3C;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/host/nextjs/image-shared.ts"],"sourcesContent":["import { createRemoteImageLoader } from '#internal/host/shared/remote-image-loader';\nimport { getScope } from '#internal/runtime/turbopack/remote-scope';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\ntype SharedImageModule = (bundle: string) => Promise<unknown>;\n\nfunction resolveForBundle(\n  unbound: ResolveClientUrl | undefined,\n  bundle: string,\n): InternalResolveClientUrl | undefined {\n  if (!unbound) return undefined;\n  const remoteSrc = getScope(bundle)?.url.href ?? '';\n  return bindResolveClientUrl(unbound, remoteSrc);\n}\n\n/**\n * Creates shared module entries for `next/dist/shared/lib/image-loader` (and\n * its ESM alias). These ensure that any code path in the remote's bundle that\n * directly imports the image loader — rather than going through the shared\n * `next/image` entry — still routes image optimization requests to the remote\n * and through the host's proxy when deployment protection is active.\n *\n * Pass `bound` when the resolver already has `remoteSrc` applied (App Router —\n * `useResolveClientUrl` returns the bound form). Pass `unbound` when only the\n * raw 2-arg `ResolveClientUrl` is available (Pages Router, client-only\n * provider) — binding is deferred until the bundle URL is known at resolution\n * time.\n */\nexport function createImageLoaderSharedEntries({\n  bound,\n  unbound,\n}: {\n  bound?: InternalResolveClientUrl;\n  unbound?: ResolveClientUrl;\n} = {}): Record<string, SharedImageModule> {\n  const entry: SharedImageModule = (bundle: string) => {\n    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);\n    return Promise.resolve({\n      default: createRemoteImageLoader(bundle, resolveClientUrl),\n      __esModule: true,\n    });\n  };\n  return {\n    'next/dist/shared/lib/image-loader': entry,\n    'next/dist/esm/shared/lib/image-loader': entry,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAwC;AACxC,0BAAyB;AACzB,wCAAqC;AAQrC,SAAS,iBACP,SACA,QACsC;AACtC,MAAI,CAAC;AAAS,WAAO;AACrB,QAAM,gBAAY,8BAAS,MAAM,GAAG,IAAI,QAAQ;AAChD,aAAO,wDAAqB,SAAS,SAAS;AAChD;AAeO,SAAS,+BAA+B;AAAA,EAC7C;AAAA,EACA;AACF,IAGI,CAAC,GAAsC;AACzC,QAAM,QAA2B,CAAC,WAAmB;AACnD,UAAM,mBAAmB,SAAS,iBAAiB,SAAS,MAAM;AAClE,WAAO,QAAQ,QAAQ;AAAA,MACrB,aAAS,oDAAwB,QAAQ,gBAAgB;AAAA,MACzD,YAAY;AAAA,IACd,CAAC;AAAA,EACH;AACA,SAAO;AAAA,IACL,qCAAqC;AAAA,IACrC,yCAAyC;AAAA,EAC3C;AACF;","names":[]}

package/dist/internal/host/nextjs/image-shared.js

@@ -1,10 +1,10 @@
 import { createRemoteImageLoader } from "#internal/host/shared/remote-image-loader";
+import { getScope } from "#internal/runtime/turbopack/remote-scope";
 import { bindResolveClientUrl } from "#internal/runtime/url/default-resolve-client-url";
 function resolveForBundle(unbound, bundle) {
   if (!unbound)
     return void 0;
-  const self = globalThis;
-  const remoteSrc = self.__remote_bundle_url__?.[bundle]?.href ?? "";
+  const remoteSrc = getScope(bundle)?.url.href ?? "";
   return bindResolveClientUrl(unbound, remoteSrc);
 }
 function createImageLoaderSharedEntries({

package/dist/internal/host/nextjs/image-shared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/nextjs/image-shared.ts"],"sourcesContent":["import { createRemoteImageLoader } from '#internal/host/shared/remote-image-loader';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\ntype SharedImageModule = (bundle: string) => Promise<unknown>;\n\nfunction resolveForBundle(\n  unbound: ResolveClientUrl | undefined,\n  bundle: string,\n): InternalResolveClientUrl | undefined {\n  if (!unbound) return undefined;\n  const self = globalThis as typeof globalThis & {\n    __remote_bundle_url__?: Record<string, URL>;\n  };\n  const remoteSrc = self.__remote_bundle_url__?.[bundle]?.href ?? '';\n  return bindResolveClientUrl(unbound, remoteSrc);\n}\n\n/**\n * Creates shared module entries for `next/dist/shared/lib/image-loader` (and\n * its ESM alias). These ensure that any code path in the remote's bundle that\n * directly imports the image loader — rather than going through the shared\n * `next/image` entry — still routes image optimization requests to the remote\n * and through the host's proxy when deployment protection is active.\n *\n * Pass `bound` when the resolver already has `remoteSrc` applied (App Router —\n * `useResolveClientUrl` returns the bound form). Pass `unbound` when only the\n * raw 2-arg `ResolveClientUrl` is available (Pages Router, client-only\n * provider) — binding is deferred until the bundle URL is known at resolution\n * time.\n */\nexport function createImageLoaderSharedEntries({\n  bound,\n  unbound,\n}: {\n  bound?: InternalResolveClientUrl;\n  unbound?: ResolveClientUrl;\n} = {}): Record<string, SharedImageModule> {\n  const entry: SharedImageModule = (bundle: string) => {\n    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);\n    return Promise.resolve({\n      default: createRemoteImageLoader(bundle, resolveClientUrl),\n      __esModule: true,\n    });\n  };\n  return {\n    'next/dist/shared/lib/image-loader': entry,\n    'next/dist/esm/shared/lib/image-loader': entry,\n  };\n}\n"],"mappings":"AAAA,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AAQrC,SAAS,iBACP,SACA,QACsC;AACtC,MAAI,CAAC;AAAS,WAAO;AACrB,QAAM,OAAO;AAGb,QAAM,YAAY,KAAK,wBAAwB,MAAM,GAAG,QAAQ;AAChE,SAAO,qBAAqB,SAAS,SAAS;AAChD;AAeO,SAAS,+BAA+B;AAAA,EAC7C;AAAA,EACA;AACF,IAGI,CAAC,GAAsC;AACzC,QAAM,QAA2B,CAAC,WAAmB;AACnD,UAAM,mBAAmB,SAAS,iBAAiB,SAAS,MAAM;AAClE,WAAO,QAAQ,QAAQ;AAAA,MACrB,SAAS,wBAAwB,QAAQ,gBAAgB;AAAA,MACzD,YAAY;AAAA,IACd,CAAC;AAAA,EACH;AACA,SAAO;AAAA,IACL,qCAAqC;AAAA,IACrC,yCAAyC;AAAA,EAC3C;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/host/nextjs/image-shared.ts"],"sourcesContent":["import { createRemoteImageLoader } from '#internal/host/shared/remote-image-loader';\nimport { getScope } from '#internal/runtime/turbopack/remote-scope';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\ntype SharedImageModule = (bundle: string) => Promise<unknown>;\n\nfunction resolveForBundle(\n  unbound: ResolveClientUrl | undefined,\n  bundle: string,\n): InternalResolveClientUrl | undefined {\n  if (!unbound) return undefined;\n  const remoteSrc = getScope(bundle)?.url.href ?? '';\n  return bindResolveClientUrl(unbound, remoteSrc);\n}\n\n/**\n * Creates shared module entries for `next/dist/shared/lib/image-loader` (and\n * its ESM alias). These ensure that any code path in the remote's bundle that\n * directly imports the image loader — rather than going through the shared\n * `next/image` entry — still routes image optimization requests to the remote\n * and through the host's proxy when deployment protection is active.\n *\n * Pass `bound` when the resolver already has `remoteSrc` applied (App Router —\n * `useResolveClientUrl` returns the bound form). Pass `unbound` when only the\n * raw 2-arg `ResolveClientUrl` is available (Pages Router, client-only\n * provider) — binding is deferred until the bundle URL is known at resolution\n * time.\n */\nexport function createImageLoaderSharedEntries({\n  bound,\n  unbound,\n}: {\n  bound?: InternalResolveClientUrl;\n  unbound?: ResolveClientUrl;\n} = {}): Record<string, SharedImageModule> {\n  const entry: SharedImageModule = (bundle: string) => {\n    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);\n    return Promise.resolve({\n      default: createRemoteImageLoader(bundle, resolveClientUrl),\n      __esModule: true,\n    });\n  };\n  return {\n    'next/dist/shared/lib/image-loader': entry,\n    'next/dist/esm/shared/lib/image-loader': entry,\n  };\n}\n"],"mappings":"AAAA,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AAQrC,SAAS,iBACP,SACA,QACsC;AACtC,MAAI,CAAC;AAAS,WAAO;AACrB,QAAM,YAAY,SAAS,MAAM,GAAG,IAAI,QAAQ;AAChD,SAAO,qBAAqB,SAAS,SAAS;AAChD;AAeO,SAAS,+BAA+B;AAAA,EAC7C;AAAA,EACA;AACF,IAGI,CAAC,GAAsC;AACzC,QAAM,QAA2B,CAAC,WAAmB;AACnD,UAAM,mBAAmB,SAAS,iBAAiB,SAAS,MAAM;AAClE,WAAO,QAAQ,QAAQ;AAAA,MACrB,SAAS,wBAAwB,QAAQ,gBAAgB;AAAA,MACzD,YAAY;AAAA,IACd,CAAC;AAAA,EACH;AACA,SAAO;AAAA,IACL,qCAAqC;AAAA,IACrC,yCAAyC;AAAA,EAC3C;AACF;","names":[]}

package/dist/internal/host/server/fetch-remote-component.cjs

@@ -38,6 +38,7 @@ var import_fetch_with_hooks = require("#internal/host/server/fetch-with-hooks");
 var import_get_client_src = require("#internal/host/server/get-client-src");
 var import_get_ssr_relative_path_base_url = require("#internal/host/server/get-ssr-relative-path-base-url");
 var import_metadata = require("#internal/runtime/metadata");
+var import_utils = require("#internal/utils");
 var import_error = require("#internal/utils/error");
 async function buildRscComponent(rsc, serverUrl) {
   const componentRSC = `0:${JSON.stringify(rsc)}
@@ -81,6 +82,9 @@ function buildSkeletonResponse(serverUrl, metadata, skeletonComponent) {
     remoteShared: {}
   };
 }
+function scopeChunkReferences(chunk, bundle, scopedName) {
+  return chunk.replaceAll(`[${bundle}]`, `[${scopedName}]`);
+}
 function visitFragment(fragment, serverUrl, remoteName) {
   const scriptSrcSet = /* @__PURE__ */ new Set();
   const scriptTextSet = /* @__PURE__ */ new Set();
@@ -95,6 +99,8 @@ function visitFragment(fragment, serverUrl, remoteName) {
   let hasRSC = false;
   let hasShared = false;
   let error;
+  const isCrossOrigin = serverUrl.origin !== (0, import_get_ssr_relative_path_base_url.getSSRRelativePathBaseUrl)();
+  const rawRscChunks = [];
   const rsc = (0, import_dom_flight.visit)(fragment, {
     url: serverUrl,
     name: remoteName,
@@ -130,7 +136,7 @@ function visitFragment(fragment, serverUrl, remoteName) {
       }
     },
     onRSC(chunk) {
-      hydrationData.push(chunk);
+      rawRscChunks.push(chunk);
       hasRSC = true;
     },
     onNextData(data) {
@@ -152,6 +158,19 @@ function visitFragment(fragment, serverUrl, remoteName) {
       }
     }
   });
+  if (isCrossOrigin && metadata?.bundle) {
+    const scopedName = (0, import_utils.computeScopedName)(metadata.bundle, {
+      remoteHost: serverUrl.host,
+      isCrossOrigin: true
+    });
+    for (const chunk of rawRscChunks) {
+      hydrationData.push(
+        scopeChunkReferences(chunk, metadata.bundle, scopedName)
+      );
+    }
+  } else {
+    hydrationData.push(...rawRscChunks);
+  }
   if (error) {
     throw error;
   }

package/dist/internal/host/server/fetch-remote-component.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await import(\n    'next/dist/compiled/react-server-dom-webpack/client.edge'\n  );\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: Record<string, string> = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      hydrationData.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: {\n    name?: string;\n    rsc?: boolean;\n    /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n    appRouter?: boolean;\n    onRequest?: OnRequestHook;\n    onResponse?: OnResponseHook;\n  } = {},\n): Promise<FetchRemoteComponentResponse> {\n  const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n  const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = {\n    next: {\n      tags,\n    },\n  };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'Check if you can open it in the browser.',\n    );\n  }\n\n  // create a parser for the HTML response\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // If the remote component is part of a microfrontend, the src provided\n    // will be relative.\n    const isSSRRelativePathBase =\n      serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n    if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { computeScopedName } from '#internal/utils';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await import(\n    'next/dist/compiled/react-server-dom-webpack/client.edge'\n  );\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Rewrites the bundle identifier in RSC flight data from the plain bundle\n * name to the origin-qualified scoped name. When multiple remotes share the\n * same bundle name (e.g. production and preview of the same app), this\n * makes each one unique so the client can look up the correct RemoteScope\n * by name alone.\n *\n * `[bundle] /path` → `[scopedName] /path`\n * `[bundle] 12345` → `[scopedName] 12345`\n *\n * Only applied for cross-origin remotes — same-origin chunks keep the\n * plain bundle name since there's no ambiguity.\n */\nfunction scopeChunkReferences(\n  chunk: string,\n  bundle: string,\n  scopedName: string,\n): string {\n  return chunk.replaceAll(`[${bundle}]`, `[${scopedName}]`);\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: Record<string, string> = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  // For cross-origin remotes, rewrite bundle identifiers in RSC chunks to\n  // the scoped name so the client dispatchers resolve the correct scope.\n  // Chunks are collected raw during visit() and rewritten afterwards because\n  // RSC script tags appear before the metadata element in the HTML.\n  const isCrossOrigin = serverUrl.origin !== getSSRRelativePathBaseUrl();\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  // Rewrite bundle identifiers in RSC chunk references to use the scoped name\n  // so the client dispatchers can resolve the correct scope with a direct lookup.\n  // This must happen after visit() because RSC script tags appear before the\n  // metadata element in the HTML.\n  if (isCrossOrigin && metadata?.bundle) {\n    const scopedName = computeScopedName(metadata.bundle, {\n      remoteHost: serverUrl.host,\n      isCrossOrigin: true,\n    });\n    for (const chunk of rawRscChunks) {\n      hydrationData.push(\n        scopeChunkReferences(chunk, metadata.bundle, scopedName),\n      );\n    }\n  } else {\n    hydrationData.push(...rawRscChunks);\n  }\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: {\n    name?: string;\n    rsc?: boolean;\n    /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n    appRouter?: boolean;\n    onRequest?: OnRequestHook;\n    onResponse?: OnResponseHook;\n  } = {},\n): Promise<FetchRemoteComponentResponse> {\n  const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n  const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = {\n    next: {\n      tags,\n    },\n  };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'Check if you can open it in the browser.',\n    );\n  }\n\n  // create a parser for the HTML response\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // If the remote component is part of a microfrontend, the src provided\n    // will be relative.\n    const isSSRRelativePathBase =\n      serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n    if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAmD;AACnD,wBAAgC;AAChC,sBAGO;AACP,8BAA+B;AAC/B,4BAA6B;AAC7B,4CAA0C;AAS1C,sBAIO;AACP,mBAAkC;AAClC,mBAIO;AAQP,eAAe,kBACb,KACA,WAC0B;AAC1B,QAAM,eAAe,KAAK,KAAK,UAAU,GAAG;AAAA;AAC5C,QAAM,EAAE,yBAAyB,IAAI,MAAM,OACzC,yDACF;AACA,SAAO;AAAA,IACL,IAAI,eAAe;AAAA,MACjB,MAAM;AAAA,MACN,MAAM,YAAY;AAChB,cAAM,UAAU,IAAI,YAAY;AAChC,mBAAW,QAAQ,QAAQ,OAAO,YAAY,CAAC;AAC/C,mBAAW,MAAM;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,IACD;AAAA,MACE,wBAAwB;AAAA,QACtB,eAAe;AAAA,UACb,QAAQ,UAAU;AAAA,UAClB,aAAa;AAAA,QACf;AAAA,QACA,WAAW,CAAC;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF;AAEA,SAAS,sBACP,WACA,UACA,mBAC8B;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA,UAAU;AAAA,MACR,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,IACA,SAAK,oCAAmB;AAAA,IACxB,SAAS,CAAC;AAAA,IACV,OAAO,CAAC;AAAA,IACR,eAAe,CAAC;AAAA,IAChB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAM,iCAAgB,UAAU,IAAI;AAAA,IACpC,cAAc,CAAC;AAAA,EACjB;AACF;AAeA,SAAS,qBACP,OACA,QACA,YACQ;AACR,SAAO,MAAM,WAAW,IAAI,WAAW,IAAI,aAAa;AAC1D;AAMA,SAAS,cACP,UACA,WACA,YACA;AACA,QAAM,eAAe,oBAAI,IAAY;AACrC,QAAM,gBAAgB,oBAAI,IAAY;AACtC,QAAM,UAA8B,CAAC;AAErC,QAAM,aAAa,oBAAI,IAAY;AACnC,QAAM,QAA0B,CAAC;AAEjC,QAAM,gBAA0B,CAAC;AACjC,QAAM,aAAa,oBAAI,IAAY;AAEnC,MAAI;AACJ,MAAI;AACJ,MAAI,eAAuC,CAAC;AAC5C,MAAI,SAAS;AACb,MAAI,YAAY;AAChB,MAAI;AAMJ,QAAM,gBAAgB,UAAU,eAAW,iEAA0B;AAErE,QAAM,eAAyB,CAAC;AAEhC,QAAM,UAAM,yBAAM,UAAU;AAAA,IAC1B,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW,OAAyB;AAClC,YAAM,eAAW,+BAAc,OAAO,SAAS;AAG/C,UACE,CAAC,cACD,YACA,SAAS,OAAO,SAAS,MACzB,SAAS,OAAO,YAChB,SAAS,OAAO,YAChB,CAAC,UACD;AACA,kBAAM,4CAA8B,UAAU,IAAI;AAAA,MACpD;AACA,iBAAW;AAAA,IACb;AAAA,IACA,SAAS,OAAO;AACd,YAAM,gBAAY,oCAAa,MAAM,KAAK,UAAU,IAAI;AACxD,YAAM,cACJ,OAAO,MAAM,gBAAgB,WAAW,MAAM,cAAc;AAE9D,UAAI,aAAa;AACf,YAAI,CAAC,cAAc,IAAI,WAAW,GAAG;AACnC,wBAAc,IAAI,WAAW;AAC7B,kBAAQ,KAAK,EAAE,KAAK,IAAI,YAAY,CAAC;AAAA,QACvC;AAAA,MACF,WAAW,CAAC,aAAa,IAAI,SAAS,GAAG;AACvC,qBAAa,IAAI,SAAS;AAC1B,gBAAQ,KAAK,EAAE,KAAK,UAAU,CAAC;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAO,OAAO;AACZ,YAAM,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,UAAM,oCAAa,MAAM,MAAM,UAAU,IAAI;AAAA,MAC/C;AACA,YAAM,UAAU,GAAG,cAAc,SAAS,MAAM;AAChD,UAAI,CAAC,WAAW,IAAI,OAAO,GAAG;AAC5B,mBAAW,IAAI,OAAO;AACtB,cAAM,KAAK,aAAa;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,MAAM,OAAO;AACX,mBAAa,KAAK,KAAK;AACvB,eAAS;AAAA,IACX;AAAA,IACA,WAAW,MAAM;AACf,iBAAW;AAAA,IACb;AAAA,IACA,OAAO,OAAO;AACZ,UAAI,CAAC,WAAW,IAAI,KAAK,GAAG;AAC1B,mBAAW,IAAI,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA,SAAS,SAAS;AAChB,qBAAe;AACf,kBAAY;AAAA,IACd;AAAA,IACA,QAAQ,SAAS,OAAO;AACtB,cAAQ,IAAI,mCAAsB,OAAO;AACzC,UAAI,OAAO;AACT,cAAM,QAAQ;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CAAC;AAMD,MAAI,iBAAiB,UAAU,QAAQ;AACrC,UAAM,iBAAa,gCAAkB,SAAS,QAAQ;AAAA,MACpD,YAAY,UAAU;AAAA,MACtB,eAAe;AAAA,IACjB,CAAC;AACD,eAAW,SAAS,cAAc;AAChC,oBAAc;AAAA,QACZ,qBAAqB,OAAO,SAAS,QAAQ,UAAU;AAAA,MACzD;AAAA,IACF;AAAA,EACF,OAAO;AACL,kBAAc,KAAK,GAAG,YAAY;AAAA,EACpC;AAEA,MAAI,OAAO;AACT,UAAM;AAAA,EACR;AAEA,MAAI,UAAU;AACZ,QAAI,CAAC,UAAU,CAAC,YAAY,SAAS,SAAS,UAAU;AACtD,YAAM,IAAI;AAAA,QACR,4BAA4B,UAAU;AAAA,MACxC;AAAA,IACF;AAEA,QACE,SAAS,SAAS,YAClB,CAAC,aACD,CAAC,UAAU,MAAM,sBAAsB,QACvC;AACA,YAAM,IAAI;AAAA,QACR,yDAAyD,UAAU;AAAA,MACrE;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBACJ,UAAU,MAAM,sBAAsB,UAAU;AAElD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,MAAM,MAAM,KAAK,UAAU,EAAE,KAAK,EAAE;AAAA,EACtC;AACF;AAEA,eAAsB,qBACpB,KACA,UAOI,CAAC,GACkC;AACvC,QAAM,6BAAyB,iEAA0B;AACzD,QAAM,YAAY,IAAI,IAAI,KAAK,sBAAsB;AAErD,QAAM,OAAO;AAAA,IACX;AAAA;AAAA,IAEA,UAAU,KAAK,MAAM,GAAG,GAAG;AAAA;AAAA;AAAA,KAG1B,OAAO,QAAQ,WAAW,MAAM,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AACA,MAAI,QAAQ,MAAM;AAChB,SAAK,KAAK,QAAQ,KAAK,MAAM,IAAI,CAAC;AAAA,EACpC;AAEA,QAAM,YAAY;AAAA,IAChB,MAAM;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAEA,QAAM,MAAM,UAAM,wCAAe,WAAW,WAAW;AAAA,IACrD,WAAW,QAAQ;AAAA,IACnB,YAAY,QAAQ;AAAA,EACtB,CAAC;AAGD,MAAI,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM;AACxB,cAAM,gDAAkC,UAAU,MAAM,GAAG;AAAA,EAC7D;AAEA,MAAI,IAAI,WAAW,KAAK;AACtB,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,MAAI,IAAI,WAAW,KAAK;AACtB,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,QAAM,SAAS,qBAAO,kBAAyC;AAE/D,MAAI,CAAC,IAAI,MAAM;AACb,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU,IAAI,YAAY;AAEhC,mBAAiB,SAAS,IAAI,MAA8C;AAC1E,WAAO,UAAU,MAAM,QAAQ,OAAO,KAAK,GAAG,KAAK;AAAA,EACrD;AACA,QAAM,WAAW,OAAO,YAAY;AAEpC,QAAM,aACJ,QAAQ,SAAS,UAAU,OAAO,UAAU,KAAK,UAAU,CAAC,IAAI;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,UAAU,WAAW,UAAU;AAEjD,MAAI,CAAC,UAAU;AAMb,UAAM,aAAa,QAAQ,IAAI,eAAe;AAG9C,UAAM,wBACJ,UAAU,SAAS,IAAI,IAAI,sBAAsB,EAAE;AAGrD,UAAM,YAAY,QAAQ,IAAI,sBAAsB;AAEpD,QAAI,cAAc,yBAAyB,aAAa,QAAQ,WAAW;AACzE,UAAI;AACJ,UAAI,QAAQ,KAAK;AACf,cAAM,EAAE,cAAc,IAAI,MAAM,OAAO,OAAO;AAC9C,4BAAoB,cAAc,OAAO;AAAA,UACvC,yBAAyB;AAAA,YACvB,YAAQ,iCAAgB,UAAU,IAAI;AAAA,UACxC;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,QACL;AAAA,YACA,+BAAc,CAAC,GAAG,SAAS;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAEA,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,cAAc,SAAS;AACpC,QAAM,YAAY,QAAQ,MACtB,MAAM,kBAAkB,KAAK,SAAS,IACtC;AAEJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/internal/host/server/fetch-remote-component.js

@@ -10,6 +10,7 @@ import { getSSRRelativePathBaseUrl } from "#internal/host/server/get-ssr-relativ
 import {
   buildMetadata
 } from "#internal/runtime/metadata";
+import { computeScopedName } from "#internal/utils";
 import {
   failedToFetchRemoteComponentError,
   multipleRemoteComponentsError,
@@ -57,6 +58,9 @@ function buildSkeletonResponse(serverUrl, metadata, skeletonComponent) {
     remoteShared: {}
   };
 }
+function scopeChunkReferences(chunk, bundle, scopedName) {
+  return chunk.replaceAll(`[${bundle}]`, `[${scopedName}]`);
+}
 function visitFragment(fragment, serverUrl, remoteName) {
   const scriptSrcSet = /* @__PURE__ */ new Set();
   const scriptTextSet = /* @__PURE__ */ new Set();
@@ -71,6 +75,8 @@ function visitFragment(fragment, serverUrl, remoteName) {
   let hasRSC = false;
   let hasShared = false;
   let error;
+  const isCrossOrigin = serverUrl.origin !== getSSRRelativePathBaseUrl();
+  const rawRscChunks = [];
   const rsc = visit(fragment, {
     url: serverUrl,
     name: remoteName,
@@ -106,7 +112,7 @@ function visitFragment(fragment, serverUrl, remoteName) {
       }
     },
     onRSC(chunk) {
-      hydrationData.push(chunk);
+      rawRscChunks.push(chunk);
       hasRSC = true;
     },
     onNextData(data) {
@@ -128,6 +134,19 @@ function visitFragment(fragment, serverUrl, remoteName) {
       }
     }
   });
+  if (isCrossOrigin && metadata?.bundle) {
+    const scopedName = computeScopedName(metadata.bundle, {
+      remoteHost: serverUrl.host,
+      isCrossOrigin: true
+    });
+    for (const chunk of rawRscChunks) {
+      hydrationData.push(
+        scopeChunkReferences(chunk, metadata.bundle, scopedName)
+      );
+    }
+  } else {
+    hydrationData.push(...rawRscChunks);
+  }
   if (error) {
     throw error;
   }

package/dist/internal/host/server/fetch-remote-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await import(\n    'next/dist/compiled/react-server-dom-webpack/client.edge'\n  );\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: Record<string, string> = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      hydrationData.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: {\n    name?: string;\n    rsc?: boolean;\n    /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n    appRouter?: boolean;\n    onRequest?: OnRequestHook;\n    onResponse?: OnResponseHook;\n  } = {},\n): Promise<FetchRemoteComponentResponse> {\n  const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n  const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = {\n    next: {\n      tags,\n    },\n  };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'Check if you can open it in the browser.',\n    );\n  }\n\n  // create a parser for the HTML response\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // If the remote component is part of a microfrontend, the src provided\n    // will be relative.\n    const isSSRRelativePathBase =\n      serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n    if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { type RSC, visit } from '#internal/host/nextjs/dom-flight';\nimport {\n  getSkeletonHtml,\n  getSkeletonMessage,\n} from '#internal/host/nextjs/skeleton';\nimport { fetchWithHooks } from '#internal/host/server/fetch-with-hooks';\nimport { getClientSrc } from '#internal/host/server/get-client-src';\nimport { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type {\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport {\n  buildMetadata,\n  type RawMetadataAttrs,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport { computeScopedName } from '#internal/utils';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\n/**\n * Converts RSC flight data into a React element tree using the edge streaming\n * runtime. The manifest tells React how to resolve module references back to\n * the remote origin.\n */\nasync function buildRscComponent(\n  rsc: RSC | RSC[] | string | null,\n  serverUrl: URL,\n): Promise<React.ReactNode> {\n  const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n  const { createFromReadableStream } = await import(\n    'next/dist/compiled/react-server-dom-webpack/client.edge'\n  );\n  return createFromReadableStream(\n    new ReadableStream({\n      type: 'bytes',\n      start(controller) {\n        const encoder = new TextEncoder();\n        controller.enqueue(encoder.encode(componentRSC));\n        controller.close();\n      },\n    }),\n    {\n      serverConsumerManifest: {\n        moduleLoading: {\n          prefix: serverUrl.origin,\n          crossOrigin: true,\n        },\n        moduleMap: {},\n      },\n    },\n  );\n}\n\nfunction buildSkeletonResponse(\n  serverUrl: URL,\n  metadata: RemoteComponentMetadata,\n  skeletonComponent: React.ReactNode | undefined,\n): FetchRemoteComponentResponse {\n  return {\n    name: 'remote-component-skeleton',\n    serverUrl,\n    metadata: {\n      ...metadata,\n      type: 'remote-component',\n    },\n    rsc: getSkeletonMessage(),\n    scripts: [],\n    links: [],\n    hydrationData: [],\n    nextData: undefined,\n    component: skeletonComponent,\n    html: getSkeletonHtml(serverUrl.href),\n    remoteShared: {},\n  };\n}\n\n/**\n * Rewrites the bundle identifier in RSC flight data from the plain bundle\n * name to the origin-qualified scoped name. When multiple remotes share the\n * same bundle name (e.g. production and preview of the same app), this\n * makes each one unique so the client can look up the correct RemoteScope\n * by name alone.\n *\n * `[bundle] /path` → `[scopedName] /path`\n * `[bundle] 12345` → `[scopedName] 12345`\n *\n * Only applied for cross-origin remotes — same-origin chunks keep the\n * plain bundle name since there's no ambiguity.\n */\nfunction scopeChunkReferences(\n  chunk: string,\n  bundle: string,\n  scopedName: string,\n): string {\n  return chunk.replaceAll(`[${bundle}]`, `[${scopedName}]`);\n}\n\n/**\n * Walks the parsed HTML fragment and extracts all remote component data:\n * metadata, scripts, links, hydration data, Next.js data, shared deps, and HTML.\n */\nfunction visitFragment(\n  fragment: DefaultTreeAdapterMap['documentFragment'],\n  serverUrl: URL,\n  remoteName: string | undefined,\n) {\n  const scriptSrcSet = new Set<string>();\n  const scriptTextSet = new Set<string>();\n  const scripts: ScriptDescriptor[] = [];\n\n  const linkKeySet = new Set<string>();\n  const links: LinkDescriptor[] = [];\n\n  const hydrationData: string[] = [];\n  const htmlChunks = new Set<string>();\n\n  let metadata: RemoteComponentMetadata | undefined;\n  let nextData: NextData | undefined;\n  let remoteShared: Record<string, string> = {};\n  let hasRSC = false;\n  let hasShared = false;\n  let error: RemoteComponentsError | undefined;\n\n  // For cross-origin remotes, rewrite bundle identifiers in RSC chunks to\n  // the scoped name so the client dispatchers resolve the correct scope.\n  // Chunks are collected raw during visit() and rewritten afterwards because\n  // RSC script tags appear before the metadata element in the HTML.\n  const isCrossOrigin = serverUrl.origin !== getSSRRelativePathBaseUrl();\n\n  const rawRscChunks: string[] = [];\n\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(attrs: RawMetadataAttrs) {\n      const incoming = buildMetadata(attrs, serverUrl);\n      // Skip multiple component detection for Pages Router (__next) since\n      // it only supports one remote component per page\n      if (\n        !remoteName &&\n        metadata &&\n        metadata.id !== incoming.id &&\n        incoming.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        throw multipleRemoteComponentsError(serverUrl.href);\n      }\n      metadata = incoming;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      const textContent =\n        typeof attrs.textContent === 'string' ? attrs.textContent : undefined;\n\n      if (textContent) {\n        if (!scriptTextSet.has(textContent)) {\n          scriptTextSet.add(textContent);\n          scripts.push({ src: '', textContent });\n        }\n      } else if (!scriptSrcSet.has(clientSrc)) {\n        scriptSrcSet.add(clientSrc);\n        scripts.push({ src: clientSrc });\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      const linkKey = `${relativeAttrs.href}::${attrs.rel}`;\n      if (!linkKeySet.has(linkKey)) {\n        linkKeySet.add(linkKey);\n        links.push(relativeAttrs);\n      }\n    },\n    onRSC(chunk) {\n      rawRscChunks.push(chunk);\n      hasRSC = true;\n    },\n    onNextData(data) {\n      nextData = data;\n    },\n    onHTML(chunk) {\n      if (!htmlChunks.has(chunk)) {\n        htmlChunks.add(chunk);\n      }\n    },\n    onShared(_shared) {\n      remoteShared = _shared;\n      hasShared = true;\n    },\n    onError(message, stack) {\n      error = new RemoteComponentsError(message);\n      if (stack) {\n        error.stack = stack;\n      }\n    },\n  });\n\n  // Rewrite bundle identifiers in RSC chunk references to use the scoped name\n  // so the client dispatchers can resolve the correct scope with a direct lookup.\n  // This must happen after visit() because RSC script tags appear before the\n  // metadata element in the HTML.\n  if (isCrossOrigin && metadata?.bundle) {\n    const scopedName = computeScopedName(metadata.bundle, {\n      remoteHost: serverUrl.host,\n      isCrossOrigin: true,\n    });\n    for (const chunk of rawRscChunks) {\n      hydrationData.push(\n        scopeChunkReferences(chunk, metadata.bundle, scopedName),\n      );\n    }\n  } else {\n    hydrationData.push(...rawRscChunks);\n  }\n\n  if (error) {\n    throw error;\n  }\n\n  if (metadata) {\n    if (!hasRSC && !nextData && metadata.type === 'nextjs') {\n      throw new RemoteComponentsError(\n        `The Remote Component at \"${serverUrl.href}\" seems to be a Next.js component but it does not contain any RSC flight data or Next.js props data. Make sure the remote URL is correct and contains a Remote Component.`,\n      );\n    }\n\n    if (\n      metadata.type === 'nextjs' &&\n      !hasShared &&\n      !nextData?.props.__REMOTE_COMPONENT__?.shared\n    ) {\n      throw new RemoteComponentsError(\n        `No shared dependencies found for Remote Component at \"${serverUrl.href}\". Make sure the remote URL is correct and contains a Remote Component with shared dependencies.`,\n      );\n    }\n  }\n\n  const resolvedShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared;\n\n  return {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared: resolvedShared,\n    html: Array.from(htmlChunks).join(''),\n  };\n}\n\nexport async function fetchRemoteComponent(\n  src: string | URL,\n  options: {\n    name?: string;\n    rsc?: boolean;\n    /** Whether this is being called from Next.js App Router. Used to enable skeleton fallback during SSG builds. */\n    appRouter?: boolean;\n    onRequest?: OnRequestHook;\n    onResponse?: OnResponseHook;\n  } = {},\n): Promise<FetchRemoteComponentResponse> {\n  const ssrRelativePathBaseUrl = getSSRRelativePathBaseUrl();\n  const serverUrl = new URL(src, ssrRelativePathBaseUrl);\n\n  const tags = [\n    '_vc_rc:fetch-remote-component',\n    // the max size of a next cache tag is 256 characters\n    serverUrl.host.slice(0, 256),\n    // use the suffix so this tag is unique if multiple remote\n    // components have the same host, but unique pathnames / query params\n    (typeof src === 'string' ? src : src.href).slice(-256),\n  ];\n  if (options.name) {\n    tags.push(options.name.slice(-256));\n  }\n\n  const fetchInit = {\n    next: {\n      tags,\n    },\n  };\n\n  const res = await fetchWithHooks(serverUrl, fetchInit, {\n    onRequest: options.onRequest,\n    onResponse: options.onResponse,\n  });\n\n  // If there is an error in the remote, parse and extract the remote error (except 404 and 401).\n  if (!res.ok && !res.body) {\n    throw failedToFetchRemoteComponentError(serverUrl.href, res);\n  }\n\n  if (res.status === 401) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'If you are using Deployment Protection, ensure the automation bypass environment variable secret in the host matches an automation bypass value in the remote. See https://remote-components-docs.vercel.sh/docs/concepts/cors-external-urls#deployment-protection for details.',\n    );\n  }\n\n  if (res.status === 404) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      'Check if you can open it in the browser.',\n    );\n  }\n\n  // create a parser for the HTML response\n  const parser = Parser.getFragmentParser<DefaultTreeAdapterMap>();\n\n  if (!res.body) {\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `Response body is empty. Check if you can open it in the browser and you see the Remote Component content.`,\n    );\n  }\n\n  const decoder = new TextDecoder();\n  // read the response body as a stream and parse it using the parse5 fragment parser\n  for await (const chunk of res.body as unknown as AsyncIterable<Uint8Array>) {\n    parser.tokenizer.write(decoder.decode(chunk), false);\n  }\n  const fragment = parser.getFragment();\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n\n  const {\n    rsc,\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    remoteShared,\n    html,\n  } = visitFragment(fragment, serverUrl, remoteName);\n\n  if (!metadata) {\n    // For microfrontend builds during run time, the host and remote build\n    // may be happening concurrently. In this case, the request will 404.\n    // We want to allow the build to continue with a placeholder remote\n    // component. Once the build completes, vercel will automatically revalidate\n    // ISR and fetch the built remote component.\n    const isSSGBuild = process.env.NEXT_PHASE === 'phase-production-build';\n    // If the remote component is part of a microfrontend, the src provided\n    // will be relative.\n    const isSSRRelativePathBase =\n      serverUrl.host === new URL(ssrRelativePathBaseUrl).host;\n    // Only want this skeleton behaviour in previews to unblock development.\n    // For production, the remote component should already be built.\n    const isPreview = process.env.VERCEL_TARGET_ENV === 'preview';\n\n    if (isSSGBuild && isSSRRelativePathBase && isPreview && options.appRouter) {\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: {\n            __html: getSkeletonHtml(serverUrl.href),\n          },\n        });\n      }\n\n      return buildSkeletonResponse(\n        serverUrl,\n        buildMetadata({}, serverUrl),\n        skeletonComponent,\n      );\n    }\n\n    throw failedToFetchRemoteComponentError(\n      serverUrl.href,\n      res,\n      `No Remote Component found. Make sure the remote URL is correct and contains a Remote Component.`,\n    );\n  }\n\n  const name = remoteName || metadata.name;\n  const component = options.rsc\n    ? await buildRscComponent(rsc, serverUrl)\n    : undefined;\n\n  return {\n    name,\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared,\n  };\n}\n"],"mappings":"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","names":[]}

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

@@ -21,10 +21,7 @@ __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 ?? "";
-}
+var import_remote_scope = require("#internal/runtime/turbopack/remote-scope");
 function createRemoteImageLoader(bundle, resolveClientUrl) {
   const loader = Object.assign(
     ({
@@ -34,7 +31,7 @@ function createRemoteImageLoader(bundle, resolveClientUrl) {
       quality
     }) => {
       const q = quality ?? 75;
-      const remoteOrigin = getRemoteBundleOrigin(bundle);
+      const remoteOrigin = (0, import_remote_scope.getScope)(bundle)?.url.origin ?? "";
       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}`;

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

@@ -1 +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":[]}
+{"version":3,"sources":["../../../../src/host/shared/remote-image-loader.ts"],"sourcesContent":["import { getScope } from '#internal/runtime/turbopack/remote-scope';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\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 = getScope(bundle)?.url.origin ?? '';\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;AAAA,0BAAyB;AAmBlB,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,mBAAe,8BAAS,MAAM,GAAG,IAAI,UAAU;AACrD,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.js

@@ -1,7 +1,4 @@
-function getRemoteBundleOrigin(bundle) {
-  const self = globalThis;
-  return self.__remote_bundle_url__?.[bundle]?.origin ?? "";
-}
+import { getScope } from "#internal/runtime/turbopack/remote-scope";
 function createRemoteImageLoader(bundle, resolveClientUrl) {
   const loader = Object.assign(
     ({
@@ -11,7 +8,7 @@ function createRemoteImageLoader(bundle, resolveClientUrl) {
       quality
     }) => {
       const q = quality ?? 75;
-      const remoteOrigin = getRemoteBundleOrigin(bundle);
+      const remoteOrigin = getScope(bundle)?.url.origin ?? "";
       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}`;

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

@@ -1 +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":[]}
+{"version":3,"sources":["../../../../src/host/shared/remote-image-loader.ts"],"sourcesContent":["import { getScope } from '#internal/runtime/turbopack/remote-scope';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\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 = getScope(bundle)?.url.origin ?? '';\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,SAAS,gBAAgB;AAmBlB,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,SAAS,MAAM,GAAG,IAAI,UAAU;AACrD,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":[]}