remote-components 0.2.2 → 0.3.0

package/dist/host/nextjs/app/client-only.js

@@ -37,9 +37,100 @@ var init_app = __esm({
 });
 
 // src/host/nextjs/app-client-only.tsx
-import * as Image from "next/image";
 import { useMemo as useMemo3 } from "react";
 
+// src/host/shared/remote-image-loader.ts
+function getRemoteBundleOrigin(bundle) {
+  const self = globalThis;
+  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/runtime/url/resolve-client-url.ts
+function withRemoteSrc(resolveClientUrl, remoteSrc) {
+  const remoteOrigin = parseOrigin(remoteSrc);
+  return (url) => {
+    const urlOrigin = parseOrigin(url);
+    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
+      return void 0;
+    }
+    return resolveClientUrl(remoteSrc, url);
+  };
+}
+function parseOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/runtime/url/default-resolve-client-url.ts
+function bindResolveClientUrl(prop, remoteSrc) {
+  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
+}
+
+// src/host/nextjs/image-shared.ts
+function resolveForBundle(unbound, bundle) {
+  if (!unbound)
+    return void 0;
+  const self = globalThis;
+  const remoteSrc = self.__remote_bundle_url__?.[bundle]?.href ?? "";
+  return bindResolveClientUrl(unbound, remoteSrc);
+}
+function createImageLoaderSharedEntries({
+  bound,
+  unbound
+} = {}) {
+  const entry = (bundle) => {
+    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);
+    return Promise.resolve({
+      default: createRemoteImageLoader(bundle, resolveClientUrl),
+      __esModule: true
+    });
+  };
+  return {
+    "next/dist/shared/lib/image-loader": entry,
+    "next/dist/esm/shared/lib/image-loader": entry
+  };
+}
+
+// src/host/nextjs/app-client-only.tsx
+import { RemoteComponentsContext } from "#internal/host/react/context";
+
+// src/host/react/index.tsx
+import {
+  startTransition,
+  useEffect,
+  useId,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { createPortal } from "react-dom";
+import { useRemoteComponentsContext as useRemoteComponentsContext2 } from "#internal/host/react/context";
+
 // src/utils/logger.ts
 init_constants();
 
@@ -186,58 +277,63 @@ function warnCrossOriginFetchError(logLocation, url) {
   }
 }
 
+// src/host/server/fetch-headers.ts
+function remoteFetchHeaders() {
+  return {
+    /**
+     * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
+     * If the remote component uses vercel deployment protection, ensure the host and remote vercel
+     * projects share a common automation bypass secret, and the shared secret is used as the
+     * VERCEL_AUTOMATION_BYPASS_SECRET env var in the host project.
+     */
+    ...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
+      "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
+    } : {},
+    Accept: "text/html"
+  };
+}
+
+// src/host/server/fetch-with-hooks.ts
+async function fetchWithWarning(url, init) {
+  try {
+    return await fetch(url, init);
+  } catch (error) {
+    warnCrossOriginFetchError("FetchRemoteComponent", url);
+    throw error;
+  }
+}
+async function fetchWithHooks(url, additionalInit, options = {}) {
+  const {
+    onRequest,
+    onResponse,
+    abortController = new AbortController()
+  } = options;
+  const signal = abortController.signal;
+  const hookOptions = {
+    signal,
+    abort: (reason) => abortController.abort(reason)
+  };
+  const init = {
+    method: "GET",
+    headers: remoteFetchHeaders(),
+    signal,
+    ...additionalInit
+  };
+  const res = await onRequest?.(url, init, hookOptions) ?? await fetchWithWarning(url, init);
+  return await onResponse?.(url, res, hookOptions) ?? res;
+}
+
+// src/host/server/get-client-or-server-url.ts
+function getClientOrServerUrl(src, serverFallback) {
+  const fallback = typeof location !== "undefined" ? location.href : serverFallback;
+  if (!src) {
+    return new URL(fallback);
+  }
+  return typeof src === "string" ? new URL(src, fallback) : src;
+}
+
 // src/host/shared/polyfill.tsx
 import { jsx } from "react/jsx-runtime";
