Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@latest */
2import { Hono } from "npm:hono";
3import { createElement } from "npm:react";
4import { renderToReadableStream } from "npm:react-dom/server";
5import Demo from "./demo.tsx";
6

1/** @jsxImportSource https://esm.sh/react@latest */
2import { Slot } from "npm:@radix-ui/react-slot";
3import { cva, type VariantProps } from "npm:class-variance-authority";
4import * as React from "npm:react";
5
6import { cn } from "../lib/utils.ts";
33
34export interface ButtonProps
35  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
36  asChild?: boolean;
37}
38
39const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
40  ({ className, variant, size, asChild = false, ...props }, ref) => {
41    const Comp = asChild ? Slot : "button";

1/** @jsxImportSource https://esm.sh/react@latest */
2import * as React from "npm:react";
3
4import { cn } from "../lib/utils.ts";
5
6const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
7  ({ className, type, ...props }, ref) => {
8    return (

1/** @jsxImportSource https://esm.sh/react@latest */
2"use client";
3
4import { useEffect, useState } from "npm:react";
5
6interface ClaudeCodeLoaderProps {

1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2
3import { useAuth } from "../hooks/useAuth.ts";
4import { Link } from "https://esm.sh/react-router-dom@7.4.1?deps=react@19.0.0,react-dom@19.0.0";
5import { Wand } from "../components/Wands/Wand.tsx";
6import { GenerateWorkorderForm } from "../components/WorkOrders/GenerateWorkOrderForm/GenerateWorkOrderForm.tsx";
7import { WorkOrdersList } from "../components/WorkOrders/WorkOrderList.tsx";
8import { client } from "../hono.ts";
9import { useEffect, useState } from "https://esm.sh/react@19.0.0";
10import { WorkOrder } from "../types.ts";
11

1/** @jsxImportSource https://esm.sh/react@19 */
2import { ArrowLeft, Share } from "https://esm.sh/lucide-react";
3import { useEffect, useState } from "https://esm.sh/react@19";
4
5export function Section({ children, ...props }: any) {

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/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.

1/** @jsxImportSource https://esm.sh/react@19 */
2import { QueryClient, QueryClientProvider } from "https://esm.sh/@tanstack/react-query@5";
3import { createRoot } from "https://esm.sh/react-dom@19/client";
4import { BrowserRouter } from "https://esm.sh/react-router@7";
5
6import { App } from "./App.tsx";

1/** @jsxImportSource https://esm.sh/react */
2import { render } from "https://deno.land/x/resvg_wasm/mod.ts";
3import { Hono } from "npm:hono";
25        <div tw="h-[270px]"></div>
26        <div tw="flex text-[100px] tracking-[-5px]">Mini App Starter</div>
27        <div tw="flex text-[30px] opacity-50 tracking-[-1px]">Hono + React + Tailwind Starter Project on Val Town</div>
28      </div>
29    </div>,

1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useQuery } from "https://esm.sh/@tanstack/react-query@5";
4import { LoaderCircle, Mic, MicOff } from "https://esm.sh/lucide-react";
5import { NavLink, Route, Routes, useNavigate, useParams } from "https://esm.sh/react-router@7";
6import { useEffect, useRef, useState } from "https://esm.sh/react@19";
7
8import { Button, Input, Section } from "../components/ui.tsx";