remote-components 0.0.33 → 0.0.34

package/dist/html/host.js

@@ -715,6 +715,106 @@ var init_webpack_adapter = __esm({
   }
 });
 
+// src/shared/client/static-loader.ts
+async function loadStaticRemoteComponent(scripts, url) {
+  const self = globalThis;
+  if (self.__remote_script_entrypoint_mount__?.[url.href]) {
+    self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+  }
+  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {
+    self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+  }
+  const mountUnmountSets = await Promise.all(
+    scripts.map(async (script) => {
+      try {
+        let src = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
+        if (!src && script.textContent) {
+          const blob = new Blob(
+            [
+              script.textContent.replace(
+                /import\.meta\.url/g,
+                JSON.stringify(url)
+              )
+            ],
+            {
+              type: "text/javascript"
+            }
+          );
+          src = URL.createObjectURL(blob);
+        }
+        const mod = await import(
+          /* @vite-ignore */
+          /* webpackIgnore: true */
+          new URL(src, url).href
+        );
+        if (src.startsWith("blob:")) {
+          URL.revokeObjectURL(src);
+        }
+        if (typeof mod.mount === "function" || typeof mod.default?.mount === "function") {
+          if (!self.__remote_script_entrypoint_mount__) {
+            self.__remote_script_entrypoint_mount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_mount__[url.href]) {
+            self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_mount__[url.href]?.add(
+            mod.mount || mod.default?.mount || (() => {
+            })
+          );
+        }
+        if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
+          if (!self.__remote_script_entrypoint_unmount__) {
+            self.__remote_script_entrypoint_unmount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_unmount__[url.href]) {
+            self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_unmount__[url.href]?.add(
+            mod.unmount || mod.default?.unmount || (() => {
+            })
+          );
+        }
+        return {
+          mount: mod.mount || mod.default?.mount,
+          unmount: mod.unmount || mod.default?.unmount
+        };
+      } catch (e) {
+        console.error(
+          new RemoteComponentsError(
+            `Error loading remote component script from "${script.src || url.href}".`,
+            { cause: e }
+          )
+        );
+        return {
+          mount: void 0,
+          unmount: void 0
+        };
+      }
+    })
+  );
+  return mountUnmountSets.reduce(
+    (acc, { mount, unmount }) => {
+      if (typeof mount === "function") {
+        acc.mount.add(mount);
+      }
+      if (typeof unmount === "function") {
+        acc.unmount.add(unmount);
+      }
+      return acc;
+    },
+    {
+      mount: /* @__PURE__ */ new Set(),
+      unmount: /* @__PURE__ */ new Set()
+    }
+  );
+}
+var init_static_loader = __esm({
+  "src/shared/client/static-loader.ts"() {
+    "use strict";
+    init_error();
+  }
+});
+
 // src/shared/client/polyfill.tsx
 import { jsx } from "react/jsx-runtime";
 function applyBundleUrlToSrc(bundle, src) {
@@ -1085,6 +1185,31 @@ var init_turbopack = __esm({
   }
 });
 
+// src/html/host/runtime/script.ts
+var script_exports = {};
+__export(script_exports, {
+  scriptRuntime: () => scriptRuntime
+});
+function scriptRuntime() {
+  const self = globalThis;
+  return {
+    self,
+    createFromReadableStream: () => Promise.resolve(null),
+    applySharedModules: () => Promise.resolve(),
+    nextClientPagesLoader: () => ({
+      Component: null,
+      App: null
+    }),
+    preloadScripts: loadStaticRemoteComponent
+  };
+}
+var init_script = __esm({
+  "src/html/host/runtime/script.ts"() {
+    "use strict";
+    init_static_loader();
+  }
+});
+
 // src/html/host/index.tsx
 import { startTransition, useLayoutEffect } from "react";
 import { hydrateRoot } from "react-dom/client";
@@ -1170,6 +1295,7 @@ function createRSCStream(rscName, data) {
 }
 
 // src/shared/client/remote-component.ts
+init_static_loader();
 init_webpack_adapter();
 init_const();
 init_error();
@@ -1269,9 +1395,12 @@ async function getRuntime(type, url, bundle, shared, remoteShared) {
   } else if (type === "turbopack") {
     const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
     return turbopackRuntime2(url, bundle, shared, remoteShared);
+  } else if (type === "script") {
+    const { scriptRuntime: scriptRuntime2 } = await Promise.resolve().then(() => (init_script(), script_exports));
+    return scriptRuntime2();
   }
   throw new RemoteComponentsError(
-    `Remote Components runtime "${type}" is not supported. Supported runtimes are "webpack" and "turbopack".`
+    `Remote Components runtime "${type}" is not supported. Supported runtimes are "webpack", "turbopack", and "script".`
   );
 }
 
