remote-components 0.1.0 → 0.2.0

package/dist/{types-cbe44b51.d.ts → internal/host/shared/fetch-interceptors.d.ts}

@@ -1,47 +1,9 @@
-import { Node, ChildNode } from 'parse5/dist/tree-adapters/default';
-
-interface Context {
-    name?: string;
-    url: URL;
-    origin?: string;
-    defer?: boolean;
-    active?: boolean;
-    visitedRSCNodes?: Set<Node>;
-    visitedNonActiveNodes?: Set<Node>;
-    onMetadata?: (metadata: RemoteComponentMetadata) => void;
-    onScript?: (attrs: Record<string, string | boolean>) => void;
-    onLink?: (attrs: Record<string, string | boolean>) => void;
-    onRSC?: (rsc: string) => void;
-    onNextData?: (data: {
-        props: {
-            pageProps: Record<string, unknown>;
-            __REMOTE_COMPONENT__?: {
-                bundle: string;
-                runtime: string;
-            };
-        };
-        page?: string;
-    }) => void;
-    onHTML?: (html: string) => void;
-    onShared?: (shared: Record<string, string>) => void;
-    onError?: (message: string, stack?: string) => void;
-}
-type RSC = ['$', string, null, Record<string, unknown>, null, null, number] | (['$', string, null, Record<string, unknown>, null, null, number] | string | null)[] | string | null;
-declare function visit(node: (Node | ChildNode) & {
-    attrsObj?: Record<string, string>;
-    attrsObjToArray?: Record<string, {
-        name: string;
-        value: string;
-    }>;
-}, context?: Context): RSC | RSC[] | string | null;
-
-interface RemoteComponentMetadata {
-    bundle: string;
-    route: string;
-    runtime: 'webpack' | 'turbopack' | 'script';
-    id: string;
-    type: 'nextjs' | 'remote-component' | 'unknown';
-}
+/**
+ * Hook types for intercepting remote component fetch requests and responses.
+ *
+ * These are part of the public host configuration surface ({@link ConsumeServerConfig})
+ * and are used by both SSR and client-side host implementations.
+ */
 /**
  * Options object passed to hook functions containing abort capabilities.
  * Uses standard AbortController/AbortSignal for compatibility with Web APIs.
@@ -158,33 +120,5 @@ type OnRequestHook = (url: URL, init: RequestInit, options: HookOptions) => Prom
  * };
  */
 type OnResponseHook = (url: URL, response: Response, options: HookOptions) => Promise<Response | undefined> | Response | undefined;
-interface NextData {
-    props: {
-        pageProps: Record<string, unknown>;
-        __REMOTE_COMPONENT__?: {
-            bundle: string;
-            runtime: string;
-            shared?: Record<string, string>;
-        };
-    };
-    page?: string;
-    buildId?: string;
-}
-interface FetchRemoteComponentResponse {
-    name: string;
-    serverUrl: URL;
-    metadata: RemoteComponentMetadata;
-    rsc: RSC | RSC[] | string | null;
-    scripts: {
-        src: string;
-        textContent?: string;
-    }[];
-    links: Record<string, string | boolean>[];
-    hydrationData: string[];
-    nextData: NextData | undefined;
-    component: React.ReactNode | undefined;
-    html: string;
-    remoteShared: Record<string, string>;
-}
 
-export { Context as C, FetchRemoteComponentResponse as F, OnRequestHook as O, RemoteComponentMetadata as R, OnResponseHook as a, RSC as b, visit as v };
+export { HookOptions, OnRequestHook, OnResponseHook };

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

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

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

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

package/dist/internal/{shared/client → host/shared}/polyfill.cjs

@@ -26,7 +26,7 @@ var import_jsx_runtime = (
   // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
   require("react/jsx-runtime")
 );
