Val Town Code SearchReturn to Val Town

1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5- **Remix** this starter template on the top right to get started.
7- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
8
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.

4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/public/style.css">
8    <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
6  return (
7    <div>
8      <h1>Val Town React + Hono Starter</h1>
9      I've been clicked <button onClick={() => setClicked((c) => c + 1)}>{clicked}</button> times
10    </div>

1/** @jsxImportSource https://esm.sh/react@18.2.0  */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31  prompt: string;
32  setPrompt: React.Dispatch<React.SetStateAction<string>>;
33  handleSubmit: (e: React.FormEvent) => void;
34  handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118  const previewRef = React.useRef<HTMLDivElement>(null);
119  const [prompt, setPrompt] = useState("");
120  const [projectId, setProjectId] = useState<number | null>(null);
174  }
175
176  async function handleSubmit(e: React.FormEvent | string) {
177    if (typeof e !== "string") {
178      e.preventDefault();
673                </div>
674                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675                  <React.Fragment key={iframeKey}>
676                    <iframe
677                      srcDoc={code}
679                      className="w-full grow"
680                    />
681                  </React.Fragment>
682                </div>
683              </div>

1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1";
5import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter@15.5.0";
6import { oneDark } from "https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/styles/prism";
7import remarkGfm from "https://esm.sh/remark-gfm@4.0.0";
8
27  return (
28    <div style={role === "user" ? styles.userMessage : styles.assistantMessage}>
29      <ReactMarkdown
30        remarkPlugins={[remarkGfm]}
31        components={{
67      >
68        {content}
69      </ReactMarkdown>
70    </div>
71  );

1/** @jsxImportSource https://esm.sh/preact@10.19.6 */
2import { type ClassValue, clsx } from "https://esm.sh/clsx@2.1.0";
3import { Copy, QrCode, Send, Shield, Users } from "https://esm.sh/lucide-preact@0.358.0";
4import { Peer } from "https://esm.sh/peerjs@1.5.4?bundle-deps";
5import { render } from "https://esm.sh/preact@10.19.6";
6import { useEffect, useRef, useState } from "https://esm.sh/preact@10.19.6/hooks";
7
8interface NDEFRecord {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React from "https://esm.sh/react@18.2.0";
4
5function LinkInBio() {

1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
3import * as React from "https://esm.sh/react@18.3.1";
4
5export { React };
6
7export type RequestHandler = (request: Request) => Promise<Response>;
13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;
14
15export interface ReactStreamProps {
16  url: URL;
17  pathname: string;
23
24export function render<T>(
25  /** Root-level React component that renders an entire <html> element
26   * including the head and body tags.
27   */
28  Component: React.ComponentType<ReactStreamProps>,
29  /** On Val Town, use `import.meta.url` for client-side hydration */
30  module: string | false,
31  /** Optional middleware */
32  opts: ReactStreamOptions | Middleware[] = [],
33) {
34  const useMiddleware = Array.isArray(opts); // for backwards compat
35  const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};
36  const { api, getInitialProps } = options;
37
42
43  return async function handler(request: Request): Promise<Response> {
44    const main = reactStream(Component, module);
45    const middleware: Middleware[] = [
46      parseURL,
71export default render;
72
73// main react response handler
74const reactStream = (
75  Component: React.ComponentType<ReactStreamProps>,
76  module: string | false,
77): Middleware =>
78  async function(req: DataRequest, res: Response): Promise<Response> {
79    const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");
80
81    const stream = await renderToReadableStream(
91    headers.set("Content-Type", "text/html");
92
93    console.log("react", res.status);
94    return new Response(stream, {
95      headers,
139};
140/** DEPRECATED: Use middleware instead */
141export interface ReactStreamOptions {
142  /** DEPRECATED: Optional text response for robots.txt */
143  robots?: string;

1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
3import * as React from "https://esm.sh/react@18.3.1";
4
5export { React };
6
7export type RequestHandler = (request: Request) => Promise<Response>;
13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;
14
15export interface ReactStreamProps {
16  url: URL;
17  pathname: string;
23
24export function render<T>(
25  /** Root-level React component that renders an entire <html> element
26   * including the head and body tags.
27   */
28  Component: React.ComponentType<ReactStreamProps>,
29  /** On Val Town, use `import.meta.url` for client-side hydration */
30  module: string | false,
31  /** Optional middleware */
32  opts: ReactStreamOptions | Middleware[] = [],
33) {
34  const useMiddleware = Array.isArray(opts); // for backwards compat
35  const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};
36  const { api, getInitialProps } = options;
37
42
43  return async function handler(request: Request): Promise<Response> {
44    const main = reactStream(Component, module);
45    const middleware: Middleware[] = [
46      parseURL,
71export default render;
72
73// main react response handler
74const reactStream = (
75  Component: React.ComponentType<ReactStreamProps>,
76  module: string | false,
77): Middleware =>
78  async function(req: DataRequest, res: Response): Promise<Response> {
79    const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");
80
81    const stream = await renderToReadableStream(
91    headers.set("Content-Type", "text/html");
92
93    console.log("react", res.status);
94    return new Response(stream, {
95      headers,
139};
140/** DEPRECATED: Use middleware instead */
141export interface ReactStreamOptions {
142  /** DEPRECATED: Optional text response for robots.txt */
143  robots?: string;

1import { match, parse, pathToRegexp } from "https://esm.sh/path-to-regexp@7.2.0";
2import { DataRequest } from "./ReactStream";
3
4const redirects = new Map();
5redirects.set("/hello-color", "https://jxnblk.io/hello-color");
6redirects.set("/react-icons", "https://jxnblk.io/react-icons/");
7
8redirects.set("/colorable", "https://colorable.jxnblk.com");