remote-components 0.3.4 → 0.3.5

package/dist/host/nextjs/app.cjs

@@ -24,8 +24,10 @@ module.exports = __toCommonJS(app_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_wrapper = require("remote-components/remote/defaults/wrapper");
 var import_react = require("react");
+var import_react_dom = require("react-dom");
 var import_app_client = require("#internal/host/nextjs/app-client");
 var import_fetch_remote_component = require("#internal/host/server/fetch-remote-component");
+var import_constants = require("#internal/runtime/constants");
 async function ConsumeRemoteComponent({
   src,
   name: nameProp,
@@ -74,10 +76,40 @@ async function ConsumeRemoteComponent({
       children: component
     }
   );
+  const preloadHints = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChunkPreloadHints, { scripts, runtime });
   if (import_react.Children.count(children) > 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: children, children: remoteComponentClient });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Suspense, { fallback: children, children: [
+      preloadHints,
+      remoteComponentClient
+    ] });
   }
-  return remoteComponentClient;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    preloadHints,
+    remoteComponentClient
+  ] });
+}
+function ChunkPreloadHints({
+  scripts,
+  runtime
+}) {
+  const scriptsWithSrc = scripts.filter((script) => script.src);
+  const as = runtime === import_constants.RUNTIME_TURBOPACK ? "fetch" : "script";
+  if (typeof import_react_dom.preload === "function") {
+    for (const script of scriptsWithSrc) {
+      (0, import_react_dom.preload)(script.src, { as, crossOrigin: "anonymous" });
+    }
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: scriptsWithSrc.map((script) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "link",
+    {
+      rel: "preload",
+      href: script.src,
+      as,
+      crossOrigin: "anonymous"
+    },
+    script.src
+  )) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/host/nextjs/app.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  const { name, bundle, route, runtime, type } = metadata;\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={bundle}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={route}\n      runtime={runtime}\n      scripts={scripts}\n      type={type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  if (Children.count(children) > 0) {\n    // if there are children, render them inside the remote component\n    return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n  }\n\n  return remoteComponentClient;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DI;AA1DJ,qBAAO;AACP,mBAAmC;AACnC,wBAA6C;AAC7C,oCAAqC;AA0BrC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,4CAAC,yBAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { preload as reactDomPreload } from 'react-dom';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\nimport { RUNTIME_TURBOPACK } from '#internal/runtime/constants';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  const { name, bundle, route, runtime, type } = metadata;\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={bundle}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={route}\n      runtime={runtime}\n      scripts={scripts}\n      type={type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  const preloadHints = (\n    <ChunkPreloadHints scripts={scripts} runtime={runtime} />\n  );\n\n  if (Children.count(children) > 0) {\n    return (\n      <Suspense fallback={children}>\n        {preloadHints}\n        {remoteComponentClient}\n      </Suspense>\n    );\n  }\n\n  return (\n    <>\n      {preloadHints}\n      {remoteComponentClient}\n    </>\n  );\n}\n\n/**\n * Emits preload hints for chunk scripts so the browser starts fetching them\n * during HTML parsing, before any client JS executes. Uses the React DOM\n * `preload()` API when available, falling back to `<link rel=\"preload\">`.\n *\n * Preload hints use the direct asset URLs — if the client rewrites URLs\n * (e.g. through a proxy via `resolveClientUrl`), the preloads won't\n * cache-match but fail silently and cause no harm.\n */\nfunction ChunkPreloadHints({\n  scripts,\n  runtime,\n}: {\n  scripts: ScriptDescriptor[];\n  runtime: string | undefined;\n}) {\n  const scriptsWithSrc = scripts.filter((script) => script.src);\n  // Turbopack loads chunks via fetch() rather than <script> tags\n  const as = runtime === RUNTIME_TURBOPACK ? 'fetch' : 'script';\n\n  if (typeof reactDomPreload === 'function') {\n    for (const script of scriptsWithSrc) {\n      reactDomPreload(script.src, { as, crossOrigin: 'anonymous' });\n    }\n    return null;\n  }\n\n  return (\n    <>\n      {scriptsWithSrc.map((script) => (\n        <link\n          key={script.src}\n          rel=\"preload\"\n          href={script.src}\n          as={as}\n          crossOrigin=\"anonymous\"\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DI;AA7DJ,qBAAO;AACP,mBAAmC;AACnC,uBAA2C;AAC3C,wBAA6C;AAC7C,oCAAqC;AAGrC,uBAAkC;AAyBlC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,QAAM,eACJ,4CAAC,qBAAkB,SAAkB,SAAkB;AAGzD,MAAI,sBAAS,MAAM,QAAQ,IAAI,GAAG;AAChC,WACE,6CAAC,yBAAS,UAAU,UACjB;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,4EACG;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,OAAO,GAAG;AAE5D,QAAM,KAAK,YAAY,qCAAoB,UAAU;AAErD,MAAI,OAAO,iBAAAA,YAAoB,YAAY;AACzC,eAAW,UAAU,gBAAgB;AACnC,2BAAAA,SAAgB,OAAO,KAAK,EAAE,IAAI,aAAa,YAAY,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AAEA,SACE,2EACG,yBAAe,IAAI,CAAC,WACnB;AAAA,IAAC;AAAA;AAAA,MAEC,KAAI;AAAA,MACJ,MAAM,OAAO;AAAA,MACb;AAAA,MACA,aAAY;AAAA;AAAA,IAJP,OAAO;AAAA,EAKd,CACD,GACH;AAEJ;","names":["reactDomPreload"]}

package/dist/host/nextjs/app.js

@@ -1,8 +1,10 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "remote-components/remote/defaults/wrapper";
 import { Children, Suspense } from "react";
+import { preload as reactDomPreload } from "react-dom";
 import { ConsumeRemoteComponentClient } from "#internal/host/nextjs/app-client";
 import { fetchRemoteComponent } from "#internal/host/server/fetch-remote-component";
+import { RUNTIME_TURBOPACK } from "#internal/runtime/constants";
 async function ConsumeRemoteComponent({
   src,
   name: nameProp,
@@ -51,10 +53,40 @@ async function ConsumeRemoteComponent({
       children: component
     }
   );
+  const preloadHints = /* @__PURE__ */ jsx(ChunkPreloadHints, { scripts, runtime });
   if (Children.count(children) > 0) {
-    return /* @__PURE__ */ jsx(Suspense, { fallback: children, children: remoteComponentClient });
+    return /* @__PURE__ */ jsxs(Suspense, { fallback: children, children: [
+      preloadHints,
+      remoteComponentClient
+    ] });
   }
-  return remoteComponentClient;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    preloadHints,
+    remoteComponentClient
+  ] });
+}
+function ChunkPreloadHints({
+  scripts,
+  runtime
+}) {
+  const scriptsWithSrc = scripts.filter((script) => script.src);
+  const as = runtime === RUNTIME_TURBOPACK ? "fetch" : "script";
+  if (typeof reactDomPreload === "function") {
+    for (const script of scriptsWithSrc) {
+      reactDomPreload(script.src, { as, crossOrigin: "anonymous" });
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: scriptsWithSrc.map((script) => /* @__PURE__ */ jsx(
+    "link",
+    {
+      rel: "preload",
+      href: script.src,
+      as,
+      crossOrigin: "anonymous"
+    },
+    script.src
+  )) });
 }
 export {
   ConsumeRemoteComponent

package/dist/host/nextjs/app.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  const { name, bundle, route, runtime, type } = metadata;\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={bundle}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={route}\n      runtime={runtime}\n      scripts={scripts}\n      type={type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  if (Children.count(children) > 0) {\n    // if there are children, render them inside the remote component\n    return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n  }\n\n  return remoteComponentClient;\n}\n"],"mappings":"AA0DI;AA1DJ,OAAO;AACP,SAAS,UAAU,gBAAgB;AACnC,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AA0BrC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,oBAAC,YAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/host/nextjs/app.tsx"],"sourcesContent":["import 'remote-components/remote/defaults/wrapper';\nimport { Children, Suspense } from 'react';\nimport { preload as reactDomPreload } from 'react-dom';\nimport { ConsumeRemoteComponentClient } from '#internal/host/nextjs/app-client';\nimport { fetchRemoteComponent } from '#internal/host/server/fetch-remote-component';\nimport type { ScriptDescriptor } from '#internal/host/shared/asset-descriptors';\nimport type { ConsumeServerConfig } from '#internal/host/shared/config';\nimport { RUNTIME_TURBOPACK } from '#internal/runtime/constants';\n\n/**\n * Props for the Next.js App Router remote component host (server component).\n */\nexport interface ConsumeRemoteComponentProps extends ConsumeServerConfig {\n  /** The source URL of the remote component. Required for server rendering. */\n  src: string | URL;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * Next.js App Router server component that fetches and renders a remote component.\n * Props are documented on {@link ConsumeRemoteComponentProps} (extends {@link ConsumeServerConfig}).\n *\n * @example\n * ```tsx\n * import { ConsumeRemoteComponent } from 'remote-components/host/nextjs/app';\n *\n * export default function MyPage() {\n *   return <ConsumeRemoteComponent src=\"/nextjs-app-remote/components/header\" />;\n * }\n * ```\n */\nexport async function ConsumeRemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  children,\n  onRequest,\n  onResponse,\n}: ConsumeRemoteComponentProps): Promise<React.ReactElement> {\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, {\n    name: nameProp,\n    rsc: true,\n    appRouter: true,\n    onRequest,\n    onResponse,\n  });\n\n  const { name, bundle, route, runtime, type } = metadata;\n  const remoteComponentClient = (\n    <ConsumeRemoteComponentClient\n      bundle={bundle}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={route}\n      runtime={runtime}\n      scripts={scripts}\n      type={type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </ConsumeRemoteComponentClient>\n  );\n\n  const preloadHints = (\n    <ChunkPreloadHints scripts={scripts} runtime={runtime} />\n  );\n\n  if (Children.count(children) > 0) {\n    return (\n      <Suspense fallback={children}>\n        {preloadHints}\n        {remoteComponentClient}\n      </Suspense>\n    );\n  }\n\n  return (\n    <>\n      {preloadHints}\n      {remoteComponentClient}\n    </>\n  );\n}\n\n/**\n * Emits preload hints for chunk scripts so the browser starts fetching them\n * during HTML parsing, before any client JS executes. Uses the React DOM\n * `preload()` API when available, falling back to `<link rel=\"preload\">`.\n *\n * Preload hints use the direct asset URLs — if the client rewrites URLs\n * (e.g. through a proxy via `resolveClientUrl`), the preloads won't\n * cache-match but fail silently and cause no harm.\n */\nfunction ChunkPreloadHints({\n  scripts,\n  runtime,\n}: {\n  scripts: ScriptDescriptor[];\n  runtime: string | undefined;\n}) {\n  const scriptsWithSrc = scripts.filter((script) => script.src);\n  // Turbopack loads chunks via fetch() rather than <script> tags\n  const as = runtime === RUNTIME_TURBOPACK ? 'fetch' : 'script';\n\n  if (typeof reactDomPreload === 'function') {\n    for (const script of scriptsWithSrc) {\n      reactDomPreload(script.src, { as, crossOrigin: 'anonymous' });\n    }\n    return null;\n  }\n\n  return (\n    <>\n      {scriptsWithSrc.map((script) => (\n        <link\n          key={script.src}\n          rel=\"preload\"\n          href={script.src}\n          as={as}\n          crossOrigin=\"anonymous\"\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":"AA6DI,SAmCA,UAnCA,KA2BE,YA3BF;AA7DJ,OAAO;AACP,SAAS,UAAU,gBAAgB;AACnC,SAAS,WAAW,uBAAuB;AAC3C,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AAGrC,SAAS,yBAAyB;AAyBlC,eAAsB,uBAAuB;AAAA,EAC3C;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK;AAAA,IAClC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI;AAC/C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,QAAM,eACJ,oBAAC,qBAAkB,SAAkB,SAAkB;AAGzD,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAChC,WACE,qBAAC,YAAS,UAAU,UACjB;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,iCACG;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,OAAO,GAAG;AAE5D,QAAM,KAAK,YAAY,oBAAoB,UAAU;AAErD,MAAI,OAAO,oBAAoB,YAAY;AACzC,eAAW,UAAU,gBAAgB;AACnC,sBAAgB,OAAO,KAAK,EAAE,IAAI,aAAa,YAAY,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AAEA,SACE,gCACG,yBAAe,IAAI,CAAC,WACnB;AAAA,IAAC;AAAA;AAAA,MAEC,KAAI;AAAA,MACJ,MAAM,OAAO;AAAA,MACb;AAAA,MACA,aAAY;AAAA;AAAA,IAJP,OAAO;AAAA,EAKd,CACD,GACH;AAEJ;","names":[]}

package/dist/host/react.cjs

@@ -237,6 +237,24 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
+// src/host/shared/lifecycle.ts
+function makeReactEmitter(callbacks) {
+  return {
+    beforeLoad(src) {
+      callbacks.onBeforeLoad?.(src);
+    },
+    load(src) {
+      callbacks.onLoad?.(src);
+    },
+    error(error, _src) {
+      callbacks.onError?.(error);
+    },
+    change(info) {
+      callbacks.onChange?.(info);
+    }
+  };
+}
+
 // src/utils/index.ts
 function escapeString(str) {
   return str.replace(/[^a-z0-9]/g, "_");
@@ -615,32 +633,6 @@ async function buildWebpackResolve(hostShared, remoteShared, bundle, reactModule
   return resolve;
 }
 
-// src/host/shared/state.ts
-function createHostState() {
-  return {
-    stage: "idle",
-    prevSrc: void 0,
-    prevUrl: void 0,
-    prevName: void 0,
-    prevIsRemoteComponent: false,
-    abortController: void 0
-  };
-}
-
-// src/host/utils/resolve-name-from-src.ts
-function resolveNameFromSrc(src, defaultName) {
-  if (!src) {
-    return defaultName;
-  }
-  const hash = typeof src === "string" ? src : src.hash;
-  const hashIndex = hash.indexOf("#");
-  if (hashIndex < 0) {
-    return defaultName;
-  }
-  const name = hash.slice(hashIndex + 1);
-  return name || defaultName;
-}
-
 // src/runtime/html/html-spec.ts
 var ORIGIN_REWRITE_TAGS = [
   "img",
@@ -843,48 +835,6 @@ function parseRemoteComponentDocument(doc, name, url) {
   };
 }
 
-// src/runtime/html/set-attributes-from-props.ts
-var DOMAttributeNames = {
-  acceptCharset: "accept-charset",
-  className: "class",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  noModule: "noModule"
-};
-var ignoreProps = [
-  "onLoad",
-  "onReady",
-  "dangerouslySetInnerHTML",
-  "children",
-  "onError",
-  "strategy",
-  "stylesheets"
-];
-function isBooleanScriptAttribute(attr) {
-  return ["async", "defer", "noModule"].includes(attr);
-}
-function setAttributesFromProps(el, props) {
-  for (const [p, value] of Object.entries(props)) {
-    if (!Object.hasOwn(props, p))
-      continue;
-    if (ignoreProps.includes(p))
-      continue;
-    if (value === void 0) {
-      continue;
-    }
-    const attr = DOMAttributeNames[p] || p.toLowerCase();
-    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
-      el[attr] = Boolean(value);
-    } else {
-      el.setAttribute(attr, String(value));
-    }
-    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
-      el.setAttribute(attr, "");
-      el.removeAttribute(attr);
-    }
-  }
-}
-
 // src/runtime/loaders/component-loader.ts
 var React = __toESM(require("react"), 1);
 var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
@@ -1165,7 +1115,7 @@ var REMOTE_SHARED_ASSIGNMENT_RE = new RegExp(
   `\\.TURBOPACK_REMOTE_SHARED\\s*=\\s*await (?:__turbopack_context__|[a-z])\\.A\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
 );
 var ASYNC_MODULE_LOADER_RE = new RegExp(
-  `(?:__turbopack_context__|e)\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
+  `(?:__turbopack_context__|[a-z])\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
 );
 var ASYNC_MODULE_CALLBACK_RE = new RegExp(
   `(?:parentImport|[a-z])\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
@@ -2124,6 +2074,188 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
   );
 }
 
+// src/host/shared/pipeline.ts
+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
+  });
+}
+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
+  };
+}
+
+// src/host/shared/state.ts
+function createHostState() {
+  return {
+    stage: "idle",
+    prevSrc: void 0,
+    prevUrl: void 0,
+    prevName: void 0,
+    prevIsRemoteComponent: false,
+    abortController: void 0
+  };
+}
+
+// src/host/utils/resolve-name-from-src.ts
+function resolveNameFromSrc(src, defaultName) {
+  if (!src) {
+    return defaultName;
+  }
+  const hash = typeof src === "string" ? src : src.hash;
+  const hashIndex = hash.indexOf("#");
+  if (hashIndex < 0) {
+    return defaultName;
+  }
+  const name = hash.slice(hashIndex + 1);
+  return name || defaultName;
+}
+
+// src/runtime/html/set-attributes-from-props.ts
+var DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+var ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
+];
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
+    }
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
+    }
+  }
+}
+
 // src/host/react/hooks/use-resolve-client-url.ts
 var import_react = require("react");
 var import_context = require("#internal/host/react/context");
