remote-components 0.0.33 → 0.0.35

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RemoteComponentProps$1 } from '../types-7c207455.js';
+import { R as RemoteComponentProps$1 } from '../types-4e7dea94.js';
 import 'react';
-import '../types-e4a3fa37.js';
+import '../types-cbf6c34f.js';
 
 type LoadRemoteComponentProps = Pick<RemoteComponentProps$1, 'name' | 'bundle' | 'route' | 'runtime' | 'data' | 'nextData' | 'scripts'> & {
     url: URL;

package/dist/react/index.js

@@ -1,30 +1,32 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import {
-  useState,
+  startTransition,
   useEffect,
   useLayoutEffect,
-  useRef,
   useMemo,
-  startTransition
+  useRef,
+  useState
 } from "react";
 import { createPortal } from "react-dom";
+import { applyOriginToNodes } from "#internal/shared/client/apply-origin";
+import { sharedPolyfills } from "#internal/shared/client/polyfill";
 import {
+  DEFAULT_ROUTE,
   loadRemoteComponent,
+  loadStaticRemoteComponent,
+  REMOTE_COMPONENT_REGEX,
   RemoteComponentsError,
-  setAttributesFromProps,
-  DEFAULT_ROUTE,
+  RUNTIME_SCRIPT,
   RUNTIME_WEBPACK,
-  REMOTE_COMPONENT_REGEX
+  setAttributesFromProps
 } from "#internal/shared/client/remote-component";
-import { sharedPolyfills } from "#internal/shared/client/polyfill";
-import { applyOriginToNodes } from "#internal/shared/client/apply-origin";
-import { escapeString, attrToProp } from "#internal/shared/utils";
-import { remoteFetchHeaders } from "#internal/shared/ssr/fetch-headers";
 import {
   failedToFetchRemoteComponentError,
   multipleRemoteComponentsError
 } from "#internal/shared/error";
+import { remoteFetchHeaders } from "#internal/shared/ssr/fetch-headers";
+import { attrToProp, escapeString } from "#internal/shared/utils";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
     return html;
@@ -37,7 +39,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("")}`;
@@ -102,6 +104,10 @@ function RemoteComponent({
   );
   const prevSrcRef = useRef(null);
   const componentHydrationHtml = useRef(null);
+  const prevIsRemoteComponentRef = useRef(false);
+  const prevUrlRef = useRef(null);
+  const prevRemoteComponentContainerRef = useRef(null);
+  const unmountRef = useRef(null);
   useLayoutEffect(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
@@ -214,34 +220,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]")
@@ -256,64 +286,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)}`;
@@ -330,7 +360,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) => {
@@ -341,48 +375,89 @@ 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(
+                // TODO: remove wrapper div by converting HTML to RSC or React tree
+                /* @__PURE__ */ 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);
@@ -397,7 +472,8 @@ function RemoteComponent({
     name,
     shared,
     shadowRoot,
-    additionalHeaders
+    additionalHeaders,
+    reset
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -406,7 +482,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__ */ jsx("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement(
@@ -425,6 +501,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]");