remote-components 0.0.22 → 0.0.24

package/dist/react/index.js

@@ -1,4 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
 import {
   useState,
   useEffect,
@@ -15,11 +16,13 @@ import {
   RUNTIME_WEBPACK,
   REMOTE_COMPONENT_REGEX
 } from "#internal/shared/client/remote-component";
+import { sharedPolyfills } from "#internal/shared/client/polyfill";
+import { applyOriginToNodes } from "#internal/shared/client/apply-origin";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
     return html;
-  const temp = document.createElement("div");
-  temp.innerHTML = html;
+  const parser = new DOMParser();
+  const temp = parser.parseFromString(html, "text/html");
   const ssrRemoteComponentContainer = temp.querySelector(
     'div[id^="__REMOTE_COMPONENT"]'
   );
@@ -34,9 +37,15 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
+const attrToProp = {
+  fetchpriority: "fetchPriority",
+  crossorigin: "crossOrigin"
+};
 function RemoteComponent({
   src,
   isolate,
+  mode = "open",
+  reset,
   credentials = "same-origin",
   name: nameProp = "__vercel_remote_component",
   shared = {},
@@ -59,15 +68,19 @@ function RemoteComponent({
   const [data, setData] = useState(null);
   const [remoteComponent, setRemoteComponent] = useState(null);
   const shadowRootContainerRef = useRef(null);
-  const [shadowRoot, setShadowRoot] = useState(
-    typeof document !== "undefined" ? document.getElementById(
-      `shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${name}`
-    )?.shadowRoot ?? null : null
-  );
+  const [shadowRoot, setShadowRoot] = useState(() => {
+    const self = globalThis;
+    const shadowRootKey = `__remote_components_shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}`;
+    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}"]`
+    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
+    self[shadowRootKey] = null;
+    return ssrShadowRoot;
+  });
   const htmlRef = useRef(
-    typeof document !== "undefined" ? document.getElementById(
-      `shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${name}`
-    )?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML : null
+    typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}"]`
+    )?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ?? document.querySelector(`div[data-bundle][data-route][id^="${name}"]`)?.innerHTML ?? document.querySelector("div[data-bundle][data-route]")?.innerHTML : null
   );
   const endTemplateRef = useRef(null);
   const childrenRef = useRef(
@@ -83,6 +96,7 @@ function RemoteComponent({
       return elements;
     })() : []
   );
+  const prevSrcRef = useRef(null);
   useLayoutEffect(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
@@ -91,12 +105,19 @@ function RemoteComponent({
       childrenRef.current = [];
     }
     if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}`;
       let shadowRootElement = null;
-      const element = document.getElementById(`shadowroot_${name}`);
-      shadowRootElement = element?.shadowRoot ?? null;
+      const element = document.querySelector(
+        `[data-remote-component-id="shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}"]`
+      );
+      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
       if (!shadowRootElement && element) {
-        element.attachShadow({ mode: "open" });
-        shadowRootElement = element.shadowRoot;
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+          self[shadowRootKey] = shadowRootElement;
+        } catch {
+        }
       }
       if (shadowRootElement) {
         shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
@@ -105,7 +126,30 @@ function RemoteComponent({
         setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot, remoteComponent]);
+  }, [name, isolate, shadowRoot, remoteComponent, mode, src, data]);
+  useLayoutEffect(() => {
+    if (shadowRoot && remoteComponent) {
+      const resetStyles = shadowRoot.querySelectorAll(
+        "style[data-remote-components-reset]"
+      );
+      if (resetStyles.length > 1) {
+        resetStyles.forEach((style, index) => {
+          if (index > 0) {
+            style.remove();
+          }
+        });
+      }
+      htmlRef.current = null;
+      let el = shadowRoot.childNodes[0] ?? null;
+      while (el && (!("id" in el) || el.id !== `${name}_start`)) {
+        const nextEl = el.nextSibling;
+        if (el.nodeName !== "LINK" && el.nodeName !== "STYLE") {
+          el.parentNode?.removeChild(el);
+        }
+        el = nextEl;
+      }
+    }
+  }, [shadowRoot, remoteComponent, name]);
   const url = useMemo(() => {
     if (typeof src !== "string")
       return new URL(
@@ -119,114 +163,128 @@ function RemoteComponent({
   }, [src]);
   useEffect(() => {
     let mounted = true;
-    startTransition(async () => {
-      try {
-        let html = getRemoteComponentHtml(
-          htmlRef.current ?? (endTemplateRef.current?.previousElementSibling?.tagName === "div" ? endTemplateRef.current.previousElementSibling.innerHTML : "")
-        );
-        if (!html && src) {
-          const fetchInit = {
-            method: "GET",
-            headers: {
-              Accept: "text/html"
-            },
-            credentials
+    if (src && src !== prevSrcRef.current) {
+      prevSrcRef.current = src;
+      startTransition(async () => {
+        try {
+          let html = getRemoteComponentHtml(
+            htmlRef.current ?? (endTemplateRef.current?.previousElementSibling?.tagName === "div" ? endTemplateRef.current.previousElementSibling.innerHTML : "")
+          );
+          if (!html && src) {
+            const fetchInit = {
+              method: "GET",
+              headers: {
+                Accept: "text/html"
+              },
+              credentials
+            };
+            const res = await fetch(url, fetchInit);
+            if (!res.ok) {
+              throw new Error(
+                `Failed to fetch remote component "${name}": ${res.status}`
+              );
+            }
+            const remoteHtml = await res.text();
+            htmlRef.current = remoteHtml;
+            html = getRemoteComponentHtml(remoteHtml);
+          }
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(html, "text/html");
+          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");
+          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 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)
           };
-          const res = await fetch(url, fetchInit);
-          if (!res.ok) {
-            throw new Error(
-              `Failed to fetch remote component "${name}": ${res.status}`
-            );
+          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)) {
+            throw new Error(`Failed to find component with id "${remoteName}"`);
           }
-          const remoteHtml = await res.text();
-          htmlRef.current = remoteHtml;
-          html = getRemoteComponentHtml(remoteHtml);
-        }
-        const doc = document.createElement("div");
-        doc.innerHTML = html;
-        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");
-        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 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)
-        };
-        const remoteSharedEl = doc.querySelector(`#${remoteName}_shared`);
-        const remoteShared = JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {};
-        remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);
-        if (!component || !(rsc || nextData)) {
-          throw new Error(`Failed to find component with id "${remoteName}"`);
-        }
-        const links = Array.from(
-          doc.querySelectorAll("link[href]")
-        ).map((link) => ({
-          rel: link.rel,
-          href: new URL(link.getAttribute("href") ?? link.href, url).href,
-          as: link.getAttribute("as") || void 0
-        }));
-        const scripts = doc.querySelectorAll(
-          "script[src],script[data-src]"
-        );
-        const inlineScripts = 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).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();
+          applyOriginToNodes(doc, url);
+          const links = Array.from(
+            doc.querySelectorAll("link[href]")
+          ).filter((link) => {
+            return !component.contains(link);
+          }).map((link) => ({
+            href: new URL(link.getAttribute("href") ?? link.href, url).href,
+            ...link.getAttributeNames().reduce((acc, key) => {
+              if (key !== "href") {
+                acc[attrToProp[key] ?? key] = link.getAttribute(key) ?? "";
+              }
+              return acc;
+            }, {})
+          }));
+          const scripts = doc.querySelectorAll(
+            "script[src],script[data-src]"
+          );
+          const inlineScripts = 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 = () => {
+                      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);
-                  };
-                  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;
-        if (mounted) {
+              });
+            })
+          );
+          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;
           if (rsc) {
             document.body.appendChild(rsc);
           }
