remote-components 0.0.1 → 0.0.3

package/dist/next/host/app-client.cjs

@@ -24,10 +24,11 @@ __export(app_client_exports, {
 module.exports = __toCommonJS(app_client_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react2 = require("react");
+var import_react_dom = require("react-dom");
 var import_host = require("@remote-component/shared/host");
 var import_remote_component = require("../../shared/client/remote-component");
 function RemoteComponentClient({
+  url,
   name,
   bundle,
   route = import_remote_component.DEFAULT_ROUTE,
@@ -37,13 +38,40 @@ function RemoteComponentClient({
   scripts = [],
   links = [],
   remoteShared = {},
+  isolate,
   children
 }) {
-  const [component, setComponent] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
+  const [component, setComponent] = (0, import_react.useState)(null);
+  if (component instanceof Error) {
+    throw component;
+  }
+  const shouldUseChildren = (!component || component && !nextData && typeof component.then !== "function") && // if the remote Next.js Pages Router application is in development mode
+  // we don't use the provided static HTML
+  // to mitigate layout shift when loading CSS using JavaScript on the client
+  nextData?.buildId !== "development";
+  const [shadowRoot, setShadowRoot] = (0, import_react.useState)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
+      let shadowRootElement = null;
+      const element = document.getElementById(`shadowroot_${name}`);
+      shadowRootElement = element?.shadowRoot ?? null;
+      if (!shadowRootElement && element) {
+        element.attachShadow({ mode: "open" });
+        shadowRootElement = element.shadowRoot;
+      }
+      if (shadowRootElement) {
+        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
+          node.remove();
+        });
+        setShadowRoot(shadowRootElement);
+      }
+    }
+  }, [name, isolate, shadowRoot]);
+  (0, import_react.useEffect)(() => {
     let mounted = true;
-    if (!component) {
+    if (!component && (isolate === false || shadowRoot)) {
       (0, import_remote_component.loadRemoteComponent)({
+        url: new URL(url, location.origin),
         name,
         bundle,
         route,
@@ -52,7 +80,8 @@ function RemoteComponentClient({
         nextData,
         scripts,
         shared: import_host.shared,
-        remoteShared
+        remoteShared,
+        container: shadowRoot
       }).then((result) => {
         if (mounted) {
           if (result.error) {
@@ -71,6 +100,7 @@ function RemoteComponentClient({
       mounted = false;
     };
   }, [
+    url,
     component,
     name,
     bundle,
@@ -81,15 +111,39 @@ function RemoteComponentClient({
     nextData,
     remoteShared,
     children,
-    links
+    links,
+    isolate,
+    shadowRoot
   ]);
-  if (component instanceof Error) {
-    throw component;
+  let componentToRender = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: shouldUseChildren ? children : component });
+  let linksToRender = links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "link",
+    {
+      as: link.as,
+      href: link.href,
+      rel: link.rel
+    },
+    `${link.href}_${link.rel}`
+  ));
+  if (isolate !== false) {
+    componentToRender = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: `shadowroot_${name}`, children: [
+      typeof document === "undefined" ? (
+        // eslint-disable-next-line react/no-unknown-property
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("template", { shadowrootmode: "open", children: [
+          linksToRender,
+          componentToRender
+        ] })
+      ) : null,
+      shadowRoot ? (0, import_react_dom.createPortal)(
+        shadowRoot.querySelectorAll("link").length !== links.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          linksToRender,
+          componentToRender
+        ] }) : componentToRender,
+        shadowRoot
+      ) : null
+    ] });
+    linksToRender = null;
   }
-  const shouldUseChildren = (!component || component && !nextData && typeof component.then !== "function") && // if the remote Next.js Pages Router application is in development mode
-  // we don't use the provided static HTML
-  // to mitigate layout shift when loading CSS using JavaScript on the client
-  nextData?.buildId !== "development";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
       name,
@@ -97,7 +151,17 @@ function RemoteComponentClient({
       route,
       runtime
     }) }),
-    shouldUseChildren ? children : component,
+    linksToRender,
+    componentToRender,
+    links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "link",
+      {
+        as: link.as,
+        href: link.href,
+        rel: link.rel
+      },
+      `${link.href}_${link.rel}`
+    )),
     data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id: `${name}_rsc`, children: data.join("\n") }) : null,
     nextData ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "script",
