remote-components 0.2.2 → 0.3.1

package/dist/host/html.cjs

@@ -223,17 +223,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| )/;
   }
 });
 
@@ -424,25 +424,39 @@ var init_next_client_pages_loader = __esm({
   }
 });
 
-// src/host/shared/polyfill.tsx
-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
 function sharedPolyfills(shared, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
@@ -533,17 +547,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({
@@ -583,46 +593,27 @@ 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 import_jsx_runtime, imageImpl;
+var import_jsx_runtime;
 var init_polyfill = __esm({
   "src/host/shared/polyfill.tsx"() {
     "use strict";
+    init_remote_image_loader();
     init_logger();
-    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
     import_jsx_runtime = require("react/jsx-runtime");
-    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
-        }
-      );
-    };
+  }
+});
+
+// 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| )/;
   }
 });
 
@@ -662,7 +653,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();
@@ -763,15 +754,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/;
@@ -994,10 +985,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();
   }
 });
 
@@ -1363,7 +1355,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).";
   }
 });
@@ -1391,7 +1383,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);
@@ -1399,6 +1391,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,
@@ -1466,6 +1466,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();
@@ -1804,6 +1805,9 @@ function resolveNameFromSrc(src, defaultName) {
   return name || defaultName;
 }
 
+// src/host/html/index.tsx
+init_constants2();
+
 // src/runtime/html/apply-origin.ts
 var tagNames = [
   "img",
@@ -1868,6 +1872,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}"]`)) {
@@ -1887,14 +1926,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]`
@@ -1906,7 +1937,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>?`
     );
   }
 }
@@ -1932,10 +1963,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);
@@ -2151,12 +2187,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(
@@ -2179,8 +2210,8 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
 var import_jsx_runtime2 = require("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;
@@ -2296,8 +2327,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();
@@ -2317,10 +2347,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) {
@@ -2363,7 +2390,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 {
@@ -2387,7 +2414,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";
@@ -2579,12 +2606,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();
       }
@@ -2663,7 +2685,7 @@ if (typeof HTMLElement !== "undefined") {
                 RemoteComponentFromReadableStream,
                 {
                   initial: false,
-                  name: this.name ?? "__vercel_remote_component"
+                  name: this.name
                 }
               )
             );
@@ -2674,17 +2696,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__ */ (0, import_jsx_runtime2.jsx)(
-            RemoteComponentFromReadableStream,
-            {
-              initial: true,
-              name: this.name ?? "__vercel_remote_component"
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RemoteComponentFromReadableStream, { initial: true, name: this.name })
         );
       } else if (nextData) {
         const { Component, App } = nextClientPagesLoader2(
-          this.bundle ?? "default",
+          this.bundle,
           nextData.page ?? "/",
           this.root
         );