remote-components 0.0.1

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

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createFromReadableStream as ssrCreateFromReadableStream } from "react-server-dom-turbopack/client.edge";
+import { createFromReadableStream } from "react-server-dom-turbopack/client.browser";
+import { RemoteComponentSSR as GenericRemoteComponentSSR } from "./render-client";
+function RemoteComponentSSR({
+  name,
+  data,
+  moduleLoading,
+  moduleMap
+}) {
+  return /* @__PURE__ */ jsx(
+    GenericRemoteComponentSSR,
+    {
+      createFromReadableStream,
+      data,
+      moduleLoading,
+      moduleMap,
+      name,
+      ssrCreateFromReadableStream
+    }
+  );
+}
+export {
+  RemoteComponentSSR
+};
+//# sourceMappingURL=render-client-turbopack.js.map

package/dist/next/remote/render-client-turbopack.js.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":";AAwBI;AApBJ,SAAS,4BAA4B,mCAAmC;AACxE,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,iCAAiC;AAIzD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAGD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/next/remote/render-client-webpack.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_webpack_exports = {};
+__export(render_client_webpack_exports, {
+  RemoteComponentSSR: () => RemoteComponentSSR
+});
+module.exports = __toCommonJS(render_client_webpack_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_client = require("react-server-dom-webpack/client.edge");
+var import_client2 = require("react-server-dom-webpack/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-webpack.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/render-client-webpack.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-webpack/client.edge';\nimport { createFromReadableStream } from 'react-server-dom-webpack/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-webpack.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 };

package/dist/next/remote/render-client-webpack.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createFromReadableStream as ssrCreateFromReadableStream } from "react-server-dom-webpack/client.edge";
+import { createFromReadableStream } from "react-server-dom-webpack/client.browser";
+import { RemoteComponentSSR as GenericRemoteComponentSSR } from "./render-client";
+function RemoteComponentSSR({
+  name,
+  data,
+  moduleLoading,
+  moduleMap
+}) {
+  return /* @__PURE__ */ jsx(
+    GenericRemoteComponentSSR,
+    {
+      createFromReadableStream,
+      data,
+      moduleLoading,
+      moduleMap,
+      name,
+      ssrCreateFromReadableStream
+    }
+  );
+}
+export {
+  RemoteComponentSSR
+};
+//# sourceMappingURL=render-client-webpack.js.map

package/dist/next/remote/render-client-webpack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/render-client-webpack.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-webpack/client.edge';\nimport { createFromReadableStream } from 'react-server-dom-webpack/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":";AAwBI;AApBJ,SAAS,4BAA4B,mCAAmC;AACxE,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,iCAAiC;AAIzD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAGD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,106 @@
+"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_exports = {};
+__export(render_client_exports, {
+  RemoteComponentSSR: () => RemoteComponentSSR
+});
+module.exports = __toCommonJS(render_client_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_remote = require("@remote-component/shared/remote");
+var import_react = require("react");
+function RemoteComponentClient({
+  name,
+  children,
+  createFromReadableStream
+}) {
+  const [component, setComponent] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!component) {
+      setComponent(
+        createFromReadableStream(
+          // create a new ReadableStream to load the RSC payload
+          new ReadableStream({
+            // createFromReadableStream works with a byte stream
+            type: "bytes",
+            start(controller) {
+              const encoder = new TextEncoder();
+              (self[name] ?? [`0:[null]
+`]).forEach((chunk) => {
+                controller.enqueue(encoder.encode(chunk));
+              });
+              controller.close();
+            }
+          })
+        )
+      );
+    }
+  }, [component, name, createFromReadableStream]);
+  return component ?? children;
+}
+function RemoteComponentSSR({
+  name,
+  data,
+  moduleLoading,
+  moduleMap,
+  createFromReadableStream,
+  ssrCreateFromReadableStream
+}) {
+  const [component] = (0, import_react.useState)(
+    // only initialize the component when this runs on the server-side in the SSR layer
+    // this converts the RSC flight data into a React component to get server-side rendering into HTML
+    data.length > 0 && typeof document === "undefined" ? ssrCreateFromReadableStream(
+      // convert the RSC payload to a ReadableStream
+      new ReadableStream({
+        // createFromReadableStream works with a byte stream
+        type: "bytes",
+        start(controller) {
+          const encoder = new TextEncoder();
+          data.forEach((chunk) => {
+            controller.enqueue(encoder.encode(chunk));
+          });
+          controller.close();
+        }
+      }),
+      // pass module metadata to be able to use client components
+      {
+        serverConsumerManifest: {
+          moduleLoading,
+          moduleMap
+        }
+      }
+    ) : null
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    RemoteComponentClient,
+    {
+      createFromReadableStream,
+      name,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id: `${name}_shared`, type: "application/json", children: JSON.stringify(import_remote.shared) }),
+        component
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponentSSR
+});
+//# sourceMappingURL=render-client.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/render-client.tsx"],"sourcesContent":["'use client';\n\n// these components are in a client component file to use these in the SSR and client layers\nimport type { createFromReadableStream as typeofSsrCreateFromReadableStream } from 'react-server-dom-webpack/client.edge';\nimport type { createFromReadableStream as typeofCreateFromReadableStream } from 'react-server-dom-webpack/client.browser';\nimport { shared } from '@remote-component/shared/remote';\nimport { useEffect, useState } from 'react';\nimport type { ModuleLoading } from './types';\n\n// client-side component to load the RSC payload into a React component (client layer)\nfunction RemoteComponentClient({\n  name,\n  children,\n  createFromReadableStream,\n}: {\n  name: string;\n  children: React.ReactNode;\n  createFromReadableStream: typeof typeofCreateFromReadableStream;\n}) {\n  // component is initialized to null to use the original RSC children\n  const [component, setComponent] = useState<React.ReactNode>(null);\n\n  // useEffect will only run on the client-side\n  // this initial run deserializes the RSC payload into a React component\n  useEffect(() => {\n    // when the component is not yet created, create it using React createFromReadableStream API\n    if (!component) {\n      setComponent(\n        createFromReadableStream(\n          // create a new ReadableStream to load the RSC payload\n          new ReadableStream({\n            // createFromReadableStream works with a byte stream\n            type: 'bytes',\n            start(controller) {\n              const encoder = new TextEncoder();\n              // try to load the RSC payload using the remote component name\n              // <RemoteComponentData> inserts the required RSC flight data using <script> elements\n              // if the RSC data is not found, fallback to an empty RSC payload\n              (\n                (self as Window & typeof globalThis & Record<string, string[]>)[\n                  name\n                ] ?? [`0:[null]\\n`]\n              )\n                // RSC flight data is stored in an array\n                .forEach((chunk) => {\n                  // encode the chunk to a byte buffer\n                  controller.enqueue(encoder.encode(chunk));\n                });\n              // close the stream when all chunks are enqueued\n              controller.close();\n            },\n          }),\n        ),\n      );\n    }\n  }, [component, name, createFromReadableStream]);\n\n  return component ?? children;\n}\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  createFromReadableStream,\n  ssrCreateFromReadableStream,\n}: {\n  name: string;\n  data: string[];\n  moduleLoading: ModuleLoading;\n  moduleMap: Record<string, unknown>;\n  createFromReadableStream: typeof typeofCreateFromReadableStream;\n  ssrCreateFromReadableStream: typeof typeofSsrCreateFromReadableStream;\n}) {\n  // a useState hook is used to initialize the component only once and to pass the component reference to the client-side as children\n  // eslint-disable-next-line react/hook-use-state\n  const [component] = useState(\n    // only initialize the component when this runs on the server-side in the SSR layer\n    // this converts the RSC flight data into a React component to get server-side rendering into HTML\n    data.length > 0 && typeof document === 'undefined'\n      ? ssrCreateFromReadableStream(\n          // convert the RSC payload to a ReadableStream\n          new ReadableStream({\n            // createFromReadableStream works with a byte stream\n            type: 'bytes',\n            start(controller) {\n              const encoder = new TextEncoder();\n              // RSC flight data is stored in an array\n              data.forEach((chunk) => {\n                // encode the chunk to a byte buffer\n                controller.enqueue(encoder.encode(chunk));\n              });\n              // close the stream when all chunks are enqueued\n              controller.close();\n            },\n          }),\n          // pass module metadata to be able to use client components\n          {\n            serverConsumerManifest: {\n              moduleLoading,\n              moduleMap,\n            },\n          },\n        )\n      : null,\n  );\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    <RemoteComponentClient\n      createFromReadableStream={createFromReadableStream}\n      name={name}\n    >\n      <script id={`${name}_shared`} type=\"application/json\">\n        {JSON.stringify(shared)}\n      </script>\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHI;AA3GJ,oBAAuB;AACvB,mBAAoC;AAIpC,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAED,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA0B,IAAI;AAIhE,8BAAU,MAAM;AAEd,QAAI,CAAC,WAAW;AACd;AAAA,QACE;AAAA;AAAA,UAEE,IAAI,eAAe;AAAA;AAAA,YAEjB,MAAM;AAAA,YACN,MAAM,YAAY;AAChB,oBAAM,UAAU,IAAI,YAAY;AAIhC,eACG,KACC,IACF,KAAK,CAAC;AAAA,CAAY,GAGjB,QAAQ,CAAC,UAAU;AAElB,2BAAW,QAAQ,QAAQ,OAAO,KAAK,CAAC;AAAA,cAC1C,CAAC;AAEH,yBAAW,MAAM;AAAA,YACnB;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,wBAAwB,CAAC;AAE9C,SAAO,aAAa;AACtB;AAGO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AAGD,QAAM,CAAC,SAAS,QAAI;AAAA;AAAA;AAAA,IAGlB,KAAK,SAAS,KAAK,OAAO,aAAa,cACnC;AAAA;AAAA,MAEE,IAAI,eAAe;AAAA;AAAA,QAEjB,MAAM;AAAA,QACN,MAAM,YAAY;AAChB,gBAAM,UAAU,IAAI,YAAY;AAEhC,eAAK,QAAQ,CAAC,UAAU;AAEtB,uBAAW,QAAQ,QAAQ,OAAO,KAAK,CAAC;AAAA,UAC1C,CAAC;AAED,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF,CAAC;AAAA;AAAA,MAED;AAAA,QACE,wBAAwB;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF,IACA;AAAA,EACN;AAIA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,YAAO,IAAI,GAAG,eAAe,MAAK,oBAChC,eAAK,UAAU,oBAAM,GACxB;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { createFromReadableStream as createFromReadableStream$1 } from 'react-server-dom-webpack/client.edge';
+import { createFromReadableStream } from 'react-server-dom-webpack/client.browser';
+import { M as ModuleLoading } from '../../types-a1bd5b56.js';
+
+declare function RemoteComponentSSR({ name, data, moduleLoading, moduleMap, createFromReadableStream, ssrCreateFromReadableStream, }: {
+    name: string;
+    data: string[];
+    moduleLoading: ModuleLoading;
+    moduleMap: Record<string, unknown>;
+    createFromReadableStream: typeof createFromReadableStream;
+    ssrCreateFromReadableStream: typeof createFromReadableStream$1;
+}): react_jsx_runtime.JSX.Element;
+
+export { RemoteComponentSSR };

