remote-components 0.0.1

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

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var app_server_exports = {};
+__export(app_server_exports, {
+  RemoteComponent: () => RemoteComponent
+});
+module.exports = __toCommonJS(app_server_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+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 }) {
+  const headerList = await (0, import_headers.headers)();
+  const {
+    metadata,
+    scripts,
+    links,
+    hydrationData,
+    nextData,
+    component,
+    remoteShared
+  } = await (0, import_fetch_remote_component.fetchRemoteComponent)(src, headerList, true);
+  const name = metadata.id.replace(/_ssr$/, "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_app_client.RemoteComponentClient,
+    {
+      bundle: metadata.bundle || (CURRENT_ZONE ?? name),
+      data: hydrationData,
+      links,
+      name,
+      nextData,
+      remoteShared,
+      route: metadata.route,
+      runtime: metadata.runtime,
+      scripts,
+      children: component
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponent
+});
+//# sourceMappingURL=app-server.cjs.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function RemoteComponent({ src }: {
+    src: string | URL;
+}): Promise<react_jsx_runtime.JSX.Element>;
+
+export { RemoteComponent };

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

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+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 }) {
+  const headerList = await headers();
+  const {
+    metadata,
+    scripts,
+    links,
+    hydrationData,
+    nextData,
+    component,
+    remoteShared
+  } = await fetchRemoteComponent(src, headerList, true);
+  const name = metadata.id.replace(/_ssr$/, "");
+  return /* @__PURE__ */ jsx(
+    RemoteComponentClient,
+    {
+      bundle: metadata.bundle || (CURRENT_ZONE ?? name),
+      data: hydrationData,
+      links,
+      name,
+      nextData,
+      remoteShared,
+      route: metadata.route,
+      runtime: metadata.runtime,
+      scripts,
+      children: component
+    }
+  );
+}
+export {
+  RemoteComponent
+};
+//# sourceMappingURL=app-server.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pages_client_exports = {};
+__export(pages_client_exports, {
+  RemoteComponent: () => RemoteComponent
+});
+module.exports = __toCommonJS(pages_client_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_host = require("@remote-component/shared/host");
+function RemoteComponent({
+  src,
+  children
+}) {
+  (0, import_react.useEffect)(() => {
+    const self = globalThis;
+    self.__remote_component_shared__ = import_host.shared;
+    import("remote-components/html");
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("remote-component", { src, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponent
+});
+//# sourceMappingURL=pages-client.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/host/pages-client.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { shared } from '@remote-component/shared/host';\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\nexport interface RemoteComponentProps {\n  src: string;\n  children?: React.ReactNode;\n}\n\nexport function RemoteComponent({\n  src,\n  children,\n}: RemoteComponentProps): JSX.Element {\n  useEffect(() => {\n    const self = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    self.__remote_component_shared__ = shared;\n    import('remote-components/html');\n  }, []);\n\n  return <remote-component src={src}>{children}</remote-component>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCS;AAlCT,mBAA0B;AAC1B,kBAAuB;AAoBhB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAAsC;AACpC,8BAAU,MAAM;AACd,UAAM,OAAO;AAIb,SAAK,8BAA8B;AACnC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SAAO,4CAAC,sBAAiB,KAAW,UAAS;AAC/C;","names":[]}

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

@@ -0,0 +1,17 @@
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'remote-component': {
+                src?: string;
+                children: React.ReactNode;
+            };
+        }
+    }
+}
+interface RemoteComponentProps {
+    src: string;
+    children?: React.ReactNode;
+}
+declare function RemoteComponent({ src, children, }: RemoteComponentProps): JSX.Element;
+
+export { RemoteComponent, RemoteComponentProps };

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { shared } from "@remote-component/shared/host";
+function RemoteComponent({
+  src,
+  children
+}) {
+  useEffect(() => {
+    const self = globalThis;
+    self.__remote_component_shared__ = shared;
+    import("remote-components/html");
+  }, []);
+  return /* @__PURE__ */ jsx("remote-component", { src, children });
+}
+export {
+  RemoteComponent
+};
+//# sourceMappingURL=pages-client.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/host/pages-client.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { shared } from '@remote-component/shared/host';\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\nexport interface RemoteComponentProps {\n  src: string;\n  children?: React.ReactNode;\n}\n\nexport function RemoteComponent({\n  src,\n  children,\n}: RemoteComponentProps): JSX.Element {\n  useEffect(() => {\n    const self = globalThis as typeof globalThis & {\n      __remote_component_shared__?: Record<string, () => Promise<unknown>>;\n    };\n    // eslint-disable-next-line camelcase\n    self.__remote_component_shared__ = shared;\n    import('remote-components/html');\n  }, []);\n\n  return <remote-component src={src}>{children}</remote-component>;\n}\n"],"mappings":"AAkCS;AAlCT,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AAoBhB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAAsC;AACpC,YAAU,MAAM;AACd,UAAM,OAAO;AAIb,SAAK,8BAA8B;AACnC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SAAO,oBAAC,sBAAiB,KAAW,UAAS;AAC/C;","names":[]}

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

@@ -0,0 +1,134 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pages_server_exports = {};
+__export(pages_server_exports, {
+  RemoteComponent: () => RemoteComponent,
+  getRemoteComponentProps: () => getRemoteComponentProps
+});
+module.exports = __toCommonJS(pages_server_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_host = require("@remote-component/shared/host");
+var import_fetch_remote_component = require("../../shared/ssr/fetch-remote-component");
+const REMOTE_COMPONENT_STORE = Symbol("REMOTE_COMPONENT_STORE");
+const REMOTE_COMPONENT_KEY = "__REMOTE_COMPONENT_KEY__";
+const self = globalThis;
+function getKey({
+  bundle,
+  route,
+  name
+}) {
+  return `${bundle ?? "__next"}:${route ?? "/"}:${name ?? "__vercel_remote_component"}__${crypto.randomUUID()}`;
+}
+function setComponent(key, html) {
+  if (!self[REMOTE_COMPONENT_STORE]) {
+    self[REMOTE_COMPONENT_STORE] = /* @__PURE__ */ new Map();
+  }
+  self[REMOTE_COMPONENT_STORE].set(key, html);
+}
+function getComponent(key) {
+  const component = self[REMOTE_COMPONENT_STORE]?.get(key);
+  self[REMOTE_COMPONENT_STORE]?.delete(key);
+  return component;
+}
+function RemoteComponent(props) {
+  const remoteComponent = typeof document !== "undefined" ? null : (
+    // retrieve the HTML from the global store
+    getComponent(
+      props[REMOTE_COMPONENT_KEY] ?? "__vercel_remote_component"
+    )
+  );
+  (0, import_react.useEffect)(() => {
+    const clientSelf = globalThis;
+    clientSelf.__remote_component_shared__ = import_host.shared;
+    import("remote-components/html");
+  }, []);
+  if (!props[REMOTE_COMPONENT_KEY]) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("remote-component", { src: props.src, children: props.children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("remote-component", { src: props.src, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: remoteComponent ?? "" },
+      id: "__REMOTE_COMPONENT__",
+      suppressHydrationWarning: true
+    }
+  ) });
+}
+async function getRemoteComponentProps(src, headers) {
+  if (typeof document !== "undefined") {
+    throw new Error(
+      "getRemoteComponentProps can only be used on the server side."
+    );
+  }
+  const {
+    metadata: { bundle, route, runtime },
+    name,
+    html,
+    nextData
+  } = await (0, import_fetch_remote_component.fetchRemoteComponent)(
+    src,
+    headers instanceof Headers ? headers : (
+      // convert IncomingHttpHeaders to web standard Headers
+      Object.entries(headers).reduce((acc, [key2, value]) => {
+        if (value) {
+          if (Array.isArray(value)) {
+            value.forEach((v) => acc.append(key2, v));
+          } else {
+            acc.append(key2, value);
+          }
+        }
+        return acc;
+      }, new Headers())
+    )
+  );
+  const props = {
+    src,
+    bundle,
+    name,
+    route,
+    runtime
+  };
+  if (nextData?.buildId === "development") {
+    return props;
+  }
+  const key = getKey(props);
+  setComponent(key, html);
+  return {
+    ...props,
+    // add remote component key to the props
+    [REMOTE_COMPONENT_KEY]: key
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponent,
+  getRemoteComponentProps
+});
+//# sourceMappingURL=pages-server.cjs.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,25 @@
+import { IncomingHttpHeaders } from 'node:http';
+
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'remote-component': {
+                src?: string;
+                children: React.ReactNode;
+            };
+        }
+    }
+}
+declare const REMOTE_COMPONENT_KEY = "__REMOTE_COMPONENT_KEY__";
+interface RemoteComponentProps {
+    src: string;
+    bundle?: string;
+    route?: string;
+    name?: string;
+    [REMOTE_COMPONENT_KEY]?: string;
+    children?: React.ReactNode;
+}
+declare function RemoteComponent(props: RemoteComponentProps): JSX.Element;
+declare function getRemoteComponentProps(src: string, headers: IncomingHttpHeaders): Promise<RemoteComponentProps>;
+
+export { RemoteComponent, RemoteComponentProps, getRemoteComponentProps };

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

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { shared } from "@remote-component/shared/host";
+import { fetchRemoteComponent } from "../../shared/ssr/fetch-remote-component";
+const REMOTE_COMPONENT_STORE = Symbol("REMOTE_COMPONENT_STORE");
+const REMOTE_COMPONENT_KEY = "__REMOTE_COMPONENT_KEY__";
+const self = globalThis;
+function getKey({
+  bundle,
+  route,
+  name
+}) {
+  return `${bundle ?? "__next"}:${route ?? "/"}:${name ?? "__vercel_remote_component"}__${crypto.randomUUID()}`;
+}
+function setComponent(key, html) {
+  if (!self[REMOTE_COMPONENT_STORE]) {
+    self[REMOTE_COMPONENT_STORE] = /* @__PURE__ */ new Map();
+  }
+  self[REMOTE_COMPONENT_STORE].set(key, html);
+}
+function getComponent(key) {
+  const component = self[REMOTE_COMPONENT_STORE]?.get(key);
+  self[REMOTE_COMPONENT_STORE]?.delete(key);
+  return component;
+}
+function RemoteComponent(props) {
+  const remoteComponent = typeof document !== "undefined" ? null : (
+    // retrieve the HTML from the global store
+    getComponent(
+      props[REMOTE_COMPONENT_KEY] ?? "__vercel_remote_component"
+    )
+  );
+  useEffect(() => {
+    const clientSelf = globalThis;
+    clientSelf.__remote_component_shared__ = shared;
+    import("remote-components/html");
+  }, []);
+  if (!props[REMOTE_COMPONENT_KEY]) {
+    return /* @__PURE__ */ jsx("remote-component", { src: props.src, children: props.children });
+  }
+  return /* @__PURE__ */ jsx("remote-component", { src: props.src, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: remoteComponent ?? "" },
+      id: "__REMOTE_COMPONENT__",
+      suppressHydrationWarning: true
+    }
+  ) });
+}
+async function getRemoteComponentProps(src, headers) {
+  if (typeof document !== "undefined") {
+    throw new Error(
+      "getRemoteComponentProps can only be used on the server side."
+    );
+  }
+  const {
+    metadata: { bundle, route, runtime },
+    name,
+    html,
+    nextData
+  } = await fetchRemoteComponent(
+    src,
+    headers instanceof Headers ? headers : (
+      // convert IncomingHttpHeaders to web standard Headers
+      Object.entries(headers).reduce((acc, [key2, value]) => {
+        if (value) {
+          if (Array.isArray(value)) {
+            value.forEach((v) => acc.append(key2, v));
+          } else {
+            acc.append(key2, value);
+          }
+        }
+        return acc;
+      }, new Headers())
+    )
+  );
+  const props = {
+    src,
+    bundle,
+    name,
+    route,
+    runtime
+  };
+  if (nextData?.buildId === "development") {
+    return props;
+  }
+  const key = getKey(props);
+  setComponent(key, html);
+  return {
+    ...props,
+    // add remote component key to the props
+    [REMOTE_COMPONENT_KEY]: key
+  };
+}
+export {
+  RemoteComponent,
+  getRemoteComponentProps
+};
+//# sourceMappingURL=pages-server.js.map

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

