2 * This request collector val saves information about incoming requests
3 * and displays summary statistics on the home page. It uses SQLite for
4 * persistence and server-side React for rendering the UI. Users can click
5 * on a request ID to view full details of that request.
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React from "https://esm.sh/react";
10import { renderToString } from "https://esm.sh/react-dom/server";
11
12interface RequestData {
1/**
2 * This val creates a Postman-like interface for testing HTTP requests directly in the browser.
3 * It uses React for the UI and the Fetch API to make requests.
4 * The server function serves the HTML and handles the API requests.
5 */
6
7/** @jsxImportSource https://esm.sh/react */
8import React, { useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
10
11function App() {
1/** @jsxImportSource npm:preact */
2import { render } from "npm:preact-render-to-string";
3
4export function it(name, fn) {
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(
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
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) {
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;
1/** @jsxImportSource https://esm.sh/react */
2import { analyticsHandlerWrapper } from "https://esm.town/v/maxm/valTownAnalytics";
3import { Chess, Move, Square } from "npm:chess.js";
4import minify from "npm:css-simple-minifier";
5import { renderToString } from "npm:react-dom/server";
6
7class StaticChess {
1/** @jsxImportSource https://esm.sh/react */
2import hljs from "npm:highlight.js";
3import { renderToString } from "npm:react-dom/server";
4
5// Example code snippet