package/dist/next/remote/render-client.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { shared } from "@remote-component/shared/remote";
+import { useEffect, useState } from "react";
+function RemoteComponentClient({
+  name,
+  children,
+  createFromReadableStream
+}) {
+  const [component, setComponent] = useState(null);
+  useEffect(() => {
+    if (!component) {
+      setComponent(
+        createFromReadableStream(
+          // create a new ReadableStream to load the RSC payload
+          new ReadableStream({
+            // createFromReadableStream works with a byte stream
+            type: "bytes",
+            start(controller) {
+              const encoder = new TextEncoder();
+              (self[name] ?? [`0:[null]
+`]).forEach((chunk) => {
+                controller.enqueue(encoder.encode(chunk));
+              });
+              controller.close();
+            }
+          })
+        )
+      );
+    }
+  }, [component, name, createFromReadableStream]);
+  return component ?? children;
+}
+function RemoteComponentSSR({
+  name,
+  data,
+  moduleLoading,
+  moduleMap,
+  createFromReadableStream,
+  ssrCreateFromReadableStream
+}) {
+  const [component] = useState(
+    // only initialize the component when this runs on the server-side in the SSR layer
+    // this converts the RSC flight data into a React component to get server-side rendering into HTML
+    data.length > 0 && typeof document === "undefined" ? ssrCreateFromReadableStream(
+      // convert the RSC payload to a ReadableStream
+      new ReadableStream({
+        // createFromReadableStream works with a byte stream
+        type: "bytes",
+        start(controller) {
+          const encoder = new TextEncoder();
+          data.forEach((chunk) => {
+            controller.enqueue(encoder.encode(chunk));
+          });
+          controller.close();
+        }
+      }),
+      // pass module metadata to be able to use client components
+      {
+        serverConsumerManifest: {
+          moduleLoading,
+          moduleMap
+        }
+      }
+    ) : null
+  );
+  return /* @__PURE__ */ jsxs(
+    RemoteComponentClient,
+    {
+      createFromReadableStream,
+      name,
+      children: [
+        /* @__PURE__ */ jsx("script", { id: `${name}_shared`, type: "application/json", children: JSON.stringify(shared) }),
+        component
+      ]
+    }
+  );
+}
+export {
+  RemoteComponentSSR
+};
+//# sourceMappingURL=render-client.js.map

