@modern-js/render 0.0.0-next-20250108080920

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 "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,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, use, useState } from "react";
+import { createFromReadableStream, createServerReference } from "react-server-dom-webpack/client.browser";
+import { rscStream } from "rsc-html-stream/client";
+import { callServer } from "./callServer";
+import { createFromFetch } from "react-server-dom-webpack/client.browser";
+function RscClientRoot({ data }) {
+  const elements = use(data);
+  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 = use(ElementsContext);
+  return elements;
+};
+export {
+  RSCServerSlot,
+  RscClientRoot,
+  ServerElementsProvider,
+  callServer,
+  createFromFetch,
+  createFromReadableStream,
+  createServerReference,
+  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,53 @@
+import { renderToReadableStream } from "react-server-dom-webpack/server.edge";
+import { renderToReadableStream as renderToReadableStream2 } from "react-server-dom-webpack/server.edge";
+import { decodeReply } from "react-server-dom-webpack/server.edge";
+import { createFromReadableStream } from "react-server-dom-webpack/client.edge";
+import { registerClientReference, registerServerReference } from "react-server-dom-webpack/server";
+const renderRsc = (options) => {
+  const payload = options.returnValue ? {
+    returnValue: options.returnValue,
+    root: options.element
+  } : options.element;
+  const readable = renderToReadableStream2(payload, 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 = renderToReadableStream2(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 (element, options) => {
+  const { clientManifest, ssrManifest, rscRoot } = options;
+  if (!clientManifest || !ssrManifest) {
+    return renderToReadableStream(element, options);
+  }
+  try {
+    const [{ renderRsc }, { createFromReadableStream }, { injectRSCPayload }] = await Promise.all([
+      import("../rsc"),
+      import("react-server-dom-webpack/client.edge"),
+      import("../../rsc-html-stream/server")
+    ]);
+    const rscStream = await renderRsc({
+      element: rscRoot || element,
+      clientManifest
+    });
+    const [rscElementStream, rscPayloadStream] = rscStream.tee();
+    const elements = createFromReadableStream(rscElementStream, {
+      serverConsumerManifest: ssrManifest
+    });
+    const htmlStream = await renderToReadableStream(/* @__PURE__ */ _jsx(ServerElementsProvider, {
+      elements,
+      children: element
+    }), 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 '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,21 @@
+import { type ReactNode } from 'react';
+import { createFromReadableStream, createServerReference } from 'react-server-dom-webpack/client.browser';
+export { rscStream } from 'rsc-html-stream/client';
+export { createFromReadableStream, createServerReference };
+export { callServer } from './callServer';
+export { createFromFetch } from 'react-server-dom-webpack/client.browser';
+declare global {
+    interface Window {
+        __MODERN_JS_ENTRY_NAME?: string;
+    }
+}
+interface RootProps {
+    data: Promise<React.ReactNode>;
+}
+export declare function RscClientRoot({ data }: RootProps): import("react").JSX.Element;
+type Elements = Promise<ReactNode[]>;
+export declare const ServerElementsProvider: ({ elements, children, }: {
+    elements: Elements;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const RSCServerSlot: () => Elements | null;

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,14 @@
+export { renderToReadableStream } from 'react-server-dom-webpack/server.edge';
+import type { ClientManifest } from '@modern-js/types/server';
+export { createFromReadableStream } from 'react-server-dom-webpack/client.edge';
+export { registerClientReference, registerServerReference, } from 'react-server-dom-webpack/server';
+type RenderRscOptions = {
+    element: React.ReactElement;
+    clientManifest: ClientManifest;
+    returnValue?: unknown;
+};
+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: (element: React.ReactElement, options: Options & {
+    rscRoot: React.ReactElement;
+}) => Promise<ReturnType<typeof renderToReadableStream>>;
+export {};

package/package.json

@@ -0,0 +1,86 @@
+{
+  "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-next-20250108080920",
+  "files": [
+    "dist",
+    "hook.d.ts"
+  ],
+  "dependencies": {
+    "@swc/helpers": "0.5.13",
+    "react-server-dom-webpack": "19.0.0",
+    "rsc-html-stream": "0.0.3",
+    "@modern-js/types": "0.0.0-next-20250108080920"
+  },
+  "devDependencies": {
+    "@types/jest": "^29",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "jest": "^29",
+    "react": "19.0.0 ",
+    "react-dom": "19.0.0 ",
+    "typescript": "^5",
+    "@modern-js/server-core": "0.0.0-next-20250108080920"
+  },
+  "peerDependencies": {
+    "react": "19.0.0 ",
+    "react-dom": "19.0.0 "
+  },
+  "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",
+    "provenance": true
+  },
+  "scripts": {
+    "new": "modern-lib new",
+    "dev": "modern-lib build --watch",
+    "build": "modern-lib build",
+    "test": "jest --passWithNoTests"
+  },
+  "types": "./dist/types/browser.d.ts"
+}