remote-components 0.2.1 → 0.3.0

package/dist/host/react.d.ts

@@ -1,366 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-/**
- * Intercepts client-side URL resolution for remote component resources.
- * Called before each asset (script, stylesheet, chunk, module, image) is fetched.
- *
- * Return a new URL string to redirect the fetch (e.g., through a proxy),
- * or undefined to use the original URL.
- *
- * @param remoteSrc - The `src` of the remote component being loaded
- * @param url - The asset URL about to be fetched
- *
- * @example
- * // Proxy all assets from the remote's origin through the host
- * const resolveClientUrl = (remoteSrc, url) => {
- *   const remoteOrigin = new URL(remoteSrc).origin;
- *   const parsed = new URL(url);
- *   if (parsed.origin !== location.origin && parsed.origin === remoteOrigin) {
- *     return `/rc-fetch-protected-remote?url=${encodeURIComponent(url)}`;
- *   }
- * };
- */
-type ResolveClientUrl = (remoteSrc: string, url: string) => string | undefined;
-/**
- * Internal bound resolver — `ResolveClientUrl` with `remoteSrc` already applied.
- * Used by internal loaders that don't need to know the remote src.
- */
-type InternalResolveClientUrl = (url: string) => string | undefined;
-
-/**
- * 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.
- *
- * @example
- * // Abort on redirect
- * component.onResponse = (url, response, { signal, abort }) => {
- *   if (response.redirected) {
- *     abort();
- *   }
- * };
- *
- * @example
- * // Check if already aborted
- * component.onRequest = (url, init, { signal }) => {
- *   if (signal.aborted) return;
- *   // ...
- * };
- *
- * @example
- * // Pass signal to fetch or other APIs
- * component.onRequest = async (url, init, { signal }) => {
- *   const data = await fetch('/api/check', { signal });
- *   // ...
- * };
- */
-interface HookOptions {
-    /** Standard AbortSignal - can be passed to fetch and other Web APIs */
-    signal: AbortSignal;
-    /** Abort loading - prevents further processing and DOM attachment */
-    abort(reason?: unknown): void;
-}
-/**
- * Hook function that intercepts remote component fetch requests.
- * Can be used to modify request options, provide a custom response, inspect the request,
- * or abort loading.
- *
- * @param url - The URL being fetched
- * @param init - The fetch init options being used
- * @param options - Options object containing the abort signal
- * @returns Optional Response to use instead of fetching, or void/undefined to proceed with normal fetch
- *
- * @example
- * // Log all remote component requests
- * const onRequest = async (url, init, { abort }) => {
- *   console.log('Fetching remote component from:', url.href);
- * };
- *
- * @example
- * // Add custom headers
- * const onRequest = async (url, init) => {
- *   (init.headers as Headers).set('X-Custom-Header', 'value');
- * };
- *
- * @example
- * // Provide a cached response
- * const onRequest = async (url) => {
- *   const cached = cache.get(url.href);
- *   if (cached) {
- *     return new Response(cached);
- *   }
- * };
- *
- * @example
- * // Block certain domains
- * const onRequest = async (url, init, { abort }) => {
- *   if (isBlockedDomain(url)) {
- *     abort('Domain is blocked');
- *   }
- * };
- */
-type OnRequestHook = (url: URL, init: RequestInit, options: HookOptions) => Promise<Response | undefined> | Response | undefined;
-/**
- * Hook function that is called after a remote component fetch completes.
- * Can be used to inspect the response, check for redirects, transform the response,
- * or abort loading.
- *
- * @param url - The original URL that was requested
- * @param response - The Response object from the fetch
- * @param options - Options object containing the abort signal
- * @returns Optional Response to use instead of the original, or void/undefined to use the original response
- *
- * @example
- * // Check for redirects and abort
- * const onResponse = async (url, response, { abort }) => {
- *   if (response.redirected) {
- *     console.log(`Redirected from ${url.href} to ${response.url}`);
- *     abort();
- *   }
- * };
- *
- * @example
- * // Cache the response
- * const onResponse = async (url, response) => {
- *   const cloned = response.clone();
- *   cache.set(url.href, await cloned.text());
- * };
- *
- * @example
- * // Transform the response
- * const onResponse = async (url, response) => {
- *   const text = await response.text();
- *   const modified = text.replace(/foo/g, 'bar');
- *   return new Response(modified, response);
- * };
- *
- * @example
- * // Abort on redirect to legacy routes
- * const onResponse = async (url, response, { abort }) => {
- *   if (response.redirected && isLegacyRoute(response.url)) {
- *     window.location.href = toLegacyUrl(response.url);
- *     abort(); // Abort rendering - no flash!
- *   }
- * };
- */
-type OnResponseHook = (url: URL, response: Response, options: HookOptions) => Promise<Response | undefined> | Response | undefined;
-
-/**
- * Configuration for Shadow DOM isolation of a remote component.
- *
- * Used by both the public {@link ConsumeRemoteComponentConfig} (user-facing props) and
- * {@link ConsumeServerData} (internal runtime data) to control
- * whether and how the remote component is wrapped in a shadow root.
- */
-interface ShadowDomConfig {
-    /** Whether to isolate the remote component using a Shadow DOM wrapper. */
-    isolate?: boolean;
-    /** The Shadow DOM mode. Defaults to `'open'`. */
-    mode?: 'open' | 'closed';
-    /** Whether to include a CSS reset style in the Shadow DOM. Defaults to `false`. */
-    reset?: boolean;
-}
-/**
- * Configuration accepted by server-rendered embed hosts (e.g. the Next.js App Router
- * `<ConsumeRemoteComponent>`). This is the minimal, serializable subset — no client-side
- * asset fetching fields, no lifecycle callbacks.
- *
- * `src` is optional here because not every host has a source at construction
- * time (e.g. the React host during SSR hydration, or a `<remote-component>`
- * element before its `src` attribute is set). Frameworks that require `src`
- * narrow it to required in their own props type.
- */
-interface ConsumeServerConfig extends ShadowDomConfig {
-    /** The source URL of the remote component. Relative or absolute. */
-    src?: string | URL;
-    /** Selects a named remote component when multiple are exposed on a single page. */
-    name?: string;
-    /** Intercepts fetch requests before they are sent. */
-    onRequest?: OnRequestHook;
-    /** Inspects or transforms fetch responses after they arrive. */
-    onResponse?: OnResponseHook;
-}
-/**
- * Client-only configuration fields — the subset of {@link ConsumeClientConfig}
- * that applies only to client-side asset fetching. Used directly in contexts where
- * the full server config is already present (e.g. {@link ConsumeRemoteComponentClient}).
- */
-interface ConsumeClientOnlyConfig {
-    /** The credentials mode for the fetch request. Defaults to `'same-origin'`. */
-    credentials?: RequestCredentials;
-    /**
-     * Rewrites client-side asset URLs (scripts, stylesheets, chunks, modules, images).
-     * Return a new URL string to redirect the request (e.g. through a proxy),
-     * or `undefined` to use the original URL.
-     */
-    resolveClientUrl?: ResolveClientUrl;
-}
-/**
- * Configuration accepted by client-side embed hosts (React host, Pages Router host,
- * HTML host). Extends {@link ConsumeServerConfig} with fields for
- * client-side asset fetching (`credentials`, `resolveClientUrl`).
- */
-interface ConsumeClientConfig extends ConsumeServerConfig, ConsumeClientOnlyConfig {
-}
-/**
- * Complete configuration for client-side embed hosts (React host, Pages Router host).
- * Combines {@link ConsumeClientConfig} with {@link ConsumeLifecycleCallbacks}.
- *
- * This is the base type for public-facing props on hosts that fetch and mount
- * remote components on the client. The App Router server host uses only
- * {@link ConsumeServerConfig} since RSC cannot accept function callbacks.
- */
-interface ConsumeRemoteComponentConfig extends ConsumeClientConfig, ConsumeLifecycleCallbacks {
-}
-/** Information provided to the `onChange` lifecycle callback. */
-interface ChangeInfo {
-    previousSrc: string | URL | null;
-    nextSrc: string | URL | null;
-    previousName: string | undefined;
-    nextName: string | undefined;
-}
-/**
- * Lifecycle callbacks shared by host and remote component implementations.
- *
- * On the host side, these fire during client-side loading (the React host
- * exposes them as callback props; the HTML host dispatches DOM events).
- * On the remote side (Next.js `<ExposeRemoteComponent>` wrapper), the callbacks
- * are forwarded as `data-on-*` attributes so the host can wire them up.
- *
- * Server-only components (e.g. Next.js App Router server host) do not
- * support these callbacks since they render once on the server.
- */
-interface ConsumeLifecycleCallbacks {
-    /** Called right before a new remote component load starts. */
-    onBeforeLoad?: (src: string | URL) => void;
-    /** Called when the remote component has been successfully loaded and mounted. */
-    onLoad?: (src: string | URL) => void;
-    /** Called when an error occurs while loading or mounting the remote component. */
-    onError?: (error: unknown) => void;
-    /** Called when a different remote component is loaded into the same wrapper. */
-    onChange?: (info: ChangeInfo) => void;
-}
-
-/**
- * Metadata embedded in the HTML response by a remote application.
- *
- * Extracted from a `<script type="application/json" data-remote-component>`
- * element during both SSR parsing ({@link fetchRemoteComponent}) and
- * client-side parsing ({@link parseRemoteComponentDocument}).
- */
-interface RemoteComponentMetadata {
-    bundle: string;
-    route: string;
-    runtime: 'webpack' | 'turbopack' | 'script';
-    id: string;
-    type: 'nextjs' | 'remote-component' | 'unknown';
-}
-
-/**
- * Serialized descriptor for a `<script>` element extracted from a remote
- * component response. Used in both SSR fetch results and client-side props.
- */
-interface ScriptDescriptor {
-    /** The script `src` URL. Empty string for inline scripts. */
-    src: string;
-    /** Inline script content (only present for scripts without a `src`). */
-    textContent?: string;
-}
-
-/**
- * The subset of the remote component fetch response that the client-side
- * loader needs to hydrate or mount a remote component.
- *
- * Both {@link ConsumeServerData} and {@link ConsumeLoaderProps}
- * compose this interface — it is the shared base for the RSC→client handoff
- * and the loader function arguments.
- */
-interface ConsumeLoaderPayload {
-    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>;
-}
-
-/**
- * Props accepted by {@link loadRemoteComponent}.
- *
- * Extends {@link ConsumeLoaderPayload} (the SSR-resolved fields needed for
- * hydration) with loader-specific fields (`url`, `shared`, `container`, etc.).
- * `remoteShared` is narrowed from optional to required (defaults to `{}` at
- * the call site).
- */
-interface ConsumeLoaderProps extends ConsumeLoaderPayload {
-    url: URL;
-    shared: Promise<Record<string, (bundle?: string) => Promise<unknown>>> | Record<string, (bundle?: string) => Promise<unknown>>;
-    remoteShared: Record<string, string>;
-    container?: HTMLHeadElement | ShadowRoot | null;
-    rscName?: string;
-    resolveClientUrl?: InternalResolveClientUrl;
-}
-
-/**
- * Props for the React remote component host.
- *
- * Extends {@link ConsumeRemoteComponentConfig} with `shared` for module sharing and
- * `children` for loading fallback content.
- */
-interface ConsumeRemoteComponentProps extends ConsumeRemoteComponentConfig {
-    /** Shared modules to include in the remote component's context. */
-    shared?: ConsumeLoaderProps['shared'];
-    /** Loading fallback content displayed while the remote component is being fetched. */
-    children?: React.ReactNode;
-}
-/**
- * ConsumeRemoteComponent is a React component that fetches and renders a remote component.
- * It supports SSR and can isolate the remote component in a shadow DOM.
- *
- * @param props - The properties for the remote component.
- * @returns A React component that renders the remote component.
- *
- * @example
- *
- * Use the `<ConsumeRemoteComponent>` in your React application to consume a remote component from a remote application:
- *
- * ```tsx
- * import { ConsumeRemoteComponent } from 'remote-components/host/react';
- *
- * export default function App() {
- *  return (
- *    <>
- *      <h1>Welcome to My App</h1>
- *      <p>This page consumes a remote component from another application.</p>
- *      <ConsumeRemoteComponent src="/nextjs-app-remote/components/header" />
- *    </>
- *  );
- * }
- * ```
- *
- * To share modules, you can provide a shared module map with references to the shared modules:
- *
- * ```tsx
- * <ConsumeRemoteComponent
- *   src="/nextjs-app-remote/components/header"
- *   shared={{
- *     '@/components/provider': () => import('@/components/host-provider')
- *   }}
- * />
- * ```
- */
-declare function ConsumeRemoteComponent({ src, isolate, mode, reset, credentials, name: nameProp, shared, children, onBeforeLoad, onLoad, onError, onChange, onRequest, onResponse, resolveClientUrl: _resolveClientUrl, }: ConsumeRemoteComponentProps): react_jsx_runtime.JSX.Element;
-
-export { ConsumeRemoteComponent, ConsumeRemoteComponentProps, HookOptions, OnRequestHook, OnResponseHook };
+import 'react/jsx-runtime';
+export { b as ConsumeRemoteComponent, a as ConsumeRemoteComponentProps, H as HookOptions, O as OnRequestHook, c as OnResponseHook } from '../index-4c65355c.js';

