remote-components 0.0.34 → 0.0.36

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, "_");
@@ -331,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) {
@@ -667,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,
@@ -834,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))
+        }
       )
     };
   }
@@ -870,6 +875,48 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
   return { component };
 }
 
+// src/shared/client/set-attributes-from-props.ts
+var DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+var ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
+];
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
+    }
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
+    }
+  }
+}
+
 // src/shared/client/static-loader.ts
 async function loadStaticRemoteComponent(scripts, url) {
   const self = globalThis;
@@ -963,48 +1010,6 @@ async function loadStaticRemoteComponent(scripts, url) {
     }
   );
 }
-
-// src/shared/client/set-attributes-from-props.ts
-var DOMAttributeNames = {
-  acceptCharset: "accept-charset",
-  className: "class",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  noModule: "noModule"
-};
-var ignoreProps = [
-  "onLoad",
-  "onReady",
-  "dangerouslySetInnerHTML",
-  "children",
-  "onError",
-  "strategy",
-  "stylesheets"
-];
-function isBooleanScriptAttribute(attr) {
-  return ["async", "defer", "noModule"].includes(attr);
-}
-function setAttributesFromProps(el, props) {
-  for (const [p, value] of Object.entries(props)) {
-    if (!Object.prototype.hasOwnProperty.call(props, p))
-      continue;
-    if (ignoreProps.includes(p))
-      continue;
-    if (value === void 0) {
-      continue;
-    }
-    const attr = DOMAttributeNames[p] || p.toLowerCase();
-    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
-      el[attr] = Boolean(value);
-    } else {
-      el.setAttribute(attr, String(value));
-    }
-    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
-      el.setAttribute(attr, "");
-      el.removeAttribute(attr);
-    }
-  }
-}
 export {
   DEFAULT_ROUTE,
   REMOTE_COMPONENT_REGEX,