Log inSign up
jxnblk avatar
Forked from jxnblk/resrv
Unlisted
Script
Fork
0 Likes
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Readme

React SSR and client-side hydration for Val Town

Usage

Create val
/** @jsxImportSource https://esm.sh/react */
import { render, React } from "https://esm.town/v/jxnblk/resrvStreaming";

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <html>
      <body>
        <h1>Resrv</h1>
        <p>React SSR with client-side hydration in Val Town</p>
        <pre>{count}</pre>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(count + 1)}>+</button>
      </body>
    </html>
  );
}

export default render(App, import.meta.url);

Live example

Starter template

Create val
/** @jsxImportSource https://esm.sh/react */
import { render } from "https://esm.town/v/jxnblk/resrvStreaming";

function App () {
  return (
    <html>
      <head>
        <title>resrv</title>
      </head>
      <body>
        hello
      </body>
    </html>
  );
}

export default render(App, import.meta.url);

React requires matching versions for SSR and hydration. Import React from https://esm.town/v/jxnblk/resrv to ensure your component uses the same version as this library (currently react@18.3.1).

Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/** @jsxImportSource https://esm.sh/react */
import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
import { renderToReadableStream } from "https://esm.sh/react-dom@18.3.1/server";
import * as React from "https://esm.sh/react@18.3.1";
// API:
// import resrv, { React } from "https://esm.town/v/jxnblk/resrv";
// export default resrv(Component, import.meta.url);
type RequestHandler = (request: Request) => Promise<Response>;
type DataFetcher = (request: Request) => Promise<any>;
/**
* Next API
* export default render({
* Component,
* module,
* requestHandler,
* fetchData,
* })
*
* _OR_
* export default render(App, import.meta.url, { api, fetchData });
*
*/
export function render(Component: React.ComponentType<any>, module: string, requestHandler?: RequestHandler, dataFetcher?: DataFetcher) {
console.log("resrv.render");
if (typeof document !== "undefined") {
console.log("resrv.hydrateRoot");
const props = window.__data;
hydrateRoot(document, <Component {...props} />);
}
// val.town http handler
return async function(req: Request): Promise<Response> {
if (requestHandler && req.method !== "GET") {
return await requestHandler(req);
}
const url = new URL(req.url);
const { pathname, search } = url;
const searchParams = paramsToObject(new URLSearchParams(url.search));
const cookie = req.headers.get("cookie");
// console.log({ cookie });
let data = {};
if (dataFetcher) {
data = await dataFetcher(req);
}
const props = {
url,
pathname,
search,
searchParams,
headers: req.headers,
cookie, // : req.headers.get("Cookie"),
data,
};
const stream = await renderToReadableStream(<Component {...props} />, {
bootstrapModules: [
module,
],
bootstrapScriptContent: `window.__data=${JSON.stringify(props)}`,
});
return new Response(stream, { headers: { "Content-Type": "text/html" } });
};
}
export default render;
function paramsToObject(entries) {
const result = {};
for (const [key, value] of entries) {
result[key] = value;
}
return result;
}
export { React };
export {
// commonly used exports (not exhaustive)
useCallback,
useContext,
useEffect,
useMemo,
useReducer,
useRef,
useState,
} from "https://esm.sh/react@18.3.1";
July 20, 2024