remote-components 0.2.2 → 0.3.1

package/dist/host/html.js

@@ -201,17 +201,17 @@ var init_utils = __esm({
 function getBundleKey(bundle) {
   return escapeString(bundle);
 }
-var DEFAULT_ROUTE, RUNTIME_WEBPACK, RUNTIME_TURBOPACK, RUNTIME_SCRIPT, REMOTE_COMPONENT_REGEX, NEXT_BUNDLE_PATH_RE;
+var DEFAULT_BUNDLE_NAME, DEFAULT_COMPONENT_NAME, DEFAULT_ROUTE, RUNTIME_WEBPACK, RUNTIME_TURBOPACK, RUNTIME_SCRIPT;
 var init_constants2 = __esm({
   "src/runtime/constants.ts"() {
     "use strict";
     init_utils();
+    DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
+    DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
     DEFAULT_ROUTE = "/";
     RUNTIME_WEBPACK = "webpack";
     RUNTIME_TURBOPACK = "turbopack";
     RUNTIME_SCRIPT = "script";
-    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-    NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
   }
 });
 
@@ -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,25 @@ 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
-          }
-        )
-      );
-    };
+  }
+});
+
+// src/runtime/patterns.ts
+var REMOTE_COMPONENT_REGEX, NEXT_BUNDLE_PATH_RE;
+var init_patterns = __esm({
+  "src/runtime/patterns.ts"() {
+    "use strict";
+    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+    NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
   }
 });
 
