remote-components 0.0.36 → 0.0.37

package/dist/next/host/client/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { L as LoadRemoteComponentProps } from '../../../component-loader-8951c052.js';
+import { L as LoadRemoteComponentProps } from '../../../component-loader-2ca91ad8.js';
 
 declare module 'react/jsx-runtime' {
     namespace JSX {

package/dist/next/host/client/index.js

@@ -1315,6 +1315,15 @@ function remoteFetchHeaders(additionalHeaders) {
   };
 }
 
+// src/shared/ssr/get-client-or-server-url.ts
+function getClientOrServerUrl(src, serverFallback) {
+  const fallback = typeof location !== "undefined" ? location.href : serverFallback;
+  if (!src) {
+    return new URL(fallback);
+  }
+  return typeof src === "string" ? new URL(src, fallback) : src;
+}
+
 // src/react/index.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
@@ -1337,6 +1346,7 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
+var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function RemoteComponent({
   src,
   isolate,
@@ -1352,7 +1362,7 @@ function RemoteComponent({
     if (typeof src === "string") {
       const url2 = new URL(
         src,
-        typeof document !== "undefined" ? location.href : "http://localhost"
+        typeof document !== "undefined" ? location.href : DUMMY_FALLBACK
       );
       if (url2.hash) {
         return url2.hash.slice(1);
@@ -1363,20 +1373,23 @@ function RemoteComponent({
     return nameProp;
   }, [src, nameProp]);
   const [data, setData] = useState(null);
+  const url = useMemo(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
+  const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
+  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}`;
   const [remoteComponent, setRemoteComponent] = useState(null);
   const shadowRootContainerRef = useRef(null);
   const [shadowRoot, setShadowRoot] = useState(() => {
     const self = globalThis;
-    const shadowRootKey = `__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`;
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
     const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
     )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
     self[shadowRootKey] = null;
     return ssrShadowRoot;
   });
   const htmlRef = useRef(
     typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
     )?.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);
@@ -1408,10 +1421,10 @@ function RemoteComponent({
     }
     if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
       const self = globalThis;
-      const shadowRootKey = `__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
       let shadowRootElement = null;
       const element = document.querySelector(
-        `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+        `[data-remote-component-id="shadowroot_${keySuffix}"]`
       );
       shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
       if (!shadowRootElement && element) {
@@ -1428,7 +1441,7 @@ function RemoteComponent({
         setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot, remoteComponent, mode, src, data]);
+  }, [isolate, shadowRoot, remoteComponent, mode, keySuffix]);
   useLayoutEffect(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
@@ -1452,17 +1465,6 @@ function RemoteComponent({
       }
     }
   }, [shadowRoot, remoteComponent, name]);
-  const url = useMemo(() => {
-    if (typeof src !== "string")
-      return new URL(
-        typeof document !== "undefined" ? location.href : "http://localhost"
-      );
-    try {
-      return typeof document !== "undefined" ? new URL(src, location.href) : new URL(src);
-    } catch {
-      return new URL(src, "http://localhost");
-    }
-  }, [src]);
   useEffect(() => {
     if (src && src !== prevSrcRef.current) {
       prevSrcRef.current = src;
@@ -1637,7 +1639,9 @@ function RemoteComponent({
           }
           let rscName;
           if (rsc) {
-            rscName = `__remote_component_rsc_${escapeString(url.href)}_${escapeString(remoteName)}`;
+            rscName = `__remote_component_rsc_${escapeString(
+              id
+            )}_${escapeString(remoteName)}`;
             rsc.textContent = rsc.textContent?.replace(
               new RegExp(`self\\["${remoteName}"\\]`, "g"),
               `self["${rscName}"]`
@@ -1648,14 +1652,13 @@ function RemoteComponent({
             ...metadata,
             links,
             remoteShared,
-            url: url.href,
+            src: typeof src === "string" ? src : src.href,
+            serverUrl: url.href,
             data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
           };
           componentHydrationHtml.current = `${Array.from(
             doc.querySelectorAll("link,style")
-          ).map((link) => link.outerHTML).join(
-            ""
-          )}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
+          ).map((link) => link.outerHTML).join("")}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
           const userShared = await shared;
           if ("__remote_components_missing_shared__" in userShared) {
             userShared.__remote_components_missing_shared__().catch((e) => {
@@ -1707,7 +1710,7 @@ function RemoteComponent({
             }
           } else {
             const result = await loadRemoteComponent({
-              url: new URL(url, location.origin),
+              url,
               name: remoteName,
               rscName,
               bundle,
@@ -1764,7 +1767,8 @@ function RemoteComponent({
     shared,
     shadowRoot,
     additionalHeaders,
-    reset
+    reset,
+    id
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -1821,7 +1825,7 @@ function RemoteComponent({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          "data-remote-component-id": `shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`,
+          "data-remote-component-id": `shadowroot_${keySuffix}`,
           id: `shadowroot_${data?.name ?? name}`,
           ref: shadowRootContainerRef,
           children: [
@@ -1837,7 +1841,7 @@ function RemoteComponent({
       src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
       onload="(function(el){
         const root = el.getRootNode();
-        globalThis.__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)} = root;
+        globalThis.__remote_components_shadowroot_${keySuffix} = root;
         el.parentElement.remove();
       })(this)"
     />`