@@ -2253,6 +2385,10 @@ function ConsumeRemoteComponent({
   const { credentials: contextCredentials, shared: contextShared } = (0, import_context2.useRemoteComponentsContext)();
   const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
   const shared = sharedProp ?? contextShared ?? {};
+  const emitter = (0, import_react3.useMemo)(
+    () => makeReactEmitter({ onBeforeLoad, onLoad, onError, onChange }),
+    [onBeforeLoad, onLoad, onError, onChange]
+  );
   const name = (0, import_react3.useMemo)(
     () => resolveNameFromSrc(src, nameProp),
     [src, nameProp]
@@ -2342,7 +2478,7 @@ function ConsumeRemoteComponent({
       hostStateRef.current.abortController?.abort();
       hostStateRef.current.abortController = new AbortController();
       const { signal } = hostStateRef.current.abortController;
-      onBeforeLoad?.(src);
+      emitter.beforeLoad(src);
       hostStateRef.current.stage = "loading";
       (0, import_react3.startTransition)(async () => {
         try {
@@ -2373,19 +2509,26 @@ function ConsumeRemoteComponent({
           }
           if (signal.aborted)
             return;
-          const parser = new DOMParser();
-          const doc = parser.parseFromString(html, "text/html");
+          const userShared = await shared;
+          if (signal.aborted)
+            return;
+          const prepared = preparePipeline({
+            html,
+            name,
+            url,
+            shared: userShared,
+            resolveClientUrl
+          });
+          const { doc, parsed } = prepared;
           const {
             component,
             name: remoteName,
             isRemoteComponent,
             metadata,
-            nextData,
             rsc,
             remoteShared,
-            links: linkElements,
-            scripts: scriptElements
-          } = parseRemoteComponentDocument(doc, name, url);
+            links: linkElements
+          } = parsed;
           if (hostStateRef.current.prevIsRemoteComponent) {
             if (shadowRoot) {
               shadowRoot.innerHTML = "";
@@ -2406,7 +2549,6 @@ function ConsumeRemoteComponent({
           hostStateRef.current.prevIsRemoteComponent = isRemoteComponent;
           hostStateRef.current.prevUrl = url;
           hostStateRef.current.prevName = remoteName;
-          applyOriginToNodes(doc, url, resolveClientUrl);
           const links = linkElements.map((link) => ({
             href: new URL(link.getAttribute("href") ?? link.href, url).href,
             ...link.getAttributeNames().reduce((acc, key) => {
@@ -2416,7 +2558,6 @@ function ConsumeRemoteComponent({
               return acc;
             }, {})
           }));
-          const scripts = scriptElements;
           const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
             "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
           );
@@ -2495,20 +2636,10 @@ function ConsumeRemoteComponent({
           componentHydrationHtml.current = `${Array.from(
             doc.querySelectorAll("link,style")
           ).map((link) => link.outerHTML).join("")}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
-          const userShared = await shared;
-          if ("__remote_components_missing_shared__" in userShared) {
-            userShared.__remote_components_missing_shared__().catch((e) => {
-              throw e;
-            });
-          } else if ("__remote_components_missing_shared__" in remoteShared) {
-            throw new RemoteComponentsError(
-              remoteShared.__remote_components_missing_shared__
-            );
-          }
           if (isRemoteComponent) {
             if (previousSrc !== void 0) {
-              onChange?.({
-                previousSrc,
+              emitter.change({
+                previousSrc: previousSrc ?? null,
                 nextSrc: src,
                 previousName,
                 nextName: remoteName
@@ -2529,7 +2660,7 @@ function ConsumeRemoteComponent({
               await Promise.all(
                 Array.from(mount).map((mountFn) => mountFn(shadowRoot))
               );
-              onLoad?.(src);
+              emitter.load(src);
             } else if (isolate === false) {
               setRemoteComponent(
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -2552,59 +2683,42 @@ function ConsumeRemoteComponent({
                   (mountFn) => mountFn(prevRemoteComponentContainerRef.current)
                 )
               );
-              onLoad?.(src);
+              emitter.load(src);
             }
             hostStateRef.current.stage = "loaded";
           } else {
-            const result = await loadRemoteComponent({
+            const result = await loadPrepared({
+              prepared,
               url,
-              name: remoteName,
-              rscName,
-              bundle: metadata.bundle,
-              route: metadata.route,
-              runtime: metadata.runtime,
-              data: newData.data,
-              nextData,
-              scripts: Array.from(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
-                };
-              }),
-              shared: buildHostShared(userShared, resolveClientUrl),
-              remoteShared,
+              signal,
+              shared: userShared,
+              resolveClientUrl,
               container: shadowRoot,
-              resolveClientUrl
+              rscName
             });
             if (rsc) {
               rsc.remove();
             }
             setData(newData);
             if (previousSrc !== void 0) {
-              onChange?.({
-                previousSrc,
+              emitter.change({
+                previousSrc: previousSrc ?? null,
                 nextSrc: src,
                 previousName,
                 nextName: remoteName
               });
             }
-            if (result.error) {
+            if (result.status === "aborted") {
+              return;
+            }
+            if (result.status === "error") {
               hostStateRef.current.stage = "error";
               setRemoteComponent(result.error);
-              onError?.(result.error);
-            } else {
+              emitter.error(result.error);
+            } else if (result.status === "loaded") {
               hostStateRef.current.stage = "loaded";
               setRemoteComponent(result.component);
-              onLoad?.(src);
+              emitter.load(src);
             }
           }
         } catch (error) {
@@ -2614,7 +2728,7 @@ function ConsumeRemoteComponent({
           }
           hostStateRef.current.stage = "error";
           setRemoteComponent(error);
-          onError?.(error);
+          emitter.error(error);
         }
       });
     }
@@ -2628,10 +2742,10 @@ function ConsumeRemoteComponent({
     shadowRoot,
     reset,
     id,
-    onBeforeLoad,
-    onLoad,
-    onError,
-    onChange,
+    emitter.beforeLoad,
+    emitter.load,
+    emitter.error,
+    emitter.change,
     onRequest,
     onResponse,
     resolveClientUrl
@@ -2673,7 +2787,7 @@ function ConsumeRemoteComponent({
         );
       }).then(() => {
         if (src) {
-          onLoad?.(src);
+          emitter.load(src);
         }
       }).catch((e) => {
         const error = new RemoteComponentsError(
@@ -2683,7 +2797,7 @@ function ConsumeRemoteComponent({
           }
         );
         setRemoteComponent(error);
-        onError?.(error);
+        emitter.error(error);
       });
     }
   }