-var import_logger = require("../utils/logger");
+var import_logger = require("#internal/utils/logger");
 function applyBundleUrlToSrc(bundle, src) {
   const self = globalThis;
   if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
@@ -45,7 +45,7 @@ function applyBundleUrlToImagePropsSrc(bundle, src) {
   const propSrc = src;
   return applyBundleUrlToSrc(bundle, propSrc.src);
 }
-const imageImpl = (bundle) => function RemoteImage({
+const imageImpl = (bundle, resolveClientUrl) => function RemoteImage({
   fill: _fill,
   loader: _loader,
   quality: _quality,
@@ -62,18 +62,19 @@ const imageImpl = (bundle) => function RemoteImage({
     bundle,
     typeof src === "string" ? src : src.src
   );
+  const proxiedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "img",
     {
       decoding: "async",
       style: { color: "transparent" },
       ...props,
-      src: newSrc,
+      src: proxiedSrc,
       suppressHydrationWarning: true
     }
   );
 };
-function sharedPolyfills(shared) {
+function sharedPolyfills(shared, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
     "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
@@ -164,11 +165,11 @@ function sharedPolyfills(shared) {
       __esModule: true
     })),
     "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      Image: imageImpl(bundle),
+      Image: imageImpl(bundle, resolveClientUrl),
       __esModule: true
     })),
     "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      default: imageImpl(bundle),
+      default: imageImpl(bundle, resolveClientUrl),
       getImageProps: (_imgProps) => {
         throw new Error(
           "Next.js getImageProps() is not implemented in remote components"

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/polyfill.tsx"],"sourcesContent":["import type { ImageProps, StaticImageData } from 'next/image';\nimport type { LinkProps } from 'next/link';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { logWarn } from '#internal/utils/logger';\n\nfunction applyBundleUrlToSrc(bundle: string, src: string) {\n  const self = globalThis as typeof globalThis & {\n    __remote_bundle_url__?: Record<string, URL>;\n  };\n\n  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {\n    return src;\n  }\n\n  const { assetPrefix, path } =\n    /^(?<assetPrefix>.*?)\\/_next\\/(?<path>.*)/.exec(src)?.groups ?? {};\n  if (!path) {\n    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;\n  }\n  return `${\n    self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n  }${assetPrefix}/_next/${path}`;\n}\n\nexport function applyBundleUrlToImagePropsSrc(\n  bundle: string,\n  src: ImageProps['src'],\n) {\n  if (typeof src === 'string') {\n    return applyBundleUrlToSrc(bundle, src);\n  }\n  const propSrc = src as StaticImageData;\n  return applyBundleUrlToSrc(bundle, propSrc.src);\n}\n\nconst imageImpl = (\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) =>\n  function RemoteImage({\n    fill: _fill,\n    loader: _loader,\n    quality: _quality,\n    priority: _priority,\n    loading: _loading,\n    placeholder: _placeholder,\n    blurDataURL: _blurDataURL,\n    unoptimized: _unoptimized,\n    overrideSrc: _overrideSrc,\n    src,\n    ...props\n  }: ImageProps) {\n    const newSrc = applyBundleUrlToImagePropsSrc(\n      bundle,\n      typeof src === 'string' ? src : (src as StaticImageData).src,\n    );\n    const proxiedSrc = resolveClientUrl?.(newSrc) ?? newSrc;\n\n    return (\n      // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text\n      <img\n        decoding=\"async\"\n        style={{ color: 'transparent' }}\n        {...props}\n        src={proxiedSrc}\n        suppressHydrationWarning\n      />\n    );\n  };\n\n// polyfill Next.js App Router client API (minimal)\n// implementations are minimal and do not cover all use cases\n// developer can override these shared modules from configuration\nexport function sharedPolyfills(\n  shared?: Record<string, () => Promise<unknown>>,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const self = globalThis as typeof globalThis & {\n    __remote_component_host_shared_modules__?: Record<\n      string,\n      () => Promise<unknown>\n    >;\n  };\n  const polyfill = {\n    'next/dist/client/components/navigation':\n      self.__remote_component_host_shared_modules__?.['next/navigation'] ??\n      shared?.['next/navigation'] ??\n      (() =>\n        Promise.resolve({\n          useRouter() {\n            return {\n              push: (routerUrl: string) => {\n                history.pushState({}, '', routerUrl);\n              },\n              replace: (routerUrl: string) => {\n                history.replaceState({}, '', routerUrl);\n              },\n              back: () => {\n                history.back();\n              },\n            };\n          },\n          usePathname() {\n            return location.pathname;\n          },\n          useParams() {\n            return {};\n          },\n          useSearchParams() {\n            return new URLSearchParams(location.search);\n          },\n          useSelectedLayoutSegment() {\n            return null;\n          },\n          useSelectedLayoutSegments() {\n            return [];\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/app-dir/link':\n      self.__remote_component_host_shared_modules__?.['next/link'] ??\n      shared?.['next/link'] ??\n      (() =>\n        Promise.resolve({\n          default: ({\n            scroll: _,\n            replace,\n            prefetch,\n            onNavigate,\n            children,\n            ...props\n          }: React.PropsWithChildren<LinkProps>) => {\n            if (prefetch) {\n              logWarn(\n                'Polyfill',\n                'Next.js Link prefetch is not supported in remote components',\n              );\n            }\n            return (\n              <a\n                {...props}\n                href={props.href as string}\n                onClick={(e) => {\n                  e.preventDefault();\n                  let preventDefaulted = false;\n                  e.preventDefault = () => {\n                    preventDefaulted = true;\n                    e.defaultPrevented = true;\n                  };\n                  if (typeof props.onClick === 'function') {\n                    props.onClick(e);\n                  }\n                  onNavigate?.(e);\n                  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n                  if (preventDefaulted) {\n                    return;\n                  }\n                  if (replace) {\n                    history.replaceState({}, '', props.href as string);\n                  } else {\n                    history.pushState({}, '', props.href as string);\n                  }\n                }}\n                suppressHydrationWarning\n              >\n                {children ?? null}\n              </a>\n            );\n          },\n          useLinkStatus() {\n            return { pending: false };\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/app-dir/form':\n      self.__remote_component_host_shared_modules__?.['next/form'] ??\n      shared?.['next/form'] ??\n      (() =>\n        Promise.resolve({\n          default: () => {\n            // TODO: implement <Form> component for non-Next.js host applications\n            throw new Error('Next.js <Form> component not implemented');\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/image-component':\n      self.__remote_component_host_shared_modules__?.['next/image'] ??\n      shared?.['next/image'] ??\n      ((bundle: string) =>\n        Promise.resolve({\n          Image: imageImpl(bundle, resolveClientUrl),\n          __esModule: true,\n        })),\n    'next/image':\n      self.__remote_component_host_shared_modules__?.['next/image'] ??\n      shared?.['next/image'] ??\n      ((bundle: string) =>\n        Promise.resolve({\n          default: imageImpl(bundle, resolveClientUrl),\n          getImageProps: (_imgProps: ImageProps) => {\n            throw new Error(\n              'Next.js getImageProps() is not implemented in remote components',\n            );\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/script':\n      self.__remote_component_host_shared_modules__?.['next/script'] ??\n      shared?.['next/script'] ??\n      (() =>\n        Promise.resolve({\n          // TODO: implement <Script> component for non-Next.js host applications\n          // do not throw an error for now\n          default: () => null,\n          __esModule: true,\n        })),\n    'next/router':\n      self.__remote_component_host_shared_modules__?.['next/router'] ??\n      shared?.['next/router'] ??\n      (() =>\n        // TODO: incomplete implementation\n        Promise.resolve({\n          useRouter() {\n            return {\n              push: (routerUrl: string) => {\n                history.pushState({}, '', routerUrl);\n              },\n              replace: (routerUrl: string) => {\n                history.replaceState({}, '', routerUrl);\n              },\n              back: () => {\n                history.back();\n              },\n            };\n          },\n          __esModule: true,\n        })),\n    'next/dist/build/polyfills/process': () =>\n      Promise.resolve({\n        default: {\n          env: {\n            NODE_ENV: 'production',\n          },\n        },\n        __esModule: true,\n      }),\n  } as Record<string, () => Promise<unknown>>;\n\n  polyfill['next/navigation'] = polyfill[\n    'next/dist/client/components/navigation'\n  ] as () => Promise<unknown>;\n  polyfill['next/link'] = polyfill[\n    'next/dist/client/app-dir/link'\n  ] as () => Promise<unknown>;\n  polyfill['next/form'] = polyfill[\n    'next/dist/client/app-dir/form'\n  ] as () => Promise<unknown>;\n  polyfill['next/dist/api/image'] = polyfill[\n    'next/dist/client/image-component'\n  ] as () => Promise<unknown>;\n  polyfill['next/script'] = polyfill[\n    'next/dist/client/script'\n  ] as () => Promise<unknown>;\n\n  return polyfill;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DM;AAAA;AAAA;AAAA;AAzDN,oBAAwB;AAExB,SAAS,oBAAoB,QAAgB,KAAa;AACxD,QAAM,OAAO;AAIb,MAAI,KAAK,wBAAwB,MAAM,GAAG,WAAW,SAAS,QAAQ;AACpE,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,aAAa,KAAK,IACxB,2CAA2C,KAAK,GAAG,GAAG,UAAU,CAAC;AACnE,MAAI,CAAC,MAAM;AACT,WAAO,IAAI,IAAI,KAAK,KAAK,wBAAwB,MAAM,GAAG,MAAM,EAAE;AAAA,EACpE;AACA,SAAO,GACL,KAAK,wBAAwB,MAAM,GAAG,UAAU,KAC/C,qBAAqB;AAC1B;AAEO,SAAS,8BACd,QACA,KACA;AACA,MAAI,OAAO,QAAQ,UAAU;AAC3B,WAAO,oBAAoB,QAAQ,GAAG;AAAA,EACxC;AACA,QAAM,UAAU;AAChB,SAAO,oBAAoB,QAAQ,QAAQ,GAAG;AAChD;AAEA,MAAM,YAAY,CAChB,QACA,qBAEA,SAAS,YAAY;AAAA,EACnB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO,QAAQ,WAAW,MAAO,IAAwB;AAAA,EAC3D;AACA,QAAM,aAAa,mBAAmB,MAAM,KAAK;AAEjD,SAEE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAO,EAAE,OAAO,cAAc;AAAA,MAC7B,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,0BAAwB;AAAA;AAAA,EAC1B;AAEJ;AAKK,SAAS,gBACd,QACA,kBACA;AACA,QAAM,OAAO;AAMb,QAAM,WAAW;AAAA,IACf,0CACE,KAAK,2CAA2C,iBAAiB,KACjE,SAAS,iBAAiB,MACzB,MACC,QAAQ,QAAQ;AAAA,MACd,YAAY;AACV,eAAO;AAAA,UACL,MAAM,CAAC,cAAsB;AAC3B,oBAAQ,UAAU,CAAC,GAAG,IAAI,SAAS;AAAA,UACrC;AAAA,UACA,SAAS,CAAC,cAAsB;AAC9B,oBAAQ,aAAa,CAAC,GAAG,IAAI,SAAS;AAAA,UACxC;AAAA,UACA,MAAM,MAAM;AACV,oBAAQ,KAAK;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAc;AACZ,eAAO,SAAS;AAAA,MAClB;AAAA,MACA,YAAY;AACV,eAAO,CAAC;AAAA,MACV;AAAA,MACA,kBAAkB;AAChB,eAAO,IAAI,gBAAgB,SAAS,MAAM;AAAA,MAC5C;AAAA,MACA,2BAA2B;AACzB,eAAO;AAAA,MACT;AAAA,MACA,4BAA4B;AAC1B,eAAO,CAAC;AAAA,MACV;AAAA,MACA,YAAY;AAAA,IACd,CAAC;AAAA,IACL,iCACE,KAAK,2CAA2C,WAAW,KAC3D,SAAS,WAAW,MACnB,MACC,QAAQ,QAAQ;AAAA,MACd,SAAS,CAAC;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,MAA0C;AACxC,YAAI,UAAU;AACZ;AAAA,YACE;AAAA,YACA;AAAA,UACF;AAAA,QACF;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,MAAM,MAAM;AAAA,YACZ,SAAS,CAAC,MAAM;AACd,gBAAE,eAAe;AACjB,kBAAI,mBAAmB;AACvB,gBAAE,iBAAiB,MAAM;AACvB,mCAAmB;AACnB,kBAAE,mBAAmB;AAAA,cACvB;AACA,kBAAI,OAAO,MAAM,YAAY,YAAY;AACvC,sBAAM,QAAQ,CAAC;AAAA,cACjB;AACA,2BAAa,CAAC;AAEd,kBAAI,kBAAkB;AACpB;AAAA,cACF;AACA,kBAAI,SAAS;AACX,wBAAQ,aAAa,CAAC,GAAG,IAAI,MAAM,IAAc;AAAA,cACnD,OAAO;AACL,wBAAQ,UAAU,CAAC,GAAG,IAAI,MAAM,IAAc;AAAA,cAChD;AAAA,YACF;AAAA,YACA,0BAAwB;AAAA,YAEvB,sBAAY;AAAA;AAAA,QACf;AAAA,MAEJ;AAAA,MACA,gBAAgB;AACd,eAAO,EAAE,SAAS,MAAM;AAAA,MAC1B;AAAA,MACA,YAAY;AAAA,IACd,CAAC;AAAA,IACL,iCACE,KAAK,2CAA2C,WAAW,KAC3D,SAAS,WAAW,MACnB,MACC,QAAQ,QAAQ;AAAA,MACd,SAAS,MAAM;AAEb,cAAM,IAAI,MAAM,0CAA0C;AAAA,MAC5D;AAAA,MACA,YAAY;AAAA,IACd,CAAC;AAAA,IACL,oCACE,KAAK,2CAA2C,YAAY,KAC5D,SAAS,YAAY,MACpB,CAAC,WACA,QAAQ,QAAQ;AAAA,MACd,OAAO,UAAU,QAAQ,gBAAgB;AAAA,MACzC,YAAY;AAAA,IACd,CAAC;AAAA,IACL,cACE,KAAK,2CAA2C,YAAY,KAC5D,SAAS,YAAY,MACpB,CAAC,WACA,QAAQ,QAAQ;AAAA,MACd,SAAS,UAAU,QAAQ,gBAAgB;AAAA,MAC3C,eAAe,CAAC,cAA0B;AACxC,cAAM,IAAI;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,IACd,CAAC;AAAA,IACL,2BACE,KAAK,2CAA2C,aAAa,KAC7D,SAAS,aAAa,MACrB,MACC,QAAQ,QAAQ;AAAA;AAAA;AAAA,MAGd,SAAS,MAAM;AAAA,MACf,YAAY;AAAA,IACd,CAAC;AAAA,IACL,eACE,KAAK,2CAA2C,aAAa,KAC7D,SAAS,aAAa,MACrB;AAAA;AAAA,MAEC,QAAQ,QAAQ;AAAA,QACd,YAAY;AACV,iBAAO;AAAA,YACL,MAAM,CAAC,cAAsB;AAC3B,sBAAQ,UAAU,CAAC,GAAG,IAAI,SAAS;AAAA,YACrC;AAAA,YACA,SAAS,CAAC,cAAsB;AAC9B,sBAAQ,aAAa,CAAC,GAAG,IAAI,SAAS;AAAA,YACxC;AAAA,YACA,MAAM,MAAM;AACV,sBAAQ,KAAK;AAAA,YACf;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY;AAAA,MACd,CAAC;AAAA;AAAA,IACL,qCAAqC,MACnC,QAAQ,QAAQ;AAAA,MACd,SAAS;AAAA,QACP,KAAK;AAAA,UACH,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,MACA,YAAY;AAAA,IACd,CAAC;AAAA,EACL;AAEA,WAAS,iBAAiB,IAAI,SAC5B,wCACF;AACA,WAAS,WAAW,IAAI,SACtB,+BACF;AACA,WAAS,WAAW,IAAI,SACtB,+BACF;AACA,WAAS,qBAAqB,IAAI,SAChC,kCACF;AACA,WAAS,aAAa,IAAI,SACxB,yBACF;AAEA,SAAO;AACT;","names":[]}

package/dist/internal/{shared/client → host/shared}/polyfill.d.ts

@@ -1,6 +1,7 @@
 import { ImageProps } from 'next/image';
+import { InternalResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
 
 declare function applyBundleUrlToImagePropsSrc(bundle: string, src: ImageProps['src']): string;
-declare function sharedPolyfills(shared?: Record<string, () => Promise<unknown>>): Record<string, () => Promise<unknown>>;
+declare function sharedPolyfills(shared?: Record<string, () => Promise<unknown>>, resolveClientUrl?: InternalResolveClientUrl): Record<string, () => Promise<unknown>>;
 
 export { applyBundleUrlToImagePropsSrc, sharedPolyfills };

package/dist/internal/{shared/client → host/shared}/polyfill.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { logWarn } from "../utils/logger";
+import { logWarn } from "#internal/utils/logger";
 function applyBundleUrlToSrc(bundle, src) {
   const self = globalThis;
   if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
@@ -18,7 +18,7 @@ function applyBundleUrlToImagePropsSrc(bundle, src) {
   const propSrc = src;
   return applyBundleUrlToSrc(bundle, propSrc.src);
 }
-const imageImpl = (bundle) => function RemoteImage({
+const imageImpl = (bundle, resolveClientUrl) => function RemoteImage({
   fill: _fill,
   loader: _loader,
   quality: _quality,
@@ -35,6 +35,7 @@ const imageImpl = (bundle) => function RemoteImage({
     bundle,
     typeof src === "string" ? src : src.src
   );
+  const proxiedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
   return (
     // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
     /* @__PURE__ */ jsx(
@@ -43,13 +44,13 @@ const imageImpl = (bundle) => function RemoteImage({
         decoding: "async",
         style: { color: "transparent" },
         ...props,
-        src: newSrc,
+        src: proxiedSrc,
         suppressHydrationWarning: true
       }
     )
   );
 };
-function sharedPolyfills(shared) {
+function sharedPolyfills(shared, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
     "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
@@ -140,11 +141,11 @@ function sharedPolyfills(shared) {
       __esModule: true
     })),
     "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      Image: imageImpl(bundle),
+      Image: imageImpl(bundle, resolveClientUrl),
       __esModule: true
     })),
     "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      default: imageImpl(bundle),
+      default: imageImpl(bundle, resolveClientUrl),
       getImageProps: (_imgProps) => {
         throw new Error(
           "Next.js getImageProps() is not implemented in remote components"

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/polyfill.tsx"],"sourcesContent":["import type { ImageProps, StaticImageData } from 'next/image';\nimport type { LinkProps } from 'next/link';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\nimport { logWarn } from '#internal/utils/logger';\n\nfunction applyBundleUrlToSrc(bundle: string, src: string) {\n  const self = globalThis as typeof globalThis & {\n    __remote_bundle_url__?: Record<string, URL>;\n  };\n\n  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {\n    return src;\n  }\n\n  const { assetPrefix, path } =\n    /^(?<assetPrefix>.*?)\\/_next\\/(?<path>.*)/.exec(src)?.groups ?? {};\n  if (!path) {\n    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;\n  }\n  return `${\n    self.__remote_bundle_url__?.[bundle]?.origin ?? ''\n  }${assetPrefix}/_next/${path}`;\n}\n\nexport function applyBundleUrlToImagePropsSrc(\n  bundle: string,\n  src: ImageProps['src'],\n) {\n  if (typeof src === 'string') {\n    return applyBundleUrlToSrc(bundle, src);\n  }\n  const propSrc = src as StaticImageData;\n  return applyBundleUrlToSrc(bundle, propSrc.src);\n}\n\nconst imageImpl = (\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) =>\n  function RemoteImage({\n    fill: _fill,\n    loader: _loader,\n    quality: _quality,\n    priority: _priority,\n    loading: _loading,\n    placeholder: _placeholder,\n    blurDataURL: _blurDataURL,\n    unoptimized: _unoptimized,\n    overrideSrc: _overrideSrc,\n    src,\n    ...props\n  }: ImageProps) {\n    const newSrc = applyBundleUrlToImagePropsSrc(\n      bundle,\n      typeof src === 'string' ? src : (src as StaticImageData).src,\n    );\n    const proxiedSrc = resolveClientUrl?.(newSrc) ?? newSrc;\n\n    return (\n      // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text\n      <img\n        decoding=\"async\"\n        style={{ color: 'transparent' }}\n        {...props}\n        src={proxiedSrc}\n        suppressHydrationWarning\n      />\n    );\n  };\n\n// polyfill Next.js App Router client API (minimal)\n// implementations are minimal and do not cover all use cases\n// developer can override these shared modules from configuration\nexport function sharedPolyfills(\n  shared?: Record<string, () => Promise<unknown>>,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  const self = globalThis as typeof globalThis & {\n    __remote_component_host_shared_modules__?: Record<\n      string,\n      () => Promise<unknown>\n    >;\n  };\n  const polyfill = {\n    'next/dist/client/components/navigation':\n      self.__remote_component_host_shared_modules__?.['next/navigation'] ??\n      shared?.['next/navigation'] ??\n      (() =>\n        Promise.resolve({\n          useRouter() {\n            return {\n              push: (routerUrl: string) => {\n                history.pushState({}, '', routerUrl);\n              },\n              replace: (routerUrl: string) => {\n                history.replaceState({}, '', routerUrl);\n              },\n              back: () => {\n                history.back();\n              },\n            };\n          },\n          usePathname() {\n            return location.pathname;\n          },\n          useParams() {\n            return {};\n          },\n          useSearchParams() {\n            return new URLSearchParams(location.search);\n          },\n          useSelectedLayoutSegment() {\n            return null;\n          },\n          useSelectedLayoutSegments() {\n            return [];\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/app-dir/link':\n      self.__remote_component_host_shared_modules__?.['next/link'] ??\n      shared?.['next/link'] ??\n      (() =>\n        Promise.resolve({\n          default: ({\n            scroll: _,\n            replace,\n            prefetch,\n            onNavigate,\n            children,\n            ...props\n          }: React.PropsWithChildren<LinkProps>) => {\n            if (prefetch) {\n              logWarn(\n                'Polyfill',\n                'Next.js Link prefetch is not supported in remote components',\n              );\n            }\n            return (\n              <a\n                {...props}\n                href={props.href as string}\n                onClick={(e) => {\n                  e.preventDefault();\n                  let preventDefaulted = false;\n                  e.preventDefault = () => {\n                    preventDefaulted = true;\n                    e.defaultPrevented = true;\n                  };\n                  if (typeof props.onClick === 'function') {\n                    props.onClick(e);\n                  }\n                  onNavigate?.(e);\n                  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n                  if (preventDefaulted) {\n                    return;\n                  }\n                  if (replace) {\n                    history.replaceState({}, '', props.href as string);\n                  } else {\n                    history.pushState({}, '', props.href as string);\n                  }\n                }}\n                suppressHydrationWarning\n              >\n                {children ?? null}\n              </a>\n            );\n          },\n          useLinkStatus() {\n            return { pending: false };\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/app-dir/form':\n      self.__remote_component_host_shared_modules__?.['next/form'] ??\n      shared?.['next/form'] ??\n      (() =>\n        Promise.resolve({\n          default: () => {\n            // TODO: implement <Form> component for non-Next.js host applications\n            throw new Error('Next.js <Form> component not implemented');\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/image-component':\n      self.__remote_component_host_shared_modules__?.['next/image'] ??\n      shared?.['next/image'] ??\n      ((bundle: string) =>\n        Promise.resolve({\n          Image: imageImpl(bundle, resolveClientUrl),\n          __esModule: true,\n        })),\n    'next/image':\n      self.__remote_component_host_shared_modules__?.['next/image'] ??\n      shared?.['next/image'] ??\n      ((bundle: string) =>\n        Promise.resolve({\n          default: imageImpl(bundle, resolveClientUrl),\n          getImageProps: (_imgProps: ImageProps) => {\n            throw new Error(\n              'Next.js getImageProps() is not implemented in remote components',\n            );\n          },\n          __esModule: true,\n        })),\n    'next/dist/client/script':\n      self.__remote_component_host_shared_modules__?.['next/script'] ??\n      shared?.['next/script'] ??\n      (() =>\n        Promise.resolve({\n          // TODO: implement <Script> component for non-Next.js host applications\n          // do not throw an error for now\n          default: () => null,\n          __esModule: true,\n        })),\n    'next/router':\n      self.__remote_component_host_shared_modules__?.['next/router'] ??\n      shared?.['next/router'] ??\n      (() =>\n        // TODO: incomplete implementation\n        Promise.resolve({\n          useRouter() {\n            return {\n              push: (routerUrl: string) => {\n                history.pushState({}, '', routerUrl);\n              },\n              replace: (routerUrl: string) => {\n                history.replaceState({}, '', routerUrl);\n              },\n              back: () => {\n                history.back();\n              },\n            };\n          },\n          __esModule: true,\n        })),\n    'next/dist/build/polyfills/process': () =>\n      Promise.resolve({\n        default: {\n          env: {\n            NODE_ENV: 'production',\n          },\n        },\n        __esModule: true,\n      }),\n  } as Record<string, () => Promise<unknown>>;\n\n  polyfill['next/navigation'] = polyfill[\n    'next/dist/client/components/navigation'\n  ] as () => Promise<unknown>;\n  polyfill['next/link'] = polyfill[\n    'next/dist/client/app-dir/link'\n  ] as () => Promise<unknown>;\n  polyfill['next/form'] = polyfill[\n    'next/dist/client/app-dir/form'\n  ] as () => Promise<unknown>;\n  polyfill['next/dist/api/image'] = polyfill[\n    'next/dist/client/image-component'\n  ] as () => Promise<unknown>;\n  polyfill['next/script'] = polyfill[\n    'next/dist/client/script'\n  ] as () => Promise<unknown>;\n\n  return polyfill;\n}\n"],"mappings":"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","names":[]}

package/dist/internal/host/shared/resolved-data.cjs

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var resolved_data_exports = {};
+module.exports = __toCommonJS(resolved_data_exports);
+//# sourceMappingURL=resolved-data.cjs.map

package/dist/internal/host/shared/resolved-data.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/resolved-data.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n  LinkDescriptor,\n  ScriptDescriptor,\n} from '#internal/host/shared/asset-descriptors';\nimport type { ShadowDomConfig } from '#internal/host/shared/config';\nimport type { RemoteComponentMetadata } from '#internal/runtime/metadata';\n\n/**\n * The subset of the remote component fetch response that the client-side\n * loader needs to hydrate or mount a remote component.\n *\n * Both {@link ConsumeRemoteComponentServerData} and {@link LoadRemoteComponentProps}\n * compose this interface — it is the shared base for the RSC→client handoff\n * and the loader function arguments.\n */\nexport interface RemoteComponentLoaderPayload {\n  name: string;\n  bundle: string;\n  route?: string;\n  runtime?: RemoteComponentMetadata['runtime'];\n  data: string[];\n  nextData?: {\n    props: { pageProps: Record<string, unknown> };\n    buildId?: string;\n  } | null;\n  scripts?: ScriptDescriptor[];\n  remoteShared?: Record<string, string>;\n}\n\n/**\n * Internal RSC→client handoff type for embedding a remote component.\n *\n * Combines the loader payload with Shadow DOM config and fields that are\n * only needed by the renderer (links, type) and host (src, serverUrl, children).\n * Produced by the server component, consumed by the client renderer.\n */\nexport interface ConsumeRemoteComponentServerData\n  extends RemoteComponentLoaderPayload,\n    ShadowDomConfig {\n  /** The src provided to the `<ConsumeRemoteComponent>` component, resolved to a string. */\n  src: string;\n  /** The src converted to a URL string. For relative URLs, the VERCEL_URL is used as the origin. */\n  serverUrl: string;\n  links?: LinkDescriptor[];\n  type?: RemoteComponentMetadata['type'];\n  children: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/internal/host/shared/resolved-data.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ScriptDescriptor, LinkDescriptor } from './asset-descriptors.js';
+import { ShadowDomConfig } from './config.js';
+import { RemoteComponentMetadata } from '../../runtime/metadata.js';
+import '../../runtime/url/resolve-client-url.js';
+import './fetch-interceptors.js';
+
+/**
+ * The subset of the remote component fetch response that the client-side
+ * loader needs to hydrate or mount a remote component.
+ *
+ * Both {@link ConsumeRemoteComponentServerData} and {@link LoadRemoteComponentProps}
+ * compose this interface — it is the shared base for the RSC→client handoff
+ * and the loader function arguments.
+ */
+interface RemoteComponentLoaderPayload {
+    name: string;
+    bundle: string;
+    route?: string;
+    runtime?: RemoteComponentMetadata['runtime'];
+    data: string[];
+    nextData?: {
+        props: {
+            pageProps: Record<string, unknown>;
+        };
+        buildId?: string;
+    } | null;
+    scripts?: ScriptDescriptor[];
+    remoteShared?: Record<string, string>;
+}
+/**
+ * Internal RSC→client handoff type for embedding a remote component.
+ *
+ * Combines the loader payload with Shadow DOM config and fields that are
+ * only needed by the renderer (links, type) and host (src, serverUrl, children).
+ * Produced by the server component, consumed by the client renderer.
+ */
+interface ConsumeRemoteComponentServerData extends RemoteComponentLoaderPayload, ShadowDomConfig {
+    /** The src provided to the `<ConsumeRemoteComponent>` component, resolved to a string. */
+    src: string;
+    /** The src converted to a URL string. For relative URLs, the VERCEL_URL is used as the origin. */
+    serverUrl: string;
+    links?: LinkDescriptor[];
+    type?: RemoteComponentMetadata['type'];
+    children: React.ReactNode;
+}
+
+export { ConsumeRemoteComponentServerData, RemoteComponentLoaderPayload };

package/dist/internal/host/shared/resolved-data.js

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

package/dist/internal/host/shared/resolved-data.js.map

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

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

@@ -16,14 +16,23 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var server_exports = {};
-__export(server_exports, {
-  RemoteComponent: () => import_render_server.RemoteComponent
+var state_exports = {};
+__export(state_exports, {
+  createHostState: () => createHostState
 });
-module.exports = __toCommonJS(server_exports);
-var import_render_server = require("#internal/next/remote/render-server");
+module.exports = __toCommonJS(state_exports);
+function createHostState() {
+  return {
+    stage: "idle",
+    prevSrc: void 0,
+    prevUrl: void 0,
+    prevName: void 0,
+    prevIsRemoteComponent: false,
+    abortController: void 0
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RemoteComponent
+  createHostState
 });
-//# sourceMappingURL=server.cjs.map
+//# sourceMappingURL=state.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/state.ts"],"sourcesContent":["/**\n * The lifecycle stages a host progresses through during a load cycle.\n *\n * ```\n *            ┌─────────────────────────┐\n *            │       (new load)        │\n *            ▼                         │\n * idle ──▶ loading ──▶ loaded ─────────┘\n *   ▲        │            │\n *   │        ▼            │ (new load)\n *   │      error ─────────┘\n *   │\n *   └── loading (abandoned / aborted)\n * ```\n *\n * - `idle`    — No load has started, or a previous load was abandoned.\n * - `loading` — A fetch or hydration is in progress.\n * - `loaded`  — The remote component rendered successfully.\n * - `error`   — The load failed (the error itself is surfaced separately).\n *\n * Any non-idle stage transitions directly to `loading` when a new load starts.\n */\nexport type HostStage = 'idle' | 'loading' | 'loaded' | 'error';\n\n/**\n * Mutable state shared by every host implementation (HTML, React, Next.js\n * App Router).\n *\n * Each host stores a single `HostState` instance rather than scattering\n * individual properties/refs. This keeps the \"what changed since the last\n * load?\" tracking consistent across frameworks and makes it easy to test\n * state transitions in isolation.\n */\nexport interface HostState {\n  /** Current lifecycle stage. */\n  stage: HostStage;\n\n  /** Source from the most-recent load. `undefined` before the first load. */\n  prevSrc: string | URL | undefined;\n\n  /** Resolved URL from the most-recent load. `undefined` before the first load. */\n  prevUrl: URL | undefined;\n\n  /** Component name from the most-recent load. `undefined` before the first load. */\n  prevName: string | undefined;\n\n  /** Whether the most-recent load was a remote component (vs. a plain page). */\n  prevIsRemoteComponent: boolean;\n\n  /**\n   * `AbortController` for the in-flight load. Abort it to cancel a\n   * superseded fetch. `undefined` when no load is active.\n   */\n  abortController: AbortController | undefined;\n}\n\n/** Creates a fresh `HostState` with all fields at their initial values. */\nexport function createHostState(): HostState {\n  return {\n    stage: 'idle',\n    prevSrc: undefined,\n    prevUrl: undefined,\n    prevName: undefined,\n    prevIsRemoteComponent: false,\n    abortController: undefined,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDO,SAAS,kBAA6B;AAC3C,SAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,uBAAuB;AAAA,IACvB,iBAAiB;AAAA,EACnB;AACF;","names":[]}

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

@@ -0,0 +1,53 @@
+/**
+ * The lifecycle stages a host progresses through during a load cycle.
+ *
+ * ```
+ *            ┌─────────────────────────┐
+ *            │       (new load)        │
+ *            ▼                         │
+ * idle ──▶ loading ──▶ loaded ─────────┘
+ *   ▲        │            │
+ *   │        ▼            │ (new load)
+ *   │      error ─────────┘
+ *   │
+ *   └── loading (abandoned / aborted)
+ * ```
+ *
+ * - `idle`    — No load has started, or a previous load was abandoned.
+ * - `loading` — A fetch or hydration is in progress.
+ * - `loaded`  — The remote component rendered successfully.
+ * - `error`   — The load failed (the error itself is surfaced separately).
+ *
+ * Any non-idle stage transitions directly to `loading` when a new load starts.
+ */
+type HostStage = 'idle' | 'loading' | 'loaded' | 'error';
+/**
+ * Mutable state shared by every host implementation (HTML, React, Next.js
+ * App Router).
+ *
+ * Each host stores a single `HostState` instance rather than scattering
+ * individual properties/refs. This keeps the "what changed since the last
+ * load?" tracking consistent across frameworks and makes it easy to test
+ * state transitions in isolation.
+ */
+interface HostState {
+    /** Current lifecycle stage. */
+    stage: HostStage;
+    /** Source from the most-recent load. `undefined` before the first load. */
+    prevSrc: string | URL | undefined;
+    /** Resolved URL from the most-recent load. `undefined` before the first load. */
+    prevUrl: URL | undefined;
+    /** Component name from the most-recent load. `undefined` before the first load. */
+    prevName: string | undefined;
+    /** Whether the most-recent load was a remote component (vs. a plain page). */
+    prevIsRemoteComponent: boolean;
+    /**
+     * `AbortController` for the in-flight load. Abort it to cancel a
+     * superseded fetch. `undefined` when no load is active.
+     */
+    abortController: AbortController | undefined;
+}
+/** Creates a fresh `HostState` with all fields at their initial values. */
+declare function createHostState(): HostState;
+
+export { HostStage, HostState, createHostState };

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

@@ -0,0 +1,14 @@
+function createHostState() {
+  return {
+    stage: "idle",
+    prevSrc: void 0,
+    prevUrl: void 0,
+    prevName: void 0,
+    prevIsRemoteComponent: false,
+    abortController: void 0
+  };
+}
+export {
+  createHostState
+};
+//# sourceMappingURL=state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/shared/state.ts"],"sourcesContent":["/**\n * The lifecycle stages a host progresses through during a load cycle.\n *\n * ```\n *            ┌─────────────────────────┐\n *            │       (new load)        │\n *            ▼                         │\n * idle ──▶ loading ──▶ loaded ─────────┘\n *   ▲        │            │\n *   │        ▼            │ (new load)\n *   │      error ─────────┘\n *   │\n *   └── loading (abandoned / aborted)\n * ```\n *\n * - `idle`    — No load has started, or a previous load was abandoned.\n * - `loading` — A fetch or hydration is in progress.\n * - `loaded`  — The remote component rendered successfully.\n * - `error`   — The load failed (the error itself is surfaced separately).\n *\n * Any non-idle stage transitions directly to `loading` when a new load starts.\n */\nexport type HostStage = 'idle' | 'loading' | 'loaded' | 'error';\n\n/**\n * Mutable state shared by every host implementation (HTML, React, Next.js\n * App Router).\n *\n * Each host stores a single `HostState` instance rather than scattering\n * individual properties/refs. This keeps the \"what changed since the last\n * load?\" tracking consistent across frameworks and makes it easy to test\n * state transitions in isolation.\n */\nexport interface HostState {\n  /** Current lifecycle stage. */\n  stage: HostStage;\n\n  /** Source from the most-recent load. `undefined` before the first load. */\n  prevSrc: string | URL | undefined;\n\n  /** Resolved URL from the most-recent load. `undefined` before the first load. */\n  prevUrl: URL | undefined;\n\n  /** Component name from the most-recent load. `undefined` before the first load. */\n  prevName: string | undefined;\n\n  /** Whether the most-recent load was a remote component (vs. a plain page). */\n  prevIsRemoteComponent: boolean;\n\n  /**\n   * `AbortController` for the in-flight load. Abort it to cancel a\n   * superseded fetch. `undefined` when no load is active.\n   */\n  abortController: AbortController | undefined;\n}\n\n/** Creates a fresh `HostState` with all fields at their initial values. */\nexport function createHostState(): HostState {\n  return {\n    stage: 'idle',\n    prevSrc: undefined,\n    prevUrl: undefined,\n    prevName: undefined,\n    prevIsRemoteComponent: false,\n    abortController: undefined,\n  };\n}\n"],"mappings":"AAyDO,SAAS,kBAA6B;AAC3C,SAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,uBAAuB;AAAA,IACvB,iBAAiB;AAAA,EACnB;AACF;","names":[]}

package/dist/internal/host/utils/resolve-name-from-src.cjs

@@ -0,0 +1,40 @@
+"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 resolve_name_from_src_exports = {};
+__export(resolve_name_from_src_exports, {
+  resolveNameFromSrc: () => resolveNameFromSrc
+});
+module.exports = __toCommonJS(resolve_name_from_src_exports);
+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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  resolveNameFromSrc
+});
+//# sourceMappingURL=resolve-name-from-src.cjs.map

package/dist/internal/host/utils/resolve-name-from-src.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/utils/resolve-name-from-src.ts"],"sourcesContent":["/**\n * Extracts a component name from the URL hash of `src`, falling back to\n * `defaultName` when no hash is present.\n *\n * Both the HTML and React hosts use this to derive the component name\n * from patterns like `/components/header#my-component`.\n *\n * Parses the hash directly from the string rather than constructing a\n * full `URL`, so no SSR fallback base is needed.\n */\nexport function resolveNameFromSrc(\n  src: string | URL | undefined,\n  defaultName: string,\n): string {\n  if (!src) {\n    return defaultName;\n  }\n\n  const hash = typeof src === 'string' ? src : src.hash;\n  const hashIndex = hash.indexOf('#');\n  if (hashIndex < 0) {\n    return defaultName;\n  }\n\n  const name = hash.slice(hashIndex + 1);\n  return name || defaultName;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,mBACd,KACA,aACQ;AACR,MAAI,CAAC,KAAK;AACR,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,OAAO,QAAQ,WAAW,MAAM,IAAI;AACjD,QAAM,YAAY,KAAK,QAAQ,GAAG;AAClC,MAAI,YAAY,GAAG;AACjB,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,KAAK,MAAM,YAAY,CAAC;AACrC,SAAO,QAAQ;AACjB;","names":[]}

package/dist/internal/host/utils/resolve-name-from-src.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Extracts a component name from the URL hash of `src`, falling back to
+ * `defaultName` when no hash is present.
+ *
+ * Both the HTML and React hosts use this to derive the component name
+ * from patterns like `/components/header#my-component`.
+ *
+ * Parses the hash directly from the string rather than constructing a
+ * full `URL`, so no SSR fallback base is needed.
+ */
+declare function resolveNameFromSrc(src: string | URL | undefined, defaultName: string): string;
+
+export { resolveNameFromSrc };

package/dist/internal/host/utils/resolve-name-from-src.js

@@ -0,0 +1,16 @@
+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;
+}
+export {
+  resolveNameFromSrc
+};
+//# sourceMappingURL=resolve-name-from-src.js.map

package/dist/internal/host/utils/resolve-name-from-src.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/host/utils/resolve-name-from-src.ts"],"sourcesContent":["/**\n * Extracts a component name from the URL hash of `src`, falling back to\n * `defaultName` when no hash is present.\n *\n * Both the HTML and React hosts use this to derive the component name\n * from patterns like `/components/header#my-component`.\n *\n * Parses the hash directly from the string rather than constructing a\n * full `URL`, so no SSR fallback base is needed.\n */\nexport function resolveNameFromSrc(\n  src: string | URL | undefined,\n  defaultName: string,\n): string {\n  if (!src) {\n    return defaultName;\n  }\n\n  const hash = typeof src === 'string' ? src : src.hash;\n  const hashIndex = hash.indexOf('#');\n  if (hashIndex < 0) {\n    return defaultName;\n  }\n\n  const name = hash.slice(hashIndex + 1);\n  return name || defaultName;\n}\n"],"mappings":"AAUO,SAAS,mBACd,KACA,aACQ;AACR,MAAI,CAAC,KAAK;AACR,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,OAAO,QAAQ,WAAW,MAAM,IAAI;AACjD,QAAM,YAAY,KAAK,QAAQ,GAAG;AAClC,MAAI,YAAY,GAAG;AACjB,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,KAAK,MAAM,YAAY,CAAC;AACrC,SAAO,QAAQ;AACjB;","names":[]}

package/dist/internal/{next/remote/render-client.cjs → remote/nextjs/app-client.cjs}

@@ -27,28 +27,28 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var render_client_exports = {};
-__export(render_client_exports, {
+var app_client_exports = {};
+__export(app_client_exports, {
   RemoteComponentSharedRemote: () => RemoteComponentSharedRemote,
   tryImportSharedPromise: () => tryImportSharedPromise
 });
-module.exports = __toCommonJS(render_client_exports);
+module.exports = __toCommonJS(app_client_exports);
 var import_jsx_runtime = (
   // render the shared module as a script tag
   require("react/jsx-runtime")
 );
 var import_react = require("react");
-var import_remote_component = require("#internal/shared/client/remote-component");
+var import_error = require("#internal/utils/error");
 async function tryImportShared() {
   try {
     const self = globalThis;
-    self.TURBOPACK_REMOTE_SHARED = await import("remote-components/shared/remote/app");
+    self.TURBOPACK_REMOTE_SHARED = await import("#remote-components/remote/defaults/app");
     const { shared } = self.TURBOPACK_REMOTE_SHARED;
     return shared;
   } catch {
     return {
       // eslint-disable-next-line camelcase
-      __remote_components_missing_shared__: "Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?"
+      __remote_components_missing_shared__: "Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponentsConfig` on both host and remote?"
     };
   }
 }
@@ -56,7 +56,7 @@ const tryImportSharedPromise = tryImportShared();
 function RemoteComponentSharedRemote({ name }) {
   const shared = (0, import_react.use)(tryImportSharedPromise);
   if ("__remote_components_missing_shared__" in shared) {
-    throw new import_remote_component.RemoteComponentsError(
+    throw new import_error.RemoteComponentsError(
       shared.__remote_components_missing_shared__
     );
   }
@@ -75,4 +75,4 @@ function RemoteComponentSharedRemote({ name }) {
   RemoteComponentSharedRemote,
   tryImportSharedPromise
 });
-//# sourceMappingURL=render-client.cjs.map
+//# sourceMappingURL=app-client.cjs.map

package/dist/internal/remote/nextjs/app-client.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/remote/nextjs/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\nimport { RemoteComponentsError } from '#internal/utils/error';\n\n// try to import the shared module from the remote application\n// use an empty object as a fallback if the import fails to avoid breaking the application\nasync function tryImportShared() {\n  try {\n    const self = globalThis as unknown as {\n      TURBOPACK_REMOTE_SHARED: { shared: Record<string, string> };\n    };\n    // this is a marker to find the shared module initializer in the Turbopack bundle\n    // DO NOT REMOVE\n    self.TURBOPACK_REMOTE_SHARED = await import(\n      '#remote-components/remote/defaults/app'\n    );\n    const { shared } = self.TURBOPACK_REMOTE_SHARED;\n    return shared;\n  } catch {\n    return {\n      // eslint-disable-next-line camelcase\n      __remote_components_missing_shared__:\n        'Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponentsConfig` on both host and remote?',\n    };\n  }\n}\n\n// create a promise singleton to import the shared module\nexport const tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\n  const shared = use(tryImportSharedPromise);\n\n  if ('__remote_components_missing_shared__' in shared) {\n    throw new RemoteComponentsError(\n      shared.__remote_components_missing_shared__,\n    );\n  }\n\n  return (\n    // render the shared module as a script tag\n    <script\n      data-remote-components-shared=\"\"\n      id={`${name}_shared`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(shared)}\n    </script>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CI;AAAA;AAAA;AAAA;AAxCJ,mBAAoB;AACpB,mBAAsC;AAItC,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,OAAO;AAKb,SAAK,0BAA0B,MAAM,OACnC,wCACF;AACA,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,WAAO;AAAA,EACT,QAAE;AACA,WAAO;AAAA;AAAA,MAEL,sCACE;AAAA,IACJ;AAAA,EACF;AACF;AAGO,MAAM,yBAAyB,gBAAgB;AAE/C,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE,QAAM,aAAS,kBAAI,sBAAsB;AAEzC,MAAI,0CAA0C,QAAQ;AACpD,UAAM,IAAI;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AAEA,SAEE;AAAA,IAAC;AAAA;AAAA,MACC,iCAA8B;AAAA,MAC9B,IAAI,GAAG;AAAA,MACP,MAAK;AAAA,MAEJ,eAAK,UAAU,MAAM;AAAA;AAAA,EACxB;AAEJ;","names":[]}