remote-components 0.3.4 → 0.3.6

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

@@ -0,0 +1,222 @@
+"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 pipeline_exports = {};
+__export(pipeline_exports, {
+  loadPrepared: () => loadPrepared,
+  preparePipeline: () => preparePipeline,
+  runPipeline: () => runPipeline,
+  runPipelineFromParsed: () => runPipelineFromParsed
+});
+module.exports = __toCommonJS(pipeline_exports);
+var import_shared_module_resolver = require("#internal/host/shared/shared-module-resolver");
+var import_apply_origin = require("#internal/runtime/html/apply-origin");
+var import_parse_remote_html = require("#internal/runtime/html/parse-remote-html");
+var import_component_loader = require("#internal/runtime/loaders/component-loader");
+var import_static_loader = require("#internal/runtime/loaders/static-loader");
+var import_patterns = require("#internal/runtime/patterns");
+var import_utils = require("#internal/utils");
+var import_error = require("#internal/utils/error");
+function preparePipeline(input) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(input.html, "text/html");
+  const parsed = (0, import_parse_remote_html.parseRemoteComponentDocument)(doc, input.name, input.url);
+  const remoteShared = input.remoteShared ?? parsed.remoteShared;
+  if ("__remote_components_missing_shared__" in remoteShared) {
+    throw new import_error.RemoteComponentsError(
+      remoteShared.__remote_components_missing_shared__
+    );
+  }
+  (0, import_apply_origin.applyOriginToNodes)(doc, input.url, input.resolveClientUrl);
+  const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);
+  return { doc, parsed, scriptDescriptors };
+}
+async function loadPrepared(input) {
+  const { prepared, url, signal, resolveClientUrl, container, rscName } = input;
+  const { doc, parsed, scriptDescriptors } = prepared;
+  if (signal.aborted) {
+    return { status: "aborted" };
+  }
+  const userShared = await input.shared;
+  if (signal.aborted) {
+    return { status: "aborted" };
+  }
+  if (parsed.isRemoteComponent) {
+    return loadStaticPath({
+      parsed,
+      doc,
+      url,
+      resolveClientUrl
+    });
+  }
+  return loadDynamicPath({
+    parsed,
+    doc,
+    url,
+    scriptDescriptors,
+    shared: userShared,
+    resolveClientUrl,
+    container,
+    rscName
+  });
+}
+async function runPipeline(input) {
+  try {
+    const userShared = await input.shared;
+    if (input.signal.aborted) {
+      return { status: "aborted" };
+    }
+    const prepared = preparePipeline({
+      html: input.html,
+      name: input.name,
+      url: input.url,
+      shared: userShared,
+      resolveClientUrl: input.resolveClientUrl
+    });
+    return await loadPrepared({
+      prepared,
+      url: input.url,
+      signal: input.signal,
+      shared: userShared,
+      resolveClientUrl: input.resolveClientUrl,
+      container: input.container
+    });
+  } catch (error) {
+    return {
+      status: "error",
+      error: error instanceof Error ? error : new import_error.RemoteComponentsError(String(error))
+    };
+  }
+}
+async function runPipelineFromParsed(input) {
+  try {
+    if (input.signal.aborted) {
+      return { status: "aborted" };
+    }
+    const remoteShared = input.remoteShared ?? input.payload.remoteShared ?? {};
+    if ("__remote_components_missing_shared__" in remoteShared) {
+      throw new import_error.RemoteComponentsError(
+        remoteShared.__remote_components_missing_shared__
+      );
+    }
+    const result = await (0, import_component_loader.loadRemoteComponent)({
+      url: input.url,
+      name: input.name,
+      rscName: input.rscName,
+      bundle: input.payload.bundle,
+      route: input.payload.route,
+      runtime: input.payload.runtime,
+      data: input.payload.data,
+      nextData: input.payload.nextData,
+      scripts: input.payload.scripts,
+      shared: input.shared,
+      remoteShared,
+      container: input.container,
+      resolveClientUrl: input.resolveClientUrl
+    });
+    if (input.signal.aborted) {
+      return { status: "aborted" };
+    }
+    if (result.error) {
+      return { status: "error", error: result.error };
+    }
+    return { status: "loaded", component: result.component };
+  } catch (error) {
+    return {
+      status: "error",
+      error: error instanceof Error ? error : new import_error.RemoteComponentsError(String(error))
+    };
+  }
+}
+function buildScriptDescriptors(scripts, url) {
+  return scripts.map((script) => {
+    const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
+    const { prefix, id: path } = import_patterns.REMOTE_COMPONENT_REGEX.exec(scriptSrc)?.groups ?? {
+      prefix: void 0,
+      id: scriptSrc
+    };
+    return {
+      src: new URL((0, import_patterns.collapseDoubleSlashes)(`${prefix ?? ""}${path}`), url).href
+    };
+  });
+}
+async function loadStaticPath(input) {
+  const { parsed, doc, url, resolveClientUrl } = input;
+  const scripts = Array.from(
+    parsed.component.querySelectorAll("script")
+  );
+  const { mount, unmount } = await (0, import_static_loader.loadStaticRemoteComponent)(
+    scripts,
+    url,
+    resolveClientUrl
+  );
+  return {
+    status: "static",
+    mount,
+    unmount,
+    metadata: parsed.metadata,
+    parsed,
+    doc
+  };
+}
+async function loadDynamicPath(input) {
+  const {
+    parsed,
+    doc,
+    url,
+    scriptDescriptors,
+    shared,
+    resolveClientUrl,
+    container
+  } = input;
+  const rscName = input.rscName ?? (parsed.rsc ? `__remote_component_rsc_${(0, import_utils.escapeString)(url.href)}_${(0, import_utils.escapeString)(parsed.name)}` : void 0);
+  const rscData = parsed.rsc ? (parsed.rsc.textContent || "").split("\n").filter(Boolean) : [];
+  const result = await (0, import_component_loader.loadRemoteComponent)({
+    url,
+    name: parsed.name,
+    rscName,
+    bundle: parsed.metadata.bundle,
+    route: parsed.metadata.route,
+    runtime: parsed.metadata.runtime,
+    data: rscData,
+    nextData: parsed.nextData,
+    scripts: scriptDescriptors,
+    shared: (0, import_shared_module_resolver.buildHostShared)(shared, resolveClientUrl),
+    remoteShared: parsed.remoteShared,
+    container,
+    resolveClientUrl
+  });
+  if (result.error) {
+    return { status: "error", error: result.error };
+  }
+  return {
+    status: "loaded",
+    component: result.component,
+    metadata: parsed.metadata,
+    parsed,
+    doc
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  loadPrepared,
+  preparePipeline,
+  runPipeline,
+  runPipelineFromParsed
+});
+//# sourceMappingURL=pipeline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/pipeline.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeLoaderPayload } from '#internal/host/shared/server-handoff';\nimport { buildHostShared } from '#internal/host/shared/shared-module-resolver';\nimport { applyOriginToNodes } from '#internal/runtime/html/apply-origin';\nimport {\n  type ParsedRemoteComponent,\n  parseRemoteComponentDocument,\n} from '#internal/runtime/html/parse-remote-html';\nimport { loadRemoteComponent } from '#internal/runtime/loaders/component-loader';\nimport { loadStaticRemoteComponent } from '#internal/runtime/loaders/static-loader';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\nimport {\n  collapseDoubleSlashes,\n  REMOTE_COMPONENT_REGEX,\n} from '#internal/runtime/patterns';\nimport type { MountOrUnmountFunction } from '#internal/runtime/types';\nimport { escapeString } from '#internal/utils';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype SharedModuleMap = Record<string, (bundle?: string) => Promise<unknown>>;\n\n/**\n * Input for {@link runPipeline} — the full post-fetch pipeline that starts\n * from raw HTML.\n */\nexport interface PipelineInput {\n  /** Resolved URL of the remote component. */\n  url: URL;\n  /** Raw HTML string returned by the remote. */\n  html: string;\n  /** Component name hint (may be refined during parsing). */\n  name: string;\n  /** Abort signal — the pipeline checks this between async steps. */\n  signal: AbortSignal;\n  /** Host-provided shared module factories (resolved or promise). */\n  shared: Promise<SharedModuleMap> | SharedModuleMap;\n  /** URL rewriter for client-side asset URLs. */\n  resolveClientUrl?: InternalResolveClientUrl;\n  /** Shadow root or element to mount into (for script-based components). */\n  container?: ShadowRoot | HTMLElement | null;\n}\n\n/**\n * Input for {@link runPipelineFromParsed} — the pipeline entry point for\n * hosts that receive pre-parsed SSR data (e.g. the App Router client).\n */\nexport interface ParsedPipelineInput {\n  /** Resolved URL of the remote component. */\n  url: URL;\n  /** Component name. */\n  name: string;\n  /** Abort signal. */\n  signal: AbortSignal;\n  /** Pre-resolved loader payload from the server component. */\n  payload: ConsumeLoaderPayload;\n  /** Host-provided shared module factories (resolved or promise). */\n  shared: Promise<SharedModuleMap> | SharedModuleMap;\n  /** Remote-requested shared modules. */\n  remoteShared?: Record<string, string>;\n  /** URL rewriter for client-side asset URLs. */\n  resolveClientUrl?: InternalResolveClientUrl;\n  /** Shadow root or element to mount into. */\n  container?: ShadowRoot | HTMLElement | null;\n  /** Optional RSC name override (used by App Router for scoped RSC data). */\n  rscName?: string;\n}\n\n/**\n * Successful dynamic component load — the component is a React element tree\n * ready to render.\n */\nexport interface PipelineLoaded {\n  status: 'loaded';\n  component: React.ReactNode;\n  metadata: RemoteComponentMetadata;\n  parsed: ParsedRemoteComponent;\n  doc: Document;\n}\n\n/**\n * Successful static component load — mount/unmount functions are returned\n * for the host to call.\n */\nexport interface PipelineStatic {\n  status: 'static';\n  mount: Set<MountOrUnmountFunction>;\n  unmount: Set<MountOrUnmountFunction>;\n  metadata: RemoteComponentMetadata;\n  parsed: ParsedRemoteComponent;\n  doc: Document;\n}\n\n/** The load was aborted before it could complete. */\nexport interface PipelineAborted {\n  status: 'aborted';\n}\n\n/** The load failed with an error. */\nexport interface PipelineError {\n  status: 'error';\n  error: Error;\n}\n\nexport type PipelineResult =\n  | PipelineLoaded\n  | PipelineStatic\n  | PipelineAborted\n  | PipelineError;\n\n/**\n * Intermediate result from {@link preparePipeline}. Hosts that need to run\n * framework-specific logic between parse and load (e.g. inline script\n * execution in the React host) use this to split the pipeline into two\n * phases.\n */\nexport interface PreparedPipeline {\n  doc: Document;\n  parsed: ParsedRemoteComponent;\n  /** Script descriptors ready to pass to `loadRemoteComponent`. */\n  scriptDescriptors: ScriptDescriptor[];\n}\n\n// ---------------------------------------------------------------------------\n// Pipeline phases\n// ---------------------------------------------------------------------------\n\n/**\n * Phase 1: Parse HTML, validate shared modules, and normalize URLs.\n *\n * This is the synchronous/cheap portion of the pipeline. Hosts that need to\n * inject logic between parse and load (e.g. executing inline scripts) call\n * this directly, then call {@link loadPrepared} when ready.\n */\nexport function preparePipeline(input: {\n  html: string;\n  name: string;\n  url: URL;\n  shared: SharedModuleMap;\n  remoteShared?: Record<string, string>;\n  resolveClientUrl?: InternalResolveClientUrl;\n}): PreparedPipeline {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(input.html, 'text/html');\n\n  const parsed = parseRemoteComponentDocument(doc, input.name, input.url);\n\n  // Validate shared modules — surface errors early before any script loading.\n  // Only check *remote* shared modules here. The host-side marker\n  // (`__remote_components_missing_shared__` in `input.shared`) is a callable\n  // error signal that the host may intentionally leave in place when\n  // `withRemoteComponentsConfig` is not used — blocking on it would break\n  // framework-agnostic hosts that don't configure shared modules.\n  const remoteShared = input.remoteShared ?? parsed.remoteShared;\n  if ('__remote_components_missing_shared__' in remoteShared) {\n    throw new RemoteComponentsError(\n      remoteShared.__remote_components_missing_shared__,\n    );\n  }\n\n  applyOriginToNodes(doc, input.url, input.resolveClientUrl);\n\n  const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);\n\n  return { doc, parsed, scriptDescriptors };\n}\n\n/**\n * Phase 2: Load the component from a prepared pipeline result.\n *\n * For dynamic components, delegates to `loadRemoteComponent`. For static\n * components (`isRemoteComponent`), delegates to `loadStaticRemoteComponent`.\n */\nexport async function loadPrepared(input: {\n  prepared: PreparedPipeline;\n  url: URL;\n  signal: AbortSignal;\n  shared: Promise<SharedModuleMap> | SharedModuleMap;\n  resolveClientUrl?: InternalResolveClientUrl;\n  container?: ShadowRoot | HTMLElement | null;\n  rscName?: string;\n}): Promise<PipelineResult> {\n  const { prepared, url, signal, resolveClientUrl, container, rscName } = input;\n  const { doc, parsed, scriptDescriptors } = prepared;\n\n  if (signal.aborted) {\n    return { status: 'aborted' };\n  }\n\n  const userShared = await input.shared;\n  if (signal.aborted) {\n    return { status: 'aborted' };\n  }\n\n  if (parsed.isRemoteComponent) {\n    return loadStaticPath({\n      parsed,\n      doc,\n      url,\n      resolveClientUrl,\n    });\n  }\n\n  return loadDynamicPath({\n    parsed,\n    doc,\n    url,\n    scriptDescriptors,\n    shared: userShared,\n    resolveClientUrl,\n    container,\n    rscName,\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Full pipeline entry points\n// ---------------------------------------------------------------------------\n\n/**\n * Full post-fetch pipeline: parse → validate → normalize → load.\n *\n * Use this when starting from a raw HTML string (React host, HTML host).\n */\nexport async function runPipeline(\n  input: PipelineInput,\n): Promise<PipelineResult> {\n  try {\n    const userShared = await input.shared;\n    if (input.signal.aborted) {\n      return { status: 'aborted' };\n    }\n\n    const prepared = preparePipeline({\n      html: input.html,\n      name: input.name,\n      url: input.url,\n      shared: userShared,\n      resolveClientUrl: input.resolveClientUrl,\n    });\n\n    return await loadPrepared({\n      prepared,\n      url: input.url,\n      signal: input.signal,\n      shared: userShared,\n      resolveClientUrl: input.resolveClientUrl,\n      container: input.container,\n    });\n  } catch (error) {\n    return {\n      status: 'error',\n      error:\n        error instanceof Error\n          ? error\n          : new RemoteComponentsError(String(error)),\n    };\n  }\n}\n\n/**\n * Pipeline entry point for pre-parsed SSR data (App Router client).\n *\n * Skips HTML parsing and goes straight to `loadRemoteComponent` with the\n * pre-resolved payload from the server component.\n */\nexport async function runPipelineFromParsed(\n  input: ParsedPipelineInput,\n): Promise<\n  | { status: 'loaded'; component: React.ReactNode }\n  | PipelineAborted\n  | PipelineError\n> {\n  try {\n    if (input.signal.aborted) {\n      return { status: 'aborted' };\n    }\n\n    const remoteShared = input.remoteShared ?? input.payload.remoteShared ?? {};\n\n    if ('__remote_components_missing_shared__' in remoteShared) {\n      throw new RemoteComponentsError(\n        remoteShared.__remote_components_missing_shared__,\n      );\n    }\n\n    const result = await loadRemoteComponent({\n      url: input.url,\n      name: input.name,\n      rscName: input.rscName,\n      bundle: input.payload.bundle,\n      route: input.payload.route,\n      runtime: input.payload.runtime,\n      data: input.payload.data,\n      nextData: input.payload.nextData,\n      scripts: input.payload.scripts,\n      shared: input.shared,\n      remoteShared,\n      container: input.container,\n      resolveClientUrl: input.resolveClientUrl,\n    });\n\n    if (input.signal.aborted) {\n      return { status: 'aborted' };\n    }\n\n    if (result.error) {\n      return { status: 'error', error: result.error };\n    }\n    return { status: 'loaded', component: result.component };\n  } catch (error) {\n    return {\n      status: 'error',\n      error:\n        error instanceof Error\n          ? error\n          : new RemoteComponentsError(String(error)),\n    };\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Converts parsed `<script>` elements into the `ScriptDescriptor[]` format\n * expected by `loadRemoteComponent`. Handles the `[bundle] id` URL format\n * and collapses double slashes.\n */\nfunction buildScriptDescriptors(\n  scripts: HTMLScriptElement[],\n  url: URL,\n): ScriptDescriptor[] {\n  return scripts.map((script) => {\n    const scriptSrc =\n      script.getAttribute('data-src') ||\n      script.getAttribute('src') ||\n      script.src;\n    const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(scriptSrc)\n      ?.groups ?? {\n      prefix: undefined,\n      id: scriptSrc,\n    };\n    return {\n      src: new URL(collapseDoubleSlashes(`${prefix ?? ''}${path}`), url).href,\n    };\n  });\n}\n\nasync function loadStaticPath(input: {\n  parsed: ParsedRemoteComponent;\n  doc: Document;\n  url: URL;\n  resolveClientUrl?: InternalResolveClientUrl;\n}): Promise<PipelineStatic> {\n  const { parsed, doc, url, resolveClientUrl } = input;\n  const scripts = Array.from(\n    parsed.component.querySelectorAll<HTMLScriptElement>('script'),\n  );\n  const { mount, unmount } = await loadStaticRemoteComponent(\n    scripts,\n    url,\n    resolveClientUrl,\n  );\n  return {\n    status: 'static',\n    mount,\n    unmount,\n    metadata: parsed.metadata,\n    parsed,\n    doc,\n  };\n}\n\nasync function loadDynamicPath(input: {\n  parsed: ParsedRemoteComponent;\n  doc: Document;\n  url: URL;\n  scriptDescriptors: ScriptDescriptor[];\n  shared: SharedModuleMap;\n  resolveClientUrl?: InternalResolveClientUrl;\n  container?: ShadowRoot | HTMLElement | null;\n  rscName?: string;\n}): Promise<PipelineLoaded | PipelineError> {\n  const {\n    parsed,\n    doc,\n    url,\n    scriptDescriptors,\n    shared,\n    resolveClientUrl,\n    container,\n  } = input;\n\n  const rscName =\n    input.rscName ??\n    (parsed.rsc\n      ? `__remote_component_rsc_${escapeString(url.href)}_${escapeString(parsed.name)}`\n      : undefined);\n\n  const rscData = parsed.rsc\n    ? (parsed.rsc.textContent || '').split('\\n').filter(Boolean)\n    : [];\n\n  const result = await loadRemoteComponent({\n    url,\n    name: parsed.name,\n    rscName,\n    bundle: parsed.metadata.bundle,\n    route: parsed.metadata.route,\n    runtime: parsed.metadata.runtime,\n    data: rscData,\n    nextData: parsed.nextData,\n    scripts: scriptDescriptors,\n    shared: buildHostShared(shared, resolveClientUrl),\n    remoteShared: parsed.remoteShared,\n    container,\n    resolveClientUrl,\n  });\n\n  if (result.error) {\n    return { status: 'error', error: result.error };\n  }\n  return {\n    status: 'loaded',\n    component: result.component,\n    metadata: parsed.metadata,\n    parsed,\n    doc,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/internal/host/shared/pipeline.d.ts

