remote-components 0.0.36 → 0.0.37

package/dist/next/host/app-router-server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-router-server.tsx"],"sourcesContent":["import { Children, Suspense } from 'react';\nimport { RemoteComponentClient } from '#internal/next/host/app-router-client';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport interface RemoteComponentProps {\n  /** The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported. */\n  src: string | URL;\n  /** The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page. */\n  name?: string;\n  /** Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation. */\n  isolate?: boolean;\n  /** The mode of the Shadow DOM. Defaults to `open`. */\n  mode?: 'open' | 'closed';\n  /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */\n  reset?: boolean;\n  /** Headers to use when fetching the remote component, such as authentication headers. */\n  additionalHeaders?: Headers | Record<string, string>;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * RemoteComponent is a Next.js component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n *\n * @param src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param name - The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @param mode - The mode of the Shadow DOM. Defaults to `open`.\n * @param reset - Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.\n * @param additionalHeaders - Headers to use when fetching the remote component, such as authentication headers.\n * @param children - Loading fallback content to display while the remote component is being fetched.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n *  return (\n *    <>\n *      <h1>Welcome to My Page</h1>\n *      <p>This page consumes a remote component from another application.</p>\n *      <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n *    </>\n *  );\n * }\n * ```\n */\nexport async function RemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  additionalHeaders,\n  children,\n}: RemoteComponentProps): Promise<React.ReactElement> {\n  const headers = new Headers();\n  for (const [key, value] of additionalHeaders instanceof Headers\n    ? additionalHeaders.entries()\n    : Object.entries(additionalHeaders ?? {})) {\n    headers.set(key, value);\n  }\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    url,\n  } = await fetchRemoteComponent(src, headers, {\n    name: nameProp,\n    rsc: true,\n  });\n\n  // pass all remote component data to the SSR/client layer\n  // render remote component static HTML as children\n  // remote _ssr suffix from remote component id\n  const name = metadata.id.replace(/_ssr$/, '');\n  const remoteComponentClient = (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      type={metadata.type}\n      url={url.href}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n\n  if (Children.count(children) > 0) {\n    // if there are children, render them inside the remote component\n    return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n  }\n\n  return remoteComponentClient;\n}\n"],"mappings":"AAyFI;AAzFJ,SAAS,UAAU,gBAAgB;AACnC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,eAAe,QAAQ,IAAI;AAkDjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,UAAU,IAAI,QAAQ;AAC5B,aAAW,CAAC,KAAK,KAAK,KAAK,6BAA6B,UACpD,kBAAkB,QAAQ,IAC1B,OAAO,QAAQ,qBAAqB,CAAC,CAAC,GAAG;AAC3C,YAAQ,IAAI,KAAK,KAAK;AAAA,EACxB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,SAAS;AAAA,IAC3C,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAKD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,MAAM,SAAS;AAAA,MACf,KAAK,IAAI;AAAA,MAER;AAAA;AAAA,EACH;AAGF,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,oBAAC,YAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/next/host/app-router-server.tsx"],"sourcesContent":["import { Children, Suspense } from 'react';\nimport { RemoteComponentClient } from '#internal/next/host/app-router-client';\nimport { fetchRemoteComponent } from '#internal/shared/ssr/fetch-remote-component';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport interface RemoteComponentProps {\n  /** The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported. */\n  src: string | URL;\n  /** The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page. */\n  name?: string;\n  /** Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation. */\n  isolate?: boolean;\n  /** The mode of the Shadow DOM. Defaults to `open`. */\n  mode?: 'open' | 'closed';\n  /** Whether to include a CSS reset style in the shadow DOM. Defaults to `false`. */\n  reset?: boolean;\n  /** Headers to use when fetching the remote component, such as authentication headers. */\n  additionalHeaders?: Headers | Record<string, string>;\n  /** Loading fallback content to display while the remote component is being fetched. */\n  children?: React.ReactNode;\n}\n\n/**\n * RemoteComponent is a Next.js component that fetches and renders a remote component.\n * It supports SSR and can isolate the remote component in a shadow DOM.\n *\n * @param src - The source URL of the remote component. When using Vercel Microfrontends, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param name - The name of the exposed remote component. Used to identify the remote component when multiple remote components are exposed on a page.\n * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\n * @param mode - The mode of the Shadow DOM. Defaults to `open`.\n * @param reset - Whether to include a CSS reset style in the shadow DOM. Defaults to `false`.\n * @param additionalHeaders - Headers to use when fetching the remote component, such as authentication headers.\n * @param children - Loading fallback content to display while the remote component is being fetched.\n * @returns A React component that renders the remote component.\n *\n * @example\n *\n * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:\n *\n * ```tsx\n * import { RemoteComponent } from 'remote-components/next/host';\n *\n * export default function MyPage() {\n *  return (\n *    <>\n *      <h1>Welcome to My Page</h1>\n *      <p>This page consumes a remote component from another application.</p>\n *      <RemoteComponent src=\"/nextjs-app-remote/components/header\" />\n *    </>\n *  );\n * }\n * ```\n */\nexport async function RemoteComponent({\n  src,\n  name: nameProp,\n  isolate,\n  mode,\n  reset,\n  additionalHeaders,\n  children,\n}: RemoteComponentProps): Promise<React.ReactElement> {\n  const headers = new Headers();\n  for (const [key, value] of additionalHeaders instanceof Headers\n    ? additionalHeaders.entries()\n    : Object.entries(additionalHeaders ?? {})) {\n    headers.set(key, value);\n  }\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n    serverUrl,\n  } = await fetchRemoteComponent(src, headers, {\n    name: nameProp,\n    rsc: true,\n  });\n\n  // pass all remote component data to the SSR/client layer\n  // render remote component static HTML as children\n  // remote _ssr suffix from remote component id\n  const name = metadata.id.replace(/_ssr$/, '');\n  const remoteComponentClient = (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      mode={mode}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      reset={reset}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      type={metadata.type}\n      src={typeof src === 'string' ? src : src.href}\n      serverUrl={serverUrl.href}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n\n  if (Children.count(children) > 0) {\n    // if there are children, render them inside the remote component\n    return <Suspense fallback={children}>{remoteComponentClient}</Suspense>;\n  }\n\n  return remoteComponentClient;\n}\n"],"mappings":"AAyFI;AAzFJ,SAAS,UAAU,gBAAgB;AACnC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,eAAe,QAAQ,IAAI;AAkDjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,UAAU,IAAI,QAAQ;AAC5B,aAAW,CAAC,KAAK,KAAK,KAAK,6BAA6B,UACpD,kBAAkB,QAAQ,IAC1B,OAAO,QAAQ,qBAAqB,CAAC,CAAC,GAAG;AAC3C,YAAQ,IAAI,KAAK,KAAK;AAAA,EACxB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,SAAS;AAAA,IAC3C,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAKD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,QAAM,wBACJ;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,MAAM,SAAS;AAAA,MACf,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MACzC,WAAW,UAAU;AAAA,MAEpB;AAAA;AAAA,EACH;AAGF,MAAI,SAAS,MAAM,QAAQ,IAAI,GAAG;AAEhC,WAAO,oBAAC,YAAS,UAAU,UAAW,iCAAsB;AAAA,EAC9D;AAEA,SAAO;AACT;","names":[]}

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

