remote-components 0.1.2 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { 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 type { RemoteComponentMetadata } from '#internal/runtime/metadata';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\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    rsc: false,\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  let metadata: RemoteComponentMetadata = {\n    bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n    route: '/',\n    runtime: 'webpack',\n    id: '__vercel_remote_component',\n    type: 'unknown',\n  };\n  let remoteShared: Record<string, string> = {};\n  const scripts: ScriptDescriptor[] = [];\n  const links: LinkDescriptor[] = [];\n  const hydrationData: string[] = [];\n  let nextData: NextData | undefined;\n  let html = '';\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n  // convert the parsed HTML fragment into an RSC flight data\n  // and extract the metadata, scripts, links and remote component RSC flight data\n  let hasRemoteComponent = false;\n  let hasRSC = false;\n  let hasShared = false;\n  let hasMultipleRemoteComponents = false;\n  let error: RemoteComponentsError | undefined;\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(_metadata) {\n      // Skip multiple component detection for Pages Router (__next) since it only supports one remote component per page\n      if (\n        hasRemoteComponent &&\n        metadata.id !== _metadata.id &&\n        _metadata.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        hasMultipleRemoteComponents = true;\n      }\n      metadata = _metadata;\n      hasRemoteComponent = true;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      if (\n        !scripts.find(\n          (it) =>\n            it.src === clientSrc ||\n            (attrs.textContent && it.textContent === attrs.textContent),\n        )\n      ) {\n        scripts.push(\n          typeof attrs.textContent === 'string'\n            ? {\n                src: '',\n                textContent: attrs.textContent,\n              }\n            : {\n                src: clientSrc,\n              },\n        );\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      if (\n        !links.find(\n          (it) => it.href === relativeAttrs.href && it.rel === attrs.rel,\n        )\n      ) {\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      // use the Next.js Pages Router props data to extract remote component metadata\n      if (data.props.__REMOTE_COMPONENT__) {\n        Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n        // only a singleton remote component is supported per page when using the Next.js Pages Router\n        metadata.id = '__next';\n        metadata.route = data.page ?? '/';\n      }\n    },\n    onHTML(_html) {\n      if (!html.includes(_html)) {\n        html += _html;\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  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (!hasRemoteComponent) {\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      const skeletonMessage = getSkeletonMessage();\n      const skeletonHtml = getSkeletonHtml(serverUrl.href);\n\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: { __html: skeletonHtml },\n        });\n      }\n\n      return {\n        name: 'remote-component-skeleton',\n        serverUrl,\n        metadata: {\n          ...metadata,\n          type: 'remote-component',\n        },\n        rsc: skeletonMessage,\n        scripts: [],\n        links: [],\n        hydrationData: [],\n        nextData: undefined,\n        component: skeletonComponent,\n        html: skeletonHtml,\n        remoteShared: {},\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  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (hasMultipleRemoteComponents && !remoteName) {\n    throw multipleRemoteComponentsError(serverUrl.href);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\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    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\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  let component: React.ReactNode | undefined;\n\n  // only create a React component if requested\n  if (options.rsc) {\n    // RSC flight data for the static HTML in a single RSC line\n    const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n    const { createFromReadableStream } = await import(\n      'next/dist/compiled/react-server-dom-webpack/client.edge'\n    );\n\n    // create a React tree from the RSC flight data\n    component = await 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\n  return {\n    name: remoteName || metadata.id.replace(/_ssr$/, ''),\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared: nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAmD;AACnD,wBAAsB;AACtB,sBAGO;AACP,8BAA+B;AAC/B,4BAA6B;AAC7B,4CAA0C;AAU1C,mBAIO;AAGP,MAAM,eAAe,QAAQ,IAAI;AAEjC,eAAsB,qBACpB,KACA,UAOI;AAAA,EACF,KAAK;AACP,GACuC;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,MAAI,WAAoC;AAAA,IACtC,QAAQ,gBAAgB;AAAA,IACxB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AACA,MAAI,eAAuC,CAAC;AAC5C,QAAM,UAA8B,CAAC;AACrC,QAAM,QAA0B,CAAC;AACjC,QAAM,gBAA0B,CAAC;AACjC,MAAI;AACJ,MAAI,OAAO;AAEX,QAAM,aACJ,QAAQ,SAAS,UAAU,OAAO,UAAU,KAAK,UAAU,CAAC,IAAI;AAGlE,MAAI,qBAAqB;AACzB,MAAI,SAAS;AACb,MAAI,YAAY;AAChB,MAAI,8BAA8B;AAClC,MAAI;AACJ,QAAM,UAAM,yBAAM,UAAU;AAAA,IAC1B,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW,WAAW;AAEpB,UACE,sBACA,SAAS,OAAO,UAAU,MAC1B,UAAU,OAAO,YACjB,SAAS,OAAO,YAChB,CAAC,UACD;AACA,sCAA8B;AAAA,MAChC;AACA,iBAAW;AACX,2BAAqB;AAAA,IACvB;AAAA,IACA,SAAS,OAAO;AACd,YAAM,gBAAY,oCAAa,MAAM,KAAK,UAAU,IAAI;AACxD,UACE,CAAC,QAAQ;AAAA,QACP,CAAC,OACC,GAAG,QAAQ,aACV,MAAM,eAAe,GAAG,gBAAgB,MAAM;AAAA,MACnD,GACA;AACA,gBAAQ;AAAA,UACN,OAAO,MAAM,gBAAgB,WACzB;AAAA,YACE,KAAK;AAAA,YACL,aAAa,MAAM;AAAA,UACrB,IACA;AAAA,YACE,KAAK;AAAA,UACP;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,IACA,OAAO,OAAO;AACZ,YAAM,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,UAAM,oCAAa,MAAM,MAAM,UAAU,IAAI;AAAA,MAC/C;AACA,UACE,CAAC,MAAM;AAAA,QACL,CAAC,OAAO,GAAG,SAAS,cAAc,QAAQ,GAAG,QAAQ,MAAM;AAAA,MAC7D,GACA;AACA,cAAM,KAAK,aAAa;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,MAAM,OAAO;AACX,oBAAc,KAAK,KAAK;AACxB,eAAS;AAAA,IACX;AAAA,IACA,WAAW,MAAM;AACf,iBAAW;AAGX,UAAI,KAAK,MAAM,sBAAsB;AACnC,eAAO,OAAO,UAAU,KAAK,MAAM,oBAAoB;AAEvD,iBAAS,KAAK;AACd,iBAAS,QAAQ,KAAK,QAAQ;AAAA,MAChC;AAAA,IACF;AAAA,IACA,OAAO,OAAO;AACZ,UAAI,CAAC,KAAK,SAAS,KAAK,GAAG;AACzB,gBAAQ;AAAA,MACV;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;AAED,MAAI,OAAO;AACT,UAAM;AAAA,EACR;AAGA,MAAI,CAAC,oBAAoB;AAMvB,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,YAAM,sBAAkB,oCAAmB;AAC3C,YAAM,mBAAe,iCAAgB,UAAU,IAAI;AAEnD,UAAI;AACJ,UAAI,QAAQ,KAAK;AACf,cAAM,EAAE,cAAc,IAAI,MAAM,OAAO,OAAO;AAC9C,4BAAoB,cAAc,OAAO;AAAA,UACvC,yBAAyB,EAAE,QAAQ,aAAa;AAAA,QAClD,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,QACL,MAAM;AAAA,QACN;AAAA,QACA,UAAU;AAAA,UACR,GAAG;AAAA,UACH,MAAM;AAAA,QACR;AAAA,QACA,KAAK;AAAA,QACL,SAAS,CAAC;AAAA,QACV,OAAO,CAAC;AAAA,QACR,eAAe,CAAC;AAAA,QAChB,UAAU;AAAA,QACV,WAAW;AAAA,QACX,MAAM;AAAA,QACN,cAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAEA,cAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,MAAI,+BAA+B,CAAC,YAAY;AAC9C,cAAM,4CAA8B,UAAU,IAAI;AAAA,EACpD;AAGA,MAAI,CAAC,UAAU,CAAC,YAAY,SAAS,SAAS,UAAU;AACtD,UAAM,IAAI;AAAA,MACR,4BAA4B,UAAU;AAAA,IACxC;AAAA,EACF;AAEA,MACE,SAAS,SAAS;AAAA,EAElB,CAAC,aACD,CAAC,UAAU,MAAM,sBAAsB,QACvC;AACA,UAAM,IAAI;AAAA,MACR,yDAAyD,UAAU;AAAA,IACrE;AAAA,EACF;AAEA,MAAI;AAGJ,MAAI,QAAQ,KAAK;AAEf,UAAM,eAAe,KAAK,KAAK,UAAU,GAAG;AAAA;AAE5C,UAAM,EAAE,yBAAyB,IAAI,MAAM,OACzC,yDACF;AAGA,gBAAY,MAAM;AAAA,MAChB,IAAI,eAAe;AAAA,QACjB,MAAM;AAAA,QACN,MAAM,YAAY;AAChB,gBAAM,UAAU,IAAI,YAAY;AAChC,qBAAW,QAAQ,QAAQ,OAAO,YAAY,CAAC;AAC/C,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,MACD;AAAA,QACE,wBAAwB;AAAA,UACtB,eAAe;AAAA,YACb,QAAQ,UAAU;AAAA,YAClB,aAAa;AAAA,UACf;AAAA,UACA,WAAW,CAAC;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM,cAAc,SAAS,GAAG,QAAQ,SAAS,EAAE;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,UAAU,MAAM,sBAAsB,UAAU;AAAA,EAChE;AACF;","names":[]}

package/dist/internal/{shared/ssr → host/server}/fetch-remote-component.d.ts

@@ -1,5 +1,10 @@
-import { O as OnRequestHook, a as OnResponseHook, F as FetchRemoteComponentResponse } from '../../../types-2b26a246.js';
+import { OnRequestHook, OnResponseHook } from '../shared/fetch-interceptors.js';
+import { FetchRemoteComponentResponse } from './types.js';
+import '../nextjs/dom-flight.js';
 import 'parse5/dist/tree-adapters/default';
+import '../../runtime/metadata.js';
+import '../shared/asset-descriptors.js';
+import '../../runtime/url/resolve-client-url.js';
 
 declare function fetchRemoteComponent(src: string | URL, options?: {
     name?: string;

package/dist/internal/{shared/ssr → host/server}/fetch-remote-component.js

@@ -1,17 +1,17 @@
 import { Parser } from "parse5";
-import { getClientSrc } from "#internal/shared/client/get-client-src";
+import { visit } from "#internal/host/nextjs/dom-flight";
+import {
+  getSkeletonHtml,
+  getSkeletonMessage
+} from "#internal/host/nextjs/skeleton";
+import { fetchWithHooks } from "#internal/host/server/fetch-with-hooks";
+import { getClientSrc } from "#internal/host/server/get-client-src";
+import { getSSRRelativePathBaseUrl } from "#internal/host/server/get-ssr-relative-path-base-url";
 import {
   failedToFetchRemoteComponentError,
   multipleRemoteComponentsError,
   RemoteComponentsError
-} from "#internal/shared/error";
-import { visit } from "#internal/shared/ssr/dom-flight";
-import { fetchWithHooks } from "#internal/shared/ssr/fetch-with-hooks";
-import { getSSRRelativePathBaseUrl } from "#internal/shared/ssr/get-ssr-relative-path-base-url";
-import {
-  getSkeletonHtml,
-  getSkeletonMessage
-} from "#internal/shared/ssr/skeleton";
+} from "#internal/utils/error";
 const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;
 async function fetchRemoteComponent(src, options = {
   rsc: false

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/fetch-remote-component.ts"],"sourcesContent":["import { type DefaultTreeAdapterMap, Parser } from 'parse5';\nimport { 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 type { RemoteComponentMetadata } from '#internal/runtime/metadata';\nimport {\n  failedToFetchRemoteComponentError,\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport type { FetchRemoteComponentResponse, NextData } from './types';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\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    rsc: false,\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  let metadata: RemoteComponentMetadata = {\n    bundle: CURRENT_ZONE ?? '__vercel_remote_component',\n    route: '/',\n    runtime: 'webpack',\n    id: '__vercel_remote_component',\n    type: 'unknown',\n  };\n  let remoteShared: Record<string, string> = {};\n  const scripts: ScriptDescriptor[] = [];\n  const links: LinkDescriptor[] = [];\n  const hydrationData: string[] = [];\n  let nextData: NextData | undefined;\n  let html = '';\n\n  const remoteName =\n    options.name || (serverUrl.hash ? serverUrl.hash.substring(1) : undefined);\n  // convert the parsed HTML fragment into an RSC flight data\n  // and extract the metadata, scripts, links and remote component RSC flight data\n  let hasRemoteComponent = false;\n  let hasRSC = false;\n  let hasShared = false;\n  let hasMultipleRemoteComponents = false;\n  let error: RemoteComponentsError | undefined;\n  const rsc = visit(fragment, {\n    url: serverUrl,\n    name: remoteName,\n    onMetadata(_metadata) {\n      // Skip multiple component detection for Pages Router (__next) since it only supports one remote component per page\n      if (\n        hasRemoteComponent &&\n        metadata.id !== _metadata.id &&\n        _metadata.id !== '__next' &&\n        metadata.id !== '__next' &&\n        !nextData\n      ) {\n        hasMultipleRemoteComponents = true;\n      }\n      metadata = _metadata;\n      hasRemoteComponent = true;\n    },\n    onScript(attrs) {\n      const clientSrc = getClientSrc(attrs.src, serverUrl.href);\n      if (\n        !scripts.find(\n          (it) =>\n            it.src === clientSrc ||\n            (attrs.textContent && it.textContent === attrs.textContent),\n        )\n      ) {\n        scripts.push(\n          typeof attrs.textContent === 'string'\n            ? {\n                src: '',\n                textContent: attrs.textContent,\n              }\n            : {\n                src: clientSrc,\n              },\n        );\n      }\n    },\n    onLink(attrs) {\n      const relativeAttrs = {\n        ...attrs,\n        href: getClientSrc(attrs.href, serverUrl.href),\n      };\n      if (\n        !links.find(\n          (it) => it.href === relativeAttrs.href && it.rel === attrs.rel,\n        )\n      ) {\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      // use the Next.js Pages Router props data to extract remote component metadata\n      if (data.props.__REMOTE_COMPONENT__) {\n        Object.assign(metadata, data.props.__REMOTE_COMPONENT__);\n        // only a singleton remote component is supported per page when using the Next.js Pages Router\n        metadata.id = '__next';\n        metadata.route = data.page ?? '/';\n      }\n    },\n    onHTML(_html) {\n      if (!html.includes(_html)) {\n        html += _html;\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  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (!hasRemoteComponent) {\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      const skeletonMessage = getSkeletonMessage();\n      const skeletonHtml = getSkeletonHtml(serverUrl.href);\n\n      let skeletonComponent: React.ReactNode | undefined;\n      if (options.rsc) {\n        const { createElement } = await import('react');\n        skeletonComponent = createElement('div', {\n          dangerouslySetInnerHTML: { __html: skeletonHtml },\n        });\n      }\n\n      return {\n        name: 'remote-component-skeleton',\n        serverUrl,\n        metadata: {\n          ...metadata,\n          type: 'remote-component',\n        },\n        rsc: skeletonMessage,\n        scripts: [],\n        links: [],\n        hydrationData: [],\n        nextData: undefined,\n        component: skeletonComponent,\n        html: skeletonHtml,\n        remoteShared: {},\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  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (hasMultipleRemoteComponents && !remoteName) {\n    throw multipleRemoteComponentsError(serverUrl.href);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\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    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\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  let component: React.ReactNode | undefined;\n\n  // only create a React component if requested\n  if (options.rsc) {\n    // RSC flight data for the static HTML in a single RSC line\n    const componentRSC = `0:${JSON.stringify(rsc)}\\n`;\n\n    const { createFromReadableStream } = await import(\n      'next/dist/compiled/react-server-dom-webpack/client.edge'\n    );\n\n    // create a React tree from the RSC flight data\n    component = await 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\n  return {\n    name: remoteName || metadata.id.replace(/_ssr$/, ''),\n    serverUrl,\n    metadata,\n    rsc,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    html,\n    remoteShared: nextData?.props.__REMOTE_COMPONENT__?.shared ?? remoteShared,\n  };\n}\n"],"mappings":"AAAA,SAAqC,cAAc;AACnD,SAAS,aAAa;AACtB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,iCAAiC;AAU1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,eAAe,QAAQ,IAAI;AAEjC,eAAsB,qBACpB,KACA,UAOI;AAAA,EACF,KAAK;AACP,GACuC;AACvC,QAAM,yBAAyB,0BAA0B;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,MAAM,eAAe,WAAW,WAAW;AAAA,IACrD,WAAW,QAAQ;AAAA,IACnB,YAAY,QAAQ;AAAA,EACtB,CAAC;AAGD,MAAI,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM;AACxB,UAAM,kCAAkC,UAAU,MAAM,GAAG;AAAA,EAC7D;AAEA,MAAI,IAAI,WAAW,KAAK;AACtB,UAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,MAAI,IAAI,WAAW,KAAK;AACtB,UAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,QAAM,SAAS,OAAO,kBAAyC;AAE/D,MAAI,CAAC,IAAI,MAAM;AACb,UAAM;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,MAAI,WAAoC;AAAA,IACtC,QAAQ,gBAAgB;AAAA,IACxB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AACA,MAAI,eAAuC,CAAC;AAC5C,QAAM,UAA8B,CAAC;AACrC,QAAM,QAA0B,CAAC;AACjC,QAAM,gBAA0B,CAAC;AACjC,MAAI;AACJ,MAAI,OAAO;AAEX,QAAM,aACJ,QAAQ,SAAS,UAAU,OAAO,UAAU,KAAK,UAAU,CAAC,IAAI;AAGlE,MAAI,qBAAqB;AACzB,MAAI,SAAS;AACb,MAAI,YAAY;AAChB,MAAI,8BAA8B;AAClC,MAAI;AACJ,QAAM,MAAM,MAAM,UAAU;AAAA,IAC1B,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW,WAAW;AAEpB,UACE,sBACA,SAAS,OAAO,UAAU,MAC1B,UAAU,OAAO,YACjB,SAAS,OAAO,YAChB,CAAC,UACD;AACA,sCAA8B;AAAA,MAChC;AACA,iBAAW;AACX,2BAAqB;AAAA,IACvB;AAAA,IACA,SAAS,OAAO;AACd,YAAM,YAAY,aAAa,MAAM,KAAK,UAAU,IAAI;AACxD,UACE,CAAC,QAAQ;AAAA,QACP,CAAC,OACC,GAAG,QAAQ,aACV,MAAM,eAAe,GAAG,gBAAgB,MAAM;AAAA,MACnD,GACA;AACA,gBAAQ;AAAA,UACN,OAAO,MAAM,gBAAgB,WACzB;AAAA,YACE,KAAK;AAAA,YACL,aAAa,MAAM;AAAA,UACrB,IACA;AAAA,YACE,KAAK;AAAA,UACP;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,IACA,OAAO,OAAO;AACZ,YAAM,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,MAAM,aAAa,MAAM,MAAM,UAAU,IAAI;AAAA,MAC/C;AACA,UACE,CAAC,MAAM;AAAA,QACL,CAAC,OAAO,GAAG,SAAS,cAAc,QAAQ,GAAG,QAAQ,MAAM;AAAA,MAC7D,GACA;AACA,cAAM,KAAK,aAAa;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,MAAM,OAAO;AACX,oBAAc,KAAK,KAAK;AACxB,eAAS;AAAA,IACX;AAAA,IACA,WAAW,MAAM;AACf,iBAAW;AAGX,UAAI,KAAK,MAAM,sBAAsB;AACnC,eAAO,OAAO,UAAU,KAAK,MAAM,oBAAoB;AAEvD,iBAAS,KAAK;AACd,iBAAS,QAAQ,KAAK,QAAQ;AAAA,MAChC;AAAA,IACF;AAAA,IACA,OAAO,OAAO;AACZ,UAAI,CAAC,KAAK,SAAS,KAAK,GAAG;AACzB,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS,SAAS;AAChB,qBAAe;AACf,kBAAY;AAAA,IACd;AAAA,IACA,QAAQ,SAAS,OAAO;AACtB,cAAQ,IAAI,sBAAsB,OAAO;AACzC,UAAI,OAAO;AACT,cAAM,QAAQ;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,OAAO;AACT,UAAM;AAAA,EACR;AAGA,MAAI,CAAC,oBAAoB;AAMvB,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,YAAM,kBAAkB,mBAAmB;AAC3C,YAAM,eAAe,gBAAgB,UAAU,IAAI;AAEnD,UAAI;AACJ,UAAI,QAAQ,KAAK;AACf,cAAM,EAAE,cAAc,IAAI,MAAM,OAAO,OAAO;AAC9C,4BAAoB,cAAc,OAAO;AAAA,UACvC,yBAAyB,EAAE,QAAQ,aAAa;AAAA,QAClD,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,QACL,MAAM;AAAA,QACN;AAAA,QACA,UAAU;AAAA,UACR,GAAG;AAAA,UACH,MAAM;AAAA,QACR;AAAA,QACA,KAAK;AAAA,QACL,SAAS,CAAC;AAAA,QACV,OAAO,CAAC;AAAA,QACR,eAAe,CAAC;AAAA,QAChB,UAAU;AAAA,QACV,WAAW;AAAA,QACX,MAAM;AAAA,QACN,cAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAEA,UAAM;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,MAAI,+BAA+B,CAAC,YAAY;AAC9C,UAAM,8BAA8B,UAAU,IAAI;AAAA,EACpD;AAGA,MAAI,CAAC,UAAU,CAAC,YAAY,SAAS,SAAS,UAAU;AACtD,UAAM,IAAI;AAAA,MACR,4BAA4B,UAAU;AAAA,IACxC;AAAA,EACF;AAEA,MACE,SAAS,SAAS;AAAA,EAElB,CAAC,aACD,CAAC,UAAU,MAAM,sBAAsB,QACvC;AACA,UAAM,IAAI;AAAA,MACR,yDAAyD,UAAU;AAAA,IACrE;AAAA,EACF;AAEA,MAAI;AAGJ,MAAI,QAAQ,KAAK;AAEf,UAAM,eAAe,KAAK,KAAK,UAAU,GAAG;AAAA;AAE5C,UAAM,EAAE,yBAAyB,IAAI,MAAM,OACzC,yDACF;AAGA,gBAAY,MAAM;AAAA,MAChB,IAAI,eAAe;AAAA,QACjB,MAAM;AAAA,QACN,MAAM,YAAY;AAChB,gBAAM,UAAU,IAAI,YAAY;AAChC,qBAAW,QAAQ,QAAQ,OAAO,YAAY,CAAC;AAC/C,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,MACD;AAAA,QACE,wBAAwB;AAAA,UACtB,eAAe;AAAA,YACb,QAAQ,UAAU;AAAA,YAClB,aAAa;AAAA,UACf;AAAA,UACA,WAAW,CAAC;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM,cAAc,SAAS,GAAG,QAAQ,SAAS,EAAE;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,UAAU,MAAM,sBAAsB,UAAU;AAAA,EAChE;AACF;","names":[]}

package/dist/internal/{shared/ssr → host/server}/fetch-with-hooks.cjs

@@ -21,8 +21,16 @@ __export(fetch_with_hooks_exports, {
   fetchWithHooks: () => fetchWithHooks
 });
 module.exports = __toCommonJS(fetch_with_hooks_exports);
-var import_logger = require("#internal/shared/utils/logger");
+var import_logger = require("#internal/utils/logger");
 var import_fetch_headers = require("./fetch-headers");
+async function fetchWithWarning(url, init) {
+  try {
+    return await fetch(url, init);
+  } catch (error) {
+    (0, import_logger.warnCrossOriginFetchError)("FetchRemoteComponent", url);
+    throw error;
+  }
+}
 async function fetchWithHooks(url, additionalInit, options = {}) {
   const {
     onRequest,
@@ -40,20 +48,8 @@ async function fetchWithHooks(url, additionalInit, options = {}) {
     signal,
     ...additionalInit
   };
-  let res = await onRequest?.(url, init, hookOptions);
-  if (!res) {
-    try {
-      res = await fetch(url, init);
-    } catch (error) {
-      (0, import_logger.warnCrossOriginFetchError)("FetchRemoteComponent", url);
-      throw error;
-    }
-  }
-  const transformedRes = await onResponse?.(url, res, hookOptions);
-  if (transformedRes) {
-    res = transformedRes;
-  }
-  return res;
+  const res = await onRequest?.(url, init, hookOptions) ?? await fetchWithWarning(url, init);
+  return await onResponse?.(url, res, hookOptions) ?? res;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/internal/host/server/fetch-with-hooks.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/fetch-with-hooks.ts"],"sourcesContent":["import type {\n  HookOptions,\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport { warnCrossOriginFetchError } from '#internal/utils/logger';\nimport { remoteFetchHeaders } from './fetch-headers';\n\n/**\n * Options for fetching with request/response hooks.\n */\ninterface FetchWithHooksOptions {\n  /** Hook to intercept the request before fetching */\n  onRequest?: OnRequestHook;\n  /** Hook to process the response after fetching */\n  onResponse?: OnResponseHook;\n  /** AbortController to cancel loading - aborts will throw AbortError */\n  abortController?: AbortController;\n}\n\n/**\n * Performs a fetch with optional request and response lifecycle hooks.\n *\n * This utility centralizes the logic for:\n * 1. Calling onRequest hook - if it returns a Response, use it instead of fetching\n * 2. Performing the actual fetch if onRequest didn't provide a response\n * 3. Calling onResponse hook - if it returns a Response, use that transformed response\n *\n * Hooks receive an AbortSignal and abort function to cancel loading at any point.\n * When aborted, throws AbortError (DOMException with name 'AbortError').\n *\n * @param url - The URL to fetch\n * @param init - The fetch init options\n * @param options - Optional hooks for request/response interception and AbortController\n * @returns The response (never null - throws on abort)\n * @throws DOMException with name 'AbortError' if loading is aborted\n *\n * @example\n * const controller = new AbortController();\n * try {\n *   const response = await fetchWithHooks(url, fetchInit, {\n *     abortController: controller,\n *     onResponse: async (url, response, { abort }) => {\n *       if (response.redirected) {\n *         abort(); // Throws AbortError\n *       }\n *     },\n *   });\n * } catch (error) {\n *   if (error.name === 'AbortError') {\n *     console.log('Loading was aborted');\n *   }\n * }\n */\nasync function fetchWithWarning(\n  url: URL,\n  init: RequestInit,\n): Promise<Response> {\n  try {\n    return await fetch(url, init);\n  } catch (error) {\n    warnCrossOriginFetchError('FetchRemoteComponent', url);\n    throw error;\n  }\n}\n\nexport async function fetchWithHooks(\n  url: URL,\n  additionalInit: {\n    credentials?: RequestCredentials;\n    next?: {\n      tags?: string[];\n    };\n  },\n  options: FetchWithHooksOptions = {},\n): Promise<Response> {\n  const {\n    onRequest,\n    onResponse,\n    abortController = new AbortController(),\n  } = options;\n  const signal = abortController.signal;\n\n  const hookOptions: HookOptions = {\n    signal,\n    abort: (reason?: unknown) => abortController.abort(reason),\n  };\n\n  // Include signal in fetch init for reactive abort support\n  const init: RequestInit = {\n    method: 'GET',\n    headers: remoteFetchHeaders(),\n    signal,\n    ...additionalInit,\n  };\n\n  // Call onRequest hook if provided - may return a Response to skip fetching\n  const res =\n    (await onRequest?.(url, init, hookOptions)) ??\n    (await fetchWithWarning(url, init));\n\n  // Call onResponse hook if provided - may return a transformed Response\n  return (await onResponse?.(url, res, hookOptions)) ?? res;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,oBAA0C;AAC1C,2BAAmC;AAgDnC,eAAe,iBACb,KACA,MACmB;AACnB,MAAI;AACF,WAAO,MAAM,MAAM,KAAK,IAAI;AAAA,EAC9B,SAAS,OAAP;AACA,iDAA0B,wBAAwB,GAAG;AACrD,UAAM;AAAA,EACR;AACF;AAEA,eAAsB,eACpB,KACA,gBAMA,UAAiC,CAAC,GACf;AACnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,IAAI,gBAAgB;AAAA,EACxC,IAAI;AACJ,QAAM,SAAS,gBAAgB;AAE/B,QAAM,cAA2B;AAAA,IAC/B;AAAA,IACA,OAAO,CAAC,WAAqB,gBAAgB,MAAM,MAAM;AAAA,EAC3D;AAGA,QAAM,OAAoB;AAAA,IACxB,QAAQ;AAAA,IACR,aAAS,yCAAmB;AAAA,IAC5B;AAAA,IACA,GAAG;AAAA,EACL;AAGA,QAAM,MACH,MAAM,YAAY,KAAK,MAAM,WAAW,KACxC,MAAM,iBAAiB,KAAK,IAAI;AAGnC,SAAQ,MAAM,aAAa,KAAK,KAAK,WAAW,KAAM;AACxD;","names":[]}

package/dist/internal/host/server/fetch-with-hooks.d.ts

@@ -0,0 +1,21 @@
+import { OnRequestHook, OnResponseHook } from '../shared/fetch-interceptors.js';
+
+/**
+ * Options for fetching with request/response hooks.
+ */
+interface FetchWithHooksOptions {
+    /** Hook to intercept the request before fetching */
+    onRequest?: OnRequestHook;
+    /** Hook to process the response after fetching */
+    onResponse?: OnResponseHook;
+    /** AbortController to cancel loading - aborts will throw AbortError */
+    abortController?: AbortController;
+}
+declare function fetchWithHooks(url: URL, additionalInit: {
+    credentials?: RequestCredentials;
+    next?: {
+        tags?: string[];
+    };
+}, options?: FetchWithHooksOptions): Promise<Response>;
+
+export { fetchWithHooks };

package/dist/internal/{shared/ssr → host/server}/fetch-with-hooks.js

@@ -1,5 +1,13 @@
-import { warnCrossOriginFetchError } from "#internal/shared/utils/logger";
+import { warnCrossOriginFetchError } from "#internal/utils/logger";
 import { remoteFetchHeaders } from "./fetch-headers";
+async function fetchWithWarning(url, init) {
+  try {
+    return await fetch(url, init);
+  } catch (error) {
+    warnCrossOriginFetchError("FetchRemoteComponent", url);
+    throw error;
+  }
+}
 async function fetchWithHooks(url, additionalInit, options = {}) {
   const {
     onRequest,
@@ -17,20 +25,8 @@ async function fetchWithHooks(url, additionalInit, options = {}) {
     signal,
     ...additionalInit
   };
-  let res = await onRequest?.(url, init, hookOptions);
-  if (!res) {
-    try {
-      res = await fetch(url, init);
-    } catch (error) {
-      warnCrossOriginFetchError("FetchRemoteComponent", url);
-      throw error;
-    }
-  }
-  const transformedRes = await onResponse?.(url, res, hookOptions);
-  if (transformedRes) {
-    res = transformedRes;
-  }
-  return res;
+  const res = await onRequest?.(url, init, hookOptions) ?? await fetchWithWarning(url, init);
+  return await onResponse?.(url, res, hookOptions) ?? res;
 }
 export {
   fetchWithHooks

package/dist/internal/host/server/fetch-with-hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/fetch-with-hooks.ts"],"sourcesContent":["import type {\n  HookOptions,\n  OnRequestHook,\n  OnResponseHook,\n} from '#internal/host/shared/fetch-interceptors';\nimport { warnCrossOriginFetchError } from '#internal/utils/logger';\nimport { remoteFetchHeaders } from './fetch-headers';\n\n/**\n * Options for fetching with request/response hooks.\n */\ninterface FetchWithHooksOptions {\n  /** Hook to intercept the request before fetching */\n  onRequest?: OnRequestHook;\n  /** Hook to process the response after fetching */\n  onResponse?: OnResponseHook;\n  /** AbortController to cancel loading - aborts will throw AbortError */\n  abortController?: AbortController;\n}\n\n/**\n * Performs a fetch with optional request and response lifecycle hooks.\n *\n * This utility centralizes the logic for:\n * 1. Calling onRequest hook - if it returns a Response, use it instead of fetching\n * 2. Performing the actual fetch if onRequest didn't provide a response\n * 3. Calling onResponse hook - if it returns a Response, use that transformed response\n *\n * Hooks receive an AbortSignal and abort function to cancel loading at any point.\n * When aborted, throws AbortError (DOMException with name 'AbortError').\n *\n * @param url - The URL to fetch\n * @param init - The fetch init options\n * @param options - Optional hooks for request/response interception and AbortController\n * @returns The response (never null - throws on abort)\n * @throws DOMException with name 'AbortError' if loading is aborted\n *\n * @example\n * const controller = new AbortController();\n * try {\n *   const response = await fetchWithHooks(url, fetchInit, {\n *     abortController: controller,\n *     onResponse: async (url, response, { abort }) => {\n *       if (response.redirected) {\n *         abort(); // Throws AbortError\n *       }\n *     },\n *   });\n * } catch (error) {\n *   if (error.name === 'AbortError') {\n *     console.log('Loading was aborted');\n *   }\n * }\n */\nasync function fetchWithWarning(\n  url: URL,\n  init: RequestInit,\n): Promise<Response> {\n  try {\n    return await fetch(url, init);\n  } catch (error) {\n    warnCrossOriginFetchError('FetchRemoteComponent', url);\n    throw error;\n  }\n}\n\nexport async function fetchWithHooks(\n  url: URL,\n  additionalInit: {\n    credentials?: RequestCredentials;\n    next?: {\n      tags?: string[];\n    };\n  },\n  options: FetchWithHooksOptions = {},\n): Promise<Response> {\n  const {\n    onRequest,\n    onResponse,\n    abortController = new AbortController(),\n  } = options;\n  const signal = abortController.signal;\n\n  const hookOptions: HookOptions = {\n    signal,\n    abort: (reason?: unknown) => abortController.abort(reason),\n  };\n\n  // Include signal in fetch init for reactive abort support\n  const init: RequestInit = {\n    method: 'GET',\n    headers: remoteFetchHeaders(),\n    signal,\n    ...additionalInit,\n  };\n\n  // Call onRequest hook if provided - may return a Response to skip fetching\n  const res =\n    (await onRequest?.(url, init, hookOptions)) ??\n    (await fetchWithWarning(url, init));\n\n  // Call onResponse hook if provided - may return a transformed Response\n  return (await onResponse?.(url, res, hookOptions)) ?? res;\n}\n"],"mappings":"AAKA,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AAgDnC,eAAe,iBACb,KACA,MACmB;AACnB,MAAI;AACF,WAAO,MAAM,MAAM,KAAK,IAAI;AAAA,EAC9B,SAAS,OAAP;AACA,8BAA0B,wBAAwB,GAAG;AACrD,UAAM;AAAA,EACR;AACF;AAEA,eAAsB,eACpB,KACA,gBAMA,UAAiC,CAAC,GACf;AACnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,IAAI,gBAAgB;AAAA,EACxC,IAAI;AACJ,QAAM,SAAS,gBAAgB;AAE/B,QAAM,cAA2B;AAAA,IAC/B;AAAA,IACA,OAAO,CAAC,WAAqB,gBAAgB,MAAM,MAAM;AAAA,EAC3D;AAGA,QAAM,OAAoB;AAAA,IACxB,QAAQ;AAAA,IACR,SAAS,mBAAmB;AAAA,IAC5B;AAAA,IACA,GAAG;AAAA,EACL;AAGA,QAAM,MACH,MAAM,YAAY,KAAK,MAAM,WAAW,KACxC,MAAM,iBAAiB,KAAK,IAAI;AAGnC,SAAQ,MAAM,aAAa,KAAK,KAAK,WAAW,KAAM;AACxD;","names":[]}

package/dist/internal/host/server/get-client-or-server-url.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/get-client-or-server-url.ts"],"sourcesContent":["export function getClientOrServerUrl(\n  src: string | URL | undefined,\n  serverFallback: string,\n): URL {\n  const fallback =\n    typeof location !== 'undefined' ? location.href : serverFallback;\n\n  if (!src) {\n    return new URL(fallback);\n  }\n\n  return typeof src === 'string' ? new URL(src, fallback) : src;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,qBACd,KACA,gBACK;AACL,QAAM,WACJ,OAAO,aAAa,cAAc,SAAS,OAAO;AAEpD,MAAI,CAAC,KAAK;AACR,WAAO,IAAI,IAAI,QAAQ;AAAA,EACzB;AAEA,SAAO,OAAO,QAAQ,WAAW,IAAI,IAAI,KAAK,QAAQ,IAAI;AAC5D;","names":[]}

package/dist/internal/host/server/get-client-or-server-url.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/get-client-or-server-url.ts"],"sourcesContent":["export function getClientOrServerUrl(\n  src: string | URL | undefined,\n  serverFallback: string,\n): URL {\n  const fallback =\n    typeof location !== 'undefined' ? location.href : serverFallback;\n\n  if (!src) {\n    return new URL(fallback);\n  }\n\n  return typeof src === 'string' ? new URL(src, fallback) : src;\n}\n"],"mappings":"AAAO,SAAS,qBACd,KACA,gBACK;AACL,QAAM,WACJ,OAAO,aAAa,cAAc,SAAS,OAAO;AAEpD,MAAI,CAAC,KAAK;AACR,WAAO,IAAI,IAAI,QAAQ;AAAA,EACzB;AAEA,SAAO,OAAO,QAAQ,WAAW,IAAI,IAAI,KAAK,QAAQ,IAAI;AAC5D;","names":[]}

package/dist/internal/{shared/client → host/server}/get-client-src.cjs

@@ -21,7 +21,7 @@ __export(get_client_src_exports, {
   getClientSrc: () => getClientSrc
 });
 module.exports = __toCommonJS(get_client_src_exports);
-var import_get_ssr_relative_path_base_url = require("#internal/shared/ssr/get-ssr-relative-path-base-url");
+var import_get_ssr_relative_path_base_url = require("#internal/host/server/get-ssr-relative-path-base-url");
 function getClientSrc(src, serverUrl) {
   if (typeof src !== "string") {
     return "";

package/dist/internal/host/server/get-client-src.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/get-client-src.ts"],"sourcesContent":["import { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\n\n/**\n * If a relative src was provided, but the server url base was used for SSR,\n * use the relative path as the src.\n */\nexport function getClientSrc(\n  src: string | boolean | undefined,\n  serverUrl: string,\n): string {\n  if (typeof src !== 'string') {\n    return '';\n  }\n\n  const url = new URL(src, serverUrl);\n\n  if (url.origin === getSSRRelativePathBaseUrl()) {\n    return `${url.pathname}${url.search}`;\n  }\n\n  return url.href;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4CAA0C;AAMnC,SAAS,aACd,KACA,WACQ;AACR,MAAI,OAAO,QAAQ,UAAU;AAC3B,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,IAAI,IAAI,KAAK,SAAS;AAElC,MAAI,IAAI,eAAW,iEAA0B,GAAG;AAC9C,WAAO,GAAG,IAAI,WAAW,IAAI;AAAA,EAC/B;AAEA,SAAO,IAAI;AACb;","names":[]}

package/dist/internal/{shared/client → host/server}/get-client-src.js

@@ -1,4 +1,4 @@
-import { getSSRRelativePathBaseUrl } from "#internal/shared/ssr/get-ssr-relative-path-base-url";
+import { getSSRRelativePathBaseUrl } from "#internal/host/server/get-ssr-relative-path-base-url";
 function getClientSrc(src, serverUrl) {
   if (typeof src !== "string") {
     return "";

package/dist/internal/host/server/get-client-src.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/get-client-src.ts"],"sourcesContent":["import { getSSRRelativePathBaseUrl } from '#internal/host/server/get-ssr-relative-path-base-url';\n\n/**\n * If a relative src was provided, but the server url base was used for SSR,\n * use the relative path as the src.\n */\nexport function getClientSrc(\n  src: string | boolean | undefined,\n  serverUrl: string,\n): string {\n  if (typeof src !== 'string') {\n    return '';\n  }\n\n  const url = new URL(src, serverUrl);\n\n  if (url.origin === getSSRRelativePathBaseUrl()) {\n    return `${url.pathname}${url.search}`;\n  }\n\n  return url.href;\n}\n"],"mappings":"AAAA,SAAS,iCAAiC;AAMnC,SAAS,aACd,KACA,WACQ;AACR,MAAI,OAAO,QAAQ,UAAU;AAC3B,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,IAAI,IAAI,KAAK,SAAS;AAElC,MAAI,IAAI,WAAW,0BAA0B,GAAG;AAC9C,WAAO,GAAG,IAAI,WAAW,IAAI;AAAA,EAC/B;AAEA,SAAO,IAAI;AACb;","names":[]}

package/dist/internal/host/server/get-ssr-relative-path-base-url.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n  // Uses the most up to date version of production. Note that the production branch URL does not account\n  // for deployments from non main branches being manually promoted to production.\n  // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n  if (\n    process.env.VERCEL_TARGET_ENV === 'production' &&\n    process.env.VERCEL_PROJECT_PRODUCTION_URL\n  ) {\n    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n  }\n\n  // Uses the most up to date version of the remote component for the branch.\n  // This ensures ISR fetches the latest version of the branch for microfrontends on revalidate.\n  if (process.env.VERCEL_BRANCH_URL) {\n    return `https://${process.env.VERCEL_BRANCH_URL}`;\n  }\n\n  // If there is no branch, use the vercel deployment URL.\n  if (process.env.VERCEL_URL) {\n    return `https://${process.env.VERCEL_URL}`;\n  }\n\n  // TODO: Resolve the correct URL in local development when the proxy is not running.\n  return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,4BAAoC;AAIlD,MACE,QAAQ,IAAI,sBAAsB,gBAClC,QAAQ,IAAI,+BACZ;AACA,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAIA,MAAI,QAAQ,IAAI,mBAAmB;AACjC,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAGA,MAAI,QAAQ,IAAI,YAAY;AAC1B,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAGA,SAAO,oBAAoB,QAAQ,IAAI,wBAAwB;AACjE;","names":[]}

package/dist/internal/host/server/get-ssr-relative-path-base-url.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/get-ssr-relative-path-base-url.ts"],"sourcesContent":["/**\n * When fetching a remote component using a relative path with SSR, a base URL is required.\n * This is not used on the client.\n *\n * For microfrontends setups, the remote component may be accessed on the same host as the host app.\n * In this case, prefix relative paths with the deployment URL.\n *\n * Can add support in the future with a custom env var for prop for when not building with Vercel\n * and Vercel URL is not available.\n */\nexport function getSSRRelativePathBaseUrl(): string {\n  // Uses the most up to date version of production. Note that the production branch URL does not account\n  // for deployments from non main branches being manually promoted to production.\n  // This ensures ISR fetches the latest version of the production for microfrontends on revalidate.\n  if (\n    process.env.VERCEL_TARGET_ENV === 'production' &&\n    process.env.VERCEL_PROJECT_PRODUCTION_URL\n  ) {\n    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;\n  }\n\n  // Uses the most up to date version of the remote component for the branch.\n  // This ensures ISR fetches the latest version of the branch for microfrontends on revalidate.\n  if (process.env.VERCEL_BRANCH_URL) {\n    return `https://${process.env.VERCEL_BRANCH_URL}`;\n  }\n\n  // If there is no branch, use the vercel deployment URL.\n  if (process.env.VERCEL_URL) {\n    return `https://${process.env.VERCEL_URL}`;\n  }\n\n  // TODO: Resolve the correct URL in local development when the proxy is not running.\n  return `http://localhost:${process.env.MFE_LOCAL_PROXY_PORT || 3024}`;\n}\n"],"mappings":"AAUO,SAAS,4BAAoC;AAIlD,MACE,QAAQ,IAAI,sBAAsB,gBAClC,QAAQ,IAAI,+BACZ;AACA,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAIA,MAAI,QAAQ,IAAI,mBAAmB;AACjC,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAGA,MAAI,QAAQ,IAAI,YAAY;AAC1B,WAAO,WAAW,QAAQ,IAAI;AAAA,EAChC;AAGA,SAAO,oBAAoB,QAAQ,IAAI,wBAAwB;AACjE;","names":[]}

package/dist/{next/remote/server.cjs → internal/host/server/types.cjs}

@@ -3,10 +3,6 @@ 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))
@@ -16,14 +12,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var server_exports = {};
-__export(server_exports, {
-  RemoteComponent: () => import_render_server.RemoteComponent
-});
-module.exports = __toCommonJS(server_exports);
-var import_render_server = require("#internal/next/remote/render-server");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  RemoteComponent
-});
-//# sourceMappingURL=server.cjs.map
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/dist/internal/host/server/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/server/types.ts"],"sourcesContent":["import type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\n\nexport type {\n  InternalResolveClientUrl,\n  ResolveClientUrl,\n} from '#internal/runtime/url/resolve-client-url';\n\nexport interface NextData {\n  props: {\n    pageProps: Record<string, unknown>;\n    __REMOTE_COMPONENT__?: {\n      bundle: string;\n      runtime: string;\n      shared?: Record<string, string>;\n    };\n  };\n  page?: string;\n  buildId?: string;\n}\n\nexport interface FetchRemoteComponentResponse {\n  name: string;\n  serverUrl: URL;\n  metadata: RemoteComponentMetadata;\n  rsc:\n    | import('#internal/host/nextjs/dom-flight').RSC\n    | import('#internal/host/nextjs/dom-flight').RSC[]\n    | string\n    | null;\n  scripts: ScriptDescriptor[];\n  links: LinkDescriptor[];\n  hydrationData: string[];\n  nextData: NextData | undefined;\n  component: React.ReactNode | undefined;\n  html: string;\n  remoteShared: Record<string, string>;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/internal/host/server/types.d.ts

@@ -0,0 +1,33 @@
+import { RSC } from '../nextjs/dom-flight.js';
+import { ScriptDescriptor, LinkDescriptor } from '../shared/asset-descriptors.js';
+import { RemoteComponentMetadata } from '../../runtime/metadata.js';
+export { InternalResolveClientUrl, ResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
+import 'parse5/dist/tree-adapters/default';
+
+interface NextData {
+    props: {
+        pageProps: Record<string, unknown>;
+        __REMOTE_COMPONENT__?: {
+            bundle: string;
+            runtime: string;
+            shared?: Record<string, string>;
+        };
+    };
+    page?: string;
+    buildId?: string;
+}
+interface FetchRemoteComponentResponse {
+    name: string;
+    serverUrl: URL;
+    metadata: RemoteComponentMetadata;
+    rsc: RSC | RSC[] | string | null;
+    scripts: ScriptDescriptor[];
+    links: LinkDescriptor[];
+    hydrationData: string[];
+    nextData: NextData | undefined;
+    component: React.ReactNode | undefined;
+    html: string;
+    remoteShared: Record<string, string>;
+}
+
+export { FetchRemoteComponentResponse, NextData };

package/dist/internal/host/server/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/internal/host/server/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/internal/host/shared/asset-descriptors.cjs

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 asset_descriptors_exports = {};
+module.exports = __toCommonJS(asset_descriptors_exports);
+//# sourceMappingURL=asset-descriptors.cjs.map

package/dist/internal/host/shared/asset-descriptors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/asset-descriptors.ts"],"sourcesContent":["/**\n * Serialized descriptor for a `<script>` element extracted from a remote\n * component response. Used in both SSR fetch results and client-side props.\n */\nexport interface ScriptDescriptor {\n  /** The script `src` URL. Empty string for inline scripts. */\n  src: string;\n  /** Inline script content (only present for scripts without a `src`). */\n  textContent?: string;\n}\n\n/**\n * Serialized descriptor for a `<link>` element extracted from a remote\n * component response. Captures all HTML attributes as key-value pairs.\n *\n * Note: the client-side parser works with live `HTMLLinkElement` objects.\n * This descriptor represents the serialized form passed between SSR and\n * client hydration.\n */\nexport type LinkDescriptor = Record<string, string | boolean>;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/internal/host/shared/asset-descriptors.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Serialized descriptor for a `<script>` element extracted from a remote
+ * component response. Used in both SSR fetch results and client-side props.
+ */
+interface ScriptDescriptor {
+    /** The script `src` URL. Empty string for inline scripts. */
+    src: string;
+    /** Inline script content (only present for scripts without a `src`). */
+    textContent?: string;
+}
+/**
+ * Serialized descriptor for a `<link>` element extracted from a remote
+ * component response. Captures all HTML attributes as key-value pairs.
+ *
+ * Note: the client-side parser works with live `HTMLLinkElement` objects.
+ * This descriptor represents the serialized form passed between SSR and
+ * client hydration.
+ */
+type LinkDescriptor = Record<string, string | boolean>;
+
+export { LinkDescriptor, ScriptDescriptor };

package/dist/internal/host/shared/asset-descriptors.js

@@ -0,0 +1 @@
+//# sourceMappingURL=asset-descriptors.js.map

package/dist/internal/host/shared/asset-descriptors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/internal/host/shared/config.cjs

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 config_exports = {};
+module.exports = __toCommonJS(config_exports);
+//# sourceMappingURL=config.cjs.map

package/dist/internal/host/shared/config.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/config.ts"],"sourcesContent":["import type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport type { OnRequestHook, OnResponseHook } from './fetch-interceptors';\n\n/**\n * Configuration for Shadow DOM isolation of a remote component.\n *\n * Used by both the public {@link ConsumeRemoteComponentConfig} (user-facing props) and\n * {@link ConsumeServerData} (internal runtime data) to control\n * whether and how the remote component is wrapped in a shadow root.\n */\nexport interface ShadowDomConfig {\n  /** Whether to isolate the remote component using a Shadow DOM wrapper. */\n  isolate?: boolean;\n  /** The Shadow DOM mode. Defaults to `'open'`. */\n  mode?: 'open' | 'closed';\n  /** Whether to include a CSS reset style in the Shadow DOM. Defaults to `false`. */\n  reset?: boolean;\n}\n\n/**\n * Configuration accepted by server-rendered embed hosts (e.g. the Next.js App Router\n * `<ConsumeRemoteComponent>`). This is the minimal, serializable subset — no client-side\n * asset fetching fields, no lifecycle callbacks.\n *\n * `src` is optional here because not every host has a source at construction\n * time (e.g. the React host during SSR hydration, or a `<remote-component>`\n * element before its `src` attribute is set). Frameworks that require `src`\n * narrow it to required in their own props type.\n */\nexport interface ConsumeServerConfig extends ShadowDomConfig {\n  /** The source URL of the remote component. Relative or absolute. */\n  src?: string | URL;\n  /** Selects a named remote component when multiple are exposed on a single page. */\n  name?: string;\n  /** Intercepts fetch requests before they are sent. */\n  onRequest?: OnRequestHook;\n  /** Inspects or transforms fetch responses after they arrive. */\n  onResponse?: OnResponseHook;\n}\n\n/**\n * Client-only configuration fields — the subset of {@link ConsumeClientConfig}\n * that applies only to client-side asset fetching. Used directly in contexts where\n * the full server config is already present (e.g. {@link ConsumeRemoteComponentClient}).\n */\nexport interface ConsumeClientOnlyConfig {\n  /** The credentials mode for the fetch request. Defaults to `'same-origin'`. */\n  credentials?: RequestCredentials;\n  /**\n   * Rewrites client-side asset URLs (scripts, stylesheets, chunks, modules, images).\n   * Return a new URL string to redirect the request (e.g. through a proxy),\n   * or `undefined` to use the original URL.\n   */\n  resolveClientUrl?: ResolveClientUrl;\n}\n\n/**\n * Configuration accepted by client-side embed hosts (React host, Pages Router host,\n * HTML host). Extends {@link ConsumeServerConfig} with fields for\n * client-side asset fetching (`credentials`, `resolveClientUrl`).\n */\nexport interface ConsumeClientConfig\n  extends ConsumeServerConfig,\n    ConsumeClientOnlyConfig {}\n\n/**\n * Complete configuration for client-side embed hosts (React host, Pages Router host).\n * Combines {@link ConsumeClientConfig} with {@link ConsumeLifecycleCallbacks}.\n *\n * This is the base type for public-facing props on hosts that fetch and mount\n * remote components on the client. The App Router server host uses only\n * {@link ConsumeServerConfig} since RSC cannot accept function callbacks.\n */\nexport interface ConsumeRemoteComponentConfig\n  extends ConsumeClientConfig,\n    ConsumeLifecycleCallbacks {}\n\n/** Information provided to the `onChange` lifecycle callback. */\nexport interface ChangeInfo {\n  previousSrc: string | URL | null;\n  nextSrc: string | URL | null;\n  previousName: string | undefined;\n  nextName: string | undefined;\n}\n\n/**\n * Lifecycle callbacks shared by host and remote component implementations.\n *\n * On the host side, these fire during client-side loading (the React host\n * exposes them as callback props; the HTML host dispatches DOM events).\n * On the remote side (Next.js `<ExposeRemoteComponent>` wrapper), the callbacks\n * are forwarded as `data-on-*` attributes so the host can wire them up.\n *\n * Server-only components (e.g. Next.js App Router server host) do not\n * support these callbacks since they render once on the server.\n */\nexport interface ConsumeLifecycleCallbacks {\n  /** Called right before a new remote component load starts. */\n  onBeforeLoad?: (src: string | URL) => void;\n  /** Called when the remote component has been successfully loaded and mounted. */\n  onLoad?: (src: string | URL) => void;\n  /** Called when an error occurs while loading or mounting the remote component. */\n  onError?: (error: unknown) => void;\n  /** Called when a different remote component is loaded into the same wrapper. */\n  onChange?: (info: ChangeInfo) => void;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/{host-config-58cdccea.d.ts → internal/host/shared/config.d.ts}

@@ -1,11 +1,11 @@
-import { ResolveClientUrl } from './internal/shared/client/proxy-through-host.js';
-import { O as OnRequestHook, a as OnResponseHook } from './types-2b26a246.js';
+import { ResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
+import { OnRequestHook, OnResponseHook } from './fetch-interceptors.js';
 
 /**
  * Configuration for Shadow DOM isolation of a remote component.
  *
- * Used by both the public {@link HostConfig} (user-facing props) and
- * {@link ResolvedRemoteComponentData} (internal runtime data) to control
+ * Used by both the public {@link ConsumeRemoteComponentConfig} (user-facing props) and
+ * {@link ConsumeServerData} (internal runtime data) to control
  * whether and how the remote component is wrapped in a shadow root.
  */
 interface ShadowDomConfig {
@@ -17,18 +17,16 @@ interface ShadowDomConfig {
     reset?: boolean;
 }
 /**
- * Core configuration accepted by every host implementation.
+ * Configuration accepted by server-rendered embed hosts (e.g. the Next.js App Router
+ * `<ConsumeRemoteComponent>`). This is the minimal, serializable subset — no client-side
+ * asset fetching fields, no lifecycle callbacks.
  *
  * `src` is optional here because not every host has a source at construction
  * time (e.g. the React host during SSR hydration, or a `<remote-component>`
  * element before its `src` attribute is set). Frameworks that require `src`
  * narrow it to required in their own props type.
- *
- * Client-only fields (`credentials`, `resolveClientUrl`) live in the separate
- * {@link ClientHostConfig} interface so that server-only hosts (App Router)
- * can extend `HostConfig` directly without omitting anything.
  */
-interface HostConfig extends ShadowDomConfig {
+interface ConsumeServerConfig extends ShadowDomConfig {
     /** The source URL of the remote component. Relative or absolute. */
     src?: string | URL;
     /** Selects a named remote component when multiple are exposed on a single page. */
@@ -39,13 +37,11 @@ interface HostConfig extends ShadowDomConfig {
     onResponse?: OnResponseHook;
 }
 /**
- * Client-side host configuration that extends {@link HostConfig}.
- *
- * These fields only apply to hosts that fetch and resolve assets on the client
- * (React host, Pages Router host, HTML host). Server-only hosts like the
- * App Router server component do not need these.
+ * Client-only configuration fields — the subset of {@link ConsumeClientConfig}
+ * that applies only to client-side asset fetching. Used directly in contexts where
+ * the full server config is already present (e.g. {@link ConsumeRemoteComponentClient}).
  */
-interface ClientHostConfig {
+interface ConsumeClientOnlyConfig {
     /** The credentials mode for the fetch request. Defaults to `'same-origin'`. */
     credentials?: RequestCredentials;
     /**
@@ -55,6 +51,23 @@ interface ClientHostConfig {
      */
     resolveClientUrl?: ResolveClientUrl;
 }
+/**
+ * Configuration accepted by client-side embed hosts (React host, Pages Router host,
+ * HTML host). Extends {@link ConsumeServerConfig} with fields for
+ * client-side asset fetching (`credentials`, `resolveClientUrl`).
+ */
+interface ConsumeClientConfig extends ConsumeServerConfig, ConsumeClientOnlyConfig {
+}
+/**
+ * Complete configuration for client-side embed hosts (React host, Pages Router host).
+ * Combines {@link ConsumeClientConfig} with {@link ConsumeLifecycleCallbacks}.
+ *
+ * This is the base type for public-facing props on hosts that fetch and mount
+ * remote components on the client. The App Router server host uses only
+ * {@link ConsumeServerConfig} since RSC cannot accept function callbacks.
+ */
+interface ConsumeRemoteComponentConfig extends ConsumeClientConfig, ConsumeLifecycleCallbacks {
+}
 /** Information provided to the `onChange` lifecycle callback. */
 interface ChangeInfo {
     previousSrc: string | URL | null;
@@ -67,13 +80,13 @@ interface ChangeInfo {
  *
  * On the host side, these fire during client-side loading (the React host
  * exposes them as callback props; the HTML host dispatches DOM events).
- * On the remote side (Next.js `<RemoteComponent>` wrapper), the callbacks
+ * On the remote side (Next.js `<ExposeRemoteComponent>` wrapper), the callbacks
  * are forwarded as `data-on-*` attributes so the host can wire them up.
  *
  * Server-only components (e.g. Next.js App Router server host) do not
  * support these callbacks since they render once on the server.
  */
-interface HostLifecycleCallbacks {
+interface ConsumeLifecycleCallbacks {
     /** Called right before a new remote component load starts. */
     onBeforeLoad?: (src: string | URL) => void;
     /** Called when the remote component has been successfully loaded and mounted. */
@@ -84,4 +97,4 @@ interface HostLifecycleCallbacks {
     onChange?: (info: ChangeInfo) => void;
 }
 
-export { ClientHostConfig as C, HostConfig as H, ShadowDomConfig as S, HostLifecycleCallbacks as a };
+export { ChangeInfo, ConsumeClientConfig, ConsumeClientOnlyConfig, ConsumeLifecycleCallbacks, ConsumeRemoteComponentConfig, ConsumeServerConfig, ShadowDomConfig };

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

@@ -0,0 +1 @@
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/internal/host/shared/fetch-interceptors.cjs

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 fetch_interceptors_exports = {};
+module.exports = __toCommonJS(fetch_interceptors_exports);
+//# sourceMappingURL=fetch-interceptors.cjs.map

package/dist/internal/host/shared/fetch-interceptors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/fetch-interceptors.ts"],"sourcesContent":["/**\n * Hook types for intercepting remote component fetch requests and responses.\n *\n * These are part of the public host configuration surface ({@link ConsumeServerConfig})\n * and are used by both SSR and client-side host implementations.\n */\n\n/**\n * Options object passed to hook functions containing abort capabilities.\n * Uses standard AbortController/AbortSignal for compatibility with Web APIs.\n *\n * @example\n * // Abort on redirect\n * component.onResponse = (url, response, { signal, abort }) => {\n *   if (response.redirected) {\n *     abort();\n *   }\n * };\n *\n * @example\n * // Check if already aborted\n * component.onRequest = (url, init, { signal }) => {\n *   if (signal.aborted) return;\n *   // ...\n * };\n *\n * @example\n * // Pass signal to fetch or other APIs\n * component.onRequest = async (url, init, { signal }) => {\n *   const data = await fetch('/api/check', { signal });\n *   // ...\n * };\n */\nexport interface HookOptions {\n  /** Standard AbortSignal - can be passed to fetch and other Web APIs */\n  signal: AbortSignal;\n  /** Abort loading - prevents further processing and DOM attachment */\n  abort(reason?: unknown): void;\n}\n\n/**\n * Hook function that intercepts remote component fetch requests.\n * Can be used to modify request options, provide a custom response, inspect the request,\n * or abort loading.\n *\n * @param url - The URL being fetched\n * @param init - The fetch init options being used\n * @param options - Options object containing the abort signal\n * @returns Optional Response to use instead of fetching, or void/undefined to proceed with normal fetch\n *\n * @example\n * // Log all remote component requests\n * const onRequest = async (url, init, { abort }) => {\n *   console.log('Fetching remote component from:', url.href);\n * };\n *\n * @example\n * // Add custom headers\n * const onRequest = async (url, init) => {\n *   (init.headers as Headers).set('X-Custom-Header', 'value');\n * };\n *\n * @example\n * // Provide a cached response\n * const onRequest = async (url) => {\n *   const cached = cache.get(url.href);\n *   if (cached) {\n *     return new Response(cached);\n *   }\n * };\n *\n * @example\n * // Block certain domains\n * const onRequest = async (url, init, { abort }) => {\n *   if (isBlockedDomain(url)) {\n *     abort('Domain is blocked');\n *   }\n * };\n */\nexport type OnRequestHook = (\n  url: URL,\n  init: RequestInit,\n  options: HookOptions,\n) => Promise<Response | undefined> | Response | undefined;\n\n/**\n * Hook function that is called after a remote component fetch completes.\n * Can be used to inspect the response, check for redirects, transform the response,\n * or abort loading.\n *\n * @param url - The original URL that was requested\n * @param response - The Response object from the fetch\n * @param options - Options object containing the abort signal\n * @returns Optional Response to use instead of the original, or void/undefined to use the original response\n *\n * @example\n * // Check for redirects and abort\n * const onResponse = async (url, response, { abort }) => {\n *   if (response.redirected) {\n *     console.log(`Redirected from ${url.href} to ${response.url}`);\n *     abort();\n *   }\n * };\n *\n * @example\n * // Cache the response\n * const onResponse = async (url, response) => {\n *   const cloned = response.clone();\n *   cache.set(url.href, await cloned.text());\n * };\n *\n * @example\n * // Transform the response\n * const onResponse = async (url, response) => {\n *   const text = await response.text();\n *   const modified = text.replace(/foo/g, 'bar');\n *   return new Response(modified, response);\n * };\n *\n * @example\n * // Abort on redirect to legacy routes\n * const onResponse = async (url, response, { abort }) => {\n *   if (response.redirected && isLegacyRoute(response.url)) {\n *     window.location.href = toLegacyUrl(response.url);\n *     abort(); // Abort rendering - no flash!\n *   }\n * };\n */\nexport type OnResponseHook = (\n  url: URL,\n  response: Response,\n  options: HookOptions,\n) => Promise<Response | undefined> | Response | undefined;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}