package/dist/host/react.js

@@ -9,6 +9,7 @@ import {
   useState as useState2
 } from "react";
 import { createPortal } from "react-dom";
+import { useRemoteComponentsContext as useRemoteComponentsContext2 } from "#internal/host/react/context";
 
 // src/utils/constants.ts
 var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
@@ -210,58 +211,35 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
-// src/host/shared/polyfill.tsx
-import { jsx } from "react/jsx-runtime";
-function applyBundleUrlToSrc(bundle, src) {
+// src/host/shared/remote-image-loader.ts
+function getRemoteBundleOrigin(bundle) {
   const self = globalThis;
-  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
-    return src;
-  }
-  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
-  if (!path) {
-    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
-  }
-  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
-}
-function applyBundleUrlToImagePropsSrc(bundle, src) {
-  if (typeof src === "string") {
-    return applyBundleUrlToSrc(bundle, src);
-  }
-  const propSrc = src;
-  return applyBundleUrlToSrc(bundle, propSrc.src);
-}
-var imageImpl = (bundle, resolveClientUrl) => function RemoteImage({
-  fill: _fill,
-  loader: _loader,
-  quality: _quality,
-  priority: _priority,
-  loading: _loading,
-  placeholder: _placeholder,
-  blurDataURL: _blurDataURL,
-  unoptimized: _unoptimized,
-  overrideSrc: _overrideSrc,
-  src,
-  ...props
-}) {
-  const newSrc = applyBundleUrlToImagePropsSrc(
-    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(
-      "img",
-      {
-        decoding: "async",
-        style: { color: "transparent" },
-        ...props,
-        src: proxiedSrc,
-        suppressHydrationWarning: true
-      }
-    )
+  return self.__remote_bundle_url__?.[bundle]?.origin ?? "";
+}
+function createRemoteImageLoader(bundle, resolveClientUrl) {
+  const loader = Object.assign(
+    ({
+      config,
+      src,
+      width,
+      quality
+    }) => {
+      const q = quality ?? 75;
+      const remoteOrigin = getRemoteBundleOrigin(bundle);
+      const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;
+      const basePath = isCrossOrigin ? `${remoteOrigin}${config.path ?? "/_next/image"}` : config.path ?? `${remoteOrigin}/_next/image`;
+      const url = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
+      return resolveClientUrl?.(url) ?? url;
+    },
+    // Signals to getImgProps that this is a default loader (not a user-defined
+    // one), enabling srcSet generation with device/image sizes from the config.
+    { __next_img_default: true }
   );
-};
+  return loader;
+}
+
+// src/host/shared/polyfill.tsx
+import { jsx } from "react/jsx-runtime";
 function sharedPolyfills(shared, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
@@ -352,17 +330,13 @@ function sharedPolyfills(shared, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      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, resolveClientUrl),
-      getImageProps: (_imgProps) => {
-        throw new Error(
-          "Next.js getImageProps() is not implemented in remote components"
-        );
-      },
+    // Instead of replacing next/image entirely, we let the real Next.js Image
+    // component load from the remote bundle and only replace its default loader.
+    // This gives us full next/image fidelity (fill, priority, srcSet, blur
+    // placeholders, error handling) while routing image optimization through the
+    // remote app's /_next/image endpoint.
+    "next/dist/shared/lib/image-loader": self.__remote_component_host_shared_modules__?.["next/dist/shared/lib/image-loader"] ?? shared?.["next/dist/shared/lib/image-loader"] ?? ((bundle) => Promise.resolve({
+      default: createRemoteImageLoader(bundle, resolveClientUrl),
       __esModule: true
     })),
     "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
@@ -402,7 +376,7 @@ function sharedPolyfills(shared, resolveClientUrl) {
   polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
   polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
   polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
-  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/dist/esm/shared/lib/image-loader"] = polyfill["next/dist/shared/lib/image-loader"];
   polyfill["next/script"] = polyfill["next/dist/client/script"];
   return polyfill;
 }
@@ -1913,11 +1887,8 @@ function bindResolveClientUrl(prop, remoteSrc) {
 // src/host/react/hooks/use-resolve-client-url.ts
 function useResolveClientUrl(prop, urlHref) {
   const { resolveClientUrl: contextValue } = useRemoteComponentsContext();
-  const resolveClientUrl = prop ?? contextValue;
-  return useMemo(
-    () => bindResolveClientUrl(resolveClientUrl, urlHref),
-    [resolveClientUrl, urlHref]
-  );
+  const raw = prop ?? contextValue;
+  return useMemo(() => bindResolveClientUrl(raw, urlHref), [raw, urlHref]);
 }
 
 // src/host/react/hooks/use-shadow-root.ts
@@ -1999,9 +1970,9 @@ function ConsumeRemoteComponent({
   isolate,
   mode = "open",
   reset,
-  credentials = "same-origin",
+  credentials: credentialsProp,
   name: nameProp = "__vercel_remote_component",
-  shared = {},
+  shared: sharedProp,
   children,
   onBeforeLoad,
   onLoad,
@@ -2009,9 +1980,12 @@ function ConsumeRemoteComponent({
   onChange,
   onRequest,
   onResponse,
-  resolveClientUrl: _resolveClientUrl
+  resolveClientUrl: resolveClientUrlProp
 }) {
   const instanceId = useId();
+  const { credentials: contextCredentials, shared: contextShared } = useRemoteComponentsContext2();
+  const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
+  const shared = sharedProp ?? contextShared ?? {};
   const name = useMemo2(
     () => resolveNameFromSrc(src, nameProp),
     [src, nameProp]
@@ -2020,7 +1994,7 @@ function ConsumeRemoteComponent({
     null
   );
   const url = useMemo2(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
-  const resolveClientUrl = useResolveClientUrl(_resolveClientUrl, url.href);
+  const resolveClientUrl = useResolveClientUrl(resolveClientUrlProp, url.href);
   const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
   const keySuffix = `${escapeString(id)}_${escapeString(
     data?.name ?? name