-function applyBundleUrlToSrc(bundle, src) {
-  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
-      }
-    )
-  );
-};
 function sharedPolyfills(shared2, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
@@ -328,17 +424,13 @@ function sharedPolyfills(shared2, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared2?.["next/image"] ?? ((bundle) => Promise.resolve({
-      Image: imageImpl(bundle, resolveClientUrl),
-      __esModule: true
-    })),
-    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared2?.["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"] ?? shared2?.["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"] ?? shared2?.["next/script"] ?? (() => Promise.resolve({
@@ -378,119 +470,11 @@ function sharedPolyfills(shared2, 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;
 }
 
-// src/host/nextjs/image-impl.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var getBundleUrl = (bundle) => globalThis.__remote_bundle_url__?.[bundle];
-function createRemoteLoader(bundle, resolveClientUrl) {
-  return ({ src, width, quality }) => {
-    const bundleUrl = getBundleUrl(bundle);
-    const origin = bundleUrl?.origin ?? "";
-    let imageUrl = src;
-    try {
-      const parsed = new URL(src);
-      if (origin && parsed.origin === origin) {
-        imageUrl = parsed.pathname + parsed.search;
-      }
-    } catch {
-    }
-    const { assetPrefix } = /^(?<assetPrefix>.*?)\/_next\//.exec(imageUrl)?.groups ?? {};
-    const url = `${origin}${assetPrefix ?? ""}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${quality ?? 75}`;
-    const remoteSrc = bundleUrl?.href ?? url;
-    return resolveClientUrl?.(remoteSrc, url) ?? url;
-  };
-}
-function imageImpl2(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
-  const remoteLoader = useRemoteLoader ? createRemoteLoader(bundle, resolveClientUrl) : void 0;
-  const component = function RemoteImage(props) {
-    if (remoteLoader) {
-      return /* @__PURE__ */ jsx2(ImageComponent, { loader: remoteLoader, ...props });
-    }
-    const rawSrc = applyBundleUrlToImagePropsSrc(bundle, props.src);
-    const bundleUrl = getBundleUrl(bundle);
-    const remoteSrc = bundleUrl?.href ?? rawSrc;
-    const src = resolveClientUrl?.(remoteSrc, rawSrc) ?? rawSrc;
-    return /* @__PURE__ */ jsx2(ImageComponent, { ...props, src });
-  };
-  component.default = component;
-  return component;
-}
-
-// src/host/nextjs/app-client-only.tsx
-import { RemoteComponentsContext } from "#internal/host/react/context";
-
-// src/host/react/index.tsx
-import {
-  startTransition,
-  useEffect,
-  useId,
-  useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo2,
-  useRef as useRef2,
-  useState as useState2
-} from "react";
-import { createPortal } from "react-dom";
-import { useRemoteComponentsContext as useRemoteComponentsContext2 } from "#internal/host/react/context";
-
-// src/host/server/fetch-headers.ts
-function remoteFetchHeaders() {
-  return {
-    /**
-     * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
-     * If the remote component uses vercel deployment protection, ensure the host and remote vercel
-     * projects share a common automation bypass secret, and the shared secret is used as the
-     * VERCEL_AUTOMATION_BYPASS_SECRET env var in the host project.
-     */
-    ...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
-      "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
-    } : {},
-    Accept: "text/html"
-  };
-}
-
-// src/host/server/fetch-with-hooks.ts
-async function fetchWithWarning(url, init) {
-  try {
-    return await fetch(url, init);
-  } catch (error) {
-    warnCrossOriginFetchError("FetchRemoteComponent", url);
-    throw error;
-  }
-}
-async function fetchWithHooks(url, additionalInit, options = {}) {
-  const {
-    onRequest,
-    onResponse,
-    abortController = new AbortController()
-  } = options;
-  const signal = abortController.signal;
-  const hookOptions = {
-    signal,
-    abort: (reason) => abortController.abort(reason)
-  };
-  const init = {
-    method: "GET",
-    headers: remoteFetchHeaders(),
-    signal,
-    ...additionalInit
-  };
-  const res = await onRequest?.(url, init, hookOptions) ?? await fetchWithWarning(url, init);
-  return await onResponse?.(url, res, hookOptions) ?? res;
-}
-
-// src/host/server/get-client-or-server-url.ts
-function getClientOrServerUrl(src, serverFallback) {
-  const fallback = typeof location !== "undefined" ? location.href : serverFallback;
-  if (!src) {
-    return new URL(fallback);
-  }
-  return typeof src === "string" ? new URL(src, fallback) : src;
-}
-
 // src/host/shared/state.ts
 function createHostState() {
   return {
@@ -1969,40 +1953,10 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
 // src/host/react/hooks/use-resolve-client-url.ts
 import { useMemo } from "react";
 import { useRemoteComponentsContext } from "#internal/host/react/context";
-
-// src/runtime/url/resolve-client-url.ts
-function withRemoteSrc(resolveClientUrl, remoteSrc) {
-  const remoteOrigin = parseOrigin(remoteSrc);
-  return (url) => {
-    const urlOrigin = parseOrigin(url);
-    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
-      return void 0;
-    }
-    return resolveClientUrl(remoteSrc, url);
-  };
-}
-function parseOrigin(url) {
-  try {
-    return new URL(url).origin;
-  } catch {
-    return void 0;
-  }
-}
-
-// src/runtime/url/default-resolve-client-url.ts
-function bindResolveClientUrl(prop, remoteSrc) {
-  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
-}
-
-// src/host/react/hooks/use-resolve-client-url.ts
 function useResolveClientUrl(prop, urlHref) {
   const { resolveClientUrl: contextValue } = useRemoteComponentsContext();
   const raw = prop ?? contextValue;
-  const bound = useMemo(
-    () => bindResolveClientUrl(raw, urlHref),
-    [raw, urlHref]
-  );
-  return { bound, raw };
+  return useMemo(() => bindResolveClientUrl(raw, urlHref), [raw, urlHref]);
 }
 
 // src/host/react/hooks/use-shadow-root.ts
@@ -2077,7 +2031,7 @@ function getRemoteComponentHtml(html) {
 }
 
 // src/host/react/index.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 function ConsumeRemoteComponent({
   src,
@@ -2108,10 +2062,7 @@ function ConsumeRemoteComponent({
     null
   );
   const url = useMemo2(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
-  const { bound: resolveClientUrl } = useResolveClientUrl(
-    resolveClientUrlProp,
-    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
@@ -2385,7 +2336,7 @@ function ConsumeRemoteComponent({
             } else if (isolate === false) {
               setRemoteComponent(
                 // TODO: remove wrapper div by converting HTML to RSC or React tree
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx2(
                   "div",
                   {
                     dangerouslySetInnerHTML: { __html: component.innerHTML },
@@ -2498,13 +2449,13 @@ function ConsumeRemoteComponent({
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
   }
-  const metadataJson = /* @__PURE__ */ jsx3("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+  const metadataJson = /* @__PURE__ */ jsx2("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
     name: data?.name || name,
     bundle: data?.bundle || "default",
     route: data?.route || DEFAULT_ROUTE,
     runtime: hostStateRef.current.prevIsRemoteComponent ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
-  const resetStyle = reset ? /* @__PURE__ */ jsx3("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
+  const resetStyle = reset ? /* @__PURE__ */ jsx2("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement2(
     "link",
     {
@@ -2563,7 +2514,7 @@ function ConsumeRemoteComponent({
             typeof document === "undefined" ? (
               // eslint-disable-next-line react/no-unknown-property
               /* @__PURE__ */ jsxs("template", { shadowrootmode: mode, children: [
-                typeof document === "undefined" ? /* @__PURE__ */ jsx3(
+                typeof document === "undefined" ? /* @__PURE__ */ jsx2(
                   "div",
                   {
                     dangerouslySetInnerHTML: {
@@ -2586,11 +2537,11 @@ function ConsumeRemoteComponent({
             ) : null,
             shadowRoot && remoteComponent ? createPortal(
               /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx3("template", { id: `${name}_start` }),
+                /* @__PURE__ */ jsx2("template", { id: `${name}_start` }),
                 resetStyle,
                 linksToRender,
                 remoteComponent,
-                /* @__PURE__ */ jsx3("template", { id: `${name}_end`, ref: endTemplateRef })
+                /* @__PURE__ */ jsx2("template", { id: `${name}_end`, ref: endTemplateRef })
               ] }),
               shadowRoot
             ) : null
@@ -2601,10 +2552,10 @@ function ConsumeRemoteComponent({
   }
   htmlRef.current = null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3("template", { id: `${name}_start` }),
+    /* @__PURE__ */ jsx2("template", { id: `${name}_start` }),
     metadataJson,
     componentToRender,
-    /* @__PURE__ */ jsx3("template", { id: `${name}_end`, ref: endTemplateRef })
+    /* @__PURE__ */ jsx2("template", { id: `${name}_end`, ref: endTemplateRef })
   ] });
 }
 
@@ -2673,25 +2624,8 @@ var routerImpl = async () => {
   });
 };
 
-// src/host/nextjs/image-shared.ts
-function createNextImageSharedEntries(getWrappedImage, options) {
-  const entries = {
-    "next/image": (bundle) => Promise.resolve(getWrappedImage(bundle)),
-    "next/dist/client/image-component": (bundle) => Promise.resolve({
-      Image: getWrappedImage(bundle)
-    })
-  };
-  if (options?.getImageProps) {
-    entries["next/dist/api/image"] = (bundle) => Promise.resolve({
-      default: getWrappedImage(bundle),
-      getImageProps: options.getImageProps
-    });
-  }
-  return entries;
-}
-
 // src/host/nextjs/app-client-only.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 async function tryImportShared() {
   try {
     const { shared: shared2 } = await Promise.resolve().then(() => (init_app(), app_exports));
@@ -2708,9 +2642,7 @@ var sharedModules = async (userShared, resolveClientUrl) => {
   return {
     ...resolvedShared,
     "next/router": routerImpl,
-    ...createNextImageSharedEntries(
-      (bundle) => imageImpl2(Image.default, bundle ?? "default", resolveClientUrl)
-    ),
+    ...createImageLoaderSharedEntries({ unbound: resolveClientUrl }),
     ...resolvedUserShared
   };
 };
@@ -2724,7 +2656,7 @@ function RemoteComponentsClientProvider({
     () => sharedModules(shared2, resolveClientUrl),
     [shared2, resolveClientUrl]
   );
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     RemoteComponentsContext,
     {
       value: { shared: mergedShared, resolveClientUrl, ...props },
@@ -2736,7 +2668,7 @@ function ConsumeRemoteComponent2(props) {
   if (typeof props.src !== "string" && !(props.src instanceof URL)) {
     return props.children ?? null;
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     ConsumeRemoteComponent,
     {
       ...props,