remote-components 0.3.0 → 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| )/;
   }
 });
 
@@ -607,6 +607,16 @@ var init_polyfill = __esm({
   }
 });
 
+// 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| )/;
+  }
+});
+
 // src/runtime/loaders/script-loader.ts
 async function loadScripts(scripts, resolveClientUrl) {
   await Promise.all(
@@ -643,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();
@@ -744,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/;
@@ -975,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();
   }
 });
 
@@ -1344,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).";
   }
 });
@@ -1372,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);
@@ -1380,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,
@@ -1447,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();
@@ -1785,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",
@@ -1849,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}"]`)) {
@@ -1868,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]`
@@ -1887,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>?`
     );
   }
 }
@@ -1913,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);
@@ -2132,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(
@@ -2160,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;
@@ -2277,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();
@@ -2298,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) {
@@ -2344,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 {
@@ -2368,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";
@@ -2560,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();
       }
@@ -2644,7 +2685,7 @@ if (typeof HTMLElement !== "undefined") {
                 RemoteComponentFromReadableStream,
                 {
                   initial: false,
-                  name: this.name ?? "__vercel_remote_component"
+                  name: this.name
                 }
               )
             );
@@ -2655,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
         );