package/dist/next/remote/render-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/render-client.tsx"],"sourcesContent":["'use client';\n\n// these components are in a client component file to use these in the SSR and client layers\nimport type { createFromReadableStream as typeofSsrCreateFromReadableStream } from 'react-server-dom-webpack/client.edge';\nimport type { createFromReadableStream as typeofCreateFromReadableStream } from 'react-server-dom-webpack/client.browser';\nimport { shared } from '@remote-component/shared/remote';\nimport { useEffect, useState } from 'react';\nimport type { ModuleLoading } from './types';\n\n// client-side component to load the RSC payload into a React component (client layer)\nfunction RemoteComponentClient({\n  name,\n  children,\n  createFromReadableStream,\n}: {\n  name: string;\n  children: React.ReactNode;\n  createFromReadableStream: typeof typeofCreateFromReadableStream;\n}) {\n  // component is initialized to null to use the original RSC children\n  const [component, setComponent] = useState<React.ReactNode>(null);\n\n  // useEffect will only run on the client-side\n  // this initial run deserializes the RSC payload into a React component\n  useEffect(() => {\n    // when the component is not yet created, create it using React createFromReadableStream API\n    if (!component) {\n      setComponent(\n        createFromReadableStream(\n          // create a new ReadableStream to load the RSC payload\n          new ReadableStream({\n            // createFromReadableStream works with a byte stream\n            type: 'bytes',\n            start(controller) {\n              const encoder = new TextEncoder();\n              // try to load the RSC payload using the remote component name\n              // <RemoteComponentData> inserts the required RSC flight data using <script> elements\n              // if the RSC data is not found, fallback to an empty RSC payload\n              (\n                (self as Window & typeof globalThis & Record<string, string[]>)[\n                  name\n                ] ?? [`0:[null]\\n`]\n              )\n                // RSC flight data is stored in an array\n                .forEach((chunk) => {\n                  // encode the chunk to a byte buffer\n                  controller.enqueue(encoder.encode(chunk));\n                });\n              // close the stream when all chunks are enqueued\n              controller.close();\n            },\n          }),\n        ),\n      );\n    }\n  }, [component, name, createFromReadableStream]);\n\n  return component ?? children;\n}\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  createFromReadableStream,\n  ssrCreateFromReadableStream,\n}: {\n  name: string;\n  data: string[];\n  moduleLoading: ModuleLoading;\n  moduleMap: Record<string, unknown>;\n  createFromReadableStream: typeof typeofCreateFromReadableStream;\n  ssrCreateFromReadableStream: typeof typeofSsrCreateFromReadableStream;\n}) {\n  // a useState hook is used to initialize the component only once and to pass the component reference to the client-side as children\n  // eslint-disable-next-line react/hook-use-state\n  const [component] = useState(\n    // only initialize the component when this runs on the server-side in the SSR layer\n    // this converts the RSC flight data into a React component to get server-side rendering into HTML\n    data.length > 0 && typeof document === 'undefined'\n      ? ssrCreateFromReadableStream(\n          // convert the RSC payload to a ReadableStream\n          new ReadableStream({\n            // createFromReadableStream works with a byte stream\n            type: 'bytes',\n            start(controller) {\n              const encoder = new TextEncoder();\n              // RSC flight data is stored in an array\n              data.forEach((chunk) => {\n                // encode the chunk to a byte buffer\n                controller.enqueue(encoder.encode(chunk));\n              });\n              // close the stream when all chunks are enqueued\n              controller.close();\n            },\n          }),\n          // pass module metadata to be able to use client components\n          {\n            serverConsumerManifest: {\n              moduleLoading,\n              moduleMap,\n            },\n          },\n        )\n      : null,\n  );\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    <RemoteComponentClient\n      createFromReadableStream={createFromReadableStream}\n      name={name}\n    >\n      <script id={`${name}_shared`} type=\"application/json\">\n        {JSON.stringify(shared)}\n      </script>\n      {component}\n    </RemoteComponentClient>\n  );\n}\n"],"mappings":";AAgHI,SAIE,KAJF;AA3GJ,SAAS,cAAc;AACvB,SAAS,WAAW,gBAAgB;AAIpC,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,SAA0B,IAAI;AAIhE,YAAU,MAAM;AAEd,QAAI,CAAC,WAAW;AACd;AAAA,QACE;AAAA;AAAA,UAEE,IAAI,eAAe;AAAA;AAAA,YAEjB,MAAM;AAAA,YACN,MAAM,YAAY;AAChB,oBAAM,UAAU,IAAI,YAAY;AAIhC,eACG,KACC,IACF,KAAK,CAAC;AAAA,CAAY,GAGjB,QAAQ,CAAC,UAAU;AAElB,2BAAW,QAAQ,QAAQ,OAAO,KAAK,CAAC;AAAA,cAC1C,CAAC;AAEH,yBAAW,MAAM;AAAA,YACnB;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,wBAAwB,CAAC;AAE9C,SAAO,aAAa;AACtB;AAGO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AAGD,QAAM,CAAC,SAAS,IAAI;AAAA;AAAA;AAAA,IAGlB,KAAK,SAAS,KAAK,OAAO,aAAa,cACnC;AAAA;AAAA,MAEE,IAAI,eAAe;AAAA;AAAA,QAEjB,MAAM;AAAA,QACN,MAAM,YAAY;AAChB,gBAAM,UAAU,IAAI,YAAY;AAEhC,eAAK,QAAQ,CAAC,UAAU;AAEtB,uBAAW,QAAQ,QAAQ,OAAO,KAAK,CAAC;AAAA,UAC1C,CAAC;AAED,qBAAW,MAAM;AAAA,QACnB;AAAA,MACF,CAAC;AAAA;AAAA,MAED;AAAA,QACE,wBAAwB;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF,IACA;AAAA,EACN;AAIA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,YAAO,IAAI,GAAG,eAAe,MAAK,oBAChC,eAAK,UAAU,MAAM,GACxB;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/next/remote/render-server.cjs

