@modern-js/render 0.0.0-canary-20250912092308

package/dist/esm-node/client/callServer.js

@@ -0,0 +1,85 @@
+import { _ as _class_private_field_get } from "@swc/helpers/_/_class_private_field_get";
+import { _ as _class_private_field_init } from "@swc/helpers/_/_class_private_field_init";
+import { _ as _class_private_field_set } from "@swc/helpers/_/_class_private_field_set";
+import { createFromFetch, encodeReply } from "@modern-js/utils/react-server-dom-webpack/client.browser";
+var _statusCode = /* @__PURE__ */ new WeakMap(), _url = /* @__PURE__ */ new WeakMap(), _details = /* @__PURE__ */ new WeakMap();
+class CallServerError extends Error {
+  get statusCode() {
+    return _class_private_field_get(this, _statusCode);
+  }
+  get url() {
+    return _class_private_field_get(this, _url);
+  }
+  get details() {
+    return {
+      ..._class_private_field_get(this, _details)
+    };
+  }
+  toJSON() {
+    return {
+      name: this.name,
+      message: this.message,
+      statusCode: _class_private_field_get(this, _statusCode),
+      url: _class_private_field_get(this, _url),
+      details: _class_private_field_get(this, _details)
+    };
+  }
+  constructor(message, statusCode, url = "", details = {}) {
+    const formattedMessage = `Call Server Action failed (${statusCode}): ${message}
+URL: ${url}`;
+    super(formattedMessage), _class_private_field_init(this, _statusCode, {
+      writable: true,
+      value: void 0
+    }), _class_private_field_init(this, _url, {
+      writable: true,
+      value: void 0
+    }), _class_private_field_init(this, _details, {
+      writable: true,
+      value: void 0
+    });
+    this.name = "CallServerError";
+    _class_private_field_set(this, _statusCode, statusCode);
+    _class_private_field_set(this, _url, url);
+    _class_private_field_set(this, _details, details);
+  }
+}
+async function requestCallServer(id, args) {
+  const entryName = window.__MODERN_JS_ENTRY_NAME;
+  const url = entryName === "main" ? "/" : `/${entryName}`;
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        Accept: "text/x-component",
+        "x-rsc-action": id
+      },
+      body: await encodeReply(args)
+    });
+    if (!response.ok) {
+      throw new CallServerError(response.statusText, response.status, url, {
+        id,
+        args
+      });
+    }
+    return response;
+  } catch (error) {
+    if (error instanceof CallServerError) {
+      throw error;
+    }
+    throw new CallServerError(error instanceof Error ? error.message : "Unknown error", 1, url, {
+      id,
+      args
+    });
+  }
+}
+async function callServer(id, args) {
+  const response = requestCallServer(id, args);
+  const res = createFromFetch(response, {
+    callServer
+  });
+  return res;
+}
+export {
+  callServer,
+  requestCallServer
+};

package/dist/esm-node/client/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createFromReadableStream, createServerReference } from "@modern-js/utils/react-server-dom-webpack/client.browser";
+import React from "react";
+import { createContext, useState } from "react";
+import { rscStream } from "../rsc-html-stream/client";
+import { callServer } from "./callServer";
+import { createFromFetch } from "@modern-js/utils/react-server-dom-webpack/client.browser";
+function RscClientRoot({ rscPayload }) {
+  const elements = React.use(rscPayload);
+  const [root, setRoot] = useState(elements);
+  return /* @__PURE__ */ _jsx(_Fragment, {
+    children: root
+  });
+}
+const ElementsContext = /* @__PURE__ */ createContext(null);
+const JSX_SHELL_STREAM_END_MARK = "<!--<?- SHELL_STREAM_END ?>-->";
+const ServerElementsProvider = ({ elements, children }) => {
+  return /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [
+      /* @__PURE__ */ _jsx(ElementsContext.Provider, {
+        value: elements,
+        children
+      }),
+      JSX_SHELL_STREAM_END_MARK
+    ]
+  });
+};
+const RSCServerSlot = () => {
+  const elements = React.use(ElementsContext);
+  return elements;
+};
+export {
+  ElementsContext,
+  RSCServerSlot,
+  RscClientRoot,
+  ServerElementsProvider,
+  callServer,
+  createFromFetch,
+  createFromReadableStream,
+  createServerReference,
+  rscStream
+};

package/dist/esm-node/rsc-html-stream/client.js