@@ -237,6 +295,7 @@ function RemoteComponent({
             url: url.href,
             data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
           };
+          const userShared = await shared;
           const result = await loadRemoteComponent({
             url: new URL(url, location.origin),
             name: remoteName,
@@ -263,25 +322,29 @@ function RemoteComponent({
                 ).href
               };
             }),
-            shared,
+            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) {
           if (mounted) {
-            setData(newData);
-            if (result.error) {
-              setRemoteComponent(result.error);
-            } else {
-              setRemoteComponent(result.component);
-            }
+            setRemoteComponent(error);
           }
         }
-      } catch (error) {
-        if (mounted) {
-          setRemoteComponent(error);
-        }
-      }
-    });
+      });
+    }
     return () => {
       mounted = false;
     };
@@ -295,50 +358,65 @@ function RemoteComponent({
     route: data?.route || DEFAULT_ROUTE,
     runtime: data?.runtime || RUNTIME_WEBPACK
   }) });
-  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ jsx(
+  const resetStyle = reset ? /* @__PURE__ */ jsx("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null;
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement(
     "link",
     {
-      as: link.as,
+      ...link,
       href: new URL(link.href, url).href,
-      rel: link.rel
-    },
-    `${link.href}_${link.rel}`
+      key: JSON.stringify(link)
+    }
   )) || null;
   const componentToRender = /* @__PURE__ */ jsxs(Fragment, { children: [
+    resetStyle,
     linksToRender,
     remoteComponent ?? children
   ] });
   if (isolate !== false) {
-    const shadowRemoteComponentHtml = shadowRoot?.querySelector(
-      `#__REMOTE_COMPONENT${name}`
-    );
+    const shadowRemoteComponentHtml = shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ?? shadowRoot?.querySelector("div[data-bundle][data-route]");
     if (shadowRemoteComponentHtml) {
       shadowRemoteComponentHtml.remove();
     }
-    if (shadowRoot && remoteComponent && htmlRef.current) {
-      const content = shadowRoot.querySelectorAll(":not(link,style)");
-      content.forEach((node) => node.remove());
-      htmlRef.current = null;
-    }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       metadataJson,
       /* @__PURE__ */ jsxs(
         "div",
         {
-          id: `shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${data?.name ?? name}`,
+          "data-remote-component-id": `shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")}`,
+          id: `shadowroot_${data?.name ?? name}`,
           ref: shadowRootContainerRef,
           children: [
             typeof document === "undefined" ? (
               // eslint-disable-next-line react/no-unknown-property
-              /* @__PURE__ */ jsxs("template", { shadowrootmode: "open", children: [
+              /* @__PURE__ */ jsxs("template", { shadowrootmode: mode, children: [
+                typeof document === "undefined" ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: {
+                      __html: `<img
+      alt="" decoding="async" style="display:none"
+      src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
+      onload="(function(el){
+        const root = el.getRootNode();
+        globalThis.__remote_components_shadowroot_${src ? new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href.replace(/[^a-z0-9]/g, "_") : ""}_${(data?.name ?? name).replace(/[^a-z0-9]/g, "_")} = root;
+        el.parentElement.remove();
+      })(this)"
+    />`
+                    }
+                  }
+                ) : null,
+                resetStyle,
                 linksToRender,
                 children
               ] })
             ) : null,
             shadowRoot && remoteComponent ? createPortal(
               /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("template", { id: `${name}_start` }),
+                resetStyle,
                 linksToRender,
-                remoteComponent
+                remoteComponent,
+                /* @__PURE__ */ jsx("template", { id: `${name}_end`, ref: endTemplateRef })
               ] }),
               shadowRoot
             ) : null
@@ -347,6 +425,7 @@ function RemoteComponent({
       )
     ] });
   }
+  htmlRef.current = null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("template", { id: `${name}_start` }),
     metadataJson,