remote-components 0.0.33 → 0.0.35

package/dist/internal/shared/client/remote-component.js

@@ -1,46 +1,19 @@
-// src/shared/client/component-loader.ts
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import * as ReactDOMClient from "react-dom/client";
-import * as JSXDevRuntime from "react/jsx-dev-runtime";
-import * as JSXRuntime from "react/jsx-runtime";
-
-// src/shared/webpack/shared-modules.ts
-function applySharedModules(bundle, resolve) {
-  const self = globalThis;
-  if (self.__remote_webpack_require__?.[bundle]) {
-    const modulePaths = Object.keys(
-      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
-    );
-    for (const [key, value] of Object.entries(resolve)) {
-      let ids = modulePaths.filter((p) => p === key);
-      if (ids.length === 0) {
-        ids = modulePaths.filter((p) => p.includes(key));
-      }
-      for (let id of ids) {
-        const webpackBundle = self.__remote_webpack_require__[bundle];
-        if (webpackBundle.m) {
-          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
-            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
-          }
-          webpackBundle.m[id] = (module) => {
-            module.exports = value;
-          };
-        }
-      }
-    }
-  }
-}
-
 // src/shared/error.ts
 var RemoteComponentsError = class extends Error {
+  code = "REMOTE_COMPONENTS_ERROR";
   constructor(message, options) {
     super(message, options);
-    this.code = "REMOTE_COMPONENTS_ERROR";
     this.name = "RemoteComponentsError";
   }
 };
 
+// src/shared/client/component-loader.ts
+import * as React from "react";
+import * as JSXDevRuntime from "react/jsx-dev-runtime";
+import * as JSXRuntime from "react/jsx-runtime";
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
+
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
@@ -153,6 +126,128 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   return { Component: null, App: null };
 }
 
