remote-components 0.2.1 → 0.2.2

package/dist/internal/host/nextjs/image-impl.cjs

@@ -23,10 +23,11 @@ __export(image_impl_exports, {
 module.exports = __toCommonJS(image_impl_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_polyfill = require("#internal/host/shared/polyfill");
+const getBundleUrl = (bundle) => globalThis.__remote_bundle_url__?.[bundle];
 function createRemoteLoader(bundle, resolveClientUrl) {
   return ({ src, width, quality }) => {
-    const self = globalThis;
-    const origin = self.__remote_bundle_url__?.[bundle]?.origin ?? "";
+    const bundleUrl = getBundleUrl(bundle);
+    const origin = bundleUrl?.origin ?? "";
     let imageUrl = src;
     try {
       const parsed = new URL(src);
@@ -37,7 +38,8 @@ function createRemoteLoader(bundle, resolveClientUrl) {
     }
     const { assetPrefix } = /^(?<assetPrefix>.*?)\/_next\//.exec(imageUrl)?.groups ?? {};
     const url = `${origin}${assetPrefix ?? ""}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${quality ?? 75}`;
-    return resolveClientUrl?.(url) ?? url;
+    const remoteSrc = bundleUrl?.href ?? url;
+    return resolveClientUrl?.(remoteSrc, url) ?? url;
   };
 }
 function imageImpl(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
@@ -47,7 +49,9 @@ function imageImpl(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageComponent, { loader: remoteLoader, ...props });
     }
     const rawSrc = (0, import_polyfill.applyBundleUrlToImagePropsSrc)(bundle, props.src);
-    const src = resolveClientUrl?.(rawSrc) ?? rawSrc;
+    const bundleUrl = getBundleUrl(bundle);
+    const remoteSrc = bundleUrl?.href ?? rawSrc;
+    const src = resolveClientUrl?.(remoteSrc, rawSrc) ?? rawSrc;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageComponent, { ...props, src });
   };
   component.default = component;

package/dist/internal/host/nextjs/image-impl.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/nextjs/image-impl.tsx"],"sourcesContent":["import type {\n  default as ImageComponentType,\n  ImageLoaderProps,\n  ImageProps,\n} from 'next/image';\nimport { applyBundleUrlToImagePropsSrc } from '#internal/host/shared/polyfill';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nfunction createRemoteLoader(\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  return ({ src, width, quality }: ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const origin = self.__remote_bundle_url__?.[bundle]?.origin ?? '';\n\n    // Use a relative path when src is on the remote origin so the remote's\n    // /_next/image endpoint serves it locally — avoids requiring the remote's\n    // own origin in remotePatterns and works consistently across local/deployed.\n    // Relative paths (common from Next.js static imports) pass through as-is.\n    let imageUrl = src;\n    try {\n      const parsed = new URL(src);\n      if (origin && parsed.origin === origin) {\n        imageUrl = parsed.pathname + parsed.search;\n      }\n    } catch {\n      // src is already a relative path, use as-is\n    }\n\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(imageUrl)?.groups ?? {};\n    const url = `${origin}${assetPrefix ?? ''}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${\n      quality ?? 75\n    }`;\n    return resolveClientUrl?.(url) ?? url;\n  };\n}\n\nexport function imageImpl(\n  ImageComponent: typeof ImageComponentType,\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n  useRemoteLoader?: boolean,\n) {\n  const remoteLoader = useRemoteLoader\n    ? createRemoteLoader(bundle, resolveClientUrl)\n    : undefined;\n\n  const component = function RemoteImage(props: ImageProps) {\n    // When using remoteLoader, pass props.src unchanged — the loader receives\n    // the original value (relative path or StaticImageData string) and handles\n    // URL construction and proxying itself. This matches the original working\n    // pattern and avoids unnecessary absolute→relative round-trips.\n    // Without remoteLoader, rewrite src to point at the remote origin and proxy.\n    if (remoteLoader) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    const rawSrc = applyBundleUrlToImagePropsSrc(bundle, props.src);\n    const src = resolveClientUrl?.(rawSrc) ?? rawSrc;\n    return <ImageComponent {...props} src={src} />;\n  };\n  component.default = component;\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Da;AArDb,sBAA8C;AAG9C,SAAS,mBACP,QACA,kBACA;AACA,SAAO,CAAC,EAAE,KAAK,OAAO,QAAQ,MAAwB;AACpD,UAAM,OAAO;AAGb,UAAM,SAAS,KAAK,wBAAwB,MAAM,GAAG,UAAU;AAM/D,QAAI,WAAW;AACf,QAAI;AACF,YAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,UAAI,UAAU,OAAO,WAAW,QAAQ;AACtC,mBAAW,OAAO,WAAW,OAAO;AAAA,MACtC;AAAA,IACF,QAAE;AAAA,IAEF;AAEA,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,QAAQ,GAAG,UAAU,CAAC;AAC7D,UAAM,MAAM,GAAG,SAAS,eAAe,sBAAsB,mBAAmB,QAAQ,OAAO,WAC7F,WAAW;AAEb,WAAO,mBAAmB,GAAG,KAAK;AAAA,EACpC;AACF;AAEO,SAAS,UACd,gBACA,QACA,kBACA,iBACA;AACA,QAAM,eAAe,kBACjB,mBAAmB,QAAQ,gBAAgB,IAC3C;AAEJ,QAAM,YAAY,SAAS,YAAY,OAAmB;AAMxD,QAAI,cAAc;AAChB,aAAO,4CAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,UAAM,aAAS,+CAA8B,QAAQ,MAAM,GAAG;AAC9D,UAAM,MAAM,mBAAmB,MAAM,KAAK;AAC1C,WAAO,4CAAC,kBAAgB,GAAG,OAAO,KAAU;AAAA,EAC9C;AACA,YAAU,UAAU;AACpB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/host/nextjs/image-impl.tsx"],"sourcesContent":["import type {\n  default as ImageComponentType,\n  ImageLoaderProps,\n  ImageProps,\n} from 'next/image';\nimport { applyBundleUrlToImagePropsSrc } from '#internal/host/shared/polyfill';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nconst getBundleUrl = (bundle: string) =>\n  (\n    globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    }\n  ).__remote_bundle_url__?.[bundle];\n\nfunction createRemoteLoader(\n  bundle: string,\n  resolveClientUrl?: ResolveClientUrl,\n) {\n  return ({ src, width, quality }: ImageLoaderProps) => {\n    const bundleUrl = getBundleUrl(bundle);\n    const origin = bundleUrl?.origin ?? '';\n\n    // Use a relative path when src is on the remote origin so the remote's\n    // /_next/image endpoint serves it locally — avoids requiring the remote's\n    // own origin in remotePatterns and works consistently across local/deployed.\n    // Relative paths (common from Next.js static imports) pass through as-is.\n    let imageUrl = src;\n    try {\n      const parsed = new URL(src);\n      if (origin && parsed.origin === origin) {\n        imageUrl = parsed.pathname + parsed.search;\n      }\n    } catch {\n      // src is already a relative path, use as-is\n    }\n\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(imageUrl)?.groups ?? {};\n    const url = `${origin}${assetPrefix ?? ''}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${\n      quality ?? 75\n    }`;\n    const remoteSrc = bundleUrl?.href ?? url;\n    return resolveClientUrl?.(remoteSrc, url) ?? url;\n  };\n}\n\nexport function imageImpl(\n  ImageComponent: typeof ImageComponentType,\n  bundle: string,\n  resolveClientUrl?: ResolveClientUrl,\n  useRemoteLoader?: boolean,\n) {\n  const remoteLoader = useRemoteLoader\n    ? createRemoteLoader(bundle, resolveClientUrl)\n    : undefined;\n\n  const component = function RemoteImage(props: ImageProps) {\n    // When using remoteLoader, pass props.src unchanged — the loader receives\n    // the original value (relative path or StaticImageData string) and handles\n    // URL construction and proxying itself. This matches the original working\n    // pattern and avoids unnecessary absolute→relative round-trips.\n    // Without remoteLoader, rewrite src to point at the remote origin and proxy.\n    if (remoteLoader) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    const rawSrc = applyBundleUrlToImagePropsSrc(bundle, props.src);\n    const bundleUrl = getBundleUrl(bundle);\n    const remoteSrc = bundleUrl?.href ?? rawSrc;\n    const src = resolveClientUrl?.(remoteSrc, rawSrc) ?? rawSrc;\n    return <ImageComponent {...props} src={src} />;\n  };\n  component.default = component;\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgEa;AA3Db,sBAA8C;AAG9C,MAAM,eAAe,CAAC,WAElB,WAGA,wBAAwB,MAAM;AAElC,SAAS,mBACP,QACA,kBACA;AACA,SAAO,CAAC,EAAE,KAAK,OAAO,QAAQ,MAAwB;AACpD,UAAM,YAAY,aAAa,MAAM;AACrC,UAAM,SAAS,WAAW,UAAU;AAMpC,QAAI,WAAW;AACf,QAAI;AACF,YAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,UAAI,UAAU,OAAO,WAAW,QAAQ;AACtC,mBAAW,OAAO,WAAW,OAAO;AAAA,MACtC;AAAA,IACF,QAAE;AAAA,IAEF;AAEA,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,QAAQ,GAAG,UAAU,CAAC;AAC7D,UAAM,MAAM,GAAG,SAAS,eAAe,sBAAsB,mBAAmB,QAAQ,OAAO,WAC7F,WAAW;AAEb,UAAM,YAAY,WAAW,QAAQ;AACrC,WAAO,mBAAmB,WAAW,GAAG,KAAK;AAAA,EAC/C;AACF;AAEO,SAAS,UACd,gBACA,QACA,kBACA,iBACA;AACA,QAAM,eAAe,kBACjB,mBAAmB,QAAQ,gBAAgB,IAC3C;AAEJ,QAAM,YAAY,SAAS,YAAY,OAAmB;AAMxD,QAAI,cAAc;AAChB,aAAO,4CAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,UAAM,aAAS,+CAA8B,QAAQ,MAAM,GAAG;AAC9D,UAAM,YAAY,aAAa,MAAM;AACrC,UAAM,YAAY,WAAW,QAAQ;AACrC,UAAM,MAAM,mBAAmB,WAAW,MAAM,KAAK;AACrD,WAAO,4CAAC,kBAAgB,GAAG,OAAO,KAAU;AAAA,EAC9C;AACA,YAAU,UAAU;AACpB,SAAO;AACT;","names":[]}

package/dist/internal/host/nextjs/image-impl.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import ImageComponentType, { ImageProps } from 'next/image';
-import { InternalResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
+import { ResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
 
-declare function imageImpl(ImageComponent: typeof ImageComponentType, bundle: string, resolveClientUrl?: InternalResolveClientUrl, useRemoteLoader?: boolean): {
+declare function imageImpl(ImageComponent: typeof ImageComponentType, bundle: string, resolveClientUrl?: ResolveClientUrl, useRemoteLoader?: boolean): {
     (props: ImageProps): react_jsx_runtime.JSX.Element;
     default: /*elided*/ any;
 };

package/dist/internal/host/nextjs/image-impl.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { applyBundleUrlToImagePropsSrc } from "#internal/host/shared/polyfill";
+const getBundleUrl = (bundle) => globalThis.__remote_bundle_url__?.[bundle];
 function createRemoteLoader(bundle, resolveClientUrl) {
   return ({ src, width, quality }) => {
-    const self = globalThis;
-    const origin = self.__remote_bundle_url__?.[bundle]?.origin ?? "";
+    const bundleUrl = getBundleUrl(bundle);
+    const origin = bundleUrl?.origin ?? "";
     let imageUrl = src;
     try {
       const parsed = new URL(src);
@@ -14,7 +15,8 @@ function createRemoteLoader(bundle, resolveClientUrl) {
     }
     const { assetPrefix } = /^(?<assetPrefix>.*?)\/_next\//.exec(imageUrl)?.groups ?? {};
     const url = `${origin}${assetPrefix ?? ""}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${quality ?? 75}`;
-    return resolveClientUrl?.(url) ?? url;
+    const remoteSrc = bundleUrl?.href ?? url;
+    return resolveClientUrl?.(remoteSrc, url) ?? url;
   };
 }
 function imageImpl(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
@@ -24,7 +26,9 @@ function imageImpl(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
       return /* @__PURE__ */ jsx(ImageComponent, { loader: remoteLoader, ...props });
     }
     const rawSrc = applyBundleUrlToImagePropsSrc(bundle, props.src);
-    const src = resolveClientUrl?.(rawSrc) ?? rawSrc;
+    const bundleUrl = getBundleUrl(bundle);
+    const remoteSrc = bundleUrl?.href ?? rawSrc;
+    const src = resolveClientUrl?.(remoteSrc, rawSrc) ?? rawSrc;
     return /* @__PURE__ */ jsx(ImageComponent, { ...props, src });
   };
   component.default = component;

package/dist/internal/host/nextjs/image-impl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/nextjs/image-impl.tsx"],"sourcesContent":["import type {\n  default as ImageComponentType,\n  ImageLoaderProps,\n  ImageProps,\n} from 'next/image';\nimport { applyBundleUrlToImagePropsSrc } from '#internal/host/shared/polyfill';\nimport type { InternalResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nfunction createRemoteLoader(\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n) {\n  return ({ src, width, quality }: ImageLoaderProps) => {\n    const self = globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    };\n    const origin = self.__remote_bundle_url__?.[bundle]?.origin ?? '';\n\n    // Use a relative path when src is on the remote origin so the remote's\n    // /_next/image endpoint serves it locally — avoids requiring the remote's\n    // own origin in remotePatterns and works consistently across local/deployed.\n    // Relative paths (common from Next.js static imports) pass through as-is.\n    let imageUrl = src;\n    try {\n      const parsed = new URL(src);\n      if (origin && parsed.origin === origin) {\n        imageUrl = parsed.pathname + parsed.search;\n      }\n    } catch {\n      // src is already a relative path, use as-is\n    }\n\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(imageUrl)?.groups ?? {};\n    const url = `${origin}${assetPrefix ?? ''}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${\n      quality ?? 75\n    }`;\n    return resolveClientUrl?.(url) ?? url;\n  };\n}\n\nexport function imageImpl(\n  ImageComponent: typeof ImageComponentType,\n  bundle: string,\n  resolveClientUrl?: InternalResolveClientUrl,\n  useRemoteLoader?: boolean,\n) {\n  const remoteLoader = useRemoteLoader\n    ? createRemoteLoader(bundle, resolveClientUrl)\n    : undefined;\n\n  const component = function RemoteImage(props: ImageProps) {\n    // When using remoteLoader, pass props.src unchanged — the loader receives\n    // the original value (relative path or StaticImageData string) and handles\n    // URL construction and proxying itself. This matches the original working\n    // pattern and avoids unnecessary absolute→relative round-trips.\n    // Without remoteLoader, rewrite src to point at the remote origin and proxy.\n    if (remoteLoader) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    const rawSrc = applyBundleUrlToImagePropsSrc(bundle, props.src);\n    const src = resolveClientUrl?.(rawSrc) ?? rawSrc;\n    return <ImageComponent {...props} src={src} />;\n  };\n  component.default = component;\n  return component;\n}\n"],"mappings":"AA0Da;AArDb,SAAS,qCAAqC;AAG9C,SAAS,mBACP,QACA,kBACA;AACA,SAAO,CAAC,EAAE,KAAK,OAAO,QAAQ,MAAwB;AACpD,UAAM,OAAO;AAGb,UAAM,SAAS,KAAK,wBAAwB,MAAM,GAAG,UAAU;AAM/D,QAAI,WAAW;AACf,QAAI;AACF,YAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,UAAI,UAAU,OAAO,WAAW,QAAQ;AACtC,mBAAW,OAAO,WAAW,OAAO;AAAA,MACtC;AAAA,IACF,QAAE;AAAA,IAEF;AAEA,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,QAAQ,GAAG,UAAU,CAAC;AAC7D,UAAM,MAAM,GAAG,SAAS,eAAe,sBAAsB,mBAAmB,QAAQ,OAAO,WAC7F,WAAW;AAEb,WAAO,mBAAmB,GAAG,KAAK;AAAA,EACpC;AACF;AAEO,SAAS,UACd,gBACA,QACA,kBACA,iBACA;AACA,QAAM,eAAe,kBACjB,mBAAmB,QAAQ,gBAAgB,IAC3C;AAEJ,QAAM,YAAY,SAAS,YAAY,OAAmB;AAMxD,QAAI,cAAc;AAChB,aAAO,oBAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,UAAM,SAAS,8BAA8B,QAAQ,MAAM,GAAG;AAC9D,UAAM,MAAM,mBAAmB,MAAM,KAAK;AAC1C,WAAO,oBAAC,kBAAgB,GAAG,OAAO,KAAU;AAAA,EAC9C;AACA,YAAU,UAAU;AACpB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/host/nextjs/image-impl.tsx"],"sourcesContent":["import type {\n  default as ImageComponentType,\n  ImageLoaderProps,\n  ImageProps,\n} from 'next/image';\nimport { applyBundleUrlToImagePropsSrc } from '#internal/host/shared/polyfill';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nconst getBundleUrl = (bundle: string) =>\n  (\n    globalThis as typeof globalThis & {\n      __remote_bundle_url__?: Record<string, URL>;\n    }\n  ).__remote_bundle_url__?.[bundle];\n\nfunction createRemoteLoader(\n  bundle: string,\n  resolveClientUrl?: ResolveClientUrl,\n) {\n  return ({ src, width, quality }: ImageLoaderProps) => {\n    const bundleUrl = getBundleUrl(bundle);\n    const origin = bundleUrl?.origin ?? '';\n\n    // Use a relative path when src is on the remote origin so the remote's\n    // /_next/image endpoint serves it locally — avoids requiring the remote's\n    // own origin in remotePatterns and works consistently across local/deployed.\n    // Relative paths (common from Next.js static imports) pass through as-is.\n    let imageUrl = src;\n    try {\n      const parsed = new URL(src);\n      if (origin && parsed.origin === origin) {\n        imageUrl = parsed.pathname + parsed.search;\n      }\n    } catch {\n      // src is already a relative path, use as-is\n    }\n\n    const { assetPrefix } =\n      /^(?<assetPrefix>.*?)\\/_next\\//.exec(imageUrl)?.groups ?? {};\n    const url = `${origin}${assetPrefix ?? ''}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${\n      quality ?? 75\n    }`;\n    const remoteSrc = bundleUrl?.href ?? url;\n    return resolveClientUrl?.(remoteSrc, url) ?? url;\n  };\n}\n\nexport function imageImpl(\n  ImageComponent: typeof ImageComponentType,\n  bundle: string,\n  resolveClientUrl?: ResolveClientUrl,\n  useRemoteLoader?: boolean,\n) {\n  const remoteLoader = useRemoteLoader\n    ? createRemoteLoader(bundle, resolveClientUrl)\n    : undefined;\n\n  const component = function RemoteImage(props: ImageProps) {\n    // When using remoteLoader, pass props.src unchanged — the loader receives\n    // the original value (relative path or StaticImageData string) and handles\n    // URL construction and proxying itself. This matches the original working\n    // pattern and avoids unnecessary absolute→relative round-trips.\n    // Without remoteLoader, rewrite src to point at the remote origin and proxy.\n    if (remoteLoader) {\n      return <ImageComponent loader={remoteLoader} {...props} />;\n    }\n    const rawSrc = applyBundleUrlToImagePropsSrc(bundle, props.src);\n    const bundleUrl = getBundleUrl(bundle);\n    const remoteSrc = bundleUrl?.href ?? rawSrc;\n    const src = resolveClientUrl?.(remoteSrc, rawSrc) ?? rawSrc;\n    return <ImageComponent {...props} src={src} />;\n  };\n  component.default = component;\n  return component;\n}\n"],"mappings":"AAgEa;AA3Db,SAAS,qCAAqC;AAG9C,MAAM,eAAe,CAAC,WAElB,WAGA,wBAAwB,MAAM;AAElC,SAAS,mBACP,QACA,kBACA;AACA,SAAO,CAAC,EAAE,KAAK,OAAO,QAAQ,MAAwB;AACpD,UAAM,YAAY,aAAa,MAAM;AACrC,UAAM,SAAS,WAAW,UAAU;AAMpC,QAAI,WAAW;AACf,QAAI;AACF,YAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,UAAI,UAAU,OAAO,WAAW,QAAQ;AACtC,mBAAW,OAAO,WAAW,OAAO;AAAA,MACtC;AAAA,IACF,QAAE;AAAA,IAEF;AAEA,UAAM,EAAE,YAAY,IAClB,gCAAgC,KAAK,QAAQ,GAAG,UAAU,CAAC;AAC7D,UAAM,MAAM,GAAG,SAAS,eAAe,sBAAsB,mBAAmB,QAAQ,OAAO,WAC7F,WAAW;AAEb,UAAM,YAAY,WAAW,QAAQ;AACrC,WAAO,mBAAmB,WAAW,GAAG,KAAK;AAAA,EAC/C;AACF;AAEO,SAAS,UACd,gBACA,QACA,kBACA,iBACA;AACA,QAAM,eAAe,kBACjB,mBAAmB,QAAQ,gBAAgB,IAC3C;AAEJ,QAAM,YAAY,SAAS,YAAY,OAAmB;AAMxD,QAAI,cAAc;AAChB,aAAO,oBAAC,kBAAe,QAAQ,cAAe,GAAG,OAAO;AAAA,IAC1D;AACA,UAAM,SAAS,8BAA8B,QAAQ,MAAM,GAAG;AAC9D,UAAM,YAAY,aAAa,MAAM;AACrC,UAAM,YAAY,WAAW,QAAQ;AACrC,UAAM,MAAM,mBAAmB,WAAW,MAAM,KAAK;AACrD,WAAO,oBAAC,kBAAgB,GAAG,OAAO,KAAU;AAAA,EAC9C;AACA,YAAU,UAAU;AACpB,SAAO;AACT;","names":[]}

package/dist/internal/host/react/context.cjs

@@ -19,25 +19,20 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var context_exports = {};
 __export(context_exports, {
-  RemoteComponentsClientProvider: () => RemoteComponentsClientProvider,
+  RemoteComponentsContext: () => RemoteComponentsContext,
   useRemoteComponentsContext: () => useRemoteComponentsContext
 });
 module.exports = __toCommonJS(context_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-const RemoteComponentsContext = (0, import_react.createContext)({});
-function RemoteComponentsClientProvider({
-  resolveClientUrl,
-  children
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RemoteComponentsContext, { value: { resolveClientUrl }, children });
-}
+const RemoteComponentsContext = (0, import_react.createContext)(
+  {}
+);
 function useRemoteComponentsContext() {
   return (0, import_react.useContext)(RemoteComponentsContext);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RemoteComponentsClientProvider,
+  RemoteComponentsContext,
   useRemoteComponentsContext
 });
 //# sourceMappingURL=context.cjs.map

package/dist/internal/host/react/context.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/react/context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\ninterface RemoteComponentsContextValue {\n  resolveClientUrl?: ResolveClientUrl;\n}\n\nconst RemoteComponentsContext = createContext<RemoteComponentsContextValue>({});\n\n/**\n * Client-side context provider for passing `resolveClientUrl` to all nested\n * `<ConsumeRemoteComponent>` instances. Since `resolveClientUrl` is a function, it\n * can't be passed as a prop through Server Components — this provider should\n * wrap the tree in a Client Component boundary so the callback is available\n * on the client where asset fetches happen.\n */\nexport function RemoteComponentsClientProvider({\n  resolveClientUrl,\n  children,\n}: {\n  resolveClientUrl?: ResolveClientUrl;\n  children: React.ReactNode;\n}) {\n  return (\n    <RemoteComponentsContext value={{ resolveClientUrl }}>\n      {children}\n    </RemoteComponentsContext>\n  );\n}\n\nexport function useRemoteComponentsContext(): RemoteComponentsContextValue {\n  return useContext(RemoteComponentsContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BI;AAxBJ,mBAA0C;AAO1C,MAAM,8BAA0B,4BAA4C,CAAC,CAAC;AASvE,SAAS,+BAA+B;AAAA,EAC7C;AAAA,EACA;AACF,GAGG;AACD,SACE,4CAAC,2BAAwB,OAAO,EAAE,iBAAiB,GAChD,UACH;AAEJ;AAEO,SAAS,6BAA2D;AACzE,aAAO,yBAAW,uBAAuB;AAC3C;","names":[]}
+{"version":3,"sources":["../../../../src/host/react/context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { ConsumeClientOnlyConfig } from '#internal/host/shared/config';\n\nexport const RemoteComponentsContext = createContext<ConsumeClientOnlyConfig>(\n  {},\n);\n\nexport function useRemoteComponentsContext(): ConsumeClientOnlyConfig {\n  return useContext(RemoteComponentsContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA0C;AAGnC,MAAM,8BAA0B;AAAA,EACrC,CAAC;AACH;AAEO,SAAS,6BAAsD;AACpE,aAAO,yBAAW,uBAAuB;AAC3C;","names":[]}

package/dist/internal/host/react/context.d.ts

@@ -1,20 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ResolveClientUrl } from '../../runtime/url/resolve-client-url.js';
+import * as react from 'react';
+import { ConsumeClientOnlyConfig } from '../shared/config.js';
+import '../../runtime/url/resolve-client-url.js';
+import '../shared/fetch-interceptors.js';
 
-interface RemoteComponentsContextValue {
-    resolveClientUrl?: ResolveClientUrl;
-}
-/**
- * Client-side context provider for passing `resolveClientUrl` to all nested
- * `<ConsumeRemoteComponent>` instances. Since `resolveClientUrl` is a function, it
- * can't be passed as a prop through Server Components — this provider should
- * wrap the tree in a Client Component boundary so the callback is available
- * on the client where asset fetches happen.
- */
-declare function RemoteComponentsClientProvider({ resolveClientUrl, children, }: {
-    resolveClientUrl?: ResolveClientUrl;
-    children: React.ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare function useRemoteComponentsContext(): RemoteComponentsContextValue;
+declare const RemoteComponentsContext: react.Context<ConsumeClientOnlyConfig>;
+declare function useRemoteComponentsContext(): ConsumeClientOnlyConfig;
 
-export { RemoteComponentsClientProvider, useRemoteComponentsContext };
+export { RemoteComponentsContext, useRemoteComponentsContext };

package/dist/internal/host/react/context.js

@@ -1,18 +1,13 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-const RemoteComponentsContext = createContext({});
-function RemoteComponentsClientProvider({
-  resolveClientUrl,
-  children
-}) {
-  return /* @__PURE__ */ jsx(RemoteComponentsContext, { value: { resolveClientUrl }, children });
-}
+const RemoteComponentsContext = createContext(
+  {}
+);
 function useRemoteComponentsContext() {
   return useContext(RemoteComponentsContext);
 }
 export {
-  RemoteComponentsClientProvider,
+  RemoteComponentsContext,
   useRemoteComponentsContext
 };
 //# sourceMappingURL=context.js.map

package/dist/internal/host/react/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/host/react/context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\ninterface RemoteComponentsContextValue {\n  resolveClientUrl?: ResolveClientUrl;\n}\n\nconst RemoteComponentsContext = createContext<RemoteComponentsContextValue>({});\n\n/**\n * Client-side context provider for passing `resolveClientUrl` to all nested\n * `<ConsumeRemoteComponent>` instances. Since `resolveClientUrl` is a function, it\n * can't be passed as a prop through Server Components — this provider should\n * wrap the tree in a Client Component boundary so the callback is available\n * on the client where asset fetches happen.\n */\nexport function RemoteComponentsClientProvider({\n  resolveClientUrl,\n  children,\n}: {\n  resolveClientUrl?: ResolveClientUrl;\n  children: React.ReactNode;\n}) {\n  return (\n    <RemoteComponentsContext value={{ resolveClientUrl }}>\n      {children}\n    </RemoteComponentsContext>\n  );\n}\n\nexport function useRemoteComponentsContext(): RemoteComponentsContextValue {\n  return useContext(RemoteComponentsContext);\n}\n"],"mappings":";AA0BI;AAxBJ,SAAS,eAAe,kBAAkB;AAO1C,MAAM,0BAA0B,cAA4C,CAAC,CAAC;AASvE,SAAS,+BAA+B;AAAA,EAC7C;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,2BAAwB,OAAO,EAAE,iBAAiB,GAChD,UACH;AAEJ;AAEO,SAAS,6BAA2D;AACzE,SAAO,WAAW,uBAAuB;AAC3C;","names":[]}
+{"version":3,"sources":["../../../../src/host/react/context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { ConsumeClientOnlyConfig } from '#internal/host/shared/config';\n\nexport const RemoteComponentsContext = createContext<ConsumeClientOnlyConfig>(\n  {},\n);\n\nexport function useRemoteComponentsContext(): ConsumeClientOnlyConfig {\n  return useContext(RemoteComponentsContext);\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AAGnC,MAAM,0BAA0B;AAAA,EACrC,CAAC;AACH;AAEO,SAAS,6BAAsD;AACpE,SAAO,WAAW,uBAAuB;AAC3C;","names":[]}

package/dist/internal/host/react/hooks/use-resolve-client-url.cjs

@@ -26,11 +26,12 @@ var import_context = require("#internal/host/react/context");
 var import_default_resolve_client_url = require("#internal/runtime/url/default-resolve-client-url");
 function useResolveClientUrl(prop, urlHref) {
   const { resolveClientUrl: contextValue } = (0, import_context.useRemoteComponentsContext)();
-  const resolveClientUrl = prop ?? contextValue;
-  return (0, import_react.useMemo)(
-    () => (0, import_default_resolve_client_url.bindResolveClientUrl)(resolveClientUrl, urlHref),
-    [resolveClientUrl, urlHref]
+  const raw = prop ?? contextValue;
+  const bound = (0, import_react.useMemo)(
+    () => (0, import_default_resolve_client_url.bindResolveClientUrl)(raw, urlHref),
+    [raw, urlHref]
   );
+  return { bound, raw };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/internal/host/react/hooks/use-resolve-client-url.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/host/react/hooks/use-resolve-client-url.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useRemoteComponentsContext } from '#internal/host/react/context';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nexport function useResolveClientUrl(\n  prop: ResolveClientUrl | undefined,\n  urlHref: string,\n) {\n  const { resolveClientUrl: contextValue } = useRemoteComponentsContext();\n  const resolveClientUrl = prop ?? contextValue;\n  return useMemo(\n    () => bindResolveClientUrl(resolveClientUrl, urlHref),\n    [resolveClientUrl, urlHref],\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,qBAA2C;AAC3C,wCAAqC;AAG9B,SAAS,oBACd,MACA,SACA;AACA,QAAM,EAAE,kBAAkB,aAAa,QAAI,2CAA2B;AACtE,QAAM,mBAAmB,QAAQ;AACjC,aAAO;AAAA,IACL,UAAM,wDAAqB,kBAAkB,OAAO;AAAA,IACpD,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/host/react/hooks/use-resolve-client-url.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useRemoteComponentsContext } from '#internal/host/react/context';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nexport function useResolveClientUrl(\n  prop: ResolveClientUrl | undefined,\n  urlHref: string,\n) {\n  const { resolveClientUrl: contextValue } = useRemoteComponentsContext();\n  const raw = prop ?? contextValue;\n  const bound = useMemo(\n    () => bindResolveClientUrl(raw, urlHref),\n    [raw, urlHref],\n  );\n  return { bound, raw };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,qBAA2C;AAC3C,wCAAqC;AAG9B,SAAS,oBACd,MACA,SACA;AACA,QAAM,EAAE,kBAAkB,aAAa,QAAI,2CAA2B;AACtE,QAAM,MAAM,QAAQ;AACpB,QAAM,YAAQ;AAAA,IACZ,UAAM,wDAAqB,KAAK,OAAO;AAAA,IACvC,CAAC,KAAK,OAAO;AAAA,EACf;AACA,SAAO,EAAE,OAAO,IAAI;AACtB;","names":[]}

package/dist/internal/host/react/hooks/use-resolve-client-url.d.ts

@@ -1,5 +1,8 @@
 import { ResolveClientUrl, InternalResolveClientUrl } from '../../../runtime/url/resolve-client-url.js';
 
-declare function useResolveClientUrl(prop: ResolveClientUrl | undefined, urlHref: string): InternalResolveClientUrl | undefined;
+declare function useResolveClientUrl(prop: ResolveClientUrl | undefined, urlHref: string): {
+    bound: InternalResolveClientUrl | undefined;
+    raw: ResolveClientUrl | undefined;
+};
 
 export { useResolveClientUrl };

package/dist/internal/host/react/hooks/use-resolve-client-url.js

@@ -3,11 +3,12 @@ import { useRemoteComponentsContext } from "#internal/host/react/context";
 import { bindResolveClientUrl } from "#internal/runtime/url/default-resolve-client-url";
 function useResolveClientUrl(prop, urlHref) {
   const { resolveClientUrl: contextValue } = useRemoteComponentsContext();
-  const resolveClientUrl = prop ?? contextValue;
-  return useMemo(
-    () => bindResolveClientUrl(resolveClientUrl, urlHref),
-    [resolveClientUrl, urlHref]
+  const raw = prop ?? contextValue;
+  const bound = useMemo(
+    () => bindResolveClientUrl(raw, urlHref),
+    [raw, urlHref]
   );
+  return { bound, raw };
 }
 export {
   useResolveClientUrl

package/dist/internal/host/react/hooks/use-resolve-client-url.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/host/react/hooks/use-resolve-client-url.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useRemoteComponentsContext } from '#internal/host/react/context';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nexport function useResolveClientUrl(\n  prop: ResolveClientUrl | undefined,\n  urlHref: string,\n) {\n  const { resolveClientUrl: contextValue } = useRemoteComponentsContext();\n  const resolveClientUrl = prop ?? contextValue;\n  return useMemo(\n    () => bindResolveClientUrl(resolveClientUrl, urlHref),\n    [resolveClientUrl, urlHref],\n  );\n}\n"],"mappings":"AAAA,SAAS,eAAe;AACxB,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AAG9B,SAAS,oBACd,MACA,SACA;AACA,QAAM,EAAE,kBAAkB,aAAa,IAAI,2BAA2B;AACtE,QAAM,mBAAmB,QAAQ;AACjC,SAAO;AAAA,IACL,MAAM,qBAAqB,kBAAkB,OAAO;AAAA,IACpD,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/host/react/hooks/use-resolve-client-url.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useRemoteComponentsContext } from '#internal/host/react/context';\nimport { bindResolveClientUrl } from '#internal/runtime/url/default-resolve-client-url';\nimport type { ResolveClientUrl } from '#internal/runtime/url/resolve-client-url';\n\nexport function useResolveClientUrl(\n  prop: ResolveClientUrl | undefined,\n  urlHref: string,\n) {\n  const { resolveClientUrl: contextValue } = useRemoteComponentsContext();\n  const raw = prop ?? contextValue;\n  const bound = useMemo(\n    () => bindResolveClientUrl(raw, urlHref),\n    [raw, urlHref],\n  );\n  return { bound, raw };\n}\n"],"mappings":"AAAA,SAAS,eAAe;AACxB,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AAG9B,SAAS,oBACd,MACA,SACA;AACA,QAAM,EAAE,kBAAkB,aAAa,IAAI,2BAA2B;AACtE,QAAM,MAAM,QAAQ;AACpB,QAAM,QAAQ;AAAA,IACZ,MAAM,qBAAqB,KAAK,OAAO;AAAA,IACvC,CAAC,KAAK,OAAO;AAAA,EACf;AACA,SAAO,EAAE,OAAO,IAAI;AACtB;","names":[]}

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

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

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

@@ -50,6 +50,13 @@ interface ConsumeClientOnlyConfig {
      * or `undefined` to use the original URL.
      */
     resolveClientUrl?: ResolveClientUrl;
+    /**
+     * Shared module factories provided to the remote component's module system.
+     * Each key is a module specifier; the value is a factory function that returns
+     * the module. Since factories are functions, this can only be supplied from
+     * client-side code and cannot be passed through Server Component boundaries.
+     */
+    shared?: Promise<Record<string, (bundle?: string) => Promise<unknown>>> | Record<string, (bundle?: string) => Promise<unknown>>;
 }
 /**
  * Configuration accepted by client-side embed hosts (React host, Pages Router host,

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as react from 'react';
 import { ScriptDescriptor, LinkDescriptor } from './asset-descriptors.js';
 import { ShadowDomConfig } from './config.js';
 import { RemoteComponentMetadata } from '../../runtime/metadata.js';
@@ -42,7 +42,7 @@ interface ConsumeRemoteComponentServerData extends RemoteComponentLoaderPayload,
     serverUrl: string;
     links?: LinkDescriptor[];
     type?: RemoteComponentMetadata['type'];
-    children: React.ReactNode;
+    children: react.ReactNode;
 }
 
 export { ConsumeRemoteComponentServerData, RemoteComponentLoaderPayload };

package/dist/internal/runtime/loaders/component-loader.d.ts

@@ -1,5 +1,5 @@
 import { InternalResolveClientUrl } from '../url/resolve-client-url.js';
-import { a as ConsumeLoaderPayload } from '../../../server-handoff-8c89b856.js';
+import { a as ConsumeLoaderPayload } from '../../../server-handoff-ce13bebc.js';
 import { LoaderResult } from '../types.js';
 import 'react';
 import '../../host/shared/asset-descriptors.js';

package/dist/{server-handoff-8c89b856.d.ts → server-handoff-ce13bebc.d.ts}

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as react from 'react';
 import { ScriptDescriptor, LinkDescriptor } from './internal/host/shared/asset-descriptors.js';
 import { ShadowDomConfig } from './internal/host/shared/config.js';
 import { RemoteComponentMetadata } from './internal/runtime/metadata.js';
@@ -40,7 +40,7 @@ interface ConsumeServerData extends ConsumeLoaderPayload, ShadowDomConfig {
     serverUrl: string;
     links?: LinkDescriptor[];
     type?: RemoteComponentMetadata['type'];
-    children: React.ReactNode;
+    children: react.ReactNode;
 }
 
 export { ConsumeServerData as C, ConsumeLoaderPayload as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-components",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
   "description": "Compose remote components at runtime between microfrontends applications.",
   "keywords": [
@@ -94,11 +94,6 @@
       "require": "./dist/host/proxy/client.cjs",
       "default": "./dist/host/proxy/client.js"
     },
-    "./host/react/context": {
-      "import": "./dist/internal/host/react/context.js",
-      "require": "./dist/internal/host/react/context.cjs",
-      "default": "./dist/internal/host/react/context.js"
-    },
     "./remote/middleware": {
       "import": "./dist/remote/middleware.js",
       "require": "./dist/remote/middleware.cjs",
@@ -161,9 +156,6 @@
       "host/proxy/client": [
         "./dist/host/proxy/client.d.ts"
       ],
-      "host/react/context": [
-        "./dist/internal/host/react/context.d.ts"
-      ],
       "remote/middleware": [
         "./dist/remote/middleware.d.ts"
       ],