\n \n {count}\n \n

\n )\n}\n\nfunction Cats () {\n const [cats, setCats] = useState([]);\n\n const fetch = () => {\n client.api.cats.$get()\n .then(res => res.json())\n .then(data => {\n console.log(data);\n setCats(data);\n });\n }\n \n useEffect(() => {\n fetch();\n }, []);\n\n return (\n

Cats

\n {cat.name} ({cat.coat} {cat.breed})\n

\n \n

\n )\n}\n\nfunction CatForm ({ refetch }: { refetch: () => void }) {\n const [name, setName] = useState(\"\");\n const [breed, setBreed] = useState(\"\");\n const [coat, setCoat] = useState(\"\");\n const [loading, setLoading] = useState(false);\n \n const onSubmit = (e) => {\n e.preventDefault();\n setLoading(true);\n const cat = { name, breed, coat };\n console.log(cat);\n client.api.cats.$post({ json: cat })\n .then(res => res.json())\n .then(data => {\n setLoading(false);\n refetch();\n });\n }\n \n return (\n

\n Add new cat\n

\n Name\n setName(e.target.value)}\n />\n

\n Breed\n setBreed(e.target.value)}\n />\n

\n Coat\n setCoat(e.target.value)}\n />\n

\n \n {loading ? \"Adding new cat...\" : \"Add Cat\"}\n \n \n )\n}\n\nexport default function App () {\n return (\n <>\n

Hello Hono

\n \n \n \n )\n}","deleted","label","children",[],[151],{"_102":171,"_95":172,"_152":173,"_154":-5,"_155":137,"_156":174,"_157":158,"_104":175,"_99":176,"_161":162,"_163":177,"_165":22,"_166":-5,"_167":178,"_98":179},"7bee7bb6-42fc-11f0-b707-76b3cceeab13","client.tsx","d7ec7bc2-42eb-11f0-8d83-76b3cceeab13",63,["D",1749231262681],9,"/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { render } from \"https://esm.sh/hono/jsx/dom\";\nimport App from \"./App.tsx\";\n\nrender(, document.body);",[],[172],{"_102":181,"_95":182,"_152":183,"_154":-5,"_155":137,"_156":184,"_157":158,"_104":185,"_99":186,"_161":187,"_163":188,"_165":22,"_166":-5,"_167":189,"_98":190},"ae79715e-4300-11f0-a48e-76b3cceeab13","main.tsx","02b0352a-42eb-11f0-beb8-76b3cceeab13",100,["D",1749233065464],40,"http","/** @jsxImportSource npm:hono/jsx */\nimport { Hono } from \"npm:hono\";\nimport { csrf } from \"npm:hono/csrf\";\nimport { z } from \"npm:zod\";\nimport { zValidator } from \"npm:@hono/zod-validator\";\nimport { Style, css } from \"npm:hono/css\";\nimport App from \"./App.tsx\";\n\nconst MODULE_URL = import.meta.resolve(\"./client.tsx\");\n\nconst app = new Hono();\n\napp.use(\"*\", csrf());\n\ntype Cat = {\n name: string;\n breed: string;\n coat: string;\n}\n\n// FOR DEMO ONLY: use persistent storage in a real app\nconst cats : Cat[] = [\n { name: \"Leia\", breed: \"DSH\", coat: \"Calico\" },\n { name: \"Chewie\", breed: \"DSH\", coat: \"Tuxedo\" },\n];\n\nconst createCatSchema = z.object({\n name: z.string().min(1, \"Name is required\").max(128, \"Name is too long\"),\n breed: z.string().optional(),\n coat: z.string(),\n})\n\nconst api = app\n .basePath(\"/api\")\n .get(\"/cats\", async (c) => {\n return c.json(cats);\n })\n .post(\"/cats\",\n zValidator(\"json\", createCatSchema),\n async (c) => {\n const { name, breed, coat } = await c.req.json();\n const cat = { name, breed, coat };\n cats.push(cat);\n return c.json(cat);\n });\n\napp.get(\"/\", async (c) => {\n return c.html(\n \n \n Hello Hono\n

jxnblk

hono-client-rpc-starter