@@ -1341,6 +1341,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
 var import_jsx_runtime2 = (
   // TODO: remove wrapper div by converting HTML to RSC or React tree
@@ -1366,6 +1375,7 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
+var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function RemoteComponent({
   src,
   isolate,
@@ -1381,7 +1391,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);
@@ -1392,20 +1402,23 @@ function RemoteComponent({
     return nameProp;
   }, [src, nameProp]);
   const [data, setData] = (0, import_react.useState)(null);
+  const url = (0, import_react.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] = (0, import_react.useState)(null);
   const shadowRootContainerRef = (0, import_react.useRef)(null);
   const [shadowRoot, setShadowRoot] = (0, import_react.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 = (0, import_react.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 = (0, import_react.useRef)(null);
@@ -1437,10 +1450,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) {
@@ -1457,7 +1470,7 @@ function RemoteComponent({
         setShadowRoot(shadowRootElement);
       }
     }
-  }, [name, isolate, shadowRoot, remoteComponent, mode, src, data]);
+  }, [isolate, shadowRoot, remoteComponent, mode, keySuffix]);
   (0, import_react.useLayoutEffect)(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
@@ -1481,17 +1494,6 @@ function RemoteComponent({
       }
     }
   }, [shadowRoot, remoteComponent, name]);
-  const url = (0, import_react.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]);
   (0, import_react.useEffect)(() => {
     if (src && src !== prevSrcRef.current) {
       prevSrcRef.current = src;
@@ -1666,7 +1668,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}"]`
@@ -1677,14 +1681,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) => {
@@ -1735,7 +1738,7 @@ function RemoteComponent({
             }
           } else {
             const result = await loadRemoteComponent({
-              url: new URL(url, location.origin),
+              url,
               name: remoteName,
               rscName,
               bundle,
@@ -1792,7 +1795,8 @@ function RemoteComponent({
     shared,
     shadowRoot,
     additionalHeaders,
-    reset
+    reset,
+    id
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -1849,7 +1853,7 @@ function RemoteComponent({
       /* @__PURE__ */ (0, import_jsx_runtime2.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: [
@@ -1865,7 +1869,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)"
     />`