@@ -642,7 +630,7 @@ async function loadScripts(scripts, resolveClientUrl) {
 var init_script_loader = __esm({
   "src/runtime/loaders/script-loader.ts"() {
     "use strict";
-    init_constants2();
+    init_patterns();
     init_protected_rc_fallback();
     init_error();
     init_logger();
@@ -743,15 +731,15 @@ var init_webpack = __esm({
     init_apply_shared_modules();
     init_next_client_pages_loader();
     init_polyfill();
-    init_constants2();
     init_script_loader();
+    init_patterns();
     init_error();
   }
 });
 
 // src/runtime/turbopack/patterns.ts
 var REMOTE_SHARED_MARKER_RE, REMOTE_SHARED_ASSIGNMENT_RE, ASYNC_MODULE_LOADER_RE, ASYNC_MODULE_RESOLVE_RE, ASYNC_MODULE_ALL_RE, TURBOPACK_GLOBAL_RE;
-var init_patterns = __esm({
+var init_patterns2 = __esm({
   "src/runtime/turbopack/patterns.ts"() {
     "use strict";
     REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
@@ -974,10 +962,11 @@ var init_chunk_loader = __esm({
   "src/runtime/turbopack/chunk-loader.ts"() {
     "use strict";
     init_constants2();
+    init_patterns();
     init_protected_rc_fallback();
     init_error();
     init_logger();
-    init_patterns();
+    init_patterns2();
   }
 });
 
@@ -1343,7 +1332,7 @@ var init_shared_modules = __esm({
     init_constants2();
     init_logger();
     init_module();
-    init_patterns();
+    init_patterns2();
     DEDUPLICATION_WARNING = "This module will not be deduplicated \u2014 the remote may load its own copy, which can cause duplicate instance errors (e.g. invalid hook calls if React is loaded twice).";
   }
 });
@@ -1371,7 +1360,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);
@@ -1379,6 +1368,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,
@@ -1446,6 +1443,7 @@ var init_webpack_runtime = __esm({
   "src/runtime/turbopack/webpack-runtime.ts"() {
     "use strict";
     init_constants2();
+    init_patterns();
     init_error();
     init_logger();
     init_chunk_loader();
@@ -1779,6 +1777,9 @@ function resolveNameFromSrc(src, defaultName) {
   return name || defaultName;
 }
 
+// src/host/html/index.tsx
+init_constants2();
+
 // src/runtime/html/apply-origin.ts
 var tagNames = [
   "img",
@@ -1843,6 +1844,41 @@ function applyOriginToNodes(doc, url, resolveClientUrl) {
 
 // src/runtime/html/parse-remote-html.ts
 init_constants2();
+
+// src/runtime/metadata.ts
+init_constants2();
+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
 init_error();
 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}"]`)) {
@@ -1862,14 +1898,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]`
@@ -1881,7 +1909,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>?`
     );
   }
 }
@@ -1907,10 +1935,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);
@@ -2126,12 +2159,7 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
   }
   if (type === "webpack") {
     const { webpackRuntime: webpackRuntime2 } = await Promise.resolve().then(() => (init_webpack(), webpack_exports));
-    return webpackRuntime2(
-      bundle ?? "default",
-      shared,
-      remoteShared,
-      resolveClientUrl
-    );
+    return webpackRuntime2(bundle, shared, remoteShared, resolveClientUrl);
   } else if (type === "turbopack") {
     const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
     return turbopackRuntime2(
@@ -2154,8 +2182,8 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
 import { jsx as jsx2 } from "react/jsx-runtime";
 if (typeof HTMLElement !== "undefined") {
   class RemoteComponent extends HTMLElement {
-    name;
-    bundle;
+    name = DEFAULT_COMPONENT_NAME;
+    bundle = DEFAULT_BUNDLE_NAME;
     fallbackSlot;
     __next = null;
     fouc = null;
@@ -2271,8 +2299,7 @@ if (typeof HTMLElement !== "undefined") {
         this.fallbackSlot = document.createElement("slot");
         this.root.appendChild(this.fallbackSlot);
       }
-      this.name = this.getAttribute("name") || "__vercel_remote_component";
-      this.bundle = "default";
+      this.name = this.getAttribute("name") || this.name;
       this.hostState.stage = "loading";
       const src = this.src;
       this.hostState.abortController = new AbortController();
@@ -2292,10 +2319,7 @@ if (typeof HTMLElement !== "undefined") {
       let html = this.innerHTML;
       if (src) {
         url = getClientOrServerUrl(src, window.location.href);
-        this.name = resolveNameFromSrc(
-          src,
-          this.name ?? "__vercel_remote_component"
-        );
+        this.name = resolveNameFromSrc(src, this.name);
       }
       const resolveClientUrl = url ? bindResolveClientUrl(this.resolveClientUrl, url.href) : void 0;
       if (!remoteComponentChild && url) {
@@ -2338,7 +2362,7 @@ if (typeof HTMLElement !== "undefined") {
       const doc = parser.parseFromString(html, "text/html");
       const parsed = parseRemoteComponentDocument(
         doc,
-        this.name ?? "__vercel_remote_component",
+        this.name,
         url ?? new URL(window.location.href)
       );
       const {
@@ -2362,7 +2386,7 @@ if (typeof HTMLElement !== "undefined") {
         if (!self2.__remote_bundle_url__) {
           self2.__remote_bundle_url__ = {};
         }
-        self2.__remote_bundle_url__[this.bundle ?? "default"] = url;
+        self2.__remote_bundle_url__[this.bundle] = url;
       }
       const metadataEl = document.createElement("script");
       metadataEl.type = "application/json";
@@ -2554,12 +2578,7 @@ if (typeof HTMLElement !== "undefined") {
           window.location.href
         );
       }
-      await preloadScripts(
-        Array.from(scripts),
-        url,
-        this.bundle ?? "default",
-        this.name ?? "__vercel_remote_component"
-      );
+      await preloadScripts(Array.from(scripts), url, this.bundle, this.name);
       if (!isCurrentLoad()) {
         return abandonLoad();
       }
@@ -2638,7 +2657,7 @@ if (typeof HTMLElement !== "undefined") {
                 RemoteComponentFromReadableStream,
                 {
                   initial: false,
-                  name: this.name ?? "__vercel_remote_component"
+                  name: this.name
                 }
               )
             );
@@ -2649,17 +2668,11 @@ if (typeof HTMLElement !== "undefined") {
           // hydrateRoot expects a document or element, but it works for the shadow DOM too
           // @ts-expect-error support for shadow DOM
           this.root,
-          /* @__PURE__ */ jsx2(
-            RemoteComponentFromReadableStream,
-            {
-              initial: true,
-              name: this.name ?? "__vercel_remote_component"
-            }
-          )
+          /* @__PURE__ */ jsx2(RemoteComponentFromReadableStream, { initial: true, name: this.name })
         );
       } else if (nextData) {
         const { Component, App } = nextClientPagesLoader2(
-          this.bundle ?? "default",
+          this.bundle,
           nextData.page ?? "/",
           this.root
         );