@@ -0,0 +1,32 @@
+const encoder = new TextEncoder();
+let streamController;
+const rscStream = new ReadableStream({
+  start(controller) {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handleChunk = (chunk) => {
+      if (typeof chunk === "string") {
+        controller.enqueue(encoder.encode(chunk));
+      } else {
+        controller.enqueue(chunk);
+      }
+    };
+    window.__FLIGHT_DATA = window.__FLIGHT_DATA || [];
+    window.__FLIGHT_DATA.forEach(handleChunk);
+    window.__FLIGHT_DATA.push = (chunk) => {
+      handleChunk(chunk);
+    };
+    streamController = controller;
+  }
+});
+if (typeof document !== "undefined" && document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => {
+    streamController === null || streamController === void 0 ? void 0 : streamController.close();
+  });
+} else {
+  streamController === null || streamController === void 0 ? void 0 : streamController.close();
+}
+export {
+  rscStream
+};

package/dist/esm-node/rsc-html-stream/server.js

@@ -0,0 +1,74 @@
+const encoder = new TextEncoder();
+const trailer = "</body></html>";
+function injectRSCPayload(rscStream, { injectClosingTags = true }) {
+  const decoder = new TextDecoder();
+  let resolveFlightDataPromise;
+  const flightDataPromise = new Promise((resolve) => resolveFlightDataPromise = resolve);
+  let startedRSC = false;
+  const buffered = [];
+  let timeout = null;
+  function flushBufferedChunks(controller) {
+    for (const chunk of buffered) {
+      let buf = decoder.decode(chunk);
+      if (buf.endsWith(trailer)) {
+        buf = buf.slice(0, -trailer.length);
+      }
+      controller.enqueue(encoder.encode(buf));
+    }
+    buffered.length = 0;
+    timeout = null;
+  }
+  return new TransformStream({
+    transform(chunk, controller) {
+      buffered.push(chunk);
+      if (timeout) {
+        return;
+      }
+      timeout = setTimeout(async () => {
+        flushBufferedChunks(controller);
+        if (!startedRSC) {
+          startedRSC = true;
+          writeRSCStream(rscStream, controller).catch((err) => controller.error(err)).then(() => resolveFlightDataPromise());
+        }
+      }, 0);
+    },
+    async flush(controller) {
+      await flightDataPromise;
+      if (timeout) {
+        clearTimeout(timeout);
+        flushBufferedChunks(controller);
+      }
+      if (injectClosingTags) {
+        controller.enqueue(encoder.encode("</body></html>"));
+      }
+    }
+  });
+}
+async function writeRSCStream(rscStream, controller) {
+  const decoder = new TextDecoder("utf-8", {
+    fatal: true
+  });
+  for await (const chunk of rscStream) {
+    try {
+      writeChunk(JSON.stringify(decoder.decode(chunk, {
+        stream: true
+      })), controller);
+    } catch (err) {
+      const base64 = JSON.stringify(btoa(String.fromCodePoint(...chunk)));
+      writeChunk(`Uint8Array.from(atob(${base64}), m => m.codePointAt(0))`, controller);
+    }
+  }
+  const remaining = decoder.decode();
+  if (remaining.length) {
+    writeChunk(JSON.stringify(remaining), controller);
+  }
+}
+function writeChunk(chunk, controller) {
+  controller.enqueue(encoder.encode(`<script>${escapeScript(`(self.__FLIGHT_DATA||=[]).push(${chunk})`)}</script>`));
+}
+function escapeScript(script) {
+  return script.replace(/<!--/g, "<\\!--").replace(/<\/(script)/gi, "</\\$1");
+}
+export {
+  injectRSCPayload
+};

package/dist/esm-node/server/rsc/index.js

@@ -0,0 +1 @@
+export * from "./rsc";

package/dist/esm-node/server/rsc/rsc.js