@@ -0,0 +1,133 @@
+"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 render_server_exports = {};
+__export(render_server_exports, {
+  RemoteComponent: () => RemoteComponent
+});
+module.exports = __toCommonJS(render_server_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_headers = require("next/headers");
+var import_work_async_storage = require("next/dist/server/app-render/work-async-storage.external");
+const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
+  "next.server.action-manifests"
+);
+const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;
+function RemoteComponentData({ name, data }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id: `${name}_rsc`, children: data.map(
+    (chunk, i) => (
+      // make the data handling somewhat safe
+      `${i === 0 ? `self["${name}"]=self["${name}"]||[];` : ""}self["${name}"].push(${JSON.stringify(
+        chunk
+      )});`
+    )
+  ).join("\n") });
+}
+async function RemoteComponent({
+  name = "__vercel_remote_component",
+  children
+}) {
+  const headersList = await (0, import_headers.headers)();
+  const url = headersList.get("Vercel-Remote-Component-Url");
+  const isRemote = url !== null;
+  if (!isRemote) {
+    return children;
+  }
+  const { pathname } = new URL(url);
+  const { page, route } = import_work_async_storage.workAsyncStorage.getStore() ?? { page: pathname };
+  const manifests = globalThis[SERVER_ACTION_MANIFESTS_SINGLETON];
+  const manifest = manifests.clientReferenceManifestsPerPage?.[route ?? page];
+  const self = globalThis;
+  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};
+  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;
+  let clientModules = manifest?.clientModules ?? {};
+  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };
+  clientModules = Object.fromEntries(
+    Object.entries(clientModules).map(([key, value]) => {
+      const remoteId = `[${CURRENT_ZONE}] ${value.id}`;
+      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];
+      return [
+        key,
+        {
+          ...value,
+          id: remoteId,
+          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack
+          // this is required to avoid loading the wrong chunk in the host application
+          chunks: value.chunks.map((chunk) => `[${CURRENT_ZONE}] ${chunk}`)
+          // async: true,
+        }
+      ];
+    })
+  );
+  const [{ renderToReadableStream }, { RemoteComponentSSR }] = await Promise.all(
+    process.env.TURBOPACK ? [
+      import("react-server-dom-turbopack/server.edge"),
+      import("./render-client-turbopack")
+    ] : [
+      import("react-server-dom-webpack/server.edge"),
+      import("./render-client-webpack")
+    ]
+  );
+  const stream = renderToReadableStream(children, clientModules);
+  const data = [];
+  const decoder = new TextDecoder();
+  for await (const chunk of stream) {
+    data.push(decoder.decode(chunk));
+  }
+  const runtime = process.env.TURBOPACK ? "turbopack" : "webpack";
+  const remoteComponentName = `${name}_${route?.replace(/\//g, "_")}`;
+  return (
+    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        "data-bundle": CURRENT_ZONE,
+        "data-route": route,
+        "data-runtime": runtime,
+        id: `${remoteComponentName}_ssr`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            RemoteComponentSSR,
+            {
+              data,
+              moduleLoading: manifest?.moduleLoading ?? {},
+              moduleMap: ssrModuleMapping,
+              name: remoteComponentName
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RemoteComponentData, { data, name: remoteComponentName })
+        ]
+      }
+    )
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponent
+});
+//# sourceMappingURL=render-server.cjs.map

