/** @jsxImportSource https://esm.sh/react */ import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client"; import * as React from "https://esm.sh/react@18.3.1"; export { React }; export type RequestHandler = (request: Request) => Promise; export type DataFetcher = (request: Request) => Promise; // export type DataRequest = Request & { data: T }; export type DataRequest = Request & { data: any }; export type NextCallback = () => Promise; export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise; export interface ReactStreamProps { url: URL; pathname: string; search: string; searchParams: Record; headers: Headers; cookie: string; } export function render( /** Root-level React component that renders an entire element * including the head and body tags. */ Component: React.ComponentType, /** On Val Town, use `import.meta.url` for client-side hydration */ module: string | false, /** Optional middleware */ opts: ReactStreamOptions | Middleware[] = [], ) { const useMiddleware = Array.isArray(opts); // for backwards compat const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {}; const { api, getInitialProps } = options; if (typeof document !== "undefined" && module) { const props = window.__data; hydrateRoot(document, ); } return async function handler(request: Request): Promise { const main = reactStream(Component, module); const middleware: Middleware[] = [ parseURL, parseHeaders, // DEPRECATED (for backwards compat) options.robots && robots(options.robots), options.api && deprecatedCustomAPI(options.api), options.getInitialProps && deprecatedGetInitiaProps(options.getInitialProps), // New custom middleware ...(useMiddleware ? opts.slice() : []), main, ].filter(Boolean); let res: Response = new Response(); const req: DataRequest = Object.assign(request.clone(), { data: {} }); req.data = {}; const next = async (nextRes?: Response): Promise => { const fn = middleware.shift(); if (nextRes) res = nextRes; if (!fn) return main(req, res); return fn(req, res, next); }; return next(); }; } export default render; // main react response handler const reactStream = ( Component: React.ComponentType, module: string | false, ): Middleware => async function(req: DataRequest, res: Response): Promise { const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server"); const stream = await renderToReadableStream( , module ? { bootstrapModules: [module], bootstrapScriptContent: `window.__data=${JSON.stringify(req.data)}`, } : {}, ); const headers = res.headers; headers.set("Content-Type", "text/html"); console.log("react", res.status); return new Response(stream, { headers, status: res.status, statusText: res.statusText, }); }; // default middleware const parseURL: Middleware = async (req, res, next) => { const url = new URL(req.url); const { pathname, search } = url; req.data.url = url; req.data.pathname = pathname; req.data.search = search; req.data.searchParams = Object.fromEntries(req.data.url.searchParams); return next(); }; const parseHeaders: Middleware = async (req, res, next) => { req.data.headers = req.headers; req.data.cookie = req.headers.get("cookie"); return next(); }; /** respond to /robots.txt with a custom string */ export const robots = (txt: string): Middleware => async (req, res, next) => { const url = new URL(req.url); if (txt && url.pathname === "/robots.txt") { return new Response(txt, { headers: { "Content-Type": "text/plain" } }); } return next(); }; // DEPRECATED // DEPRECATE (for backwards compat) const deprecatedCustomAPI = (api?: RequestHandler): Middleware => async (req, res, next) => { if (!api) return next(); if (req.method === "GET") return next(); return api(req); }; const deprecatedGetInitiaProps = (getProps: DataFetcher): Middleware => async (req, res, next) => { if (!getProps) return next(); const data = await getProps(req); req.data = data; return next(); }; /** DEPRECATED: Use middleware instead */ export interface ReactStreamOptions { /** DEPRECATED: Optional text response for robots.txt */ robots?: string; /** DEPRECATED: Optional API request handler for all non-GET methods */ api?: RequestHandler; /** DEPRECATED: data fetcher to set initial props based on request */ getInitialProps?: DataFetcher; }

ReactStreamDemo