62 target: ts.ScriptTarget.ESNext,
63 module: ts.ModuleKind.ESNext,
64 jsx: ts.JsxEmit.React,
65 lib: ["esnext", "dom"],
66 moduleDetection: ModuleDetectionKind.Force,
1/** @jsxImportSource npm:react **/
2/** kortina
3import process from "node:process";
4import { renderToString } from "npm:react-dom@18/server";
5import { QueryVectorStore, sb, Substrate } from "npm:substrate";
6
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";
13import { Hono } from "npm:hono@3";
14import _ from "npm:lodash@4";
15import { renderToString } from "npm:react-dom/server";
16
17export default function(
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 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) {
