remote-components 0.2.2 → 0.3.0

package/dist/host/react.js

@@ -211,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 = {
@@ -353,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({
@@ -403,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;
 }
@@ -1915,11 +1888,7 @@ function bindResolveClientUrl(prop, remoteSrc) {
 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
@@ -2025,10 +1994,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