remote-components 0.2.2 → 0.3.1

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 {
@@ -530,12 +514,12 @@ var attrToProp = {
 };
 
 // src/runtime/constants.ts
+var DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
+var DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
 var DEFAULT_ROUTE = "/";
 var RUNTIME_WEBPACK = "webpack";
 var RUNTIME_TURBOPACK = "turbopack";
 var RUNTIME_SCRIPT = "script";
-var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
 function getBundleKey(bundle) {
   return escapeString(bundle);
 }
@@ -602,6 +586,38 @@ function applyOriginToNodes(doc, url, resolveClientUrl) {
   }
 }
 
+// src/runtime/metadata.ts
+var VALID_RUNTIMES = /* @__PURE__ */ new Set(["webpack", "turbopack", "script"]);
+var VALID_TYPES = /* @__PURE__ */ new Set([
+  "nextjs",
+  "remote-component",
+  "unknown"
+]);
+function isRuntime(value) {
+  return VALID_RUNTIMES.has(value);
+}
+function isComponentType(value) {
+  return VALID_TYPES.has(value);
+}
+function toRuntime(value) {
+  return value && isRuntime(value) ? value : "webpack";
+}
+function toComponentType(value) {
+  return value && isComponentType(value) ? value : "unknown";
+}
+function buildMetadata(attrs, url) {
+  const id = attrs.id || DEFAULT_COMPONENT_NAME;
+  const bundle = attrs.bundle || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || DEFAULT_BUNDLE_NAME;
+  return {
+    name: attrs.name || id.replace(/_ssr$/, ""),
+    bundle,
+    route: attrs.route || url.pathname || DEFAULT_ROUTE,
+    runtime: toRuntime(attrs.runtime),
+    id,
+    type: toComponentType(attrs.type)
+  };
+}
+
 // src/runtime/html/parse-remote-html.ts
 function validateSingleComponent(doc, name, url) {
   if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
@@ -621,14 +637,6 @@ function resolveComponentName(component, nextData, fallbackName) {
   const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
   return { name, isRemoteComponent };
 }
-function extractComponentMetadata(component, nextData, name, url) {
-  return {
-    name,
-    bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default",
-    route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
-    runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
-  };
-}
 function extractRemoteShared(doc, name, nextData) {
   const remoteSharedEl = doc.querySelector(
     `#${name}_shared[data-remote-components-shared]`
@@ -640,7 +648,7 @@ function extractRemoteShared(doc, name, nextData) {
 function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
   if (!component || !(rsc || nextData || isRemoteComponent)) {
     throw new RemoteComponentsError(
-      `Remote Component not found on ${url}.${name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+      `Remote Component not found on ${url}.${name !== DEFAULT_COMPONENT_NAME ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
     );
   }
 }
@@ -666,10 +674,15 @@ function parseRemoteComponentDocument(doc, name, url) {
     name
   );
   const rsc = doc.querySelector(`#${resolvedName}_rsc`);
-  const metadata = extractComponentMetadata(
-    component,
-    nextData,
-    resolvedName,
+  const metadata = buildMetadata(
+    {
+      name: resolvedName,
+      bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle,
+      route: component?.getAttribute("data-route") ?? nextData?.page,
+      runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? RUNTIME_SCRIPT,
+      id: component?.getAttribute("id"),
+      type: component?.getAttribute("data-type")
+    },
     url
   );
   const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
@@ -985,6 +998,14 @@ function createRSCStream(rscName, data) {
   });
 }
 
+// src/runtime/patterns.ts
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
+var DOUBLE_SLASH_RE = /(?<!:)\/\//g;
+function collapseDoubleSlashes(path) {
+  return path.replace(DOUBLE_SLASH_RE, "/");
+}
+
 // src/runtime/turbopack/patterns.ts
 var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
 var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|[a-z])\.A\((?<sharedModuleId>[0-9]+)\)/;
@@ -1574,7 +1595,7 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
     }
   }
   if (runtime === RUNTIME_TURBOPACK) {
-    await Promise.all(
+    const results = await Promise.allSettled(
       scripts.map((script) => {
         if (script.src) {
           return self.__webpack_chunk_load__?.(script.src, bundle);
@@ -1582,6 +1603,14 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
         return Promise.resolve(void 0);
       })
     );
+    for (const result of results) {
+      if (result.status === "rejected") {
+        logWarn(
+          "WebpackRuntime",
+          `Initial chunk load failed: ${String(result.reason)}`
+        );
+      }
+    }
   }
   const coreShared = {
     react: async () => (await import("react")).default,
@@ -1969,40 +1998,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
@@ -2068,7 +2067,7 @@ function getRemoteComponentHtml(html) {
     return ssrRemoteComponentContainer.innerHTML;
   }
   const remoteComponentContainer = temp.querySelectorAll(
-    `div[data-bundle][data-route][data-runtime][id^="__vercel_remote_component"],div[data-bundle][data-route],div#__next,remote-component:not([src])`
+    `div[data-bundle][data-route][data-runtime][id^="${DEFAULT_COMPONENT_NAME}"],div[data-bundle][data-route],div#__next,remote-component:not([src])`
   );
   if (remoteComponentContainer.length > 0) {
     return `${Array.from(temp.querySelectorAll("link,script")).map((link) => link.outerHTML).join("")}${Array.from(remoteComponentContainer).map((container) => container.outerHTML).join("")}`;
@@ -2077,7 +2076,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,
@@ -2085,7 +2084,7 @@ function ConsumeRemoteComponent({
   mode = "open",
   reset,
   credentials: credentialsProp,
-  name: nameProp = "__vercel_remote_component",
+  name: nameProp = DEFAULT_COMPONENT_NAME,
   shared: sharedProp,
   children,
   onBeforeLoad,
@@ -2108,10 +2107,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 +2381,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 },
@@ -2428,10 +2424,7 @@ function ConsumeRemoteComponent({
                 };
                 return {
                   src: new URL(
-                    `${prefix ?? ""}${path}`.replace(
-                      /(?<char>[^:])(?<double>\/\/)/g,
-                      "$1/"
-                    ),
+                    collapseDoubleSlashes(`${prefix ?? ""}${path}`),
                     url
                   ).href
                 };
@@ -2498,13 +2491,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 +2556,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 +2579,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 +2594,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 +2666,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 +2684,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 +2698,7 @@ function RemoteComponentsClientProvider({
     () => sharedModules(shared2, resolveClientUrl),
     [shared2, resolveClientUrl]
   );
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     RemoteComponentsContext,
     {
       value: { shared: mergedShared, resolveClientUrl, ...props },
@@ -2736,7 +2710,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,