@@ -1284,6 +1413,7 @@ if (typeof HTMLElement !== "undefined") {
       this.__next = null;
       this.fouc = null;
       this.isLoading = false;
+      this.prevIsRemoteComponent = false;
       this.root = null;
     }
     static get observedAttributes() {
@@ -1397,23 +1527,27 @@ if (typeof HTMLElement !== "undefined") {
       }
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, "text/html");
-      if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${this.name}"]`)) {
+      if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(
+        `div[data-bundle][data-route][id^="${this.name}"]`
+      ) || doc.querySelectorAll("remote-component").length > 1 && !doc.querySelector(`remote-component[name="${this.name}"]`)) {
         throw multipleRemoteComponentsError(
           url?.href ?? (this.getAttribute("src") || "unknown")
         );
       }
       const component = doc.querySelector(`div[data-bundle][data-route][id^="${this.name}"]`) ?? // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component
       doc.querySelector("div[data-bundle][data-route]") ?? // fallback to Next.js Pages Router
-      doc.querySelector("div#__next");
+      doc.querySelector("div#__next") ?? // fallback to a <remote-component> element
+      doc.querySelector(`remote-component[name="${this.name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
       const nextData = JSON.parse(
         (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
       );
+      const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
       if (nextData && nextData.buildId === "development" && !this.reactRoot) {
         this.fouc = document.createElement("style");
         this.fouc.textContent = `:host { display: none; }`;
         this.root.appendChild(this.fouc);
       }
-      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : this.name);
+      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component.getAttribute("name") || (nextData ? "__next" : this.name);
       const rsc = doc.querySelector(`#${this.name}_rsc`);
       this.bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || this.bundle;
       if (url) {
@@ -1426,12 +1560,13 @@ if (typeof HTMLElement !== "undefined") {
       const metadata = document.createElement("script");
       metadata.type = "application/json";
       metadata.setAttribute("data-remote-component", "");
-      metadata.textContent = JSON.stringify({
+      const metadataObj = {
         name: this.name,
         bundle: this.bundle,
-        route: component?.getAttribute("data-route") ?? nextData?.page ?? "/",
-        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime
-      });
+        route: component?.getAttribute("data-route") ?? nextData?.page ?? url?.pathname ?? "/",
+        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? "script"
+      };
+      metadata.textContent = JSON.stringify(metadataObj);
       if (this.previousElementSibling?.getAttribute("data-remote-component") !== null) {
         this.previousElementSibling?.remove();
       }
@@ -1446,11 +1581,38 @@ if (typeof HTMLElement !== "undefined") {
           remoteShared.__remote_components_missing_shared__
         );
       }
-      if (!component || !(rsc || nextData)) {
+      if (!component || !(rsc || nextData || isRemoteComponent)) {
         throw new RemoteComponentsError(
           `Remote Component not found on ${src}.${this.name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${this.name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
         );
       }
+      if (this.prevIsRemoteComponent) {
+        if (this.prevUrl) {
+          const prevUrl = this.prevUrl;
+          const self2 = globalThis;
+          if (self2.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
+            await Promise.all(
+              Array.from(
+                self2.__remote_script_entrypoint_unmount__[prevUrl.href] ?? []
+              ).map(async (unmount) => {
+                try {
+                  await unmount(this.root);
+                } catch (e) {
+                  console.error(
+                    new RemoteComponentsError(
+                      `Error while calling unmount() for Remote Component from ${prevUrl.href}.`,
+                      { cause: e }
+                    )
+                  );
+                }
+              })
+            );
+          }
+        }
+        this.root.innerHTML = "";
+      }
+      this.prevUrl = url ?? new URL(location.href);
+      this.prevIsRemoteComponent = isRemoteComponent;
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
       const remoteComponentSrc = this.getAttribute("src");
@@ -1516,7 +1678,35 @@ if (typeof HTMLElement !== "undefined") {
       applyOriginToNodes(doc, url ?? new URL(location.href));
       if (!this.reactRoot) {
         Array.from(component.children).forEach((el) => {
-          this.root?.appendChild(el);
+          if (!isRemoteComponent && el.tagName.toLowerCase() === "script") {
+            const newScript = document.createElement("script");
+            for (const attr of el.attributes) {
+              if (attr.name === "src") {
+                newScript.setAttribute(
+                  attr.name,
+                  new URL(attr.value, url ?? location.origin).href
+                );
+              } else {
+                newScript.setAttribute(attr.name, attr.value);
+              }
+            }
+            newScript.textContent = el.textContent;
+            if (remoteComponentSrc) {
+              newScript.setAttribute(
+                "data-remote-component-src",
+                remoteComponentSrc
+              );
+            }
+            this.root?.appendChild(newScript);
+          } else {
+            const newEl = el.cloneNode(true);
+            for (const attr of el.attributes) {
+              if (attr.name.startsWith("on")) {
+                newEl.setAttribute(attr.name, attr.value);
+              }
+            }
+            this.root?.appendChild(newEl);
+          }
         });
       }
       for (const el of removable) {
@@ -1555,7 +1745,7 @@ if (typeof HTMLElement !== "undefined") {
         nextClientPagesLoader: nextClientPagesLoader2,
         preloadScripts
       } = await getRuntime(
-        component.getAttribute("data-runtime") ?? "webpack",
+        metadataObj.runtime,
         url ?? new URL(location.href),
         this.bundle,
         {
@@ -1567,8 +1757,8 @@ if (typeof HTMLElement !== "undefined") {
         },
         remoteShared
       );
-      const scripts = doc.querySelectorAll(
-        "script[src],script[data-src]"
+      const scripts = isRemoteComponent ? component.querySelectorAll("script") : doc.querySelectorAll(
+        "script[src],script[data-src],script[data-remote-component-entrypoint]"
       );
       if (!url) {
         url = new URL(
@@ -1582,6 +1772,13 @@ if (typeof HTMLElement !== "undefined") {
         this.bundle ?? "default",
         this.name ?? "__vercel_remote_component"
       );
+      if (isRemoteComponent) {
+        Array.from(component.children).forEach((child) => {
+          if (child.tagName === "SCRIPT") {
+            child.remove();
+          }
+        });
+      }
       const doCleanup = () => {
         if (this.root && remoteComponentSrc) {
           const selector = `[data-remote-component-src]:not([data-remote-component-src="${remoteComponentSrc}"])`;
@@ -1703,6 +1900,23 @@ if (typeof HTMLElement !== "undefined") {
         if (this.fouc) {
           this.root.removeChild(this.fouc);
         }
+      } else if (self.__remote_script_entrypoint_mount__?.[url.href]) {
+        await Promise.all(
+          Array.from(
+            self.__remote_script_entrypoint_mount__[url.href] ?? []
+          ).map(async (mount) => {
+            try {
+              await mount(this.root);
+            } catch (e) {
+              console.error(
+                new RemoteComponentsError(
+                  `Error while calling mount() for Remote Component from ${url.href}.`,
+                  { cause: e }
+                )
+              );
+            }
+          })
+        );
       }
       this.isLoading = false;
     }