ReactStreamREADME.md15 matches
1React SSR and client-side hydration for Val Town23## Usage45```tsx6/** @jsxImportSource https://esm.sh/react */7import { render, React } from "https://esm.town/v/jxnblk/ReactStream";89function App() {10const [count, setCount] = React.useState(0);11return (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```2627[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)2829To render static HTML without hydration, pass `false` as the second argument.48### robots.txt4950ReactStream has a built-in middleware to handle request to `/robots.txt`5152```tsx53import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";54// ...55export default render(App, import.meta.url, [9293```tsx94/** @jsxImportSource https://esm.sh/react */95import { render } from "https://esm.town/v/jxnblk/ReactStream";9697function App () {99<html>100<head>101<title>ReactStream</title>102</head>103<body>111```112113React 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).115116Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo117
ReactStreammain.tsx16 matches
1/** @jsxImportSource https://esm.sh/react */2import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";3import * as React from "https://esm.sh/react@18.3.1";45export { React };67export type RequestHandler = (request: Request) => Promise<Response>;13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;1415export interface ReactStreamProps {16url: URL;17pathname: string;2324export function render<T>(25/** Root-level React component that renders an entire <html> element26* including the head and body tags.27*/28Component: React.ComponentType<ReactStreamProps>,29/** On Val Town, use `import.meta.url` for client-side hydration */30module: string | false,31/** Optional middleware */32opts: ReactStreamOptions | Middleware[] = [],33) {34const useMiddleware = Array.isArray(opts); // for backwards compat35const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};36const { api, getInitialProps } = options;374243return async function handler(request: Request): Promise<Response> {44const main = reactStream(Component, module);45const middleware: Middleware[] = [46parseURL,71export default render;7273// main react response handler74const reactStream = (75Component: React.ComponentType<ReactStreamProps>,76module: string | false,77): Middleware =>78async function(req: DataRequest, res: Response): Promise<Response> {79const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");8081const stream = await renderToReadableStream(91headers.set("Content-Type", "text/html");9293console.log("react", res.status);94return new Response(stream, {95headers,139};140/** DEPRECATED: Use middleware instead */141export interface ReactStreamOptions {142/** DEPRECATED: Optional text response for robots.txt */143robots?: string;
hungryWhiteLeoponmain.tsx4 matches
4* information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews.5*6* It uses React for the frontend, the Nominatim API for initial coffee shop data,7* and Val Town's SQLite for data persistence.8*/910/** @jsxImportSource https://esm.sh/react */11import React, { useEffect, useState } from "https://esm.sh/react";12import { createRoot } from "https://esm.sh/react-dom/client";1314function App() {
1/**2* This chat application allows users to post messages and view a log of all messages.3* It uses SQLite for persistence and React for the frontend.4* The server handles message posting and retrieval, while the client renders the UI.5*/6/** @jsxImportSource https://esm.sh/react */7import React, { useState, useEffect } from "https://esm.sh/react";8import { createRoot } from "https://esm.sh/react-dom/client";910interface Message {28};2930const handleSubmit = async (e: React.FormEvent) => {31e.preventDefault();32if (!newMessage.trim()) return;
1/**2* This val creates an interactive tech stack wizard that generates a video game-style inventory screen.3* It uses React for the UI, leverages emoji and Unicode symbols for a visually rich experience, and4* incorporates Tailwind CSS for elegant, grayscale styling.5* The wizard allows users to select tools, libraries, and APIs, then displays them in a shareable format.6*/78/** @jsxImportSource https://esm.sh/react */9import React, { useState } from "https://esm.sh/react";10import { createRoot } from "https://esm.sh/react-dom/client";1112// Define tech options with emojis or Unicode symbols as icons13const techOptions = [14{ name: "React", icon: "⚛️" },15{ name: "Vue", icon: "🖖" },16{ name: "Angular", icon: "🅰️" },47{ name: "Swift", icon: "🕊️" },48{ name: "Flutter", icon: "🦋" },49{ name: "React Native", icon: "📱" },50{ name: "Electron", icon: "🔬" },51{ name: "Webpack", icon: "📦" },
techstackinventorymain.tsx5 matches
1/**2* This val creates a tech stack inventory chooser using React and Tailwind CSS for styling.3* It allows users to select technologies for different categories and displays the chosen stack.4*/5/** @jsxImportSource https://esm.sh/react */6import React, { useState } from "https://esm.sh/react";7import { createRoot } from "https://esm.sh/react-dom/client";89const techCategories = {10frontend: ["React", "Vue", "Angular", "Svelte"],11backend: ["Node.js", "Python", "Ruby", "Java"],12database: ["PostgreSQL", "MongoDB", "MySQL", "SQLite"],
5*/67/** @jsxImportSource https://esm.sh/react */8import React, { useEffect, useState } from "https://esm.sh/react";9import { createRoot } from "https://esm.sh/react-dom/client";1011function App() {
1/** @jsxImportSource https://esm.sh/react */2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";3import { html } from "https://esm.town/v/stevekrouse/html";4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";5import { renderToString } from "npm:react-dom/server";67function StatusRow({ rows }) {
shySapphireLeopardmain.tsx4 matches
1/** @jsxImportSource https://esm.sh/react */2import { renderToString } from "npm:react-dom/server";34import React from "https://esm.sh/react";5import { createRoot } from "https://esm.sh/react-dom/client";67function App() {
valleGetValsContextWindowmain.tsx9 matches
41{42type: "http",43prompt: "Generate a val that uses React to render HTML",44code: `/** @jsxImportSource https://esm.sh/react */45import { renderToString } from "npm:react-dom/server";46export const reactExample = (request: Request) =>48new Response(renderToString(<div>Test {1 + 1}</div>), {49headers: {74type: "http",75prompt: null,76code: `/** @jsxImportSource https://esm.sh/preact */77import { render } from "npm:preact-render-to-string";78export const preactExample = (request: Request) =>80new Response(render(<div>Test {1 + 1}</div>), {81headers: {191prompt: "Write a val that renders a website and uses tailwind css",192type: "http",193code: `/** @jsxImportSource https://esm.sh/preact */194import { render } from "npm:preact-render-to-string";195export default async function(req: Request) {
