remote-components 0.3.3 → 0.3.5

package/dist/internal/runtime/html/html-spec.cjs

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var html_spec_exports = {};
+__export(html_spec_exports, {
+  DATA_BUNDLE: () => DATA_BUNDLE,
+  DATA_REMOTE_COMPONENTS_SHARED: () => DATA_REMOTE_COMPONENTS_SHARED,
+  DATA_ROUTE: () => DATA_ROUTE,
+  DATA_RUNTIME: () => DATA_RUNTIME,
+  DATA_SRC: () => DATA_SRC,
+  DATA_TYPE: () => DATA_TYPE,
+  ID_SUFFIX_RSC: () => ID_SUFFIX_RSC,
+  ID_SUFFIX_SHARED: () => ID_SUFFIX_SHARED,
+  ID_SUFFIX_SSR: () => ID_SUFFIX_SSR,
+  NEXT_CONTAINER_ID: () => NEXT_CONTAINER_ID,
+  NEXT_DATA_ID: () => NEXT_DATA_ID,
+  ORIGIN_REWRITE_TAGS: () => ORIGIN_REWRITE_TAGS,
+  REMOTE_NEXT_DATA_ID: () => REMOTE_NEXT_DATA_ID,
+  TAG_REMOTE_COMPONENT: () => TAG_REMOTE_COMPONENT
+});
+module.exports = __toCommonJS(html_spec_exports);
+const ORIGIN_REWRITE_TAGS = [
+  "img",
+  "source",
+  "video",
+  "audio",
+  "track",
+  "iframe",
+  "embed",
+  "script",
+  "link"
+];
+const ID_SUFFIX_RSC = "_rsc";
+const ID_SUFFIX_SSR = "_ssr";
+const ID_SUFFIX_SHARED = "_shared";
+const DATA_BUNDLE = "data-bundle";
+const DATA_ROUTE = "data-route";
+const DATA_RUNTIME = "data-runtime";
+const DATA_TYPE = "data-type";
+const DATA_SRC = "data-src";
+const DATA_REMOTE_COMPONENTS_SHARED = "data-remote-components-shared";
+const TAG_REMOTE_COMPONENT = "remote-component";
+const NEXT_DATA_ID = "__NEXT_DATA__";
+const REMOTE_NEXT_DATA_ID = "__REMOTE_NEXT_DATA__";
+const NEXT_CONTAINER_ID = "__next";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DATA_BUNDLE,
+  DATA_REMOTE_COMPONENTS_SHARED,
+  DATA_ROUTE,
+  DATA_RUNTIME,
+  DATA_SRC,
+  DATA_TYPE,
+  ID_SUFFIX_RSC,
+  ID_SUFFIX_SHARED,
+  ID_SUFFIX_SSR,
+  NEXT_CONTAINER_ID,
+  NEXT_DATA_ID,
+  ORIGIN_REWRITE_TAGS,
+  REMOTE_NEXT_DATA_ID,
+  TAG_REMOTE_COMPONENT
+});
+//# sourceMappingURL=html-spec.cjs.map

package/dist/internal/runtime/html/html-spec.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/html/html-spec.ts"],"sourcesContent":["/**\n * Pure constants for HTML element names, data attributes, and ID suffixes\n * used across both server-side (parse5) and browser (DOM) HTML processing.\n *\n * No imports, no runtime code — safe to use in any context.\n */\n\n/** Elements whose `src`, `href`, `srcset`, and `imagesrcset` need origin rewriting. */\nexport const ORIGIN_REWRITE_TAGS = [\n  'img',\n  'source',\n  'video',\n  'audio',\n  'track',\n  'iframe',\n  'embed',\n  'script',\n  'link',\n] as const;\n\n// ID suffixes appended to the component name to form element IDs.\nexport const ID_SUFFIX_RSC = '_rsc';\nexport const ID_SUFFIX_SSR = '_ssr';\nexport const ID_SUFFIX_SHARED = '_shared';\n\n// Data attributes written on the remote component wrapper element.\nexport const DATA_BUNDLE = 'data-bundle';\nexport const DATA_ROUTE = 'data-route';\nexport const DATA_RUNTIME = 'data-runtime';\nexport const DATA_TYPE = 'data-type';\nexport const DATA_SRC = 'data-src';\nexport const DATA_REMOTE_COMPONENTS_SHARED = 'data-remote-components-shared';\n\n// Well-known element identifiers.\nexport const TAG_REMOTE_COMPONENT = 'remote-component';\nexport const NEXT_DATA_ID = '__NEXT_DATA__';\nexport const REMOTE_NEXT_DATA_ID = '__REMOTE_NEXT_DATA__';\nexport const NEXT_CONTAINER_ID = '__next';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,MAAM,sBAAsB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,mBAAmB;AAGzB,MAAM,cAAc;AACpB,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,YAAY;AAClB,MAAM,WAAW;AACjB,MAAM,gCAAgC;AAGtC,MAAM,uBAAuB;AAC7B,MAAM,eAAe;AACrB,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;","names":[]}

package/dist/internal/runtime/html/html-spec.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Pure constants for HTML element names, data attributes, and ID suffixes
+ * used across both server-side (parse5) and browser (DOM) HTML processing.
+ *
+ * No imports, no runtime code — safe to use in any context.
+ */
+/** Elements whose `src`, `href`, `srcset`, and `imagesrcset` need origin rewriting. */
+declare const ORIGIN_REWRITE_TAGS: readonly ["img", "source", "video", "audio", "track", "iframe", "embed", "script", "link"];
+declare const ID_SUFFIX_RSC = "_rsc";
+declare const ID_SUFFIX_SSR = "_ssr";
+declare const ID_SUFFIX_SHARED = "_shared";
+declare const DATA_BUNDLE = "data-bundle";
+declare const DATA_ROUTE = "data-route";
+declare const DATA_RUNTIME = "data-runtime";
+declare const DATA_TYPE = "data-type";
+declare const DATA_SRC = "data-src";
+declare const DATA_REMOTE_COMPONENTS_SHARED = "data-remote-components-shared";
+declare const TAG_REMOTE_COMPONENT = "remote-component";
+declare const NEXT_DATA_ID = "__NEXT_DATA__";
+declare const REMOTE_NEXT_DATA_ID = "__REMOTE_NEXT_DATA__";
+declare const NEXT_CONTAINER_ID = "__next";
+
+export { DATA_BUNDLE, DATA_REMOTE_COMPONENTS_SHARED, DATA_ROUTE, DATA_RUNTIME, DATA_SRC, DATA_TYPE, ID_SUFFIX_RSC, ID_SUFFIX_SHARED, ID_SUFFIX_SSR, NEXT_CONTAINER_ID, NEXT_DATA_ID, ORIGIN_REWRITE_TAGS, REMOTE_NEXT_DATA_ID, TAG_REMOTE_COMPONENT };