@@ -0,0 +1,52 @@
+import { renderToReadableStream } from "@modern-js/utils/react-server-dom-webpack/server.edge";
+import { renderToReadableStream as renderToReadableStream2 } from "@modern-js/utils/react-server-dom-webpack/server.edge";
+import { decodeReply } from "@modern-js/utils/react-server-dom-webpack/server.edge";
+import { createFromReadableStream } from "@modern-js/utils/react-server-dom-webpack/client.edge";
+import { registerClientReference, registerServerReference } from "@modern-js/utils/react-server-dom-webpack/server";
+const renderRsc = (options) => {
+  const readable = renderToReadableStream2(options.element, options.clientManifest);
+  return readable;
+};
+const handleAction = async (req, options) => {
+  const serverReference = req.headers.get("x-rsc-action");
+  if (serverReference) {
+    const [filepath, name] = serverReference.split("#");
+    const action = __webpack_require__(filepath)[name || "default"];
+    if (action.$$typeof !== Symbol.for("react.server.reference")) {
+      throw new Error("Invalid action");
+    }
+    const { clientManifest } = options;
+    const contentType = req.headers.get("content-type");
+    let args;
+    if (contentType === null || contentType === void 0 ? void 0 : contentType.includes("multipart/form-data")) {
+      const formData = await req.formData();
+      args = await decodeReply(formData);
+    } else {
+      const text = await req.text();
+      args = await decodeReply(text);
+    }
+    const result = action.apply(null, args);
+    const stream = renderRsc({
+      element: result,
+      clientManifest
+    });
+    const response = new Response(stream, {
+      status: 200,
+      headers: {
+        "Content-Type": "text/html"
+      }
+    });
+    return response;
+  }
+  return new Response("Cannot find server reference", {
+    status: 404
+  });
+};
+export {
+  createFromReadableStream,
+  handleAction,
+  registerClientReference,
+  registerServerReference,
+  renderRsc,
+  renderToReadableStream
+};

package/dist/esm-node/server/ssr/index.js

@@ -0,0 +1 @@
+export * from "./ssr";

