1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import type { CreateOrderRequest, ApiResponse, Order, Product } from '../../shared/types.ts';
4
80 };
81
82 const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
83 const { name, value } = e.target;
84 setFormData(prev => ({
90 };
91
92 const handleSubmit = async (e: React.FormEvent) => {
93 e.preventDefault();
94 setIsSubmitting(true);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';
3import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0';
4import App from './components/App.tsx';
5
1/** @jsxImportSource npm:react@18.2.0 */
2import type { ReactNode } from "npm:react@18.2.0";
3
4export function Layout({ children }: { children: ReactNode }) {
5 return (
6 <html lang="en">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Markdown from "https://esm.sh/react-markdown@9?deps=react@18.2.0";
3import { listFiles, readFile } from "https://esm.town/v/std/utils@85-main/index.ts";
4import { renderToString } from "npm:react-dom@18.2.0/server";
5import { Layout } from "./Layout.tsx";
6
44}
45
46function html(children: React.ReactNode) {
47 return new Response(
48 renderToString(
7```ts
8import createFileTree from "https://esm.town/v/nbbaier/createFileTree/main.ts";
9const treeOutput = await createFileTree("std", "reactHonoStarter");
10console.log(treeOutput);
11```
12
13## Example Output
14The following is the output for [reactHonoStarter](https://www.val.town/x/std/reactHonoStarter) project
15```
16std/reactHonoStarter
17โโโ backend
18โ โโโ index.ts
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Anthropic, { MessageStreamEvent } from "https://esm.sh/@anthropic-ai/sdk";
3import React from "https://esm.sh/react@18.2.0";
4
5// External shared types
80
81export default function useAnthropicStream(config: AppConfig) {
82 const [status, setStatus] = React.useState<Status>("idle");
83 const [liveBlocks, setLiveBlocks] = React.useState<any[] | null>(null);
84 const abortRef = React.useRef<AbortController | null>(null);
85
86 /* Anthropic SDK instance โ memoised so we don't recreate each render */
87 const anthropic = React.useMemo(() => {
88 if (!config.anthropicApiKey) return null;
89 return new Anthropic({
100
101 /* Abort helper */
102 const abort = React.useCallback(() => {
103 abortRef.current?.abort();
104 abortRef.current = null;
108
109 /* Main send/stream function โ identical public contract */
110 const send = React.useCallback(
111 async (history: Message[], userText: string): Promise<AssistantMsg> => {
112 if (!anthropic) throw new Error("API key missing");
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createParser, type ParsedEvent, type ReconnectInterval } from "https://esm.sh/eventsource-parser@2";
3import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5import { AnthropicStreamEvent, MCPPrompt } from "../../shared/types.ts";
247 };
248
249 const handleKeyDown = (e: React.KeyboardEvent) => {
250 if (showCommandPalette) {
251 const filteredPrompts = getFilteredPrompts();
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { AppConfig, MCPServer } from "./App.tsx";
4import { testMCPServer } from "../utils/mcpTesting.ts";
43โโโ frontend/
44โ โโโ index.html # Main HTML template
45โ โโโ index.tsx # React app entry point
46โ โโโ components/
47โ โ โโโ App.tsx # Main app component
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4import { Message } from "./App.tsx";
5
8}
9
10const ShadowDomWrapper: React.FC<ShadowDomWrapperProps> = ({ html }) => {
11 const containerRef = useRef<HTMLDivElement>(null);
12 const shadowRef = useRef<ShadowRoot | null>(null);