@@ -0,0 +1,153 @@
+import { RemoteComponentMetadata } from '../../runtime/metadata.js';
+import { ScriptDescriptor } from './asset-descriptors.js';
+import { InternalResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
+import { a as ConsumeLoaderPayload } from '../../../server-handoff-ce13bebc.js';
+import { ParsedRemoteComponent } from '../../runtime/html/parse-remote-html.js';
+import { M as MountOrUnmountFunction } from '../../../types-59251814.js';
+import 'react';
+import './config.js';
+import './fetch-interceptors.js';
+import '../server/types.js';
+import '../nextjs/dom-flight.js';
+import 'parse5/dist/tree-adapters/default';
+import '../../runtime/turbopack/remote-scope.js';
+import '../../runtime/constants.js';
+
+type SharedModuleMap = Record<string, (bundle?: string) => Promise<unknown>>;
+/**
+ * Input for {@link runPipeline} — the full post-fetch pipeline that starts
+ * from raw HTML.
+ */
+interface PipelineInput {
+    /** Resolved URL of the remote component. */
+    url: URL;
+    /** Raw HTML string returned by the remote. */
+    html: string;
+    /** Component name hint (may be refined during parsing). */
+    name: string;
+    /** Abort signal — the pipeline checks this between async steps. */
+    signal: AbortSignal;
+    /** Host-provided shared module factories (resolved or promise). */
+    shared: Promise<SharedModuleMap> | SharedModuleMap;
+    /** URL rewriter for client-side asset URLs. */
+    resolveClientUrl?: InternalResolveClientUrl;
+    /** Shadow root or element to mount into (for script-based components). */
+    container?: ShadowRoot | HTMLElement | null;
+}
+/**
+ * Input for {@link runPipelineFromParsed} — the pipeline entry point for
+ * hosts that receive pre-parsed SSR data (e.g. the App Router client).
+ */
+interface ParsedPipelineInput {
+    /** Resolved URL of the remote component. */
+    url: URL;
+    /** Component name. */
+    name: string;
+    /** Abort signal. */
+    signal: AbortSignal;
+    /** Pre-resolved loader payload from the server component. */
+    payload: ConsumeLoaderPayload;
+    /** Host-provided shared module factories (resolved or promise). */
+    shared: Promise<SharedModuleMap> | SharedModuleMap;
+    /** Remote-requested shared modules. */
+    remoteShared?: Record<string, string>;
+    /** URL rewriter for client-side asset URLs. */
+    resolveClientUrl?: InternalResolveClientUrl;
+    /** Shadow root or element to mount into. */
+    container?: ShadowRoot | HTMLElement | null;
+    /** Optional RSC name override (used by App Router for scoped RSC data). */
+    rscName?: string;
+}
+/**
+ * Successful dynamic component load — the component is a React element tree
+ * ready to render.
+ */
+interface PipelineLoaded {
+    status: 'loaded';
+    component: React.ReactNode;
+    metadata: RemoteComponentMetadata;
+    parsed: ParsedRemoteComponent;
+    doc: Document;
+}
+/**
+ * Successful static component load — mount/unmount functions are returned
+ * for the host to call.
+ */
+interface PipelineStatic {
+    status: 'static';
+    mount: Set<MountOrUnmountFunction>;
+    unmount: Set<MountOrUnmountFunction>;
+    metadata: RemoteComponentMetadata;
+    parsed: ParsedRemoteComponent;
+    doc: Document;
+}
+/** The load was aborted before it could complete. */
+interface PipelineAborted {
+    status: 'aborted';
+}
+/** The load failed with an error. */
+interface PipelineError {
+    status: 'error';
+    error: Error;
+}
+type PipelineResult = PipelineLoaded | PipelineStatic | PipelineAborted | PipelineError;
+/**
+ * Intermediate result from {@link preparePipeline}. Hosts that need to run
+ * framework-specific logic between parse and load (e.g. inline script
+ * execution in the React host) use this to split the pipeline into two
+ * phases.
+ */
+interface PreparedPipeline {
+    doc: Document;
+    parsed: ParsedRemoteComponent;
+    /** Script descriptors ready to pass to `loadRemoteComponent`. */
+    scriptDescriptors: ScriptDescriptor[];
+}
+/**
+ * Phase 1: Parse HTML, validate shared modules, and normalize URLs.
+ *
+ * This is the synchronous/cheap portion of the pipeline. Hosts that need to
+ * inject logic between parse and load (e.g. executing inline scripts) call
+ * this directly, then call {@link loadPrepared} when ready.
+ */
+declare function preparePipeline(input: {
+    html: string;
+    name: string;
+    url: URL;
+    shared: SharedModuleMap;
+    remoteShared?: Record<string, string>;
+    resolveClientUrl?: InternalResolveClientUrl;
+}): PreparedPipeline;
+/**
+ * Phase 2: Load the component from a prepared pipeline result.
+ *
+ * For dynamic components, delegates to `loadRemoteComponent`. For static
+ * components (`isRemoteComponent`), delegates to `loadStaticRemoteComponent`.
+ */
+declare function loadPrepared(input: {
+    prepared: PreparedPipeline;
+    url: URL;
+    signal: AbortSignal;
+    shared: Promise<SharedModuleMap> | SharedModuleMap;
+    resolveClientUrl?: InternalResolveClientUrl;
+    container?: ShadowRoot | HTMLElement | null;
+    rscName?: string;
+}): Promise<PipelineResult>;
+/**
+ * Full post-fetch pipeline: parse → validate → normalize → load.
+ *
+ * Use this when starting from a raw HTML string (React host, HTML host).
+ */
+declare function runPipeline(input: PipelineInput): Promise<PipelineResult>;
+/**
+ * Pipeline entry point for pre-parsed SSR data (App Router client).
+ *
+ * Skips HTML parsing and goes straight to `loadRemoteComponent` with the
+ * pre-resolved payload from the server component.
+ */
+declare function runPipelineFromParsed(input: ParsedPipelineInput): Promise<{
+    status: 'loaded';
+    component: React.ReactNode;
+} | PipelineAborted | PipelineError>;
+
+export { ParsedPipelineInput, PipelineAborted, PipelineError, PipelineInput, PipelineLoaded, PipelineResult, PipelineStatic, PreparedPipeline, loadPrepared, preparePipeline, runPipeline, runPipelineFromParsed };

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

@@ -0,0 +1,200 @@
+import { buildHostShared } from "#internal/host/shared/shared-module-resolver";
+import { applyOriginToNodes } from "#internal/runtime/html/apply-origin";
+import {
+  parseRemoteComponentDocument
+} from "#internal/runtime/html/parse-remote-html";
+import { loadRemoteComponent } from "#internal/runtime/loaders/component-loader";
+import { loadStaticRemoteComponent } from "#internal/runtime/loaders/static-loader";
+import {
+  collapseDoubleSlashes,
+  REMOTE_COMPONENT_REGEX
+} from "#internal/runtime/patterns";
+import { escapeString } from "#internal/utils";
+import { RemoteComponentsError } from "#internal/utils/error";
+function preparePipeline(input) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(input.html, "text/html");
+  const parsed = parseRemoteComponentDocument(doc, input.name, input.url);
+  const remoteShared = input.remoteShared ?? parsed.remoteShared;
+  if ("__remote_components_missing_shared__" in remoteShared) {
+    throw new RemoteComponentsError(
+      remoteShared.__remote_components_missing_shared__
+    );
+  }
+  applyOriginToNodes(doc, input.url, input.resolveClientUrl);
+  const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);
+  return { doc, parsed, scriptDescriptors };
+}
+async function loadPrepared(input) {
+  const { prepared, url, signal, resolveClientUrl, container, rscName } = input;
+  const { doc, parsed, scriptDescriptors } = prepared;
+  if (signal.aborted) {
+    return { status: "aborted" };
+  }
+  const userShared = await input.shared;
+  if (signal.aborted) {
+    return { status: "aborted" };
+  }
+  if (parsed.isRemoteComponent) {
+    return loadStaticPath({
+      parsed,
+      doc,
+      url,
+      resolveClientUrl
+    });
+  }
+  return loadDynamicPath({
+    parsed,
+    doc,
+    url,
+    scriptDescriptors,
+    shared: userShared,
+    resolveClientUrl,
+    container,
+    rscName
+  });
+}
+async function runPipeline(input) {
+  try {
+    const userShared = await input.shared;
+    if (input.signal.aborted) {
+      return { status: "aborted" };
+    }
+    const prepared = preparePipeline({
+      html: input.html,
+      name: input.name,
+      url: input.url,
+      shared: userShared,
+      resolveClientUrl: input.resolveClientUrl
+    });
+    return await loadPrepared({
+      prepared,
+      url: input.url,
+      signal: input.signal,
+      shared: userShared,
+      resolveClientUrl: input.resolveClientUrl,
+      container: input.container
+    });
+  } catch (error) {
+    return {
+      status: "error",
+      error: error instanceof Error ? error : new RemoteComponentsError(String(error))
+    };
+  }
+}
+async function runPipelineFromParsed(input) {
+  try {
+    if (input.signal.aborted) {
+      return { status: "aborted" };
+    }
+    const remoteShared = input.remoteShared ?? input.payload.remoteShared ?? {};
+    if ("__remote_components_missing_shared__" in remoteShared) {
+      throw new RemoteComponentsError(
+        remoteShared.__remote_components_missing_shared__
+      );
+    }
+    const result = await loadRemoteComponent({
+      url: input.url,
+      name: input.name,
+      rscName: input.rscName,
+      bundle: input.payload.bundle,
+      route: input.payload.route,
+      runtime: input.payload.runtime,
+      data: input.payload.data,
+      nextData: input.payload.nextData,
+      scripts: input.payload.scripts,
+      shared: input.shared,
+      remoteShared,
+      container: input.container,
+      resolveClientUrl: input.resolveClientUrl
+    });
+    if (input.signal.aborted) {
+      return { status: "aborted" };
+    }
+    if (result.error) {
+      return { status: "error", error: result.error };
+    }
+    return { status: "loaded", component: result.component };
+  } catch (error) {
+    return {
+      status: "error",
+      error: error instanceof Error ? error : new RemoteComponentsError(String(error))
+    };
+  }
+}
+function buildScriptDescriptors(scripts, url) {
+  return scripts.map((script) => {
+    const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
+    const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(scriptSrc)?.groups ?? {
+      prefix: void 0,
+      id: scriptSrc
+    };
+    return {
+      src: new URL(collapseDoubleSlashes(`${prefix ?? ""}${path}`), url).href
+    };
+  });
+}
+async function loadStaticPath(input) {
+  const { parsed, doc, url, resolveClientUrl } = input;
+  const scripts = Array.from(
+    parsed.component.querySelectorAll("script")
+  );
+  const { mount, unmount } = await loadStaticRemoteComponent(
+    scripts,
+    url,
+    resolveClientUrl
+  );
+  return {
+    status: "static",
+    mount,
+    unmount,
+    metadata: parsed.metadata,
+    parsed,
+    doc
+  };
+}
+async function loadDynamicPath(input) {
+  const {
+    parsed,
+    doc,
+    url,
+    scriptDescriptors,
+    shared,
+    resolveClientUrl,
+    container
+  } = input;
+  const rscName = input.rscName ?? (parsed.rsc ? `__remote_component_rsc_${escapeString(url.href)}_${escapeString(parsed.name)}` : void 0);
+  const rscData = parsed.rsc ? (parsed.rsc.textContent || "").split("\n").filter(Boolean) : [];
+  const result = await loadRemoteComponent({
+    url,
+    name: parsed.name,
+    rscName,
+    bundle: parsed.metadata.bundle,
+    route: parsed.metadata.route,
+    runtime: parsed.metadata.runtime,
+    data: rscData,
+    nextData: parsed.nextData,
+    scripts: scriptDescriptors,
+    shared: buildHostShared(shared, resolveClientUrl),
+    remoteShared: parsed.remoteShared,
+    container,
+    resolveClientUrl
+  });
+  if (result.error) {
+    return { status: "error", error: result.error };
+  }
+  return {
+    status: "loaded",
+    component: result.component,
+    metadata: parsed.metadata,
+    parsed,
+    doc
+  };
+}
+export {
+  loadPrepared,
+  preparePipeline,
+  runPipeline,
+  runPipelineFromParsed
+};
+//# sourceMappingURL=pipeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/pipeline.ts"],"sourcesContent":["import type { InternalResolveClientUrl } from '#internal/host/server/types';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeLoaderPayload } from '#internal/host/shared/server-handoff';\nimport { buildHostShared } from '#internal/host/shared/shared-module-resolver';\nimport { applyOriginToNodes } from '#internal/runtime/html/apply-origin';\nimport {\n  type ParsedRemoteComponent,\n  parseRemoteComponentDocument,\n} from '#internal/runtime/html/parse-remote-html';\nimport { loadRemoteComponent } from '#internal/runtime/loaders/component-loader';\nimport { loadStaticRemoteComponent } from '#internal/runtime/loaders/static-loader';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\nimport {\n  collapseDoubleSlashes,\n  REMOTE_COMPONENT_REGEX,\n} from '#internal/runtime/patterns';\nimport type { MountOrUnmountFunction } from '#internal/runtime/types';\nimport { escapeString } from '#internal/utils';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype SharedModuleMap = Record<string, (bundle?: string) => Promise<unknown>>;\n\n/**\n * Input for {@link runPipeline} — the full post-fetch pipeline that starts\n * from raw HTML.\n */\nexport interface PipelineInput {\n  /** Resolved URL of the remote component. */\n  url: URL;\n  /** Raw HTML string returned by the remote. */\n  html: string;\n  /** Component name hint (may be refined during parsing). */\n  name: string;\n  /** Abort signal — the pipeline checks this between async steps. */\n  signal: AbortSignal;\n  /** Host-provided shared module factories (resolved or promise). */\n  shared: Promise<SharedModuleMap> | SharedModuleMap;\n  /** URL rewriter for client-side asset URLs. */\n  resolveClientUrl?: InternalResolveClientUrl;\n  /** Shadow root or element to mount into (for script-based components). */\n  container?: ShadowRoot | HTMLElement | null;\n}\n\n/**\n * Input for {@link runPipelineFromParsed} — the pipeline entry point for\n * hosts that receive pre-parsed SSR data (e.g. the App Router client).\n */\nexport interface ParsedPipelineInput {\n  /** Resolved URL of the remote component. */\n  url: URL;\n  /** Component name. */\n  name: string;\n  /** Abort signal. */\n  signal: AbortSignal;\n  /** Pre-resolved loader payload from the server component. */\n  payload: ConsumeLoaderPayload;\n  /** Host-provided shared module factories (resolved or promise). */\n  shared: Promise<SharedModuleMap> | SharedModuleMap;\n  /** Remote-requested shared modules. */\n  remoteShared?: Record<string, string>;\n  /** URL rewriter for client-side asset URLs. */\n  resolveClientUrl?: InternalResolveClientUrl;\n  /** Shadow root or element to mount into. */\n  container?: ShadowRoot | HTMLElement | null;\n  /** Optional RSC name override (used by App Router for scoped RSC data). */\n  rscName?: string;\n}\n\n/**\n * Successful dynamic component load — the component is a React element tree\n * ready to render.\n */\nexport interface PipelineLoaded {\n  status: 'loaded';\n  component: React.ReactNode;\n  metadata: RemoteComponentMetadata;\n  parsed: ParsedRemoteComponent;\n  doc: Document;\n}\n\n/**\n * Successful static component load — mount/unmount functions are returned\n * for the host to call.\n */\nexport interface PipelineStatic {\n  status: 'static';\n  mount: Set<MountOrUnmountFunction>;\n  unmount: Set<MountOrUnmountFunction>;\n  metadata: RemoteComponentMetadata;\n  parsed: ParsedRemoteComponent;\n  doc: Document;\n}\n\n/** The load was aborted before it could complete. */\nexport interface PipelineAborted {\n  status: 'aborted';\n}\n\n/** The load failed with an error. */\nexport interface PipelineError {\n  status: 'error';\n  error: Error;\n}\n\nexport type PipelineResult =\n  | PipelineLoaded\n  | PipelineStatic\n  | PipelineAborted\n  | PipelineError;\n\n/**\n * Intermediate result from {@link preparePipeline}. Hosts that need to run\n * framework-specific logic between parse and load (e.g. inline script\n * execution in the React host) use this to split the pipeline into two\n * phases.\n */\nexport interface PreparedPipeline {\n  doc: Document;\n  parsed: ParsedRemoteComponent;\n  /** Script descriptors ready to pass to `loadRemoteComponent`. */\n  scriptDescriptors: ScriptDescriptor[];\n}\n\n// ---------------------------------------------------------------------------\n// Pipeline phases\n// ---------------------------------------------------------------------------\n\n/**\n * Phase 1: Parse HTML, validate shared modules, and normalize URLs.\n *\n * This is the synchronous/cheap portion of the pipeline. Hosts that need to\n * inject logic between parse and load (e.g. executing inline scripts) call\n * this directly, then call {@link loadPrepared} when ready.\n */\nexport function preparePipeline(input: {\n  html: string;\n  name: string;\n  url: URL;\n  shared: SharedModuleMap;\n  remoteShared?: Record<string, string>;\n  resolveClientUrl?: InternalResolveClientUrl;\n}): PreparedPipeline {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(input.html, 'text/html');\n\n  const parsed = parseRemoteComponentDocument(doc, input.name, input.url);\n\n  // Validate shared modules — surface errors early before any script loading.\n  // Only check *remote* shared modules here. The host-side marker\n  // (`__remote_components_missing_shared__` in `input.shared`) is a callable\n  // error signal that the host may intentionally leave in place when\n  // `withRemoteComponentsConfig` is not used — blocking on it would break\n  // framework-agnostic hosts that don't configure shared modules.\n  const remoteShared = input.remoteShared ?? parsed.remoteShared;\n  if ('__remote_components_missing_shared__' in remoteShared) {\n    throw new RemoteComponentsError(\n      remoteShared.__remote_components_missing_shared__,\n    );\n  }\n\n  applyOriginToNodes(doc, input.url, input.resolveClientUrl);\n\n  const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);\n\n  return { doc, parsed, scriptDescriptors };\n}\n\n/**\n * Phase 2: Load the component from a prepared pipeline result.\n *\n * For dynamic components, delegates to `loadRemoteComponent`. For static\n * components (`isRemoteComponent`), delegates to `loadStaticRemoteComponent`.\n */\nexport async function loadPrepared(input: {\n  prepared: PreparedPipeline;\n  url: URL;\n  signal: AbortSignal;\n  shared: Promise<SharedModuleMap> | SharedModuleMap;\n  resolveClientUrl?: InternalResolveClientUrl;\n  container?: ShadowRoot | HTMLElement | null;\n  rscName?: string;\n}): Promise<PipelineResult> {\n  const { prepared, url, signal, resolveClientUrl, container, rscName } = input;\n  const { doc, parsed, scriptDescriptors } = prepared;\n\n  if (signal.aborted) {\n    return { status: 'aborted' };\n  }\n\n  const userShared = await input.shared;\n  if (signal.aborted) {\n    return { status: 'aborted' };\n  }\n\n  if (parsed.isRemoteComponent) {\n    return loadStaticPath({\n      parsed,\n      doc,\n      url,\n      resolveClientUrl,\n    });\n  }\n\n  return loadDynamicPath({\n    parsed,\n    doc,\n    url,\n    scriptDescriptors,\n    shared: userShared,\n    resolveClientUrl,\n    container,\n    rscName,\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Full pipeline entry points\n// ---------------------------------------------------------------------------\n\n/**\n * Full post-fetch pipeline: parse → validate → normalize → load.\n *\n * Use this when starting from a raw HTML string (React host, HTML host).\n */\nexport async function runPipeline(\n  input: PipelineInput,\n): Promise<PipelineResult> {\n  try {\n    const userShared = await input.shared;\n    if (input.signal.aborted) {\n      return { status: 'aborted' };\n    }\n\n    const prepared = preparePipeline({\n      html: input.html,\n      name: input.name,\n      url: input.url,\n      shared: userShared,\n      resolveClientUrl: input.resolveClientUrl,\n    });\n\n    return await loadPrepared({\n      prepared,\n      url: input.url,\n      signal: input.signal,\n      shared: userShared,\n      resolveClientUrl: input.resolveClientUrl,\n      container: input.container,\n    });\n  } catch (error) {\n    return {\n      status: 'error',\n      error:\n        error instanceof Error\n          ? error\n          : new RemoteComponentsError(String(error)),\n    };\n  }\n}\n\n/**\n * Pipeline entry point for pre-parsed SSR data (App Router client).\n *\n * Skips HTML parsing and goes straight to `loadRemoteComponent` with the\n * pre-resolved payload from the server component.\n */\nexport async function runPipelineFromParsed(\n  input: ParsedPipelineInput,\n): Promise<\n  | { status: 'loaded'; component: React.ReactNode }\n  | PipelineAborted\n  | PipelineError\n> {\n  try {\n    if (input.signal.aborted) {\n      return { status: 'aborted' };\n    }\n\n    const remoteShared = input.remoteShared ?? input.payload.remoteShared ?? {};\n\n    if ('__remote_components_missing_shared__' in remoteShared) {\n      throw new RemoteComponentsError(\n        remoteShared.__remote_components_missing_shared__,\n      );\n    }\n\n    const result = await loadRemoteComponent({\n      url: input.url,\n      name: input.name,\n      rscName: input.rscName,\n      bundle: input.payload.bundle,\n      route: input.payload.route,\n      runtime: input.payload.runtime,\n      data: input.payload.data,\n      nextData: input.payload.nextData,\n      scripts: input.payload.scripts,\n      shared: input.shared,\n      remoteShared,\n      container: input.container,\n      resolveClientUrl: input.resolveClientUrl,\n    });\n\n    if (input.signal.aborted) {\n      return { status: 'aborted' };\n    }\n\n    if (result.error) {\n      return { status: 'error', error: result.error };\n    }\n    return { status: 'loaded', component: result.component };\n  } catch (error) {\n    return {\n      status: 'error',\n      error:\n        error instanceof Error\n          ? error\n          : new RemoteComponentsError(String(error)),\n    };\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Converts parsed `<script>` elements into the `ScriptDescriptor[]` format\n * expected by `loadRemoteComponent`. Handles the `[bundle] id` URL format\n * and collapses double slashes.\n */\nfunction buildScriptDescriptors(\n  scripts: HTMLScriptElement[],\n  url: URL,\n): ScriptDescriptor[] {\n  return scripts.map((script) => {\n    const scriptSrc =\n      script.getAttribute('data-src') ||\n      script.getAttribute('src') ||\n      script.src;\n    const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(scriptSrc)\n      ?.groups ?? {\n      prefix: undefined,\n      id: scriptSrc,\n    };\n    return {\n      src: new URL(collapseDoubleSlashes(`${prefix ?? ''}${path}`), url).href,\n    };\n  });\n}\n\nasync function loadStaticPath(input: {\n  parsed: ParsedRemoteComponent;\n  doc: Document;\n  url: URL;\n  resolveClientUrl?: InternalResolveClientUrl;\n}): Promise<PipelineStatic> {\n  const { parsed, doc, url, resolveClientUrl } = input;\n  const scripts = Array.from(\n    parsed.component.querySelectorAll<HTMLScriptElement>('script'),\n  );\n  const { mount, unmount } = await loadStaticRemoteComponent(\n    scripts,\n    url,\n    resolveClientUrl,\n  );\n  return {\n    status: 'static',\n    mount,\n    unmount,\n    metadata: parsed.metadata,\n    parsed,\n    doc,\n  };\n}\n\nasync function loadDynamicPath(input: {\n  parsed: ParsedRemoteComponent;\n  doc: Document;\n  url: URL;\n  scriptDescriptors: ScriptDescriptor[];\n  shared: SharedModuleMap;\n  resolveClientUrl?: InternalResolveClientUrl;\n  container?: ShadowRoot | HTMLElement | null;\n  rscName?: string;\n}): Promise<PipelineLoaded | PipelineError> {\n  const {\n    parsed,\n    doc,\n    url,\n    scriptDescriptors,\n    shared,\n    resolveClientUrl,\n    container,\n  } = input;\n\n  const rscName =\n    input.rscName ??\n    (parsed.rsc\n      ? `__remote_component_rsc_${escapeString(url.href)}_${escapeString(parsed.name)}`\n      : undefined);\n\n  const rscData = parsed.rsc\n    ? (parsed.rsc.textContent || '').split('\\n').filter(Boolean)\n    : [];\n\n  const result = await loadRemoteComponent({\n    url,\n    name: parsed.name,\n    rscName,\n    bundle: parsed.metadata.bundle,\n    route: parsed.metadata.route,\n    runtime: parsed.metadata.runtime,\n    data: rscData,\n    nextData: parsed.nextData,\n    scripts: scriptDescriptors,\n    shared: buildHostShared(shared, resolveClientUrl),\n    remoteShared: parsed.remoteShared,\n    container,\n    resolveClientUrl,\n  });\n\n  if (result.error) {\n    return { status: 'error', error: result.error };\n  }\n  return {\n    status: 'loaded',\n    component: result.component,\n    metadata: parsed.metadata,\n    parsed,\n    doc,\n  };\n}\n"],"mappings":"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","names":[]}

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

@@ -118,8 +118,11 @@ async function loadRemoteComponent({
         "No bundle specified, skipping shared module setup"
       );
     }
-    if (data.length > 0) {
-      return await loadRSCComponent(rscName ?? name, data);
+    const scopedData = data.map(
+      (chunk) => chunk.replaceAll(`[${bundle}]`, `[${scope.scopedName}]`)
+    );
+    if (scopedData.length > 0) {
+      return await loadRSCComponent(rscName ?? name, scopedData);
     } else if (nextData) {
       return loadNextPagesComponent(bundle, route, nextData, name, container);
     }