package/dist/esm-node/server/ssr/ssr.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { ServerElementsProvider } from "../../client";
+function wrapStream(stream, originalStream) {
+  const wrappedStream = Object.create(stream);
+  for (const prop of Object.keys(originalStream)) {
+    if (!(prop in wrappedStream)) {
+      wrappedStream[prop] = originalStream[prop];
+    }
+  }
+  return wrappedStream;
+}
+const renderSSRStream = async (children, options) => {
+  const { clientManifest, ssrManifest, rscRoot } = options;
+  if (!clientManifest || !ssrManifest) {
+    return renderToReadableStream(children, options);
+  }
+  try {
+    const [{ renderRsc }, { createFromReadableStream }, { injectRSCPayload }] = await Promise.all([
+      import("../rsc"),
+      import("@modern-js/utils/react-server-dom-webpack/client.edge"),
+      import("../../rsc-html-stream/server")
+    ]);
+    const rscStream = await renderRsc({
+      element: rscRoot || children,
+      clientManifest
+    });
+    const [rscElementStream, rscPayloadStream] = rscStream.tee();
+    const elements = createFromReadableStream(rscElementStream, {
+      serverConsumerManifest: ssrManifest
+    });
+    const htmlStream = await renderToReadableStream(/* @__PURE__ */ _jsx(ServerElementsProvider, {
+      elements,
+      children
+    }), options);
+    return wrapStream(htmlStream.pipeThrough(injectRSCPayload(rscPayloadStream, {
+      injectClosingTags: false
+    })), htmlStream);
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+export {
+  renderSSRStream
+};

package/dist/types/client/callServer.d.ts

@@ -0,0 +1,3 @@
+import type { ReactServerValue } from '@modern-js/utils/react-server-dom-webpack';
+export declare function requestCallServer(id: string, args: ReactServerValue): Promise<Response>;
+export declare function callServer(id: string, args: ReactServerValue): Promise<any>;

package/dist/types/client/index.d.ts

@@ -0,0 +1,22 @@
+import { createFromReadableStream, createServerReference } from '@modern-js/utils/react-server-dom-webpack/client.browser';
+import React from 'react';
+import { type ReactNode } from 'react';
+export { rscStream } from '../rsc-html-stream/client';
+export { createFromReadableStream, createServerReference };
+export { callServer } from './callServer';
+export { createFromFetch } from '@modern-js/utils/react-server-dom-webpack/client.browser';
+declare global {
+    interface Window {
+        __MODERN_JS_ENTRY_NAME?: string;
+    }
+}
+export declare function RscClientRoot({ rscPayload, }: {
+    rscPayload: Promise<React.ReactNode>;
+}): React.JSX.Element;
+type Elements = Promise<ReactNode[]>;
+export declare const ElementsContext: React.Context<Elements | null>;
+export declare const ServerElementsProvider: ({ elements, children, }: {
+    elements: Elements;
+    children: ReactNode;
+}) => React.JSX.Element;
+export declare const RSCServerSlot: () => Elements | null;

package/dist/types/rsc-html-stream/client.d.ts

@@ -0,0 +1,5 @@
+/**
+ * forked and modified from https://github.com/devongovett/rsc-html-stream/blob/main/client.js
+ * license at https://github.com/devongovett/rsc-html-stream/blob/main/LICENSE
+ */
+export declare const rscStream: ReadableStream<Uint8Array>;

package/dist/types/rsc-html-stream/server.d.ts

@@ -0,0 +1,3 @@
+export declare function injectRSCPayload(rscStream: ReadableStream, { injectClosingTags, }: {
+    injectClosingTags?: boolean;
+}): TransformStream;

package/dist/types/server/rsc/index.d.ts

@@ -0,0 +1 @@
+export * from './rsc';

package/dist/types/server/rsc/rsc.d.ts

@@ -0,0 +1,13 @@
+export { renderToReadableStream } from '@modern-js/utils/react-server-dom-webpack/server.edge';
+import type { ClientManifest } from '@modern-js/types/server';
+export { createFromReadableStream } from '@modern-js/utils/react-server-dom-webpack/client.edge';
+export { registerClientReference, registerServerReference, } from '@modern-js/utils/react-server-dom-webpack/server';
+type RenderRscOptions = {
+    element: React.ReactElement;
+    clientManifest: ClientManifest;
+};
+export declare const renderRsc: (options: RenderRscOptions) => ReadableStream<any>;
+type HandleActionOptions = {
+    clientManifest: ClientManifest;
+};
+export declare const handleAction: (req: Request, options: HandleActionOptions) => Promise<Response>;

package/dist/types/server/ssr/index.d.ts

@@ -0,0 +1 @@
+export * from './ssr';

package/dist/types/server/ssr/ssr.d.ts

@@ -0,0 +1,11 @@
+import type { ClientManifest, SSRManifest } from '@modern-js/types/server';
+import { renderToReadableStream } from 'react-dom/server.edge';
+type Options = {
+    request: Request;
+    clientManifest: ClientManifest;
+    ssrManifest: SSRManifest;
+} & Parameters<typeof renderToReadableStream>[1];
+export declare const renderSSRStream: (children: React.ReactNode, options: Options & {
+    rscRoot: React.ReactElement;
+}) => Promise<ReturnType<typeof renderToReadableStream>>;
+export {};

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@modern-js/render",
+  "description": "A Progressive React Framework for modern web development.",
+  "homepage": "https://modernjs.dev",
+  "bugs": "https://github.com/web-infra-dev/modern.js/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/modern.js",
+    "directory": "packages/runtime/render"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "framework",
+    "modern",
+    "modern.js"
+  ],
+  "version": "0.0.0-canary-20250912092308",
+  "files": [
+    "dist",
+    "hook.d.ts"
+  ],
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@modern-js/types": "0.0.0-canary-20250912092308",
+    "@modern-js/utils": "0.0.0-canary-20250912092308"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "jest": "^29.7.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5",
+    "@modern-js/server-core": "0.0.0-canary-20250912092308"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.2"
+  },
+  "exports": {
+    "./ssr": {
+      "types": "./dist/types/server/ssr/index.d.ts",
+      "jsnext:source": "./src/server/ssr/index.ts",
+      "default": "./dist/esm/server/ssr/index.js"
+    },
+    "./rsc": {
+      "types": "./dist/types/server/rsc/index.d.ts",
+      "jsnext:source": "./src/server/rsc/index.ts",
+      "default": "./dist/esm/server/rsc/index.js"
+    },
+    "./client": {
+      "types": "./dist/types/client/index.d.ts",
+      "jsnext:source": "./src/client/index.tsx",
+      "default": "./dist/esm/client/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "ssr": [
+        "./dist/types/server/ssr/index.d.ts"
+      ],
+      "rsc": [
+        "./dist/types/server/rsc/index.d.ts"
+      ],
+      "client": [
+        "./dist/types/client/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "new": "modern-lib new",
+    "dev": "modern-lib build --watch",
+    "build": "modern-lib build",
+    "test": "jest --passWithNoTests"
+  },
+  "types": "./dist/types/browser.d.ts"
+}