remote-components 0.0.33 → 0.0.34

package/dist/next/host/client/index.cjs

@@ -222,6 +222,7 @@ var attrToProp = {
 var DEFAULT_ROUTE = "/";
 var RUNTIME_WEBPACK = "webpack";
 var RUNTIME_TURBOPACK = "turbopack";
+var RUNTIME_SCRIPT = "script";
 var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
 function getBundleKey(bundle) {
   return escapeString(bundle);
@@ -929,6 +930,100 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
   return { component };
 }
 
+// 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()
+    }
+  );
+}
+
 // src/shared/client/set-attributes-from-props.ts
 var DOMAttributeNames = {
   acceptCharset: "accept-charset",
@@ -1242,7 +1337,10 @@ function remoteFetchHeaders(additionalHeaders) {
 }
 
 // src/react/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime2 = (
+  // TODO: remove wrapper div by converting HTML to RSC or React tree
+  require("react/jsx-runtime")
+);
 var import_react2 = require("react");
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
@@ -1256,7 +1354,7 @@ function getRemoteComponentHtml(html) {
     return ssrRemoteComponentContainer.innerHTML;
   }
   const remoteComponentContainer = temp.querySelectorAll(
-    `div[data-bundle][data-route][data-runtime][id^="__vercel_remote_component"],div[data-bundle][data-route],div#__next`
+    `div[data-bundle][data-route][data-runtime][id^="__vercel_remote_component"],div[data-bundle][data-route],div#__next,remote-component:not([src])`
   );
   if (remoteComponentContainer.length > 0) {
     return `${Array.from(temp.querySelectorAll("link,script")).map((link) => link.outerHTML).join("")}${Array.from(remoteComponentContainer).map((container) => container.outerHTML).join("")}`;
@@ -1321,6 +1419,10 @@ function RemoteComponent({
   );
   const prevSrcRef = (0, import_react.useRef)(null);
   const componentHydrationHtml = (0, import_react.useRef)(null);
+  const prevIsRemoteComponentRef = (0, import_react.useRef)(false);
+  const prevUrlRef = (0, import_react.useRef)(null);
+  const prevRemoteComponentContainerRef = (0, import_react.useRef)(null);
+  const unmountRef = (0, import_react.useRef)(null);
   (0, import_react.useLayoutEffect)(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
@@ -1433,34 +1535,58 @@ function RemoteComponent({
           }
           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^="${name}"]`)) {
+          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}"]`)) {
             throw multipleRemoteComponentsError(url.href);
           }
           const component = doc.querySelector(`div[data-bundle][data-route][id^="${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 the remote-component web component
+          doc.querySelector(`remote-component[name="${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 remoteName = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : name);
           const rsc = doc.querySelector(`#${remoteName}_rsc`);
           const bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default";
+          const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
           const metadata = {
             name: remoteName,
             bundle,
-            route: component?.getAttribute("data-route") ?? nextData?.page ?? DEFAULT_ROUTE,
-            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_WEBPACK)
+            route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
+            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
           };
           const remoteSharedEl = doc.querySelector(
             `#${remoteName}_shared[data-remote-components-shared]`
           );
           const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
           remoteSharedEl?.remove();
-          if (!component || !(rsc || nextData)) {
+          if (!component || !(rsc || nextData || isRemoteComponent)) {
             throw new RemoteComponentsError(
               `Remote Component not found on ${url.href}.${remoteName !== "__vercel_remote_component" ? `The name for the <RemoteComponent> is "${remoteName}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
             );
           }
+          if (prevIsRemoteComponentRef.current) {
+            if (shadowRoot) {
+              shadowRoot.innerHTML = "";
+            }
+            const self = globalThis;
+            const prevUrl = prevUrlRef.current;
+            if (prevUrl && self.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
+              const unmountPromises = Promise.all(
+                Array.from(unmountRef.current ?? []).map(
+                  async (unmount) => unmount(
+                    shadowRoot ?? prevRemoteComponentContainerRef.current
+                  )
+                )
+              );
+              unmountRef.current = null;
+              await unmountPromises;
+            }
+          }
+          prevIsRemoteComponentRef.current = isRemoteComponent;
+          prevUrlRef.current = url;
           applyOriginToNodes(doc, url);
           const links = Array.from(
             doc.querySelectorAll("link[href]")
@@ -1475,64 +1601,64 @@ function RemoteComponent({
               return acc;
             }, {})
           }));
-          const scripts = doc.querySelectorAll(
-            "script[src],script[data-src]"
-          );
-          const inlineScripts = doc.querySelectorAll(
+          const scripts = (isRemoteComponent ? component : doc).querySelectorAll("script[src],script[data-src]");
+          const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
             "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
           );
-          const self = globalThis;
-          const prevNextScripts = self.__next_s;
-          const nextScripts = [];
-          self.__next_s = nextScripts;
-          await Promise.all(
-            Array.from(inlineScripts).filter(
-              (script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
-                "data-remote-components-shared"
-              ) === "string")
-            ).map((script) => {
-              return new Promise((resolve) => {
-                if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
-                  if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
-                    const newScript = document.createElement("script");
-                    const blob = new Blob([script.textContent], {
-                      type: "application/javascript"
-                    });
-                    const blobUrl = URL.createObjectURL(blob);
-                    newScript.onload = () => {
+          if (!isRemoteComponent) {
+            const self = globalThis;
+            const prevNextScripts = self.__next_s;
+            const nextScripts = [];
+            self.__next_s = nextScripts;
+            await Promise.all(
+              Array.from(inlineScripts).filter(
+                (script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
+                  "data-remote-components-shared"
+                ) === "string")
+              ).map((script) => {
+                return new Promise((resolve) => {
+                  if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
+                    if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
+                      const newScript = document.createElement("script");
+                      const blob = new Blob([script.textContent], {
+                        type: "application/javascript"
+                      });
+                      const blobUrl = URL.createObjectURL(blob);
+                      newScript.onload = () => {
+                        resolve(void 0);
+                        URL.revokeObjectURL(blobUrl);
+                        newScript.remove();
+                      };
+                      newScript.onerror = () => {
+                        URL.revokeObjectURL(blobUrl);
+                        newScript.remove();
+                        resolve(void 0);
+                      };
+                      newScript.src = blobUrl;
+                      document.body.appendChild(newScript);
+                    } else {
                       resolve(void 0);
-                      URL.revokeObjectURL(blobUrl);
-                      newScript.remove();
-                    };
-                    newScript.onerror = () => {
-                      URL.revokeObjectURL(blobUrl);
-                      newScript.remove();
-                      resolve(void 0);
-                    };
-                    newScript.src = blobUrl;
-                    document.body.appendChild(newScript);
+                      document.body.appendChild(script);
+                    }
                   } else {
                     resolve(void 0);
-                    document.body.appendChild(script);
                   }
-                } else {
-                  resolve(void 0);
-                }
-              });
-            })
-          );
-          nextScripts.forEach(([scriptSrc, props]) => {
-            const script = document.createElement("script");
-            if (scriptSrc) {
-              script.src = scriptSrc;
-            }
-            if (typeof props.children === "string") {
-              script.textContent = props.children;
-            }
-            setAttributesFromProps(script, props);
-            document.head.appendChild(script);
-          });
-          self.__next_s = prevNextScripts;
+                });
+              })
+            );
+            nextScripts.forEach(([scriptSrc, props]) => {
+              const script = document.createElement("script");
+              if (scriptSrc) {
+                script.src = scriptSrc;
+              }
+              if (typeof props.children === "string") {
+                script.textContent = props.children;
+              }
+              setAttributesFromProps(script, props);
+              document.head.appendChild(script);
+            });
+            self.__next_s = prevNextScripts;
+          }
           let rscName;
           if (rsc) {
             rscName = `__remote_component_rsc_${escapeString(url.href)}_${escapeString(remoteName)}`;
@@ -1549,7 +1675,11 @@ function RemoteComponent({
             url: url.href,
             data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
           };
-          componentHydrationHtml.current = Array.from(doc.querySelectorAll("link,style")).map((link) => link.outerHTML).join("") + component.innerHTML;
+          componentHydrationHtml.current = `${Array.from(
+            doc.querySelectorAll("link,style")
+          ).map((link) => link.outerHTML).join(
+            ""
+          )}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
           const userShared = await shared;
           if ("__remote_components_missing_shared__" in userShared) {
             userShared.__remote_components_missing_shared__().catch((e) => {
@@ -1560,48 +1690,88 @@ function RemoteComponent({
               remoteShared.__remote_components_missing_shared__
             );
           }
-          const result = await loadRemoteComponent({
-            url: new URL(url, location.origin),
-            name: remoteName,
-            rscName,
-            bundle,
-            route: metadata.route,
-            runtime: metadata.runtime,
-            data: newData.data,
-            nextData,
-            scripts: Array.from(scripts).map((script) => {
-              const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
-              const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(
-                scriptSrc
-              )?.groups ?? {
-                prefix: void 0,
-                id: scriptSrc
-              };
-              return {
-                src: new URL(
-                  `${prefix ?? ""}${path}`.replace(
-                    /(?<char>[^:])(?<double>\/\/)/g,
-                    "$1/"
-                  ),
-                  url
-                ).href
-              };
-            }),
-            shared: {
-              ...sharedPolyfills(userShared),
-              ...userShared
-            },
-            remoteShared,
-            container: shadowRoot
-          });
-          if (rsc) {
-            rsc.remove();
-          }
-          setData(newData);
-          if (result.error) {
-            setRemoteComponent(result.error);
+          if (isRemoteComponent) {
+            setData(newData);
+            if (shadowRoot) {
+              let shadowRootHtml = component.innerHTML;
+              if (reset) {
+                shadowRootHtml = `<style data-remote-components-reset="">:host { all: initial; }</style>${shadowRootHtml}`;
+              }
+              shadowRoot.innerHTML = shadowRootHtml;
+              setRemoteComponent(null);
+              const { mount, unmount } = await loadStaticRemoteComponent(
+                Array.from(shadowRoot.querySelectorAll("script")),
+                url
+              );
+              unmountRef.current = unmount;
+              await Promise.all(
+                Array.from(mount).map((mountFn) => mountFn(shadowRoot))
+              );
+            } else if (isolate === false) {
+              setRemoteComponent(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: { __html: component.innerHTML },
+                    ref: prevRemoteComponentContainerRef
+                  }
+                )
+              );
+              const { mount, unmount } = await loadStaticRemoteComponent(
+                Array.from(component.querySelectorAll("script")),
+                url
+              );
+              unmountRef.current = unmount;
+              await Promise.all(
+                Array.from(mount).map(
+                  (mountFn) => mountFn(prevRemoteComponentContainerRef.current)
+                )
+              );
+            }
           } else {
-            setRemoteComponent(result.component);
+            const result = await loadRemoteComponent({
+              url: new URL(url, location.origin),
+              name: remoteName,
+              rscName,
+              bundle,
+              route: metadata.route,
+              runtime: metadata.runtime,
+              data: newData.data,
+              nextData,
+              scripts: Array.from(scripts).map((script) => {
+                const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
+                const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(
+                  scriptSrc
+                )?.groups ?? {
+                  prefix: void 0,
+                  id: scriptSrc
+                };
+                return {
+                  src: new URL(
+                    `${prefix ?? ""}${path}`.replace(
+                      /(?<char>[^:])(?<double>\/\/)/g,
+                      "$1/"
+                    ),
+                    url
+                  ).href
+                };
+              }),
+              shared: {
+                ...sharedPolyfills(userShared),
+                ...userShared
+              },
+              remoteShared,
+              container: shadowRoot
+            });
+            if (rsc) {
+              rsc.remove();
+            }
+            setData(newData);
+            if (result.error) {
+              setRemoteComponent(result.error);
+            } else {
+              setRemoteComponent(result.component);
+            }
           }
         } catch (error) {
           setRemoteComponent(error);
@@ -1616,7 +1786,8 @@ function RemoteComponent({
     name,
     shared,
     shadowRoot,
-    additionalHeaders
+    additionalHeaders,
+    reset
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -1625,7 +1796,7 @@ function RemoteComponent({
     name: data?.name || name,
     bundle: data?.bundle || "default",
     route: data?.route || DEFAULT_ROUTE,
-    runtime: data?.runtime || RUNTIME_WEBPACK
+    runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
   const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react2.createElement)(
@@ -1644,6 +1815,24 @@ function RemoteComponent({
   if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
     shadowRoot.innerHTML = componentHydrationHtml.current;
     componentHydrationHtml.current = null;
+    if (prevIsRemoteComponentRef.current) {
+      loadStaticRemoteComponent(
+        Array.from(shadowRoot.querySelectorAll("script")),
+        url
+      ).then(({ mount }) => {
+        return Promise.all(
+          Array.from(mount).map((mountFn) => mountFn(shadowRoot))
+        );
+      }).catch((e) => {
+        const error = new RemoteComponentsError(
+          `Error mounting remote component from "${url.href}"`,
+          {
+            cause: e
+          }
+        );
+        setRemoteComponent(error);
+      });
+    }
   }
   if (isolate !== false) {
     const shadowRemoteComponentHtml = shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ?? shadowRoot?.querySelector("div[data-bundle][data-route]");