remote-components 0.2.2 → 0.3.0

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

@@ -65,9 +65,92 @@ __export(app_client_only_exports, {
   RemoteComponentsClientProvider: () => RemoteComponentsClientProvider
 });
 module.exports = __toCommonJS(app_client_only_exports);
-var Image = __toESM(require("next/image"), 1);
 var import_react5 = require("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
+var import_context3 = require("#internal/host/react/context");
+
+// src/host/react/index.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+var import_context2 = require("#internal/host/react/context");
+
 // src/utils/logger.ts
 init_constants();
 
@@ -214,58 +297,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
-var import_jsx_runtime = (
-  // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
-  require("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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "img",
-    {
-      decoding: "async",
-      style: { color: "transparent" },
-      ...props,
-      src: proxiedSrc,
-      suppressHydrationWarning: true
-    }
-  );
-};
+var import_jsx_runtime = require("react/jsx-runtime");
 function sharedPolyfills(shared2, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
@@ -356,17 +444,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({
@@ -406,111 +490,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
-var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(ImageComponent, { ...props, src });
-  };
-  component.default = component;
-  return component;
-}
-
-// src/host/nextjs/app-client-only.tsx
-var import_context3 = require("#internal/host/react/context");
-
-// src/host/react/index.tsx
-var import_react3 = require("react");
-var import_react_dom = require("react-dom");
-var import_context2 = require("#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 {
@@ -1989,40 +1973,10 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
 // src/host/react/hooks/use-resolve-client-url.ts
 var import_react = require("react");
 var import_context = require("#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 } = (0, import_context.useRemoteComponentsContext)();
   const raw = prop ?? contextValue;
-  const bound = (0, import_react.useMemo)(
-    () => bindResolveClientUrl(raw, urlHref),
-    [raw, urlHref]
-  );
-  return { bound, raw };
+  return (0, import_react.useMemo)(() => bindResolveClientUrl(raw, urlHref), [raw, urlHref]);
 }
 
 // src/host/react/hooks/use-shadow-root.ts
@@ -2097,7 +2051,7 @@ function getRemoteComponentHtml(html) {
 }
 
 // src/host/react/index.tsx
-var import_jsx_runtime3 = (
+var import_jsx_runtime2 = (
   // TODO: remove wrapper div by converting HTML to RSC or React tree
   require("react/jsx-runtime")
 );
@@ -2131,10 +2085,7 @@ function ConsumeRemoteComponent({
     null
   );
   const url = (0, import_react3.useMemo)(() => 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
@@ -2407,7 +2358,7 @@ function ConsumeRemoteComponent({
               onLoad?.(src);
             } else if (isolate === false) {
               setRemoteComponent(
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
                     dangerouslySetInnerHTML: { __html: component.innerHTML },
@@ -2520,13 +2471,13 @@ function ConsumeRemoteComponent({
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
   }
-  const metadataJson = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+  const metadataJson = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
+  const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react4.createElement)(
     "link",
     {
@@ -2535,7 +2486,7 @@ function ConsumeRemoteComponent({
       key: JSON.stringify(link)
     }
   )) || null;
-  const componentToRender = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+  const componentToRender = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     resetStyle,
     linksToRender,
     remoteComponent ?? children
@@ -2573,9 +2524,9 @@ function ConsumeRemoteComponent({
     if (shadowRemoteComponentHtml) {
       shadowRemoteComponentHtml.remove();
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
       metadataJson,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           "data-remote-component-id": `shadowroot_${keySuffix}`,
@@ -2584,8 +2535,8 @@ function ConsumeRemoteComponent({
           children: [
             typeof document === "undefined" ? (
               // eslint-disable-next-line react/no-unknown-property
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("template", { shadowrootmode: mode, children: [
-                typeof document === "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("template", { shadowrootmode: mode, children: [
+                typeof document === "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
                     dangerouslySetInnerHTML: {
@@ -2607,12 +2558,12 @@ function ConsumeRemoteComponent({
               ] })
             ) : null,
             shadowRoot && remoteComponent ? (0, import_react_dom.createPortal)(
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("template", { id: `${name}_start` }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_start` }),
                 resetStyle,
                 linksToRender,
                 remoteComponent,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
               ] }),
               shadowRoot
             ) : null
@@ -2622,11 +2573,11 @@ function ConsumeRemoteComponent({
     ] });
   }
   htmlRef.current = null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("template", { id: `${name}_start` }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_start` }),
     metadataJson,
     componentToRender,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
   ] });
 }
 
@@ -2695,25 +2646,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
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 async function tryImportShared() {
   try {
     const { shared: shared2 } = await Promise.resolve().then(() => (init_app(), app_exports));
@@ -2730,9 +2664,7 @@ var sharedModules = async (userShared, resolveClientUrl) => {
   return {
     ...resolvedShared,
     "next/router": routerImpl,
-    ...createNextImageSharedEntries(
-      (bundle) => imageImpl2(Image.default, bundle ?? "default", resolveClientUrl)
-    ),
+    ...createImageLoaderSharedEntries({ unbound: resolveClientUrl }),
     ...resolvedUserShared
   };
 };
@@ -2746,7 +2678,7 @@ function RemoteComponentsClientProvider({
     () => sharedModules(shared2, resolveClientUrl),
     [shared2, resolveClientUrl]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_context3.RemoteComponentsContext,
     {
       value: { shared: mergedShared, resolveClientUrl, ...props },
@@ -2758,7 +2690,7 @@ function ConsumeRemoteComponent2(props) {
   if (typeof props.src !== "string" && !(props.src instanceof URL)) {
     return props.children ?? null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     ConsumeRemoteComponent,
     {
       ...props,