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
1/** @jsxImportSource https://esm.sh/react */
2import { useEffect, useState } from "https://esm.sh/react";
3import { renderToString } from "npm:react-dom/server";
4
5async function getSchedule() {
63 <head />
64 <body>
65 <h1>Val Town React Client Demo</h1>
66 <Schedule data={data} />
67 </body>
71export default async function(req: Request): Promise<Response> {
72 const scheduleData = await getSchedule();
73 const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");
74 const stream = await renderToReadableStream(<App data={scheduleData} />, { bootstrapModules: [import.meta.url] });
75 return new Response(stream, { headers: { "content-type": "text/html" } });
1tldraw example with builder, for consistent React versions.
1/** @jsxImportSource https://esm.sh/react@18.3.1 **/
2import build from "https://esm.sh/build";
3
4const 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 `,
18});
19const {
20 ReactDOM,
21 React,
22 tldraw,
23 useHotkeys,
24} = await import(ret.url + "?bundle-deps");
25const { useCallback, useRef, useEffect } = React;
26const {
27 Tldraw,
121 <div style={{ position: "absolute", inset: 0 }}>
122 <Tldraw
123 persistenceKey="valtown_reacttldrawclient"
124 cameraOptions={{ wheelBehavior: "zoom" }}
125 shapeUtils={[PreviewShapeUtil]}
132
133// The app will be rendered inside the root div
134const root = ReactDOM.createRoot(document.getElementById("root"));
135root.render(<App />);
136
1/** @jsxImportSource npm:react */
2import CodeIcon from "https://esm.town/v/jxnblk/codeIconReact";
3import Logo from "https://esm.town/v/jxnblk/valTownLogotypeReact";
4import { renderToStaticMarkup } from "npm:react-dom/server";
5
6const width = 160;
