remote-components 0.0.21 → 0.0.23

package/dist/html/host.cjs

@@ -65,20 +65,28 @@ var init_shared_modules = __esm({
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
-  const nextCssOriginal = document.getElementById("__next_css__DO_NOT_USE__");
+  const nextCssOriginal = document.querySelector(
+    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
+  );
   if (nextCssOriginal) {
     nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
   }
   const nextCss = document.createElement("noscript");
   nextCss.id = "__next_css__DO_NOT_USE__";
-  const lastNode = document.head.childNodes[document.head.childNodes.length - 1];
+  nextCss.setAttribute("data-bundle", bundle);
+  nextCss.setAttribute("data-route", route);
+  const nextCssEnd = document.createElement("noscript");
+  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
+  nextCssEnd.setAttribute("data-bundle", bundle);
+  nextCssEnd.setAttribute("data-route", route);
+  document.head.appendChild(nextCssEnd);
   document.head.appendChild(nextCss);
   const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}`)
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
   ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
     (key) => key.includes("/next/dist/client/page-loader.js")
   ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}`)
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
   ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
     (key) => key.includes("/next/dist/client/page-loader.js")
   ) ?? ""] ?? -1;
@@ -120,28 +128,47 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
     ];
     const { default: Component } = componentLoader();
     const { default: App } = appLoader();
-    const cssRE = /\.s?css$/;
-    Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
-      self.__remote_webpack_require__?.[bundle]?.(id);
-    });
-    Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
-      const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
-      if (id) {
+    if (!self.__remote_next_css__) {
+      self.__remote_next_css__ = {};
+    }
+    if (!self.__remote_next_css__[bundle]) {
+      const cssRE = /\.s?css$/;
+      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
         self.__remote_webpack_require__?.[bundle]?.(id);
-      }
-    });
-    if (styleContainer) {
+      });
+      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+        if (id) {
+          self.__remote_webpack_require__?.[bundle]?.(id);
+        }
+      });
+      const elements = [];
       let node = nextCss.previousSibling;
-      while (node && node !== lastNode) {
-        styleContainer.appendChild(node);
+      while (node && node !== nextCssEnd) {
+        elements.push(node);
+        node.remove();
         node = nextCss.previousSibling;
       }
+      self.__remote_next_css__[bundle] = elements;
+    }
+    if (styleContainer) {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        styleContainer.appendChild(el.cloneNode(true));
+      });
+    } else {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        document.head.appendChild(el);
+      });
     }
     delete self.__NEXT_P;
     self.__NEXT_P = __NEXT_P_ORIGINAL;
     if (nextCssOriginal) {
       nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
     }
+    nextCss.remove();
+    nextCssEnd.remove();
     return { Component, App };
   }
   return { Component: null, App: null };
@@ -754,6 +781,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
@@ -861,9 +889,12 @@ if (typeof HTMLElement !== "undefined") {
       this.__next = null;
       this.fouc = null;
       this.isLoading = false;
-      this.attachShadow({ mode: "open" });
+      this.root = null;
+      this.root = this.attachShadow({
+        mode: this.getAttribute("mode") === "closed" ? "closed" : "open"
+      });
       this.fallbackSlot = document.createElement("slot");
-      this.shadowRoot?.appendChild(this.fallbackSlot);
+      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")) {
@@ -873,15 +904,18 @@ if (typeof HTMLElement !== "undefined") {
       }
     }
     static get observedAttributes() {
-      return ["src"];
+      return ["src", "name"];
     }
     // 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) {
         this.load().catch((e) => {
-          throw new Error(`Failed to load remote component: ${e}`);
+          console.error(e);
+          throw new Error(
+            `Failed to load remote component: ${this.bundle ?? this.name ?? this.getAttribute("src")}`
+          );
         });
       }
     }
@@ -907,9 +941,7 @@ if (typeof HTMLElement !== "undefined") {
         const fetchInit = {
           method: "GET",
           headers: {
-            Accept: "text/html",
-            // pass the public address of the remote component to the server used for module map mutation
-            "Vercel-Remote-Component-Url": url.href
+            Accept: "text/html"
           },
           credentials: this.getAttribute("credentials") || "same-origin"
         };
@@ -929,10 +961,10 @@ if (typeof HTMLElement !== "undefined") {
       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`);
@@ -983,17 +1015,25 @@ if (typeof HTMLElement !== "undefined") {
                 newLink.setAttribute(attr.name, attr.value);
               }
             }
-            this.shadowRoot?.appendChild(newLink);
+            this.root?.appendChild(newLink);
           });
         })
       );
-      Array.from(component.children).forEach((el) => {
-        this.shadowRoot?.appendChild(el);
-      });
+      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();
+      if (this.getAttribute("reset") !== null && !this.root?.querySelector("style[data-remote-components-reset]")) {
+        const allInitial = document.createElement("style");
+        allInitial.setAttribute("data-remote-components-reset", "");
+        allInitial.textContent = `:host { all: initial; }`;
+        this.root?.prepend(allInitial);
+      }
       const {
         self,
         createFromReadableStream,
@@ -1021,7 +1061,12 @@ 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"
+      );
       if (rsc) {
         rsc.parentElement?.removeChild(rsc);
         const rscClone = document.createElement("script");
@@ -1038,28 +1083,58 @@ if (typeof HTMLElement !== "undefined") {
           (cache = createFromReadableStream(stream));
           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,
+                {
+                  name: this.name ?? "__vercel_remote_component"
+                }
+              )
+            );
+            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,
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RemoteComponentFromReadableStream, { name: this.name })
+          this.root,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            RemoteComponentFromReadableStream,
+            {
+              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)(
+          if (this.reactRoot) {
+            const root = this.reactRoot;
+            (0, import_react.startTransition)(() => {
+              root.render(
+                App ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(App, { Component, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...nextData.props })
+              );
+              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,
+            this.root,
             App ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(App, { Component, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...nextData.props })
           );
         }
         if (this.fouc) {
-          this.shadowRoot?.removeChild(this.fouc);
+          this.root?.removeChild(this.fouc);
         }
       }
       this.isLoading = false;