package/dist/next/remote/render-server.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/render-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport type { Manifest } from './types';\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''}self[\"${name}\"].push(${JSON.stringify(\n              chunk,\n            )});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n// a React Server Component to start rendering of the remote component\n// this is a temporary solution until the Next.js team provides a better way to handle remote components\nexport async function RemoteComponent({\n  name = '__vercel_remote_component',\n  children,\n}: {\n  name?: string;\n  children: React.ReactNode;\n}) {\n  const headersList = await headers();\n  const url = headersList.get('Vercel-Remote-Component-Url');\n  const isRemote = url !== null;\n\n  if (!isRemote) {\n    return children;\n  }\n\n  // this URL passed by the remote component consumer is only used to know the public address of the remote component\n  // it is only used to determine if we need to mutate the client module map for now\n\n  const { pathname } = new URL(url);\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? { page: pathname };\n\n  // get reference to the manifests from the global scope\n  const manifests = (\n    globalThis as typeof globalThis & {\n      [SERVER_ACTION_MANIFESTS_SINGLETON]: {\n        clientReferenceManifestsPerPage?: Record<string, Manifest>;\n      };\n    }\n  )[SERVER_ACTION_MANIFESTS_SINGLETON];\n  const manifest = manifests.clientReferenceManifestsPerPage?.[route ?? page];\n\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n  };\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  let clientModules = manifest?.clientModules ?? {};\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  clientModules = Object.fromEntries(\n    Object.entries(clientModules).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${CURRENT_ZONE}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${CURRENT_ZONE}] ${chunk}`),\n          // async: true,\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [{ renderToReadableStream }, { RemoteComponentSSR }] =\n    await Promise.all(\n      process.env.TURBOPACK\n        ? [\n            import('react-server-dom-turbopack/server.edge'),\n            import('./render-client-turbopack'),\n          ]\n        : [\n            import('react-server-dom-webpack/server.edge'),\n            import('./render-client-webpack'),\n          ],\n    );\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules);\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route?.replace(/\\//g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={CURRENT_ZONE}\n      data-route={route}\n      data-runtime={runtime}\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSSR\n        data={data}\n        moduleLoading={manifest?.moduleLoading ?? {}}\n        moduleMap={ssrModuleMapping}\n        name={remoteComponentName}\n      />\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI;AAjBJ,qBAAwB;AACxB,gCAAiC;AAIjC,MAAM,oCAAoC,OAAO;AAAA,EAC/C;AACF;AAEA,MAAM,eAAe,QAAQ,IAAI;AAMjC,SAAS,oBAAoB,EAAE,MAAM,KAAK,GAAqC;AAC7E,SACE,4CAAC,YAAO,IAAI,GAAG,YACZ,eACE;AAAA,IACC,CAAC,OAAO;AAAA;AAAA,MAEN,GAAG,MAAM,IAAI,SAAS,gBAAgB,gBAAgB,WAAW,eAAe,KAAK;AAAA,QACnF;AAAA,MACF;AAAA;AAAA,EACJ,EACC,KAAK,IAAI,GACd;AAEJ;AAIA,eAAsB,gBAAgB;AAAA,EACpC,OAAO;AAAA,EACP;AACF,GAGG;AACD,QAAM,cAAc,UAAM,wBAAQ;AAClC,QAAM,MAAM,YAAY,IAAI,6BAA6B;AACzD,QAAM,WAAW,QAAQ;AAEzB,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAKA,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,GAAG;AAEhC,QAAM,EAAE,MAAM,MAAM,IAAI,2CAAiB,SAAS,KAAK,EAAE,MAAM,SAAS;AAGxE,QAAM,YACJ,WAKA,iCAAiC;AACnC,QAAM,WAAW,UAAU,kCAAkC,SAAS,IAAI;AAE1E,QAAM,OAAO;AAQb,OAAK,iBAAiB,KAAK,kBAAkB,CAAC;AAC9C,OAAK,eAAe,IAAI,IAAI,KAAK,eAAe,IAAI,KAAK;AAGzD,MAAI,gBAAgB,UAAU,iBAAiB,CAAC;AAChD,QAAM,mBAAmB,EAAE,GAAG,UAAU,iBAAiB;AAGzD,kBAAgB,OAAO;AAAA,IACrB,OAAO,QAAQ,aAAa,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAElD,YAAM,WAAW,IAAI,iBAAiB,MAAM;AAC5C,uBAAiB,QAAQ,IAAI,iBAAiB,MAAM,EAAE;AAEtD,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,IAAI;AAAA;AAAA;AAAA,UAGJ,QAAQ,MAAM,OAAO,IAAI,CAAC,UAAU,IAAI,iBAAiB,OAAO;AAAA;AAAA,QAElE;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAGA,QAAM,CAAC,EAAE,uBAAuB,GAAG,EAAE,mBAAmB,CAAC,IACvD,MAAM,QAAQ;AAAA,IACZ,QAAQ,IAAI,YACR;AAAA,MACE,OAAO,wCAAwC;AAAA,MAC/C,OAAO,2BAA2B;AAAA,IACpC,IACA;AAAA,MACE,OAAO,sCAAsC;AAAA,MAC7C,OAAO,yBAAyB;AAAA,IAClC;AAAA,EACN;AAEF,QAAM,SAAS,uBAAuB,UAAU,aAAa;AAE7D,QAAM,OAAO,CAAC;AACd,QAAM,UAAU,IAAI,YAAY;AAGhC,mBAAiB,SAAS,QAAgD;AACxE,SAAK,KAAK,QAAQ,OAAO,KAAK,CAAC;AAAA,EACjC;AAEA,QAAM,UAAU,QAAQ,IAAI,YAAY,cAAc;AACtD,QAAM,sBAAsB,GAAG,QAAQ,OAAO,QAAQ,OAAO,GAAG;AAEhE;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,IAAI,GAAG;AAAA,QAEP;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,eAAe,UAAU,iBAAiB,CAAC;AAAA,cAC3C,WAAW;AAAA,cACX,MAAM;AAAA;AAAA,UACR;AAAA,UAEA,4CAAC,uBAAoB,MAAY,MAAM,qBAAqB;AAAA;AAAA;AAAA,IAC9D;AAAA;AAEJ;","names":[]}