package/dist/internal/runtime/html/html-spec.js

@@ -0,0 +1,41 @@
+const ORIGIN_REWRITE_TAGS = [
+  "img",
+  "source",
+  "video",
+  "audio",
+  "track",
+  "iframe",
+  "embed",
+  "script",
+  "link"
+];
+const ID_SUFFIX_RSC = "_rsc";
+const ID_SUFFIX_SSR = "_ssr";
+const ID_SUFFIX_SHARED = "_shared";
+const DATA_BUNDLE = "data-bundle";
+const DATA_ROUTE = "data-route";
+const DATA_RUNTIME = "data-runtime";
+const DATA_TYPE = "data-type";
+const DATA_SRC = "data-src";
+const DATA_REMOTE_COMPONENTS_SHARED = "data-remote-components-shared";
+const TAG_REMOTE_COMPONENT = "remote-component";
+const NEXT_DATA_ID = "__NEXT_DATA__";
+const REMOTE_NEXT_DATA_ID = "__REMOTE_NEXT_DATA__";
+const NEXT_CONTAINER_ID = "__next";
+export {
+  DATA_BUNDLE,
+  DATA_REMOTE_COMPONENTS_SHARED,
+  DATA_ROUTE,
+  DATA_RUNTIME,
+  DATA_SRC,
+  DATA_TYPE,
+  ID_SUFFIX_RSC,
+  ID_SUFFIX_SHARED,
+  ID_SUFFIX_SSR,
+  NEXT_CONTAINER_ID,
+  NEXT_DATA_ID,
+  ORIGIN_REWRITE_TAGS,
+  REMOTE_NEXT_DATA_ID,
+  TAG_REMOTE_COMPONENT
+};
+//# sourceMappingURL=html-spec.js.map

package/dist/internal/runtime/html/html-spec.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/html/html-spec.ts"],"sourcesContent":["/**\n * Pure constants for HTML element names, data attributes, and ID suffixes\n * used across both server-side (parse5) and browser (DOM) HTML processing.\n *\n * No imports, no runtime code — safe to use in any context.\n */\n\n/** Elements whose `src`, `href`, `srcset`, and `imagesrcset` need origin rewriting. */\nexport const ORIGIN_REWRITE_TAGS = [\n  'img',\n  'source',\n  'video',\n  'audio',\n  'track',\n  'iframe',\n  'embed',\n  'script',\n  'link',\n] as const;\n\n// ID suffixes appended to the component name to form element IDs.\nexport const ID_SUFFIX_RSC = '_rsc';\nexport const ID_SUFFIX_SSR = '_ssr';\nexport const ID_SUFFIX_SHARED = '_shared';\n\n// Data attributes written on the remote component wrapper element.\nexport const DATA_BUNDLE = 'data-bundle';\nexport const DATA_ROUTE = 'data-route';\nexport const DATA_RUNTIME = 'data-runtime';\nexport const DATA_TYPE = 'data-type';\nexport const DATA_SRC = 'data-src';\nexport const DATA_REMOTE_COMPONENTS_SHARED = 'data-remote-components-shared';\n\n// Well-known element identifiers.\nexport const TAG_REMOTE_COMPONENT = 'remote-component';\nexport const NEXT_DATA_ID = '__NEXT_DATA__';\nexport const REMOTE_NEXT_DATA_ID = '__REMOTE_NEXT_DATA__';\nexport const NEXT_CONTAINER_ID = '__next';\n"],"mappings":"AAQO,MAAM,sBAAsB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,mBAAmB;AAGzB,MAAM,cAAc;AACpB,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,YAAY;AAClB,MAAM,WAAW;AACjB,MAAM,gCAAgC;AAGtC,MAAM,uBAAuB;AAC7B,MAAM,eAAe;AACrB,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;","names":[]}

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

@@ -32,27 +32,30 @@ module.exports = __toCommonJS(parse_remote_html_exports);
 var import_constants = require("#internal/runtime/constants");
 var import_metadata = require("#internal/runtime/metadata");
 var import_error = require("#internal/utils/error");
