1/** @jsxImportSource https://esm.sh/react */
2import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";
3import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";
14import { Hono } from "npm:hono@3";
15import _ from "npm:lodash@4";
16import { renderToString } from "npm:react-dom/server";
17
18export default function(
1/** @jsxImportSource npm:react **/
2import { renderToString } from "npm:react-dom@18/server";
3
4export default (req: Request) => {
1/**
2 * @title React CSR Client in Val Town
3 * @description Client-side React application for a personal portfolio website.
4 */
5/** @jsxImportSource https://esm.sh/react */
6import React, { useState, useEffect } from "https://esm.sh/react";
7import ReactDOM from "https://esm.sh/react-dom";
8import { BrowserRouter, Route, NavLink, Routes } from "https://esm.sh/react-router-dom";
9import { personalData } from "https://esm.town/v/iamseeley/personalData";
10
32 <h2>Welcome to My Portfolio</h2>
33 <p>{personalData.summary}</p>
34 <p><strong>This website is rendered client-side with React.</strong></p>
35 <p>Check out the <a target='_blank' href='https://www.val.town/v/iamseeley/reactClient'>client</a> and <a target='_blank' href='https://www.val.town/v/iamseeley/reactServer'>server</a> code and start building your own site!</p>
36 <p>You've been on this page for {count} seconds.</p>
37 </div>
88);
89
90const root = ReactDOM.createRoot(document.getElementById("root"));
91root.render(<App />);
1React SSR and client-side hydration for Val Town
2
3## Usage
4
5```tsx
6/** @jsxImportSource https://esm.sh/react */
7import { render, React } from "https://esm.town/v/jxnblk/ReactStream";
8
9function App() {
10 const [count, setCount] = React.useState(0);
11 return (
12 <html>
13 <body>
14 <h1>ReactStream</h1>
15 <p>React SSR with client-side hydration in Val Town</p>
16 <pre>{count}</pre>
17 <button onClick={() => setCount(count - 1)}>-</button>
25```
26
27[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)
28
29To render static HTML without hydration, pass `false` as the second argument.
48### robots.txt
49
50ReactStream has a built-in middleware to handle request to `/robots.txt`
51
52```tsx
53import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";
54// ...
55export default render(App, import.meta.url, [
92
93```tsx
94/** @jsxImportSource https://esm.sh/react */
95import { render } from "https://esm.town/v/jxnblk/ReactStream";
96
97function App () {
99 <html>
100 <head>
101 <title>ReactStream</title>
102 </head>
103 <body>
111```
112
113React requires matching versions for SSR and hydration.
114Import `React` from `https://esm.town/v/jxnblk/ReactStream` to ensure your component uses the same version as this library (currently react@18.3.1).
115
116Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo
117
118
119Migrated from folder: _LEAVE_AS_IS/ReactStream
1/** @jsxImportSource https://esm.sh/react@18.3.1 **/
2
3// import build from "https://esm.sh/build";
4// const ret = await build({
5// dependencies: {
6// "react-dom": "18.3.1",
7// "react": "18.3.1",
8// "tldraw": "2.3.0",
9// "@reecelucas/react-use-hotkeys": "2.0.0",
10// },
11// source: `
12// export * as ReactDOM from "react-dom";
13// export * as React from "react";
14// export * as tldraw from "tldraw";
15// import useHotkeys from "@reecelucas/react-use-hotkeys";
16// export { useHotkeys };
17// `,
56
57 const {
58 ReactDOM,
59 React,
60 tldraw,
61 useHotkeys,
62 } = await import(ret.url + "?bundle-deps");
63 const { useCallback, useRef, useEffect } = React;
64 const {
65 Tldraw,
159 <div style={{ position: "absolute", inset: 0 }}>
160 <Tldraw
161 persistenceKey="valtown_reacttldrawclient"
162 cameraOptions={{ wheelBehavior: "zoom" }}
163 shapeUtils={[PreviewShapeUtil]}
169 }
170
171 const root = ReactDOM.createRoot(document.getElementById("root"));
172 root.render(<App />);
173
30 {
31 type: "http",
32 prompt: "Generate a val that uses React to render HTML",
33 code: `/** @jsxImportSource https://esm.sh/react */
34 import { renderToString } from "npm:react-dom/server";
35
36 export const reactExample = (request: Request) =>
37 new Response(renderToString(<div>Test {1 + 1}</div>), {
38 headers: {
63 type: "http",
64 prompt: null,
65 code: `/** @jsxImportSource https://esm.sh/preact */
66 import { render } from "npm:preact-render-to-string";
67
68 export const preactExample = (request: Request) =>
69 new Response(render(<div>Test {1 + 1}</div>), {
70 headers: {
180 prompt: "Write a val that renders a website and uses tailwind css",
181 type: "http",
182 code: `/** @jsxImportSource https://esm.sh/preact */
183 import { render } from "npm:preact-render-to-string";
184
185 export default async function(req: Request) {
5// DO NOT EDIT THE BELOW
6
7/** @jsxImportSource https://esm.sh/react */
8import { useEffect, useState } from "https://esm.sh/react";
9import { renderToString } from "npm:react-dom/server";
10
11// BELOW ARE THE HOURLY RATES FOR AN ON CALL SHIFT, AND A REGULAR SHIFT. THE DEFAULT IS £24 AND £12.
182
183// if (typeof document !== "undefined") {
184// const { hydrateRoot } = await import("https://esm.sh/react-dom/client");
185// const scheduleData = await getSchedule();
186// hydrateRoot(document, <App data={scheduleData} />);
189export default async function(req: Request): Promise<Response> {
190 const scheduleData = await getSchedule();
191 const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");
192 const stream = await renderToReadableStream(<App data={scheduleData} />, { bootstrapModules: [import.meta.url] });
193 return new Response(stream, { headers: { "content-type": "text/html" } });
1/** @jsxImportSource https://esm.sh/react */
2import { Hono } from "https://esm.sh/hono";
3import React, { useEffect, useState } from "https://esm.sh/react";
4import { hydrateRoot } from "https://esm.sh/react-dom/client";
5import { renderToReadableStream } from "https://esm.sh/react-dom/server";
6import { blob } from "https://esm.town/v/std/blob?v=10";
7
1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3
4const Counter = () => {
5 const [count, setCount] = React.useState(0);
6 return (
7 <button onClick={() => setCount(count + 1)}>
15 <head />
16 <body>
17 <h1>Val Town React Client Demo</h1>
18 <Counter />
19 </body>
22
23// if (typeof document !== "undefined") {
24// const { hydrateRoot } = await import("https://esm.sh/react-dom/client");
25// hydrateRoot(document, <App />);
26// }
27
28export default async function(req: Request): Promise<Response> {
29 const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");
30 const stream = await renderToReadableStream(<App />, { bootstrapModules: [import.meta.url] });
31 return new Response(stream, { headers: { "content-type": "text/html" } });
1Idiomatic SSR and hydration of a React app