+// src/shared/webpack/shared-modules.ts
+function applySharedModules(bundle, resolve) {
+  const self = globalThis;
+  if (self.__remote_webpack_require__?.[bundle]) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
+    );
+    for (const [key, value] of Object.entries(resolve)) {
+      let ids = modulePaths.filter((p) => p === key);
+      if (ids.length === 0) {
+        ids = modulePaths.filter((p) => p.includes(key));
+      }
+      for (let id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
+            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
+          }
+          webpackBundle.m[id] = (module) => {
+            module.exports = value;
+          };
+        }
+      }
+    }
+  }
+}
+
+// src/shared/client/rsc.ts
+import { ReadableStream } from "web-streams-polyfill";
+function fixPayload(payload) {
+  if (Array.isArray(payload)) {
+    if (payload[0] === "$") {
+      fixPayload(payload[3]);
+      if (payload.length === 4) {
+        payload.push(null, null, 1);
+      }
+    } else {
+      for (const item of payload) {
+        fixPayload(item);
+      }
+    }
+  } else if (typeof payload === "object" && payload !== null) {
+    for (const key in payload) {
+      fixPayload(payload[key]);
+    }
+  }
+}
+function createRSCStream(rscName, data) {
+  return new ReadableStream({
+    type: "bytes",
+    start(controller) {
+      const encoder = new TextEncoder();
+      const self = globalThis;
+      if (data.length > 0) {
+        data.forEach((chunk) => {
+          const lines = chunk.split("\n");
+          for (const line of lines) {
+            const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
+            if (match?.groups?.rsc) {
+              self[rscName] = self[rscName] ?? [];
+              self[rscName].push(JSON.parse(`"${match.groups.rsc}"`));
+            }
+          }
+        });
+      }
+      const allChunks = (self[rscName] ?? [`0:[null]
+`]).join("");
+      self[rscName] = null;
+      allChunks.split("\n").forEach((chunk) => {
+        if (chunk.length > 0) {
+          const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
+            chunk
+          )?.groups ?? {};
+          if (payload) {
+            const jsonPayload = JSON.parse(payload);
+            fixPayload(jsonPayload);
+            const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
+            controller.enqueue(encoder.encode(`${reconstruct}
+`));
+          } else {
+            controller.enqueue(encoder.encode(`${chunk}
+`));
+          }
+        } else {
+          controller.enqueue(encoder.encode(`${chunk}
+`));
+        }
+      });
+      controller.close();
+    }
+  });
+}
+
+// src/shared/client/script-loader.ts
+async function loadScripts(scripts) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(/\/_next\/\[.+\](?<whitespace>%20| )/, "/_next/"),
+          location.origin
+        ).href;
+        const newScript = document.createElement("script");
+        newScript.onload = () => {
+          resolve();
+        };
+        newScript.onerror = () => {
+          reject(
+            new RemoteComponentsError(
+              `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
+            )
+          );
+        };
+        newScript.src = newSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
+}
+
 // src/shared/utils/index.ts
 function escapeString(str) {
   return str.replace(/[^a-z0-9]/g, "_");
@@ -162,6 +257,7 @@ function escapeString(str) {
 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);
@@ -330,7 +426,10 @@ async function handleTurbopackChunk(code, bundle, url) {
 function createModuleRequire(runtime) {
   return (id) => {
     const self = globalThis;
-    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? { bundle: "default", id };
+    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
+      bundle: "default",
+      id
+    };
     const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
     try {
       if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
@@ -666,101 +765,6 @@ function handleTurbopackModule(bundle, moduleId, id) {
   return moduleExports.exports;
 }
 
-// src/shared/client/script-loader.ts
-async function loadScripts(scripts) {
-  await Promise.all(
-    scripts.map((script) => {
-      return new Promise((resolve, reject) => {
-        const newSrc = new URL(
-          // remove the remote component bundle name identifier from the script src
-          script.src.replace(/\/_next\/\[.+\](?<whitespace>%20| )/, "/_next/"),
-          location.origin
-        ).href;
-        const newScript = document.createElement("script");
-        newScript.onload = () => {
-          resolve();
-        };
-        newScript.onerror = () => {
-          reject(
-            new RemoteComponentsError(
-              `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
-            )
-          );
-        };
-        newScript.src = newSrc;
-        newScript.async = true;
-        document.head.appendChild(newScript);
-      });
-    })
-  );
-}
-
-// src/shared/client/rsc.ts
-import { ReadableStream } from "web-streams-polyfill";
-function fixPayload(payload) {
-  if (Array.isArray(payload)) {
-    if (payload[0] === "$") {
-      fixPayload(payload[3]);
-      if (payload.length === 4) {
-        payload.push(null, null, 1);
-      }
-    } else {
-      for (const item of payload) {
-        fixPayload(item);
-      }
-    }
-  } else if (typeof payload === "object" && payload !== null) {
-    for (const key in payload) {
-      fixPayload(payload[key]);
-    }
-  }
-}
-function createRSCStream(rscName, data) {
-  return new ReadableStream({
-    type: "bytes",
-    start(controller) {
-      const encoder = new TextEncoder();
-      const self = globalThis;
-      if (data.length > 0) {
-        data.forEach((chunk) => {
-          const lines = chunk.split("\n");
-          for (const line of lines) {
-            const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
-            if (match?.groups?.rsc) {
-              self[rscName] = self[rscName] ?? [];
-              self[rscName].push(JSON.parse(`"${match.groups.rsc}"`));
-            }
-          }
-        });
-      }
-      const allChunks = (self[rscName] ?? [`0:[null]
-`]).join("");
-      self[rscName] = null;
-      allChunks.split("\n").forEach((chunk) => {
-        if (chunk.length > 0) {
-          const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
-            chunk
-          )?.groups ?? {};
-          if (payload) {
-            const jsonPayload = JSON.parse(payload);
-            fixPayload(jsonPayload);
-            const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
-            controller.enqueue(encoder.encode(`${reconstruct}
-`));
-          } else {
-            controller.enqueue(encoder.encode(`${chunk}
-`));
-          }
-        } else {
-          controller.enqueue(encoder.encode(`${chunk}
-`));
-        }
-      });
-      controller.close();
-    }
-  });
-}
-
 // src/shared/client/component-loader.ts
 async function loadRemoteComponent({
   url,
@@ -833,7 +837,9 @@ async function loadRemoteComponent({
       component: null,
       error: new RemoteComponentsError(
         `Failed to load remote component "${name}".`,
-        { cause: error instanceof Error ? error : new Error(String(error)) }
+        {
+          cause: error instanceof Error ? error : new Error(String(error))
+        }
       )
     };
   }
@@ -891,7 +897,7 @@ function isBooleanScriptAttribute(attr) {
 }
 function setAttributesFromProps(el, props) {
   for (const [p, value] of Object.entries(props)) {
-    if (!Object.prototype.hasOwnProperty.call(props, p))
+    if (!Object.hasOwn(props, p))
       continue;
     if (ignoreProps.includes(p))
       continue;
@@ -910,9 +916,104 @@ function setAttributesFromProps(el, props) {
     }
   }
 }
+
+// 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()
+    }
+  );
+}
 export {
   DEFAULT_ROUTE,
   REMOTE_COMPONENT_REGEX,
+  RUNTIME_SCRIPT,
   RUNTIME_TURBOPACK,
   RUNTIME_WEBPACK,
   RemoteComponentsError,
@@ -921,6 +1022,7 @@ export {
   getBundleKey,
   loadRemoteComponent,
   loadScripts,
+  loadStaticRemoteComponent,
   setAttributesFromProps,
   setupWebpackRuntime
 };