@@ -106,15 +170,7 @@ function RemoteComponentClient({
         type: "application/json",
         children: JSON.stringify(nextData)
       }
-    ) : null,
-    links.map((link) => /* @__PURE__ */ (0, import_react.createElement)(
-      "link",
-      {
-        ...link,
-        key: `${link.href}_${link.rel}`,
-        precedence: bundle
-      }
-    ))
+    ) : null
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/next/host/app-client.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component) {\n      loadRemoteComponent({\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n  ]);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {shouldUseChildren ? children : (component as React.ReactNode)}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {links.map((link) => (\n        <link\n          {...link}\n          key={`${link.href as string}_${link.rel}`}\n          precedence={bundle}\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkGI;AAsBI;AAtHR,IAAAA,gBAAoC;AACpC,kBAAuB;AACvB,8BAIO;AASA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AAAA,EACX,QAAQ,CAAC;AAAA,EACT,eAAe,CAAC;AAAA,EAChB;AACF,GAAyB;AACvB,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAkC,IAAI;AAExE,+BAAU,MAAM;AACd,QAAI,UAAU;AAGd,QAAI,CAAC,WAAW;AACd,uDAAoB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,EACE,KAAK,CAAC,WAAW;AAChB,YAAI,SAAS;AACX,cAAI,OAAO,OAAO;AAChB,yBAAa,OAAO,KAAK;AAAA,UAC3B,OAAO;AACL,yBAAa,OAAO,SAAS;AAAA,UAC/B;AAAA,QACF;AAAA,MACF,CAAC,EACA,MAAM,CAAC,UAAiB;AACvB,YAAI,SAAS;AACX,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,CAAC;AAAA,IACL;AAEA,WAAO,MAAM;AACX,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,MAAI,qBAAqB,OAAO;AAC9B,UAAM;AAAA,EACR;AAGA,QAAM,qBACH,CAAC,aACC,aACC,CAAC,YACD,OAAQ,UAA0C,SAChD;AAAA;AAAA;AAAA,EAIN,UAAU,YAAY;AAExB,SACE,4EACE;AAAA,gDAAC,YAAO,yBAAqB,MAAC,MAAK,oBAChC,eAAK,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,GACH;AAAA,IACC,oBAAoB,WAAY;AAAA,IAChC,KAAK,SAAS,IACb,4CAAC,YAAO,IAAI,GAAG,YAAa,eAAK,KAAK,IAAI,GAAE,IAC1C;AAAA,IACH,WACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG,UAAU,MAAM,QAAQ,OAAO,GAAG,IAAI;AAAA,QAC7C,MAAK;AAAA,QAEJ,eAAK,UAAU,QAAQ;AAAA;AAAA,IAC1B,IACE;AAAA,IACH,MAAM,IAAI,CAAC,SACV;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK,GAAG,KAAK,QAAkB,KAAK;AAAA,QACpC,YAAY;AAAA;AAAA,IACd,CACD;AAAA,KACH;AAEJ;","names":["import_react"]}
+{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      template: {\n        shadowrootmode?: 'open' | 'closed';\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(`shadowroot_${name}`);\n      shadowRootElement = element?.shadowRoot ?? null;\n\n      if (!shadowRootElement && element) {\n        // create a shadow root if it doesn't exist\n        // this is a fallback for browsers that don't support declarative shadow DOM\n        element.attachShadow({ mode: 'open' });\n        shadowRootElement = element.shadowRoot;\n      }\n\n      if (shadowRootElement) {\n        // remove all nodes from the shadow root except links\n        shadowRootElement.querySelectorAll('*:not(link)').forEach((node) => {\n          node.remove();\n        });\n        setShadowRoot(shadowRootElement);\n      }\n    }\n  }, [name, isolate, shadowRoot]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component && (isolate === false || shadowRoot)) {\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={link.href as string}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div id={`shadowroot_${name}`}>\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode=\"open\">\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                componentToRender\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {links.map((link) => (\n        <link\n          as={link.as as string}\n          href={link.href as string}\n          key={`${link.href as string}_${link.rel}`}\n          rel={link.rel as string}\n        />\n      ))}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/next/host/app-client.d.ts

@@ -3,6 +3,7 @@ import * as react from 'react';
 import { R as RemoteComponentMetadata } from '../../types-280a3640.js';
 
 interface RemoteComponentProps {
+    url: string;
     name: string;
     bundle: string;
     route?: string;
@@ -19,15 +20,26 @@ interface RemoteComponentProps {
     }[];
     links?: Record<string, string | boolean>[];
     remoteShared?: Record<string, string>;
+    isolate?: boolean;
     children: react.ReactNode;
 }
 
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            template: {
+                shadowrootmode?: 'open' | 'closed';
+                children: React.ReactNode;
+            };
+        }
+    }
+}
 /**
  * RemoteComponentClient - Main component for rendering remote components
  *
  * This component handles the loading and rendering of remote microfrontends.
  * It supports both RSC (React Server Components) and Next.js Pages Router based components.
  */
-declare function RemoteComponentClient({ name, bundle, route, runtime, data, nextData, scripts, links, remoteShared, children, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
+declare function RemoteComponentClient({ url, name, bundle, route, runtime, data, nextData, scripts, links, remoteShared, isolate, children, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
 
 export { RemoteComponentClient };

package/dist/next/host/app-client.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createElement } from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
 import { shared } from "@remote-component/shared/host";
 import {
   loadRemoteComponent,
@@ -9,6 +9,7 @@ import {
   RUNTIME_WEBPACK
 } from "../../shared/client/remote-component";
 function RemoteComponentClient({
+  url,
   name,
   bundle,
   route = DEFAULT_ROUTE,
@@ -18,13 +19,40 @@ function RemoteComponentClient({
   scripts = [],
   links = [],
   remoteShared = {},
+  isolate,
   children
 }) {
   const [component, setComponent] = useState(null);
+  if (component instanceof Error) {
+    throw component;
+  }
+  const shouldUseChildren = (!component || component && !nextData && typeof component.then !== "function") && // if the remote Next.js Pages Router application is in development mode
+  // we don't use the provided static HTML
+  // to mitigate layout shift when loading CSS using JavaScript on the client
+  nextData?.buildId !== "development";
+  const [shadowRoot, setShadowRoot] = useState(null);
+  useLayoutEffect(() => {
+    if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
+      let shadowRootElement = null;
+      const element = document.getElementById(`shadowroot_${name}`);
+      shadowRootElement = element?.shadowRoot ?? null;
+      if (!shadowRootElement && element) {
+        element.attachShadow({ mode: "open" });
+        shadowRootElement = element.shadowRoot;
+      }
+      if (shadowRootElement) {
+        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
+          node.remove();
+        });
+        setShadowRoot(shadowRootElement);
+      }
+    }
+  }, [name, isolate, shadowRoot]);
   useEffect(() => {
     let mounted = true;
-    if (!component) {
+    if (!component && (isolate === false || shadowRoot)) {
       loadRemoteComponent({
+        url: new URL(url, location.origin),
         name,
         bundle,
         route,
@@ -33,7 +61,8 @@ function RemoteComponentClient({
         nextData,
         scripts,
         shared,
-        remoteShared
+        remoteShared,
+        container: shadowRoot
       }).then((result) => {
         if (mounted) {
           if (result.error) {
@@ -52,6 +81,7 @@ function RemoteComponentClient({
       mounted = false;
     };
   }, [
+    url,
     component,
     name,
     bundle,
@@ -62,15 +92,39 @@ function RemoteComponentClient({
     nextData,
     remoteShared,
     children,
-    links
+    links,
+    isolate,
+    shadowRoot
   ]);
-  if (component instanceof Error) {
-    throw component;
+  let componentToRender = /* @__PURE__ */ jsx(Fragment, { children: shouldUseChildren ? children : component });
+  let linksToRender = links.map((link) => /* @__PURE__ */ jsx(
+    "link",
+    {
+      as: link.as,
+      href: link.href,
+      rel: link.rel
+    },
+    `${link.href}_${link.rel}`
+  ));
+  if (isolate !== false) {
+    componentToRender = /* @__PURE__ */ jsxs("div", { id: `shadowroot_${name}`, children: [
+      typeof document === "undefined" ? (
+        // eslint-disable-next-line react/no-unknown-property
+        /* @__PURE__ */ jsxs("template", { shadowrootmode: "open", children: [
+          linksToRender,
+          componentToRender
+        ] })
+      ) : null,
+      shadowRoot ? createPortal(
+        shadowRoot.querySelectorAll("link").length !== links.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          linksToRender,
+          componentToRender
+        ] }) : componentToRender,
+        shadowRoot
+      ) : null
+    ] });
+    linksToRender = null;
   }
-  const shouldUseChildren = (!component || component && !nextData && typeof component.then !== "function") && // if the remote Next.js Pages Router application is in development mode
-  // we don't use the provided static HTML
-  // to mitigate layout shift when loading CSS using JavaScript on the client
-  nextData?.buildId !== "development";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
       name,
@@ -78,7 +132,17 @@ function RemoteComponentClient({
       route,
       runtime
     }) }),
-    shouldUseChildren ? children : component,
+    linksToRender,
+    componentToRender,
+    links.map((link) => /* @__PURE__ */ jsx(
+      "link",
+      {
+        as: link.as,
+        href: link.href,
+        rel: link.rel
+      },
+      `${link.href}_${link.rel}`
+    )),
     data.length > 0 ? /* @__PURE__ */ jsx("script", { id: `${name}_rsc`, children: data.join("\n") }) : null,
     nextData ? /* @__PURE__ */ jsx(
       "script",
@@ -87,15 +151,7 @@ function RemoteComponentClient({
         type: "application/json",
         children: JSON.stringify(nextData)
       }
-    ) : null,
-    links.map((link) => /* @__PURE__ */ createElement(
-      "link",
-      {
-        ...link,
-        key: `${link.href}_${link.rel}`,
-        precedence: bundle
-      }
-    ))
+    ) : null
   ] });
 }
 export {

package/dist/next/host/app-client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component) {\n      loadRemoteComponent({\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n  ]);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {shouldUseChildren ? children : (component as React.ReactNode)}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {links.map((link) => (\n        <link\n          {...link}\n          key={`${link.href as string}_${link.rel}`}\n          precedence={bundle}\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":";AAkGI,mBACE,KADF;AAsBI;AAtHR,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AAAA,EACX,QAAQ,CAAC;AAAA,EACT,eAAe,CAAC;AAAA,EAChB;AACF,GAAyB;AACvB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkC,IAAI;AAExE,YAAU,MAAM;AACd,QAAI,UAAU;AAGd,QAAI,CAAC,WAAW;AACd,0BAAoB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,EACE,KAAK,CAAC,WAAW;AAChB,YAAI,SAAS;AACX,cAAI,OAAO,OAAO;AAChB,yBAAa,OAAO,KAAK;AAAA,UAC3B,OAAO;AACL,yBAAa,OAAO,SAAS;AAAA,UAC/B;AAAA,QACF;AAAA,MACF,CAAC,EACA,MAAM,CAAC,UAAiB;AACvB,YAAI,SAAS;AACX,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,CAAC;AAAA,IACL;AAEA,WAAO,MAAM;AACX,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,MAAI,qBAAqB,OAAO;AAC9B,UAAM;AAAA,EACR;AAGA,QAAM,qBACH,CAAC,aACC,aACC,CAAC,YACD,OAAQ,UAA0C,SAChD;AAAA;AAAA;AAAA,EAIN,UAAU,YAAY;AAExB,SACE,iCACE;AAAA,wBAAC,YAAO,yBAAqB,MAAC,MAAK,oBAChC,eAAK,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,GACH;AAAA,IACC,oBAAoB,WAAY;AAAA,IAChC,KAAK,SAAS,IACb,oBAAC,YAAO,IAAI,GAAG,YAAa,eAAK,KAAK,IAAI,GAAE,IAC1C;AAAA,IACH,WACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG,UAAU,MAAM,QAAQ,OAAO,GAAG,IAAI;AAAA,QAC7C,MAAK;AAAA,QAEJ,eAAK,UAAU,QAAQ;AAAA;AAAA,IAC1B,IACE;AAAA,IACH,MAAM,IAAI,CAAC,SACV;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK,GAAG,KAAK,QAAkB,KAAK;AAAA,QACpC,YAAY;AAAA;AAAA,IACd,CACD;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\n\n// patch react/jsx-runtime to support the shadowrootmode attribute on template elements\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      template: {\n        shadowrootmode?: 'open' | 'closed';\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  url,\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  isolate,\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);\n\n  useLayoutEffect(() => {\n    if (isolate !== false && typeof document !== 'undefined' && !shadowRoot) {\n      let shadowRootElement: ShadowRoot | null = null;\n      const element = document.getElementById(`shadowroot_${name}`);\n      shadowRootElement = element?.shadowRoot ?? null;\n\n      if (!shadowRootElement && element) {\n        // create a shadow root if it doesn't exist\n        // this is a fallback for browsers that don't support declarative shadow DOM\n        element.attachShadow({ mode: 'open' });\n        shadowRootElement = element.shadowRoot;\n      }\n\n      if (shadowRootElement) {\n        // remove all nodes from the shadow root except links\n        shadowRootElement.querySelectorAll('*:not(link)').forEach((node) => {\n          node.remove();\n        });\n        setShadowRoot(shadowRootElement);\n      }\n    }\n  }, [name, isolate, shadowRoot]);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component && (isolate === false || shadowRoot)) {\n      loadRemoteComponent({\n        url: new URL(url, location.origin),\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n        container: shadowRoot,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    url,\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n    isolate,\n    shadowRoot,\n  ]);\n\n  let componentToRender = (\n    <>{shouldUseChildren ? children : (component as React.ReactNode)}</>\n  );\n  let linksToRender: React.ReactNode[] | null = links.map((link) => (\n    <link\n      as={link.as as string}\n      href={link.href as string}\n      key={`${link.href as string}_${link.rel}`}\n      rel={link.rel as string}\n    />\n  ));\n\n  if (isolate !== false) {\n    componentToRender = (\n      <div id={`shadowroot_${name}`}>\n        {typeof document === 'undefined' ? (\n          // eslint-disable-next-line react/no-unknown-property\n          <template shadowrootmode=\"open\">\n            {linksToRender}\n            {componentToRender}\n          </template>\n        ) : null}\n        {shadowRoot\n          ? createPortal(\n              shadowRoot.querySelectorAll('link').length !== links.length ? (\n                <>\n                  {linksToRender}\n                  {componentToRender}\n                </>\n              ) : (\n                componentToRender\n              ),\n              shadowRoot,\n            )\n          : null}\n      </div>\n    );\n    linksToRender = null;\n  }\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {linksToRender}\n      {componentToRender}\n      {links.map((link) => (\n        <link\n          as={link.as as string}\n          href={link.href as string}\n          key={`${link.href as string}_${link.rel}`}\n          rel={link.rel as string}\n        />\n      ))}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/next/host/app-server.cjs

@@ -26,7 +26,10 @@ var import_headers = require("next/headers");
 var import_fetch_remote_component = require("../../shared/ssr/fetch-remote-component");
 var import_app_client = require("./app-client");
 const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;
-async function RemoteComponent({ src }) {
+async function RemoteComponent({
+  src,
+  isolate
+}) {
   const headerList = await (0, import_headers.headers)();
   const {
     metadata,
@@ -43,6 +46,7 @@ async function RemoteComponent({ src }) {
     {
       bundle: metadata.bundle || (CURRENT_ZONE ?? name),
       data: hydrationData,
+      isolate,
       links,
       name,
       nextData,
@@ -50,6 +54,7 @@ async function RemoteComponent({ src }) {
       route: metadata.route,
       runtime: metadata.runtime,
       scripts,
+      url: typeof src === "string" ? src : src.href,
       children: component
     }
   );

package/dist/next/host/app-server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport async function RemoteComponent({ src }: { src: string | URL }) {\n  // get the headers from the request\n  const headerList = await headers();\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n  } = await fetchRemoteComponent(src, headerList, true);\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  return (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      links={links}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBI;AAzBJ,qBAAwB;AACxB,oCAAqC;AACrC,wBAAsC;AAEtC,MAAM,eAAe,QAAQ,IAAI;AAEjC,eAAsB,gBAAgB,EAAE,IAAI,GAA0B;AAEpE,QAAM,aAAa,UAAM,wBAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\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 isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\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  isolate,\n}: {\n  src: string | URL;\n  isolate?: boolean;\n}) {\n  // get the headers from the request\n  const headerList = await headers();\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n  } = await fetchRemoteComponent(src, headerList, true);\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  return (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      url={typeof src === 'string' ? src : src.href}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDI;AAzDJ,qBAAwB;AACxB,oCAAqC;AACrC,wBAAsC;AAEtC,MAAM,eAAe,QAAQ,IAAI;AA4BjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AAED,QAAM,aAAa,UAAM,wBAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM,oDAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/next/host/app-server.d.ts

@@ -1,7 +1,34 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function RemoteComponent({ src }: {
+/**
+ * RemoteComponent is a Next.js component that fetches and renders a remote component.
+ * It supports SSR and can isolate the remote component in a shadow DOM.
+ *
+ * @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.
+ * @param isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.
+ * @returns A React component that renders the remote component.
+ *
+ * @example
+ *
+ * Use the `<RemoteComponent>` in your Next.js App Router application to consume a remote component from a remote application:
+ *
+ * ```tsx
+ * import { RemoteComponent } from 'remote-components/next/host';
+ *
+ * export default function MyPage() {
+ *  return (
+ *    <>
+ *      <h1>Welcome to My Page</h1>
+ *      <p>This page consumes a remote component from another application.</p>
+ *      <RemoteComponent src="/nextjs-app-remote/components/header" />
+ *    </>
+ *  );
+ * }
+ * ```
+ */
+declare function RemoteComponent({ src, isolate, }: {
     src: string | URL;
+    isolate?: boolean;
 }): Promise<react_jsx_runtime.JSX.Element>;
 
 export { RemoteComponent };

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

@@ -3,7 +3,10 @@ import { headers } from "next/headers";
 import { fetchRemoteComponent } from "../../shared/ssr/fetch-remote-component";
 import { RemoteComponentClient } from "./app-client";
 const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;
-async function RemoteComponent({ src }) {
+async function RemoteComponent({
+  src,
+  isolate
+}) {
   const headerList = await headers();
   const {
     metadata,
@@ -20,6 +23,7 @@ async function RemoteComponent({ src }) {
     {
       bundle: metadata.bundle || (CURRENT_ZONE ?? name),
       data: hydrationData,
+      isolate,
       links,
       name,
       nextData,
@@ -27,6 +31,7 @@ async function RemoteComponent({ src }) {
       route: metadata.route,
       runtime: metadata.runtime,
       scripts,
+      url: typeof src === "string" ? src : src.href,
       children: component
     }
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\nexport async function RemoteComponent({ src }: { src: string | URL }) {\n  // get the headers from the request\n  const headerList = await headers();\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n  } = await fetchRemoteComponent(src, headerList, true);\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  return (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      links={links}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":"AAyBI;AAzBJ,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAEtC,MAAM,eAAe,QAAQ,IAAI;AAEjC,eAAsB,gBAAgB,EAAE,IAAI,GAA0B;AAEpE,QAAM,aAAa,MAAM,QAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/host/app-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\nimport { RemoteComponentClient } from './app-client';\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\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 isolate - Whether to isolate the remote component using a Shadow DOM wrapper. Defaults to `true`. Use `false` explicitly to disable isolation.\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  isolate,\n}: {\n  src: string | URL;\n  isolate?: boolean;\n}) {\n  // get the headers from the request\n  const headerList = await headers();\n\n  const {\n    metadata,\n    scripts,\n    links,\n    hydrationData,\n    nextData,\n    component,\n    remoteShared,\n  } = await fetchRemoteComponent(src, headerList, true);\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  return (\n    <RemoteComponentClient\n      bundle={metadata.bundle || (CURRENT_ZONE ?? name)}\n      data={hydrationData}\n      isolate={isolate}\n      links={links}\n      name={name}\n      nextData={nextData}\n      remoteShared={remoteShared}\n      route={metadata.route}\n      runtime={metadata.runtime}\n      scripts={scripts}\n      url={typeof src === 'string' ? src : src.href}\n    >\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":"AAyDI;AAzDJ,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAEtC,MAAM,eAAe,QAAQ,IAAI;AA4BjC,eAAsB,gBAAgB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AAED,QAAM,aAAa,MAAM,QAAQ;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,MAAM,qBAAqB,KAAK,YAAY,IAAI;AAKpD,QAAM,OAAO,SAAS,GAAG,QAAQ,SAAS,EAAE;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAC5C,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,SAAS,SAAS;AAAA,MAClB;AAAA,MACA,KAAK,OAAO,QAAQ,WAAW,MAAM,IAAI;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/next/host/pages-server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/host/pages-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared } from '@remote-component/shared/host';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'remote-component': {\n        src?: string;\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, string>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, html: string): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, html);\n}\n\nfunction getComponent(key: string): string | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\nexport function RemoteComponent(props: RemoteComponentProps): JSX.Element {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared;\n    import('remote-components/html');\n  }, []);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <remote-component src={props.src}>{props.children}</remote-component>\n    );\n  }\n\n  return (\n    <remote-component src={props.src}>\n      <div\n        dangerouslySetInnerHTML={{ __html: remoteComponent ?? '' }}\n        id=\"__REMOTE_COMPONENT__\"\n        suppressHydrationWarning\n      />\n    </remote-component>\n  );\n}\n\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new Error(\n      'getRemoteComponentProps can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    html,\n    nextData,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n  };\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId === 'development') {\n    return props;\n  }\n\n  const key = getKey(props);\n  // store the HTML in a global store\n  setComponent(key, html);\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoFM;AAnFN,mBAA0B;AAC1B,kBAAuB;AACvB,oCAAqC;AAgBrC,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OAAO,QAAQ,gCAAgC,OAAO,WAAW;AAC5G;AAEA,SAAS,aAAa,KAAa,MAAoB;AACrD,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,IAAI;AAC5C;AAEA,SAAS,aAAa,KAAiC;AACrD,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AAWO,SAAS,gBAAgB,OAA0C;AACxE,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,8BAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B;AACzC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE,4CAAC,sBAAiB,KAAK,MAAM,KAAM,gBAAM,UAAS;AAAA,EAEtD;AAEA,SACE,4CAAC,sBAAiB,KAAK,MAAM,KAC3B;AAAA,IAAC;AAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,mBAAmB,GAAG;AAAA,MACzD,IAAG;AAAA,MACH,0BAAwB;AAAA;AAAA,EAC1B,GACF;AAEJ;AAEA,eAAsB,wBACpB,KACA,SAC+B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,OAAO,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM;AAAA,IACR;AAAA,IACA,mBAAmB,UACf;AAAA;AAAA,MAEA,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,KAAK,CAACA,MAAK,KAAK,MAAM;AACpD,YAAI,OAAO;AACT,cAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,kBAAM,QAAQ,CAAC,MAAM,IAAI,OAAOA,MAAK,CAAC,CAAC;AAAA,UACzC,OAAO;AACL,gBAAI,OAAOA,MAAK,KAAK;AAAA,UACvB;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAAG,IAAI,QAAQ,CAAC;AAAA;AAAA,EACtB;AAEA,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU,YAAY,eAAe;AACvC,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,OAAO,KAAK;AAExB,eAAa,KAAK,IAAI;AAEtB,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["key"]}
+{"version":3,"sources":["../../../src/next/host/pages-server.tsx"],"sourcesContent":["import type { IncomingHttpHeaders } from 'node:http';\nimport { useEffect } from 'react';\nimport { shared } from '@remote-component/shared/host';\nimport { fetchRemoteComponent } from '../../shared/ssr/fetch-remote-component';\n\n// patch react/jsx-runtime to support the remote-component custom element\ndeclare module 'react/jsx-runtime' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'remote-component': {\n        src?: string;\n        children: React.ReactNode;\n      };\n    }\n  }\n}\n\n// internal symbols to access global store\nconst REMOTE_COMPONENT_STORE = Symbol('REMOTE_COMPONENT_STORE');\nconst REMOTE_COMPONENT_KEY = '__REMOTE_COMPONENT_KEY__';\n\n// temporary global store for remote component HTML\n// the store is used to save the HTML of remote components for SSR without sending the content to the client\nconst self = globalThis as typeof globalThis & {\n  [REMOTE_COMPONENT_STORE]?: Map<string, string>;\n};\n\nfunction getKey({\n  bundle,\n  route,\n  name,\n}: {\n  bundle?: string;\n  route?: string;\n  name?: string;\n}): string {\n  return `${bundle ?? '__next'}:${route ?? '/'}:${name ?? '__vercel_remote_component'}__${crypto.randomUUID()}`;\n}\n\nfunction setComponent(key: string, html: string): void {\n  if (!self[REMOTE_COMPONENT_STORE]) {\n    self[REMOTE_COMPONENT_STORE] = new Map();\n  }\n  self[REMOTE_COMPONENT_STORE].set(key, html);\n}\n\nfunction getComponent(key: string): string | undefined {\n  const component = self[REMOTE_COMPONENT_STORE]?.get(key);\n  // remove the component from the store after retrieving it to prevent memory leaks\n  // storing the HTML in the global store is only needed for SSR and it's temporary only used for a single render\n  self[REMOTE_COMPONENT_STORE]?.delete(key);\n  return component;\n}\n\nexport interface RemoteComponentProps {\n  src: string;\n  bundle?: string;\n  route?: string;\n  name?: string;\n  [REMOTE_COMPONENT_KEY]?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * This component handles the rendering of remote microfrontends.\n *\n * @param props - The properties for the remote component.\n * @returns A React component that renders the remote component.\n */\nexport function RemoteComponent(props: RemoteComponentProps): JSX.Element {\n  const remoteComponent =\n    typeof document !== 'undefined'\n      ? null\n      : // retrieve the HTML from the global store\n        getComponent(\n          props[REMOTE_COMPONENT_KEY] ?? '__vercel_remote_component',\n        );\n\n  useEffect(() => {\n    const clientSelf = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    clientSelf.__remote_component_shared__ = shared;\n    import('remote-components/html');\n  }, []);\n\n  if (!props[REMOTE_COMPONENT_KEY]) {\n    return (\n      <remote-component src={props.src}>{props.children}</remote-component>\n    );\n  }\n\n  return (\n    <remote-component src={props.src}>\n      <div\n        dangerouslySetInnerHTML={{ __html: remoteComponent ?? '' }}\n        id=\"__REMOTE_COMPONENT__\"\n        suppressHydrationWarning\n      />\n    </remote-component>\n  );\n}\n\n/**\n * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.\n *\n * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.\n * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.\n * @returns The properties of the remote component.\n *\n * @example\n *\n * ```tsx\n * import { getRemoteComponentProps } from 'remote-components/next/host/pages';\n * import type { GetServerSideProps } from 'next';\n *\n * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {\n *   const myRemoteComponent = await getRemoteComponentProps(\n *     '/nextjs-app-remote/components/header',\n *     req.headers,\n *   );\n *   return {\n *     props: {\n *       remoteComponents: {\n *         myRemoteComponent,\n *       },\n *     },\n *   };\n * }\n * ```\n */\nexport async function getRemoteComponentProps(\n  src: string,\n  headers: IncomingHttpHeaders,\n): Promise<RemoteComponentProps> {\n  if (typeof document !== 'undefined') {\n    throw new Error(\n      'getRemoteComponentProps can only be used on the server side.',\n    );\n  }\n\n  const {\n    metadata: { bundle, route, runtime },\n    name,\n    html,\n    nextData,\n  } = await fetchRemoteComponent(\n    src,\n    headers instanceof Headers\n      ? headers\n      : // convert IncomingHttpHeaders to web standard Headers\n        Object.entries(headers).reduce((acc, [key, value]) => {\n          if (value) {\n            if (Array.isArray(value)) {\n              value.forEach((v) => acc.append(key, v));\n            } else {\n              acc.append(key, value);\n            }\n          }\n          return acc;\n        }, new Headers()),\n  );\n\n  const props = {\n    src,\n    bundle,\n    name,\n    route,\n    runtime,\n  };\n\n  // do not render the HTML in development mode when remote is using Next.js Pages Router\n  // this behavior is emulating the Next.js Pages Router FOUC as the styles are only applied on the client when running in development mode\n  if (nextData?.buildId === 'development') {\n    return props;\n  }\n\n  const key = getKey(props);\n  // store the HTML in a global store\n  setComponent(key, html);\n\n  return {\n    ...props,\n    // add remote component key to the props\n    [REMOTE_COMPONENT_KEY]: key,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0FM;AAzFN,mBAA0B;AAC1B,kBAAuB;AACvB,oCAAqC;AAgBrC,MAAM,yBAAyB,OAAO,wBAAwB;AAC9D,MAAM,uBAAuB;AAI7B,MAAM,OAAO;AAIb,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAIW;AACT,SAAO,GAAG,UAAU,YAAY,SAAS,OAAO,QAAQ,gCAAgC,OAAO,WAAW;AAC5G;AAEA,SAAS,aAAa,KAAa,MAAoB;AACrD,MAAI,CAAC,KAAK,sBAAsB,GAAG;AACjC,SAAK,sBAAsB,IAAI,oBAAI,IAAI;AAAA,EACzC;AACA,OAAK,sBAAsB,EAAE,IAAI,KAAK,IAAI;AAC5C;AAEA,SAAS,aAAa,KAAiC;AACrD,QAAM,YAAY,KAAK,sBAAsB,GAAG,IAAI,GAAG;AAGvD,OAAK,sBAAsB,GAAG,OAAO,GAAG;AACxC,SAAO;AACT;AAiBO,SAAS,gBAAgB,OAA0C;AACxE,QAAM,kBACJ,OAAO,aAAa,cAChB;AAAA;AAAA,IAEA;AAAA,MACE,MAAM,oBAAoB,KAAK;AAAA,IACjC;AAAA;AAEN,8BAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B;AACzC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE,4CAAC,sBAAiB,KAAK,MAAM,KAAM,gBAAM,UAAS;AAAA,EAEtD;AAEA,SACE,4CAAC,sBAAiB,KAAK,MAAM,KAC3B;AAAA,IAAC;AAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,mBAAmB,GAAG;AAAA,MACzD,IAAG;AAAA,MACH,0BAAwB;AAAA;AAAA,EAC1B,GACF;AAEJ;AA8BA,eAAsB,wBACpB,KACA,SAC+B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,UAAU,EAAE,QAAQ,OAAO,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAM;AAAA,IACR;AAAA,IACA,mBAAmB,UACf;AAAA;AAAA,MAEA,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,KAAK,CAACA,MAAK,KAAK,MAAM;AACpD,YAAI,OAAO;AACT,cAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,kBAAM,QAAQ,CAAC,MAAM,IAAI,OAAOA,MAAK,CAAC,CAAC;AAAA,UACzC,OAAO;AACL,gBAAI,OAAOA,MAAK,KAAK;AAAA,UACvB;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAAG,IAAI,QAAQ,CAAC;AAAA;AAAA,EACtB;AAEA,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU,YAAY,eAAe;AACvC,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,OAAO,KAAK;AAExB,eAAa,KAAK,IAAI;AAEtB,SAAO;AAAA,IACL,GAAG;AAAA;AAAA,IAEH,CAAC,oBAAoB,GAAG;AAAA,EAC1B;AACF;","names":["key"]}

package/dist/next/host/pages-server.d.ts

@@ -19,7 +19,41 @@ interface RemoteComponentProps {
     [REMOTE_COMPONENT_KEY]?: string;
     children?: React.ReactNode;
 }
+/**
+ * This component handles the rendering of remote microfrontends.
+ *
+ * @param props - The properties for the remote component.
+ * @returns A React component that renders the remote component.
+ */
 declare function RemoteComponent(props: RemoteComponentProps): JSX.Element;
+/**
+ * Fetches the remote component properties from the server. You need to pass these properties to the `<RemoteComponent>` component to render the fetched remote component.
+ *
+ * @param src - The source URL of the remote component. When using the Vercel Microfrontends solution, you can use relative paths, e.g. `/nextjs-app-remote/components/header`. Absolute URLs are also supported.
+ * @param headers - The HTTP headers used for supporting the Vercel Microfrontends proxy.
+ * @returns The properties of the remote component.
+ *
+ * @example
+ *
+ * ```tsx
+ * import { getRemoteComponentProps } from 'remote-components/next/host/pages';
+ * import type { GetServerSideProps } from 'next';
+ *
+ * export const getServerSideProps: GetServerSideProps<PageProps> = async function getServerSideProps({ req }) {
+ *   const myRemoteComponent = await getRemoteComponentProps(
+ *     '/nextjs-app-remote/components/header',
+ *     req.headers,
+ *   );
+ *   return {
+ *     props: {
+ *       remoteComponents: {
+ *         myRemoteComponent,
+ *       },
+ *     },
+ *   };
+ * }
+ * ```
+ */
 declare function getRemoteComponentProps(src: string, headers: IncomingHttpHeaders): Promise<RemoteComponentProps>;
 
 export { RemoteComponent, RemoteComponentProps, getRemoteComponentProps };