remote-components 0.0.22 → 0.0.24

package/dist/html/host.cjs

@@ -395,7 +395,7 @@ function initializeSharedModules(bundle, shared = {}, remoteShared = {}) {
     Object.entries(remoteShared).map(async ([id, module2]) => {
       if (self.__remote_shared_modules__?.[bundle]) {
         if (shared[module2]) {
-          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await shared[module2]();
+          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await shared[module2](bundle);
         } else {
           console.error(`Shared module "${module2}" not found for "${bundle}".`);
         }
@@ -408,7 +408,7 @@ function getSharedModule(bundle, id) {
   for (const [key, value] of Object.entries(
     self.__remote_shared_modules__?.[bundle] ?? {}
   )) {
-    if (typeof id === "string" && id.includes(key) || id === key) {
+    if (typeof value !== "undefined" && (typeof id === "string" && id.includes(key) || id === key)) {
       return value;
     }
   }
@@ -541,6 +541,24 @@ var init_webpack_adapter = __esm({
 });
 
 // src/shared/client/polyfill.tsx
+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);
+}
 function sharedPolyfills(shared) {
   const self = globalThis;
   const polyfill = {
@@ -576,18 +594,17 @@ function sharedPolyfills(shared) {
       },
       __esModule: true
     })),
-    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? (() => Promise.resolve({
-      Image: (props) => (
-        // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "img",
-          {
-            ...props,
-            src: props.src,
-            suppressHydrationWarning: true
-          }
-        )
-      ),
+    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      Image: imageImpl(bundle),
+      __esModule: true
+    })),
+    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      default: imageImpl(bundle),
+      getImageProps: (_imgProps) => {
+        throw new Error(
+          "Next.js getImageProps() is not implemented in remote components"
+        );
+      },
       __esModule: true
     })),
     "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
@@ -595,21 +612,56 @@ function sharedPolyfills(shared) {
       // do not throw an error for now
       default: () => null,
       __esModule: true
-    }))
+    })),
+    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared?.["next/router"] ?? (() => (
+      // TODO: incomplete implementation
+      Promise.resolve({
+        useRouter() {
+          return {
+            push: (routerUrl) => {
+              history.pushState({}, "", routerUrl);
+            },
+            replace: (routerUrl) => {
+              history.replaceState({}, "", routerUrl);
+            },
+            back: () => {
+              history.back();
+            }
+          };
+        },
+        __esModule: true
+      })
+    ))
   };
   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/image"] = polyfill["next/dist/client/image-component"];
   polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
   polyfill["next/script"] = polyfill["next/dist/client/script"];
   return polyfill;
 }
-var import_jsx_runtime;
+var import_jsx_runtime, imageImpl;
 var init_polyfill = __esm({
   "src/shared/client/polyfill.tsx"() {
     "use strict";
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
     import_jsx_runtime = require("react/jsx-runtime");
+    imageImpl = (bundle) => function RemoteImage({ priority: _, ...props }) {
+      const newSrc = applyBundleUrlToImagePropsSrc(
+        bundle,
+        typeof props.src === "string" ? props.src : props.src.src
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          decoding: "async",
+          style: { color: "transparent" },
+          ...props,
+          src: newSrc,
+          suppressHydrationWarning: true
+        }
+      );
+    };
   }
 });
 