package/dist/next/remote/render-server.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+
+declare function RemoteComponent({ name, children, }: {
+    name?: string;
+    children: React.ReactNode;
+}): Promise<string | number | bigint | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined>;
+
+export { RemoteComponent };

package/dist/next/remote/render-server.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { headers } from "next/headers";
+import { workAsyncStorage } from "next/dist/server/app-render/work-async-storage.external";
+const SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(
+  "next.server.action-manifests"
+);
+const CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;
+function RemoteComponentData({ name, data }) {
+  return /* @__PURE__ */ jsx("script", { id: `${name}_rsc`, children: data.map(
+    (chunk, i) => (
+      // make the data handling somewhat safe
+      `${i === 0 ? `self["${name}"]=self["${name}"]||[];` : ""}self["${name}"].push(${JSON.stringify(
+        chunk
+      )});`
+    )
+  ).join("\n") });
+}
+async function RemoteComponent({
+  name = "__vercel_remote_component",
+  children
+}) {
+  const headersList = await headers();
+  const url = headersList.get("Vercel-Remote-Component-Url");
+  const isRemote = url !== null;
+  if (!isRemote) {
+    return children;
+  }
+  const { pathname } = new URL(url);
+  const { page, route } = workAsyncStorage.getStore() ?? { page: pathname };
+  const manifests = globalThis[SERVER_ACTION_MANIFESTS_SINGLETON];
+  const manifest = manifests.clientReferenceManifestsPerPage?.[route ?? page];
+  const self = globalThis;
+  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};
+  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;
+  let clientModules = manifest?.clientModules ?? {};
+  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };
+  clientModules = Object.fromEntries(
+    Object.entries(clientModules).map(([key, value]) => {
+      const remoteId = `[${CURRENT_ZONE}] ${value.id}`;
+      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];
+      return [
+        key,
+        {
+          ...value,
+          id: remoteId,
+          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack
+          // this is required to avoid loading the wrong chunk in the host application
+          chunks: value.chunks.map((chunk) => `[${CURRENT_ZONE}] ${chunk}`)
+          // async: true,
+        }
+      ];
+    })
+  );
+  const [{ renderToReadableStream }, { RemoteComponentSSR }] = await Promise.all(
+    process.env.TURBOPACK ? [
+      import("react-server-dom-turbopack/server.edge"),
+      import("./render-client-turbopack")
+    ] : [
+      import("react-server-dom-webpack/server.edge"),
+      import("./render-client-webpack")
+    ]
+  );
+  const stream = renderToReadableStream(children, clientModules);
+  const data = [];
+  const decoder = new TextDecoder();
+  for await (const chunk of stream) {
+    data.push(decoder.decode(chunk));
+  }
+  const runtime = process.env.TURBOPACK ? "turbopack" : "webpack";
+  const remoteComponentName = `${name}_${route?.replace(/\//g, "_")}`;
+  return (
+    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-bundle": CURRENT_ZONE,
+        "data-route": route,
+        "data-runtime": runtime,
+        id: `${remoteComponentName}_ssr`,
+        children: [
+          /* @__PURE__ */ jsx(
+            RemoteComponentSSR,
+            {
+              data,
+              moduleLoading: manifest?.moduleLoading ?? {},
+              moduleMap: ssrModuleMapping,
+              name: remoteComponentName
+            }
+          ),
+          /* @__PURE__ */ jsx(RemoteComponentData, { data, name: remoteComponentName })
+        ]
+      }
+    )
+  );
+}
+export {
+  RemoteComponent
+};
+//# sourceMappingURL=render-server.js.map