remote-components 0.0.24 → 0.0.25

package/dist/html/host.cjs

@@ -179,14 +179,25 @@ var init_next_client_pages_loader = __esm({
   }
 });
 
+// src/shared/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var init_utils = __esm({
+  "src/shared/utils/index.ts"() {
+    "use strict";
+  }
+});
+
 // src/shared/client/const.ts
 function getBundleKey(bundle) {
-  return bundle.replace(/-/g, "_");
+  return escapeString(bundle);
 }
 var RUNTIME_WEBPACK, RUNTIME_TURBOPACK, REMOTE_COMPONENT_REGEX;
 var init_const = __esm({
   "src/shared/client/const.ts"() {
     "use strict";
+    init_utils();
     RUNTIME_WEBPACK = "webpack";
     RUNTIME_TURBOPACK = "turbopack";
     REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
@@ -868,26 +879,27 @@ function fixPayload(payload) {
     }
   }
 }
-function createRSCStream(name, data) {
+function createRSCStream(rscName, data) {
   return new import_web_streams_polyfill.ReadableStream({
     type: "bytes",
     start(controller) {
       const encoder = new TextEncoder();
       const self = globalThis;
-      if (!self[name] && data.length > 0) {
+      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[name] = self[name] ?? [];
-              self[name].push(JSON.parse(`"${match.groups.rsc}"`));
+              self[rscName] = self[rscName] ?? [];
+              self[rscName].push(JSON.parse(`"${match.groups.rsc}"`));
             }
           }
         });
       }
-      const allChunks = (self[name] ?? [`0:[null]
+      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(
@@ -917,6 +929,9 @@ function createRSCStream(name, data) {
 init_webpack_adapter();
 init_const();
 
+// src/html/host/index.tsx
+init_utils();
+
 // src/shared/client/apply-origin.ts
 var tagNames = [
   "img",
@@ -1253,17 +1268,24 @@ if (typeof HTMLElement !== "undefined") {
       };
       if (rsc) {
         rsc.parentElement?.removeChild(rsc);
+        const rscName = `__remote_component_rsc_${escapeString(url.href)}_${escapeString(this.name)}`;
         const rscClone = document.createElement("script");
-        rscClone.id = `${this.name}_rsc`;
-        rscClone.textContent = rsc.textContent;
+        rscClone.id = `${rscName}_rsc`;
+        rscClone.textContent = rsc.textContent?.replace(
+          new RegExp(`self\\["${this.name}"\\]`, "g"),
+          `self["${rscName}"]`
+        ) ?? "";
         document.body.appendChild(rscClone);
         let cache;
         const RemoteComponentFromReadableStream = ({
           name,
           initial
         }) => {
-          const stream = createRSCStream(name, self[name] ?? [`0:[null]
-`]);
+          const stream = createRSCStream(
+            rscName,
+            self[rscName] ?? [`0:[null]
+`]
+          );
           const Component = cache ?? // cache the component to avoid reloading the RSC flight data
           (cache = createFromReadableStream(stream));
           (0, import_react.useLayoutEffect)(() => {