remote-components 0.2.1 → 0.3.0

package/dist/host/html.js

@@ -402,26 +402,40 @@ var init_next_client_pages_loader = __esm({
   }
 });
 
-// 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}`;
+  return self.__remote_bundle_url__?.[bundle]?.origin ?? "";
 }
-function applyBundleUrlToImagePropsSrc(bundle, src) {
-  if (typeof src === "string") {
-    return applyBundleUrlToSrc(bundle, src);
-  }
-  const propSrc = src;
-  return applyBundleUrlToSrc(bundle, propSrc.src);
+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;
 }
+var init_remote_image_loader = __esm({
+  "src/host/shared/remote-image-loader.ts"() {
+    "use strict";
+  }
+});
+
+// src/host/shared/polyfill.tsx
+import { jsx } from "react/jsx-runtime";
 function sharedPolyfills(shared, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
@@ -512,17 +526,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({
@@ -562,47 +572,15 @@ 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;
 }
-var imageImpl;
 var init_polyfill = __esm({
   "src/host/shared/polyfill.tsx"() {
     "use strict";
+    init_remote_image_loader();
     init_logger();
-    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
-          }
-        )
-      );
-    };
   }
 });