@@ -652,6 +704,7 @@ async function webpackRuntime(bundle, shared, remoteShared) {
           const newScript = document.createElement("script");
           newScript.onload = () => {
             resolve2();
+            newScript.remove();
           };
           newScript.onerror = () => {
             reject(
@@ -659,6 +712,7 @@ async function webpackRuntime(bundle, shared, remoteShared) {
                 `Failed to load script ${script.src} for remote component`
               )
             );
+            newScript.remove();
           };
           const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
           if (scriptSrc) {
@@ -697,7 +751,7 @@ async function webpackRuntime(bundle, shared, remoteShared) {
     await Promise.all(
       Object.entries(resolve).map(async ([key, value]) => {
         if (typeof value === "function") {
-          resolve[key] = await value();
+          resolve[key] = await value(remoteBundle);
         }
         return Promise.resolve(value);
       })
@@ -781,6 +835,7 @@ __export(host_exports, {
   registerSharedModules: () => registerSharedModules
 });
 module.exports = __toCommonJS(host_exports);
+var import_react = require("react");
 var import_client = require("react-dom/client");
 
 // src/shared/client/component-loader.ts
@@ -862,6 +917,41 @@ function createRSCStream(name, data) {
 init_webpack_adapter();
 init_const();
 
+// src/shared/client/apply-origin.ts
+var tagNames = [
+  "img",
+  "source",
+  "video",
+  "audio",
+  "track",
+  "iframe",
+  "embed",
+  "script",
+  "link"
+];
+function applyOriginToNodes(doc, url) {
+  const nodes = doc.querySelectorAll(
+    tagNames.map((type) => `${type}[src],${type}[srcset]`).join(",")
+  );
+  nodes.forEach((node) => {
+    if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
+      node.src = new URL(node.getAttribute("src") ?? "/", url).href;
+    }
+    if (node.hasAttribute("srcset")) {
+      const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
+        const [urlPart, descriptor] = entry.trim().split(/\s+/);
+        if (!urlPart)
+          return entry;
+        const absoluteUrl = new URL(urlPart, url).href;
+        return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+      }).join(", ");
+      if (srcSet) {
+        node.setAttribute("srcset", srcSet);
+      }
+    }
+  });
+}
+
 // src/html/host/runtime/index.ts
 async function getRuntime(type, url, bundle, shared, remoteShared) {
   if (typeof globalThis.process === "undefined") {
@@ -884,38 +974,64 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 if (typeof HTMLElement !== "undefined") {
   class RemoteComponent extends HTMLElement {
     constructor() {
-      super();
+      super(...arguments);
       this.__next = null;
       this.fouc = null;
       this.isLoading = false;
-      this.attachShadow({ mode: "open" });
-      this.fallbackSlot = document.createElement("slot");
-      this.shadowRoot?.appendChild(this.fallbackSlot);
-      this.name = this.getAttribute("name") || "__vercel_remote_component";
-      this.bundle = "default";
-      if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
-        this.load().catch((e) => {
-          throw new Error(`Failed to load remote component: ${e}`);
-        });
-      }
+      this.root = null;
     }
     static get observedAttributes() {
-      return ["src"];
+      return ["src", "name", "mode"];
     }
     // watch for src attribute changes
     // this is required to reload the remote component when the src attribute is added later
     // this is for rendering the custom element using React
     attributeChangedCallback(name, oldValue, newValue) {
-      if (name === "src" && oldValue !== newValue) {
+      if ((name === "src" || name === "name") && oldValue !== newValue) {
+        if (this.getAttribute("src")) {
+          this.load().catch((e) => {
+            console.error(e);
+            throw new Error(
+              `Failed to load remote component: ${this.bundle ?? this.name ?? this.getAttribute("src")}`
+            );
+          });
+        }
+      } else if (name === "mode" && oldValue !== newValue && this.root) {
+        const newRoot = this.attachShadow({
+          mode: newValue === "closed" ? "closed" : "open"
+        });
+        Array.from(this.root.children).forEach((child) => {
+          newRoot.appendChild(child);
+        });
+        this.root = newRoot;
         this.load().catch((e) => {
           throw new Error(`Failed to load remote component: ${e}`);
         });
       }
     }
     async load() {
+      await new Promise((resolve) => {
+        (typeof queueMicrotask === "function" ? queueMicrotask : requestAnimationFrame)(() => {
+          resolve(void 0);
+        });
+      });
       if (this.isLoading) {
         return;
       }
+      if (!this.root) {
+        this.root = this.attachShadow({
+          mode: this.getAttribute("mode") === "closed" ? "closed" : "open"
+        });
+        this.fallbackSlot = document.createElement("slot");
+        this.root.appendChild(this.fallbackSlot);
+      }
+      this.name = this.getAttribute("name") || "__vercel_remote_component";
+      this.bundle = "default";
+      if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
+        this.load().catch((e) => {
+          throw new Error(`Failed to load remote component: ${e}`);
+        });
+      }
       this.isLoading = true;
       const src = this.getAttribute("src");
       const remoteComponentChild = this.querySelector("div#__REMOTE_COMPONENT__") || this.querySelector("div[data-bundle][data-route]");
@@ -946,22 +1062,29 @@ if (typeof HTMLElement !== "undefined") {
         }
         html = await res.text();
       }
-      const doc = document.createElement("div");
-      doc.innerHTML = html;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, "text/html");
       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");
       const nextData = JSON.parse(
         (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
       );
-      if (nextData && nextData.buildId === "development") {
+      if (nextData && nextData.buildId === "development" && !this.reactRoot) {
         this.fouc = document.createElement("style");
         this.fouc.textContent = `:host { display: none; }`;
-        this.shadowRoot?.appendChild(this.fouc);
+        this.root.appendChild(this.fouc);
       }
       this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || (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) {
+        const self2 = globalThis;
+        if (!self2.__remote_bundle_url__) {
+          self2.__remote_bundle_url__ = {};
+        }
+        self2.__remote_bundle_url__[this.bundle ?? "default"] = url;
+      }
       const metadata = document.createElement("script");
       metadata.type = "application/json";
       metadata.setAttribute("data-remote-component", "");
@@ -971,54 +1094,116 @@ if (typeof HTMLElement !== "undefined") {
         route: component?.getAttribute("data-route") ?? nextData?.page ?? "/",
         runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime
       });
-      this.parentNode?.insertBefore(metadata, this);
-      const remoteSharedEl = doc.querySelector(`#${this.name}_shared`);
-      const remoteShared = JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {};
+      if (this.previousElementSibling?.getAttribute("data-remote-component") !== null) {
+        this.previousElementSibling?.remove();
+      }
+      this.parentElement?.insertBefore(metadata, this);
+      const remoteSharedEl = doc.querySelector(
+        `#${this.name}_shared[data-remote-components-shared]`
+      );
+      const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
       remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);
       if (!component || !(rsc || nextData)) {
         throw new Error(`Failed to find component with id "${this.name}"`);
       }
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
-      await Promise.all(
-        Array.from(links).map((link) => {
-          return new Promise((resolve, reject) => {
-            const newLink = document.createElement("link");
-            if (link.rel === "stylesheet") {
-              newLink.onload = () => {
+      const remoteComponentSrc = this.getAttribute("src");
+      const attachLinks = async () => {
+        await Promise.all(
+          Array.from(links).filter((link) => {
+            return !component.contains(link);
+          }).map((link) => {
+            return new Promise((resolve, reject) => {
+              const newLink = document.createElement("link");
+              if (link.rel === "stylesheet") {
+                newLink.onload = () => {
+                  resolve();
+                };
+                newLink.onerror = () => {
+                  reject(
+                    new Error(
+                      `Failed to load link ${link.href} for remote component`
+                    )
+                  );
+                };
+              } else {
                 resolve();
-              };
-              newLink.onerror = () => {
-                reject(
-                  new Error(
-                    `Failed to load link ${link.href} for remote component`
-                  )
-                );
-              };
-            } else {
-              resolve();
-            }
-            for (const attr of link.attributes) {
-              if (attr.name === "href") {
+              }
+              for (const attr of link.attributes) {
+                if (attr.name === "href") {
+                  newLink.setAttribute(
+                    attr.name,
+                    new URL(attr.value, url ?? location.origin).href
+                  );
+                } else {
+                  newLink.setAttribute(attr.name, attr.value);
+                }
+              }
+              if (remoteComponentSrc) {
                 newLink.setAttribute(
-                  attr.name,
-                  new URL(attr.value, url ?? location.origin).href
+                  "data-remote-component-src",
+                  remoteComponentSrc
                 );
-              } else {
-                newLink.setAttribute(attr.name, attr.value);
               }
+              this.root?.appendChild(newLink);
+            });
+          })
+        );
+        const styles = doc.querySelectorAll("style");
+        styles.forEach((style) => {
+          if (style.parentElement?.tagName.toLowerCase() === "head") {
+            const newStyle = document.createElement("style");
+            newStyle.textContent = style.textContent;
+            if (remoteComponentSrc) {
+              newStyle.setAttribute(
+                "data-remote-component-src",
+                remoteComponentSrc
+              );
             }
-            this.shadowRoot?.appendChild(newLink);
-          });
-        })
-      );
-      Array.from(component.children).forEach((el) => {
-        this.shadowRoot?.appendChild(el);
-      });
+            this.root?.appendChild(newStyle);
+          }
+        });
+      };
+      if (!this.reactRoot) {
+        await attachLinks();
+      }
+      applyOriginToNodes(doc, url ?? new URL(location.href));
+      if (!this.reactRoot) {
+        Array.from(component.children).forEach((el) => {
+          this.root?.appendChild(el);
+        });
+      }
       for (const el of removable) {
         el.parentElement?.removeChild(el);
       }
-      this.shadowRoot?.removeChild(this.fallbackSlot);
+      this.fallbackSlot?.remove();
+      const applyReset = () => {
+        if (this.getAttribute("reset") !== null && !this.root?.querySelector("link[data-remote-components-reset]")) {
+          const allInitial = document.createElement("link");
+          allInitial.setAttribute("data-remote-components-reset", "");
+          const css = `:host { all: initial; }`;
+          const allInitialHref = URL.createObjectURL(
+            new Blob([css], { type: "text/css" })
+          );
+          allInitial.href = allInitialHref;
+          allInitial.rel = "stylesheet";
+          allInitial.onload = () => {
+            URL.revokeObjectURL(allInitialHref);
+            allInitial.removeAttribute("onload");
+          };
+          allInitial.onerror = () => {
+            URL.revokeObjectURL(allInitialHref);
+            allInitial.removeAttribute("onload");
+          };
+          this.root?.prepend(allInitial);
+        } else if (this.getAttribute("reset") === null && this.root?.querySelector("link[data-remote-components-reset]")) {
+          this.root.querySelector("link[data-remote-components-reset]")?.remove();
+        }
+      };
+      if (!this.reactRoot) {
+        applyReset();
+      }
       const {
         self,
         createFromReadableStream,
@@ -1046,7 +1231,26 @@ if (typeof HTMLElement !== "undefined") {
           window.location.href
         );
       }
-      await preloadScripts(Array.from(scripts), url, this.bundle, this.name);
+      await preloadScripts(
+        Array.from(scripts),
+        url,
+        this.bundle ?? "default",
+        this.name ?? "__vercel_remote_component"
+      );
+      const doCleanup = () => {
+        if (this.root && remoteComponentSrc) {
+          const selector = `[data-remote-component-src]:not([data-remote-component-src="${remoteComponentSrc}"])`;
+          const prevCleanup = [
+            ...this.root.querySelectorAll(selector),
+            ...document.body.querySelectorAll(selector)
+          ];
+          if (prevCleanup.length > 0) {
+            prevCleanup.forEach((prev) => {
+              prev.remove();
+            });
+          }
+        }
+      };
       if (rsc) {
         rsc.parentElement?.removeChild(rsc);
         const rscClone = document.createElement("script");
@@ -1055,36 +1259,97 @@ if (typeof HTMLElement !== "undefined") {
         document.body.appendChild(rscClone);
         let cache;
         const RemoteComponentFromReadableStream = ({
-          name
+          name,
+          initial
         }) => {
           const stream = createRSCStream(name, self[name] ?? [`0:[null]
 `]);
           const Component = cache ?? // cache the component to avoid reloading the RSC flight data
           (cache = createFromReadableStream(stream));
+          (0, import_react.useLayoutEffect)(() => {
+            if (self[name]) {
+              delete self[name];
+            }
+            const rscScript = document.getElementById(`${name}_rsc`);
+            if (rscScript) {
+              rscScript.remove();
+            }
+            doCleanup();
+            applyReset();
+            if (!initial) {
+              attachLinks().catch((e) => {
+                console.error(e);
+              });
+            }
+            this.isLoading = false;
+          }, [initial, name]);
           return Component;
         };
-        (0, import_client.hydrateRoot)(
+        if (this.reactRoot) {
+          const root = this.reactRoot;
+          (0, import_react.startTransition)(() => {
+            root.render(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                RemoteComponentFromReadableStream,
+                {
+                  initial: false,
+                  name: this.name ?? "__vercel_remote_component"
+                }
+              )
+            );
+          });
+          return;
+        }
+        this.reactRoot = (0, import_client.hydrateRoot)(
           // hydrateRoot expects a document or element, but it works for the shadow DOM too
           // @ts-expect-error support for shadow DOM
-          this.shadowRoot,
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RemoteComponentFromReadableStream, { name: this.name })
+          this.root,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            RemoteComponentFromReadableStream,
+            {
+              initial: true,
+              name: this.name ?? "__vercel_remote_component"
+            }
+          )
         );
       } else if (nextData) {
         const { Component, App } = nextClientPagesLoader2(
-          this.bundle,
+          this.bundle ?? "default",
           nextData.page,
-          this.shadowRoot
+          this.root
         );
         if (Component) {
-          (0, import_client.hydrateRoot)(
+          const RemoteComponentFromNext = ((NextApp, NextComponent, remoteComponent = this) => function RemoteComponentNext({ initial }) {
+            (0, import_react.useLayoutEffect)(() => {
+              doCleanup();
+              if (!initial) {
+                applyReset();
+                attachLinks().catch((e) => {
+                  console.error(e);
+                });
+              }
+              remoteComponent.isLoading = false;
+            }, [initial]);
+            return NextApp ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextApp, { Component: NextComponent, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextComponent, { ...nextData.props });
+          })(App, Component, this);
+          if (this.reactRoot) {
+            const root = this.reactRoot;
+            (0, import_react.startTransition)(() => {
+              root.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RemoteComponentFromNext, { initial: false }));
+              doCleanup();
+              this.isLoading = false;
+            });
+            return;
+          }
+          this.reactRoot = (0, import_client.hydrateRoot)(
             // hydrateRoot expects a document or element, but it works for the shadow DOM too
             // @ts-expect-error support for shadow DOM
-            this.shadowRoot,
-            App ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(App, { Component, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...nextData.props })
+            this.root,
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RemoteComponentFromNext, { initial: true })
           );
         }
         if (this.fouc) {
-          this.shadowRoot?.removeChild(this.fouc);
+          this.root.removeChild(this.fouc);
         }
       }
       this.isLoading = false;