+var import_html_spec = require("./html-spec");
 function validateSingleComponent(doc, name, url) {
-  if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
+  if (doc.querySelectorAll(`div[${import_html_spec.DATA_BUNDLE}][${import_html_spec.DATA_ROUTE}]`).length > 1 && !doc.querySelector(
+    `div[${import_html_spec.DATA_BUNDLE}][${import_html_spec.DATA_ROUTE}][id^="${name}"]`
+  ) || doc.querySelectorAll(`${import_html_spec.TAG_REMOTE_COMPONENT}:not([src])`).length > 1 && !doc.querySelector(`${import_html_spec.TAG_REMOTE_COMPONENT}[name="${name}"]`)) {
     throw (0, import_error.multipleRemoteComponentsError)(url);
   }
 }
 function findComponentElement(doc, name) {
-  return doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? doc.querySelector("div[data-bundle][data-route]") ?? doc.querySelector("div#__next") ?? doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
+  return doc.querySelector(`div[${import_html_spec.DATA_BUNDLE}][${import_html_spec.DATA_ROUTE}][id^="${name}"]`) ?? doc.querySelector(`div[${import_html_spec.DATA_BUNDLE}][${import_html_spec.DATA_ROUTE}]`) ?? doc.querySelector(`div#${import_html_spec.NEXT_CONTAINER_ID}`) ?? doc.querySelector(`${import_html_spec.TAG_REMOTE_COMPONENT}[name="${name}"]:not([src])`) ?? doc.querySelector(`${import_html_spec.TAG_REMOTE_COMPONENT}:not([src])`);
 }
 function parseNextData(doc) {
   return JSON.parse(
-    (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
+    (doc.querySelector(`#${import_html_spec.NEXT_DATA_ID}`) ?? doc.querySelector(`#${import_html_spec.REMOTE_NEXT_DATA_ID}`))?.textContent ?? "null"
   );
 }
 function resolveComponentName(component, nextData, fallbackName) {
-  const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
-  const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
+  const isRemoteComponent = component?.tagName.toLowerCase() === import_html_spec.TAG_REMOTE_COMPONENT;
+  const name = component?.getAttribute("id")?.replace(new RegExp(`${import_html_spec.ID_SUFFIX_SSR}$`), "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
   return { name, isRemoteComponent };
 }
 function extractRemoteShared(doc, name, nextData) {
   const remoteSharedEl = doc.querySelector(
-    `#${name}_shared[data-remote-components-shared]`
+    `#${name}${import_html_spec.ID_SUFFIX_SHARED}[${import_html_spec.DATA_REMOTE_COMPONENTS_SHARED}]`
   );
   const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
   remoteSharedEl?.remove();
@@ -73,7 +76,7 @@ function extractLinks(doc, component) {
 function extractScripts(doc, component, isRemoteComponent) {
   return Array.from(
     (isRemoteComponent ? component : doc).querySelectorAll(
-      "script[src],script[data-src]"
+      `script[src],script[${import_html_spec.DATA_SRC}]`
     )
   );
 }
@@ -86,15 +89,15 @@ function parseRemoteComponentDocument(doc, name, url) {
     nextData,
     name
   );
-  const rsc = doc.querySelector(`#${resolvedName}_rsc`);
+  const rsc = doc.querySelector(`#${resolvedName}${import_html_spec.ID_SUFFIX_RSC}`);
   const metadata = (0, import_metadata.buildMetadata)(
     {
       name: resolvedName,
-      bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle,
-      route: component?.getAttribute("data-route") ?? nextData?.page,
-      runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? import_constants.RUNTIME_SCRIPT,
+      bundle: component?.getAttribute(import_html_spec.DATA_BUNDLE) || nextData?.props.__REMOTE_COMPONENT__?.bundle,
+      route: component?.getAttribute(import_html_spec.DATA_ROUTE) ?? nextData?.page,
+      runtime: component?.getAttribute(import_html_spec.DATA_RUNTIME) ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? import_constants.RUNTIME_SCRIPT,
       id: component?.getAttribute("id"),
-      type: component?.getAttribute("data-type")
+      type: component?.getAttribute(import_html_spec.DATA_TYPE)
     },
     url
   );

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

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

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

@@ -9,27 +9,44 @@ import {
   multipleRemoteComponentsError,
   RemoteComponentsError
 } from "#internal/utils/error";
+import {
+  DATA_BUNDLE,
+  DATA_REMOTE_COMPONENTS_SHARED,
+  DATA_ROUTE,
+  DATA_RUNTIME,
+  DATA_SRC,
+  DATA_TYPE,
+  ID_SUFFIX_RSC,
+  ID_SUFFIX_SHARED,
+  ID_SUFFIX_SSR,
+  NEXT_CONTAINER_ID,
+  NEXT_DATA_ID,
+  REMOTE_NEXT_DATA_ID,
+  TAG_REMOTE_COMPONENT
+} from "./html-spec";
 function validateSingleComponent(doc, name, url) {
-  if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
+  if (doc.querySelectorAll(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`).length > 1 && !doc.querySelector(
+    `div[${DATA_BUNDLE}][${DATA_ROUTE}][id^="${name}"]`
+  ) || doc.querySelectorAll(`${TAG_REMOTE_COMPONENT}:not([src])`).length > 1 && !doc.querySelector(`${TAG_REMOTE_COMPONENT}[name="${name}"]`)) {
     throw multipleRemoteComponentsError(url);
   }
 }
 function findComponentElement(doc, name) {
-  return doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? doc.querySelector("div[data-bundle][data-route]") ?? doc.querySelector("div#__next") ?? doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
+  return doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}][id^="${name}"]`) ?? doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`) ?? doc.querySelector(`div#${NEXT_CONTAINER_ID}`) ?? doc.querySelector(`${TAG_REMOTE_COMPONENT}[name="${name}"]:not([src])`) ?? doc.querySelector(`${TAG_REMOTE_COMPONENT}:not([src])`);
 }
 function parseNextData(doc) {
   return JSON.parse(
-    (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
+    (doc.querySelector(`#${NEXT_DATA_ID}`) ?? doc.querySelector(`#${REMOTE_NEXT_DATA_ID}`))?.textContent ?? "null"
   );
 }
 function resolveComponentName(component, nextData, fallbackName) {
-  const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
-  const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
+  const isRemoteComponent = component?.tagName.toLowerCase() === TAG_REMOTE_COMPONENT;
+  const name = component?.getAttribute("id")?.replace(new RegExp(`${ID_SUFFIX_SSR}$`), "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
   return { name, isRemoteComponent };
 }
 function extractRemoteShared(doc, name, nextData) {
   const remoteSharedEl = doc.querySelector(
-    `#${name}_shared[data-remote-components-shared]`
+    `#${name}${ID_SUFFIX_SHARED}[${DATA_REMOTE_COMPONENTS_SHARED}]`
   );
   const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
   remoteSharedEl?.remove();
@@ -50,7 +67,7 @@ function extractLinks(doc, component) {
 function extractScripts(doc, component, isRemoteComponent) {
   return Array.from(
     (isRemoteComponent ? component : doc).querySelectorAll(
-      "script[src],script[data-src]"
+      `script[src],script[${DATA_SRC}]`
     )
   );
 }
@@ -63,15 +80,15 @@ function parseRemoteComponentDocument(doc, name, url) {
     nextData,
     name
   );
-  const rsc = doc.querySelector(`#${resolvedName}_rsc`);
+  const rsc = doc.querySelector(`#${resolvedName}${ID_SUFFIX_RSC}`);
   const metadata = buildMetadata(
     {
       name: resolvedName,
-      bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle,
-      route: component?.getAttribute("data-route") ?? nextData?.page,
-      runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? RUNTIME_SCRIPT,
+      bundle: component?.getAttribute(DATA_BUNDLE) || nextData?.props.__REMOTE_COMPONENT__?.bundle,
+      route: component?.getAttribute(DATA_ROUTE) ?? nextData?.page,
+      runtime: component?.getAttribute(DATA_RUNTIME) ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? RUNTIME_SCRIPT,
       id: component?.getAttribute("id"),
-      type: component?.getAttribute("data-type")
+      type: component?.getAttribute(DATA_TYPE)
     },
     url
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtime/html/parse-remote-html.ts"],"sourcesContent":["import type { NextData } from '#internal/host/server/types';\nimport {\n  DEFAULT_COMPONENT_NAME,\n  RUNTIME_SCRIPT,\n} from '#internal/runtime/constants';\nimport {\n  buildMetadata,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport {\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\n\nexport interface ParsedRemoteComponent {\n  /** The DOM element representing the remote component content. */\n  component: Element;\n  /** Resolved name of the remote component (with _ssr suffix stripped). */\n  name: string;\n  /** Whether the component is a <remote-component> custom element. */\n  isRemoteComponent: boolean;\n  /** Component metadata: bundle, route, runtime. */\n  metadata: RemoteComponentMetadata;\n  /** Parsed __NEXT_DATA__ or __REMOTE_NEXT_DATA__, or null. */\n  nextData: NextData | null;\n  /** The RSC flight data script element, or null. */\n  rsc: Element | null;\n  /** Shared module map extracted from the component's shared data script. */\n  remoteShared: Record<string, string>;\n  /** Link elements extracted from the document (outside the component). */\n  links: HTMLLinkElement[];\n  /** Script elements extracted from the component or document. */\n  scripts: HTMLScriptElement[];\n}\n\n/**\n * Validates that the document does not contain multiple unnamed remote components.\n * When multiple components exist, the consumer must specify a name to select one.\n */\nexport function validateSingleComponent(\n  doc: Document,\n  name: string,\n  url: string,\n): void {\n  if (\n    (doc.querySelectorAll('div[data-bundle][data-route]').length > 1 &&\n      !doc.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`)) ||\n    (doc.querySelectorAll('remote-component:not([src])').length > 1 &&\n      !doc.querySelector(`remote-component[name=\"${name}\"]`))\n  ) {\n    throw multipleRemoteComponentsError(url);\n  }\n}\n\n/**\n * Finds the remote component element in the parsed HTML document using the\n * standard querySelector chain. Returns null if no component is found.\n */\nexport function findComponentElement(\n  doc: Document,\n  name: string,\n): Element | null {\n  return (\n    doc.querySelector(`div[data-bundle][data-route][id^=\"${name}\"]`) ??\n    doc.querySelector('div[data-bundle][data-route]') ??\n    doc.querySelector('div#__next') ??\n    doc.querySelector(`remote-component[name=\"${name}\"]:not([src])`) ??\n    doc.querySelector('remote-component:not([src])')\n  );\n}\n\n/**\n * Parses the __NEXT_DATA__ or __REMOTE_NEXT_DATA__ script element from the document.\n */\nexport function parseNextData(doc: Document): NextData | null {\n  return JSON.parse(\n    (\n      doc.querySelector('#__NEXT_DATA__') ??\n      doc.querySelector('#__REMOTE_NEXT_DATA__')\n    )?.textContent ?? 'null',\n  ) as NextData | null;\n}\n\n/**\n * Resolves the component name from the element's id attribute, the name attribute\n * (for <remote-component> elements), nextData, or a fallback value.\n * Strips the _ssr suffix from the id if present.\n */\nexport function resolveComponentName(\n  component: Element | null,\n  nextData: NextData | null,\n  fallbackName: string,\n): { name: string; isRemoteComponent: boolean } {\n  const isRemoteComponent =\n    component?.tagName.toLowerCase() === 'remote-component';\n\n  const name =\n    component?.getAttribute('id')?.replace(/_ssr$/, '') ||\n    (isRemoteComponent && component?.getAttribute('name')) ||\n    (nextData ? '__next' : fallbackName);\n\n  return { name, isRemoteComponent };\n}\n\n/**\n * Extracts the shared module map from the document and removes the element.\n * Falls back to nextData's shared modules if available.\n */\nexport function extractRemoteShared(\n  doc: Document,\n  name: string,\n  nextData: NextData | null,\n): Record<string, string> {\n  const remoteSharedEl = doc.querySelector(\n    `#${name}_shared[data-remote-components-shared]`,\n  );\n  const remoteShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ??\n    ((JSON.parse(remoteSharedEl?.textContent ?? '{}') ?? {}) as Record<\n      string,\n      string\n    >);\n  remoteSharedEl?.remove();\n  return remoteShared;\n}\n\n/**\n * Validates that a remote component was found in the document and that it has\n * RSC data, Next.js data, or is a <remote-component> element.\n * Acts as a type assertion - narrows component to non-null on success.\n */\nexport function validateComponentFound(\n  component: Element | null,\n  rsc: Element | null,\n  nextData: NextData | null,\n  isRemoteComponent: boolean,\n  url: string,\n  name: string,\n): asserts component is Element {\n  if (!component || !(rsc || nextData || isRemoteComponent)) {\n    throw new RemoteComponentsError(\n      `Remote Component not found on ${url}.${\n        name !== DEFAULT_COMPONENT_NAME\n          ? ` The name for the <RemoteComponent> is \"${name}\". Check <RemoteComponent> usage.`\n          : ''\n      } Did you forget to wrap the content in <RemoteComponent>?`,\n    );\n  }\n}\n\n/**\n * Extracts link elements from the document that are not inside the component.\n */\nexport function extractLinks(\n  doc: Document,\n  component: Element,\n): HTMLLinkElement[] {\n  return Array.from(doc.querySelectorAll<HTMLLinkElement>('link[href]')).filter(\n    (link) => !component.contains(link),\n  );\n}\n\n/**\n * Extracts script elements from the component or document, depending on whether\n * the component is a <remote-component> custom element.\n */\nexport function extractScripts(\n  doc: Document,\n  component: Element,\n  isRemoteComponent: boolean,\n): HTMLScriptElement[] {\n  return Array.from(\n    (isRemoteComponent ? component : doc).querySelectorAll<HTMLScriptElement>(\n      'script[src],script[data-src]',\n    ),\n  );\n}\n\n/**\n * Parses a remote component HTML document and extracts all data needed for\n * loading and hydrating the component. This is the main orchestrator that\n * calls the individual extraction functions.\n */\nexport function parseRemoteComponentDocument(\n  doc: Document,\n  name: string,\n  url: URL,\n): ParsedRemoteComponent {\n  validateSingleComponent(doc, name, url.href);\n\n  const component = findComponentElement(doc, name);\n  const nextData = parseNextData(doc);\n\n  const { name: resolvedName, isRemoteComponent } = resolveComponentName(\n    component,\n    nextData,\n    name,\n  );\n\n  const rsc = doc.querySelector(`#${resolvedName}_rsc`);\n  const metadata = buildMetadata(\n    {\n      name: resolvedName,\n      bundle:\n        component?.getAttribute('data-bundle') ||\n        nextData?.props.__REMOTE_COMPONENT__?.bundle,\n      route: component?.getAttribute('data-route') ?? nextData?.page,\n      runtime:\n        component?.getAttribute('data-runtime') ??\n        nextData?.props.__REMOTE_COMPONENT__?.runtime ??\n        RUNTIME_SCRIPT,\n      id: component?.getAttribute('id'),\n      type: component?.getAttribute('data-type'),\n    },\n    url,\n  );\n  const remoteShared = extractRemoteShared(doc, resolvedName, nextData);\n\n  validateComponentFound(\n    component,\n    rsc,\n    nextData,\n    isRemoteComponent,\n    url.href,\n    resolvedName,\n  );\n\n  const links = extractLinks(doc, component);\n  const scripts = extractScripts(doc, component, isRemoteComponent);\n\n  return {\n    component,\n    name: resolvedName,\n    isRemoteComponent,\n    metadata,\n    nextData,\n    rsc,\n    remoteShared,\n    links,\n    scripts,\n  };\n}\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA2BA,SAAS,wBACd,KACA,MACA,KACM;AACN,MACG,IAAI,iBAAiB,8BAA8B,EAAE,SAAS,KAC7D,CAAC,IAAI,cAAc,qCAAqC,QAAQ,KACjE,IAAI,iBAAiB,6BAA6B,EAAE,SAAS,KAC5D,CAAC,IAAI,cAAc,0BAA0B,QAAQ,GACvD;AACA,UAAM,8BAA8B,GAAG;AAAA,EACzC;AACF;AAMO,SAAS,qBACd,KACA,MACgB;AAChB,SACE,IAAI,cAAc,qCAAqC,QAAQ,KAC/D,IAAI,cAAc,8BAA8B,KAChD,IAAI,cAAc,YAAY,KAC9B,IAAI,cAAc,0BAA0B,mBAAmB,KAC/D,IAAI,cAAc,6BAA6B;AAEnD;AAKO,SAAS,cAAc,KAAgC;AAC5D,SAAO,KAAK;AAAA,KAER,IAAI,cAAc,gBAAgB,KAClC,IAAI,cAAc,uBAAuB,IACxC,eAAe;AAAA,EACpB;AACF;AAOO,SAAS,qBACd,WACA,UACA,cAC8C;AAC9C,QAAM,oBACJ,WAAW,QAAQ,YAAY,MAAM;AAEvC,QAAM,OACJ,WAAW,aAAa,IAAI,GAAG,QAAQ,SAAS,EAAE,KACjD,qBAAqB,WAAW,aAAa,MAAM,MACnD,WAAW,WAAW;AAEzB,SAAO,EAAE,MAAM,kBAAkB;AACnC;AAMO,SAAS,oBACd,KACA,MACA,UACwB;AACxB,QAAM,iBAAiB,IAAI;AAAA,IACzB,IAAI;AAAA,EACN;AACA,QAAM,eACJ,UAAU,MAAM,sBAAsB,WACpC,KAAK,MAAM,gBAAgB,eAAe,IAAI,KAAK,CAAC;AAIxD,kBAAgB,OAAO;AACvB,SAAO;AACT;AAOO,SAAS,uBACd,WACA,KACA,UACA,mBACA,KACA,MAC8B;AAC9B,MAAI,CAAC,aAAa,EAAE,OAAO,YAAY,oBAAoB;AACzD,UAAM,IAAI;AAAA,MACR,iCAAiC,OAC/B,SAAS,yBACL,2CAA2C,0CAC3C;AAAA,IAER;AAAA,EACF;AACF;AAKO,SAAS,aACd,KACA,WACmB;AACnB,SAAO,MAAM,KAAK,IAAI,iBAAkC,YAAY,CAAC,EAAE;AAAA,IACrE,CAAC,SAAS,CAAC,UAAU,SAAS,IAAI;AAAA,EACpC;AACF;AAMO,SAAS,eACd,KACA,WACA,mBACqB;AACrB,SAAO,MAAM;AAAA,KACV,oBAAoB,YAAY,KAAK;AAAA,MACpC;AAAA,IACF;AAAA,EACF;AACF;AAOO,SAAS,6BACd,KACA,MACA,KACuB;AACvB,0BAAwB,KAAK,MAAM,IAAI,IAAI;AAE3C,QAAM,YAAY,qBAAqB,KAAK,IAAI;AAChD,QAAM,WAAW,cAAc,GAAG;AAElC,QAAM,EAAE,MAAM,cAAc,kBAAkB,IAAI;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,MAAM,IAAI,cAAc,IAAI,kBAAkB;AACpD,QAAM,WAAW;AAAA,IACf;AAAA,MACE,MAAM;AAAA,MACN,QACE,WAAW,aAAa,aAAa,KACrC,UAAU,MAAM,sBAAsB;AAAA,MACxC,OAAO,WAAW,aAAa,YAAY,KAAK,UAAU;AAAA,MAC1D,SACE,WAAW,aAAa,cAAc,KACtC,UAAU,MAAM,sBAAsB,WACtC;AAAA,MACF,IAAI,WAAW,aAAa,IAAI;AAAA,MAChC,MAAM,WAAW,aAAa,WAAW;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AACA,QAAM,eAAe,oBAAoB,KAAK,cAAc,QAAQ;AAEpE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,QAAQ,aAAa,KAAK,SAAS;AACzC,QAAM,UAAU,eAAe,KAAK,WAAW,iBAAiB;AAEhE,SAAO;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/runtime/html/parse-remote-html.ts"],"sourcesContent":["import type { NextData } from '#internal/host/server/types';\nimport {\n  DEFAULT_COMPONENT_NAME,\n  RUNTIME_SCRIPT,\n} from '#internal/runtime/constants';\nimport {\n  buildMetadata,\n  type RemoteComponentMetadata,\n} from '#internal/runtime/metadata';\nimport {\n  multipleRemoteComponentsError,\n  RemoteComponentsError,\n} from '#internal/utils/error';\nimport {\n  DATA_BUNDLE,\n  DATA_REMOTE_COMPONENTS_SHARED,\n  DATA_ROUTE,\n  DATA_RUNTIME,\n  DATA_SRC,\n  DATA_TYPE,\n  ID_SUFFIX_RSC,\n  ID_SUFFIX_SHARED,\n  ID_SUFFIX_SSR,\n  NEXT_CONTAINER_ID,\n  NEXT_DATA_ID,\n  REMOTE_NEXT_DATA_ID,\n  TAG_REMOTE_COMPONENT,\n} from './html-spec';\n\nexport interface ParsedRemoteComponent {\n  /** The DOM element representing the remote component content. */\n  component: Element;\n  /** Resolved name of the remote component (with _ssr suffix stripped). */\n  name: string;\n  /** Whether the component is a <remote-component> custom element. */\n  isRemoteComponent: boolean;\n  /** Component metadata: bundle, route, runtime. */\n  metadata: RemoteComponentMetadata;\n  /** Parsed __NEXT_DATA__ or __REMOTE_NEXT_DATA__, or null. */\n  nextData: NextData | null;\n  /** The RSC flight data script element, or null. */\n  rsc: Element | null;\n  /** Shared module map extracted from the component's shared data script. */\n  remoteShared: Record<string, string>;\n  /** Link elements extracted from the document (outside the component). */\n  links: HTMLLinkElement[];\n  /** Script elements extracted from the component or document. */\n  scripts: HTMLScriptElement[];\n}\n\n/**\n * Validates that the document does not contain multiple unnamed remote components.\n * When multiple components exist, the consumer must specify a name to select one.\n */\nexport function validateSingleComponent(\n  doc: Document,\n  name: string,\n  url: string,\n): void {\n  if (\n    (doc.querySelectorAll(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`).length > 1 &&\n      !doc.querySelector(\n        `div[${DATA_BUNDLE}][${DATA_ROUTE}][id^=\"${name}\"]`,\n      )) ||\n    (doc.querySelectorAll(`${TAG_REMOTE_COMPONENT}:not([src])`).length > 1 &&\n      !doc.querySelector(`${TAG_REMOTE_COMPONENT}[name=\"${name}\"]`))\n  ) {\n    throw multipleRemoteComponentsError(url);\n  }\n}\n\n/**\n * Finds the remote component element in the parsed HTML document using the\n * standard querySelector chain. Returns null if no component is found.\n */\nexport function findComponentElement(\n  doc: Document,\n  name: string,\n): Element | null {\n  return (\n    doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}][id^=\"${name}\"]`) ??\n    doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`) ??\n    doc.querySelector(`div#${NEXT_CONTAINER_ID}`) ??\n    doc.querySelector(`${TAG_REMOTE_COMPONENT}[name=\"${name}\"]:not([src])`) ??\n    doc.querySelector(`${TAG_REMOTE_COMPONENT}:not([src])`)\n  );\n}\n\n/**\n * Parses the __NEXT_DATA__ or __REMOTE_NEXT_DATA__ script element from the document.\n */\nexport function parseNextData(doc: Document): NextData | null {\n  return JSON.parse(\n    (\n      doc.querySelector(`#${NEXT_DATA_ID}`) ??\n      doc.querySelector(`#${REMOTE_NEXT_DATA_ID}`)\n    )?.textContent ?? 'null',\n  ) as NextData | null;\n}\n\n/**\n * Resolves the component name from the element's id attribute, the name attribute\n * (for <remote-component> elements), nextData, or a fallback value.\n * Strips the _ssr suffix from the id if present.\n */\nexport function resolveComponentName(\n  component: Element | null,\n  nextData: NextData | null,\n  fallbackName: string,\n): { name: string; isRemoteComponent: boolean } {\n  const isRemoteComponent =\n    component?.tagName.toLowerCase() === TAG_REMOTE_COMPONENT;\n\n  const name =\n    component\n      ?.getAttribute('id')\n      ?.replace(new RegExp(`${ID_SUFFIX_SSR}$`), '') ||\n    (isRemoteComponent && component?.getAttribute('name')) ||\n    (nextData ? '__next' : fallbackName);\n\n  return { name, isRemoteComponent };\n}\n\n/**\n * Extracts the shared module map from the document and removes the element.\n * Falls back to nextData's shared modules if available.\n */\nexport function extractRemoteShared(\n  doc: Document,\n  name: string,\n  nextData: NextData | null,\n): Record<string, string> {\n  const remoteSharedEl = doc.querySelector(\n    `#${name}${ID_SUFFIX_SHARED}[${DATA_REMOTE_COMPONENTS_SHARED}]`,\n  );\n  const remoteShared =\n    nextData?.props.__REMOTE_COMPONENT__?.shared ??\n    ((JSON.parse(remoteSharedEl?.textContent ?? '{}') ?? {}) as Record<\n      string,\n      string\n    >);\n  remoteSharedEl?.remove();\n  return remoteShared;\n}\n\n/**\n * Validates that a remote component was found in the document and that it has\n * RSC data, Next.js data, or is a <remote-component> element.\n * Acts as a type assertion - narrows component to non-null on success.\n */\nexport function validateComponentFound(\n  component: Element | null,\n  rsc: Element | null,\n  nextData: NextData | null,\n  isRemoteComponent: boolean,\n  url: string,\n  name: string,\n): asserts component is Element {\n  if (!component || !(rsc || nextData || isRemoteComponent)) {\n    throw new RemoteComponentsError(\n      `Remote Component not found on ${url}.${\n        name !== DEFAULT_COMPONENT_NAME\n          ? ` The name for the <RemoteComponent> is \"${name}\". Check <RemoteComponent> usage.`\n          : ''\n      } Did you forget to wrap the content in <RemoteComponent>?`,\n    );\n  }\n}\n\n/**\n * Extracts link elements from the document that are not inside the component.\n */\nexport function extractLinks(\n  doc: Document,\n  component: Element,\n): HTMLLinkElement[] {\n  return Array.from(doc.querySelectorAll<HTMLLinkElement>('link[href]')).filter(\n    (link) => !component.contains(link),\n  );\n}\n\n/**\n * Extracts script elements from the component or document, depending on whether\n * the component is a <remote-component> custom element.\n */\nexport function extractScripts(\n  doc: Document,\n  component: Element,\n  isRemoteComponent: boolean,\n): HTMLScriptElement[] {\n  return Array.from(\n    (isRemoteComponent ? component : doc).querySelectorAll<HTMLScriptElement>(\n      `script[src],script[${DATA_SRC}]`,\n    ),\n  );\n}\n\n/**\n * Parses a remote component HTML document and extracts all data needed for\n * loading and hydrating the component. This is the main orchestrator that\n * calls the individual extraction functions.\n */\nexport function parseRemoteComponentDocument(\n  doc: Document,\n  name: string,\n  url: URL,\n): ParsedRemoteComponent {\n  validateSingleComponent(doc, name, url.href);\n\n  const component = findComponentElement(doc, name);\n  const nextData = parseNextData(doc);\n\n  const { name: resolvedName, isRemoteComponent } = resolveComponentName(\n    component,\n    nextData,\n    name,\n  );\n\n  const rsc = doc.querySelector(`#${resolvedName}${ID_SUFFIX_RSC}`);\n  const metadata = buildMetadata(\n    {\n      name: resolvedName,\n      bundle:\n        component?.getAttribute(DATA_BUNDLE) ||\n        nextData?.props.__REMOTE_COMPONENT__?.bundle,\n      route: component?.getAttribute(DATA_ROUTE) ?? nextData?.page,\n      runtime:\n        component?.getAttribute(DATA_RUNTIME) ??\n        nextData?.props.__REMOTE_COMPONENT__?.runtime ??\n        RUNTIME_SCRIPT,\n      id: component?.getAttribute('id'),\n      type: component?.getAttribute(DATA_TYPE),\n    },\n    url,\n  );\n  const remoteShared = extractRemoteShared(doc, resolvedName, nextData);\n\n  validateComponentFound(\n    component,\n    rsc,\n    nextData,\n    isRemoteComponent,\n    url.href,\n    resolvedName,\n  );\n\n  const links = extractLinks(doc, component);\n  const scripts = extractScripts(doc, component, isRemoteComponent);\n\n  return {\n    component,\n    name: resolvedName,\n    isRemoteComponent,\n    metadata,\n    nextData,\n    rsc,\n    remoteShared,\n    links,\n    scripts,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/runtime/html/rewrite-srcset.cjs

@@ -0,0 +1,38 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var rewrite_srcset_exports = {};
+__export(rewrite_srcset_exports, {
+  rewriteSrcset: () => rewriteSrcset
+});
+module.exports = __toCommonJS(rewrite_srcset_exports);
+function rewriteSrcset(srcset, base, resolve) {
+  return srcset.split(",").map((entry) => {
+    const [url, descriptor] = entry.trim().split(/\s+/);
+    if (!url)
+      return entry;
+    const absoluteUrl = new URL(url, base).href;
+    const resolvedUrl = resolve ? resolve(absoluteUrl) : absoluteUrl;
+    return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
+  }).join(", ");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  rewriteSrcset
+});
+//# sourceMappingURL=rewrite-srcset.cjs.map

package/dist/internal/runtime/html/rewrite-srcset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/html/rewrite-srcset.ts"],"sourcesContent":["/**\n * Rewrites relative URLs in an HTML `srcset` or `imagesrcset` attribute value\n * to absolute URLs. Works identically in server (parse5) and browser (DOM) contexts.\n *\n * @param srcset  - The raw srcset attribute value (comma-separated entries).\n * @param base    - Base URL or origin to resolve relative URLs against.\n * @param resolve - Optional callback applied to each absolute URL (e.g. to proxy through a CDN).\n * @returns The rewritten srcset string with absolute (and optionally resolved) URLs.\n */\nexport function rewriteSrcset(\n  srcset: string,\n  base: URL | string,\n  resolve?: (absoluteUrl: string) => string,\n): string {\n  return srcset\n    .split(',')\n    .map((entry) => {\n      const [url, descriptor] = entry.trim().split(/\\s+/);\n      if (!url) return entry;\n\n      const absoluteUrl = new URL(url, base).href;\n      const resolvedUrl = resolve ? resolve(absoluteUrl) : absoluteUrl;\n      return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;\n    })\n    .join(', ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASO,SAAS,cACd,QACA,MACA,SACQ;AACR,SAAO,OACJ,MAAM,GAAG,EACT,IAAI,CAAC,UAAU;AACd,UAAM,CAAC,KAAK,UAAU,IAAI,MAAM,KAAK,EAAE,MAAM,KAAK;AAClD,QAAI,CAAC;AAAK,aAAO;AAEjB,UAAM,cAAc,IAAI,IAAI,KAAK,IAAI,EAAE;AACvC,UAAM,cAAc,UAAU,QAAQ,WAAW,IAAI;AACrD,WAAO,aAAa,GAAG,eAAe,eAAe;AAAA,EACvD,CAAC,EACA,KAAK,IAAI;AACd;","names":[]}

package/dist/internal/runtime/html/rewrite-srcset.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Rewrites relative URLs in an HTML `srcset` or `imagesrcset` attribute value
+ * to absolute URLs. Works identically in server (parse5) and browser (DOM) contexts.
+ *
+ * @param srcset  - The raw srcset attribute value (comma-separated entries).
+ * @param base    - Base URL or origin to resolve relative URLs against.
+ * @param resolve - Optional callback applied to each absolute URL (e.g. to proxy through a CDN).
+ * @returns The rewritten srcset string with absolute (and optionally resolved) URLs.
+ */
+declare function rewriteSrcset(srcset: string, base: URL | string, resolve?: (absoluteUrl: string) => string): string;
+
+export { rewriteSrcset };

package/dist/internal/runtime/html/rewrite-srcset.js

@@ -0,0 +1,14 @@
+function rewriteSrcset(srcset, base, resolve) {
+  return srcset.split(",").map((entry) => {
+    const [url, descriptor] = entry.trim().split(/\s+/);
+    if (!url)
+      return entry;
+    const absoluteUrl = new URL(url, base).href;
+    const resolvedUrl = resolve ? resolve(absoluteUrl) : absoluteUrl;
+    return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
+  }).join(", ");
+}
+export {
+  rewriteSrcset
+};
+//# sourceMappingURL=rewrite-srcset.js.map

package/dist/internal/runtime/html/rewrite-srcset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtime/html/rewrite-srcset.ts"],"sourcesContent":["/**\n * Rewrites relative URLs in an HTML `srcset` or `imagesrcset` attribute value\n * to absolute URLs. Works identically in server (parse5) and browser (DOM) contexts.\n *\n * @param srcset  - The raw srcset attribute value (comma-separated entries).\n * @param base    - Base URL or origin to resolve relative URLs against.\n * @param resolve - Optional callback applied to each absolute URL (e.g. to proxy through a CDN).\n * @returns The rewritten srcset string with absolute (and optionally resolved) URLs.\n */\nexport function rewriteSrcset(\n  srcset: string,\n  base: URL | string,\n  resolve?: (absoluteUrl: string) => string,\n): string {\n  return srcset\n    .split(',')\n    .map((entry) => {\n      const [url, descriptor] = entry.trim().split(/\\s+/);\n      if (!url) return entry;\n\n      const absoluteUrl = new URL(url, base).href;\n      const resolvedUrl = resolve ? resolve(absoluteUrl) : absoluteUrl;\n      return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;\n    })\n    .join(', ');\n}\n"],"mappings":"AASO,SAAS,cACd,QACA,MACA,SACQ;AACR,SAAO,OACJ,MAAM,GAAG,EACT,IAAI,CAAC,UAAU;AACd,UAAM,CAAC,KAAK,UAAU,IAAI,MAAM,KAAK,EAAE,MAAM,KAAK;AAClD,QAAI,CAAC;AAAK,aAAO;AAEjB,UAAM,cAAc,IAAI,IAAI,KAAK,IAAI,EAAE;AACvC,UAAM,cAAc,UAAU,QAAQ,WAAW,IAAI;AACrD,WAAO,aAAa,GAAG,eAAe,eAAe;AAAA,EACvD,CAAC,EACA,KAAK,IAAI;AACd;","names":[]}

package/dist/internal/runtime/loaders/component-loader.cjs

@@ -38,8 +38,11 @@ var ReactDOM = __toESM(require("react-dom"), 1);
 var ReactDOMClient = __toESM(require("react-dom/client"), 1);
 var import_apply_shared_modules = require("#internal/config/webpack/apply-shared-modules");
 var import_next_client_pages_loader = require("#internal/config/webpack/next-client-pages-loader");
+var import_shared_module_resolver = require("#internal/host/shared/shared-module-resolver");
 var import_rsc = require("#internal/runtime/rsc");
-var import_webpack_runtime = require("#internal/runtime/turbopack/webpack-runtime");
+var import_rsc_imports = require("#internal/runtime/rsc-imports");
+var import_remote_scope_setup = require("#internal/runtime/turbopack/remote-scope-setup");
+var import_shared_modules = require("#internal/runtime/turbopack/shared-modules");
 var import_error = require("#internal/utils/error");
 var import_logger = require("#internal/utils/logger");
 var import_script_loader = require("./script-loader");
@@ -80,44 +83,33 @@ async function loadRemoteComponent({
       "ComponentLoader",
       `Remote shared modules requested: ${JSON.stringify(remoteShared)}`
     );
-    await (0, import_webpack_runtime.setupWebpackRuntime)(
+    const scope = await (0, import_remote_scope_setup.setupRemoteScope)(
       runtime,
       scripts,
       url,
       bundle,
-      hostShared,
-      remoteShared,
       resolveClientUrl
     );
+    if (runtime === "turbopack") {
+      await (0, import_shared_modules.initializeSharedModules)(
+        scope,
+        (0, import_shared_module_resolver.buildCoreShared)(hostShared),
+        remoteShared
+      );
+    }
     if (bundle) {
-      const resolve = {
-        "/react/index.js": React,
-        "/react/jsx-dev-runtime.js": JSXDevRuntime,
-        "/react/jsx-runtime.js": JSXRuntime,
-        "/react-dom/index.js": ReactDOM,
-        "/react-dom/client.js": ReactDOMClient,
-        ...Object.entries(remoteShared).reduce(
-          (acc, [key, value]) => {
-            if (typeof hostShared[value] !== "undefined") {
-              acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
-            } else {
-              (0, import_logger.logDebug)(
-                "ComponentLoader",
-                `Remote requests "${value}" but host doesn't provide it`
-              );
-            }
-            return acc;
-          },
-          {}
-        )
-      };
-      await Promise.all(
-        Object.entries(resolve).map(async ([key, value]) => {
-          if (typeof value === "function") {
-            resolve[key] = await value(bundle);
-          }
-          return Promise.resolve(value);
-        })
+      const resolve = await (0, import_shared_module_resolver.buildWebpackResolve)(
+        hostShared,
+        remoteShared,
+        bundle,
+        {
+          "/react/index.js": React,
+          "/react/jsx-dev-runtime.js": JSXDevRuntime,
+          "/react/jsx-runtime.js": JSXRuntime,
+          "/react-dom/index.js": ReactDOM,
+          "/react-dom/client.js": ReactDOMClient
+        },
+        "ComponentLoader"
       );
       (0, import_apply_shared_modules.applySharedModules)(bundle, resolve);
     } else {
@@ -145,19 +137,8 @@ async function loadRemoteComponent({
     };
   }
 }
-async function importCreateFromReadableStream() {
-  try {
-    const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
-    return createFromReadableStream;
-  } catch {
-    const {
-      default: { createFromReadableStream }
-    } = await import("react-server-dom-webpack/client.browser");
-    return createFromReadableStream;
-  }
-}
 async function loadRSCComponent(rscName, data) {
-  const createFromReadableStream = await importCreateFromReadableStream();
+  const { createFromReadableStream } = await (0, import_rsc_imports.importRSCClientBrowser)();
   if (typeof createFromReadableStream !== "function") {
     throw new import_error.RemoteComponentsError(
       'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'