@@ -0,0 +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":"AAoFM;AAnFN,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,4BAA4B;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,YAAU,MAAM;AACd,UAAM,aAAa;AAInB,eAAW,8BAA8B;AACzC,WAAO,wBAAwB;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,MAAM,oBAAoB,GAAG;AAChC,WACE,oBAAC,sBAAiB,KAAK,MAAM,KAAM,gBAAM,UAAS;AAAA,EAEtD;AAEA,SACE,oBAAC,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,MAAM;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/remote/pages.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pages_exports = {};
+__export(pages_exports, {
+  getRemoteComponentMetadata: () => getRemoteComponentMetadata
+});
+module.exports = __toCommonJS(pages_exports);
+const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;
+function getRemoteComponentMetadata() {
+  return {
+    __REMOTE_COMPONENT__: {
+      bundle: CURRENT_ZONE,
+      runtime: process.env.TURBOPACK ? "turbopack" : "webpack"
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getRemoteComponentMetadata
+});
+//# sourceMappingURL=pages.cjs.map

package/dist/next/remote/pages.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/pages.ts"],"sourcesContent":["const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n// get the metadata for the remote application\nexport function getRemoteComponentMetadata() {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: CURRENT_ZONE,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n    },\n  };\n}\n\nexport type RemoteComponentMetadata = ReturnType<\n  typeof getRemoteComponentMetadata\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,eAAe,QAAQ,IAAI;AAG1B,SAAS,6BAA6B;AAC3C,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,IACjD;AAAA,EACF;AACF;","names":[]}

package/dist/next/remote/pages.d.ts

@@ -0,0 +1,9 @@
+declare function getRemoteComponentMetadata(): {
+    __REMOTE_COMPONENT__: {
+        bundle: string | undefined;
+        runtime: string;
+    };
+};
+type RemoteComponentMetadata = ReturnType<typeof getRemoteComponentMetadata>;
+
+export { RemoteComponentMetadata, getRemoteComponentMetadata };

package/dist/next/remote/pages.js

@@ -0,0 +1,13 @@
+const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;
+function getRemoteComponentMetadata() {
+  return {
+    __REMOTE_COMPONENT__: {
+      bundle: CURRENT_ZONE,
+      runtime: process.env.TURBOPACK ? "turbopack" : "webpack"
+    }
+  };
+}
+export {
+  getRemoteComponentMetadata
+};
+//# sourceMappingURL=pages.js.map

package/dist/next/remote/pages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/pages.ts"],"sourcesContent":["const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n// get the metadata for the remote application\nexport function getRemoteComponentMetadata() {\n  return {\n    __REMOTE_COMPONENT__: {\n      bundle: CURRENT_ZONE,\n      runtime: process.env.TURBOPACK ? 'turbopack' : 'webpack',\n    },\n  };\n}\n\nexport type RemoteComponentMetadata = ReturnType<\n  typeof getRemoteComponentMetadata\n>;\n"],"mappings":"AAAA,MAAM,eAAe,QAAQ,IAAI;AAG1B,SAAS,6BAA6B;AAC3C,SAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY,cAAc;AAAA,IACjD;AAAA,EACF;AACF;","names":[]}

package/dist/next/remote/render-client-turbopack.cjs

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var render_client_turbopack_exports = {};
+__export(render_client_turbopack_exports, {
+  RemoteComponentSSR: () => RemoteComponentSSR
+});
+module.exports = __toCommonJS(render_client_turbopack_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_client = require("react-server-dom-turbopack/client.edge");
+var import_client2 = require("react-server-dom-turbopack/client.browser");
+var import_render_client = require("./render-client");
+function RemoteComponentSSR({
+  name,
+  data,
+  moduleLoading,
+  moduleMap
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_render_client.RemoteComponentSSR,
+    {
+      createFromReadableStream: import_client2.createFromReadableStream,
+      data,
+      moduleLoading,
+      moduleMap,
+      name,
+      ssrCreateFromReadableStream: import_client.createFromReadableStream
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponentSSR
+});
+//# sourceMappingURL=render-client-turbopack.cjs.map

package/dist/next/remote/render-client-turbopack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/render-client-turbopack.tsx"],"sourcesContent":["'use client';\n\n// these components are in a client component file to use these in the SSR and client layers\n\nimport { createFromReadableStream as ssrCreateFromReadableStream } from 'react-server-dom-turbopack/client.edge';\nimport { createFromReadableStream } from 'react-server-dom-turbopack/client.browser';\nimport { RemoteComponentSSR as GenericRemoteComponentSSR } from './render-client';\nimport type { ModuleLoading } from './types';\n\n// server-side component to render the remote component into HTML (SSR layer)\nexport function RemoteComponentSSR({\n  name,\n  data,\n  moduleLoading,\n  moduleMap,\n}: {\n  name: string;\n  data: string[];\n  moduleLoading: ModuleLoading;\n  moduleMap: Record<string, unknown>;\n}) {\n  // use the client-side component to load the RSC payload into a React component in the browser\n  // <RemoteComponentClient> will only have a reference to the component as children on the server-side\n  return (\n    <GenericRemoteComponentSSR\n      createFromReadableStream={createFromReadableStream}\n      data={data}\n      moduleLoading={moduleLoading}\n      moduleMap={moduleMap}\n      name={name}\n      ssrCreateFromReadableStream={ssrCreateFromReadableStream}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBI;AApBJ,oBAAwE;AACxE,IAAAA,iBAAyC;AACzC,2BAAgE;AAIzD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAGD,SACE;AAAA,IAAC,qBAAAC;AAAA,IAAA;AAAA,MACC,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,6BAA6B,cAAAC;AAAA;AAAA,EAC/B;AAEJ;","names":["import_client","GenericRemoteComponentSSR","ssrCreateFromReadableStream"]}

package/dist/next/remote/render-client-turbopack.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { M as ModuleLoading } from '../../types-a1bd5b56.js';
+
+declare function RemoteComponentSSR({ name, data, moduleLoading, moduleMap, }: {
+    name: string;
+    data: string[];
+    moduleLoading: ModuleLoading;
+    moduleMap: Record<string, unknown>;
+}): react_jsx_runtime.JSX.Element;
+
+export { RemoteComponentSSR };