Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[156,76,68],"pulls","branches","forks","envVars",{"_169":26,"_171":26},"connections",{"_169":26,"_170":26},"count","unfilledCount","emptyCount",{"_33":239,"_13":156,"_66":149,"_43":-5,"_35":36,"_150":40,"_151":24,"_37":240,"_39":26,"_69":77,"_153":-5,"_71":30,"_154":-5,"_189":241,"_17":242},{"_33":148,"_13":76,"_66":75,"_43":149,"_35":36,"_150":40,"_151":24,"_37":236,"_39":26,"_69":77,"_153":-5,"_71":30,"_154":-5,"_189":237,"_17":238},{"_33":158,"_13":68,"_66":67,"_43":75,"_35":36,"_150":40,"_151":24,"_37":233,"_39":26,"_69":70,"_153":160,"_71":30,"_154":-5,"_189":234,"_17":235},{"_33":226,"_13":227,"_66":228,"_43":149,"_35":36,"_150":40,"_151":24,"_37":229,"_39":26,"_69":21,"_153":230,"_71":30,"_154":-5,"_189":231,"_17":232},{"_33":219,"_13":220,"_66":221,"_43":149,"_35":36,"_150":40,"_151":24,"_37":222,"_39":26,"_69":21,"_153":223,"_71":30,"_154":-5,"_189":224,"_17":225},{"_33":212,"_13":213,"_66":214,"_43":149,"_35":36,"_150":40,"_151":24,"_37":215,"_39":26,"_69":70,"_153":216,"_71":30,"_154":-5,"_189":217,"_17":218},{"_33":205,"_13":206,"_66":207,"_43":149,"_35":36,"_150":40,"_151":24,"_37":208,"_39":26,"_69":21,"_153":209,"_71":30,"_154":-5,"_189":210,"_17":211},{"_33":198,"_13":199,"_66":200,"_43":-5,"_35":36,"_150":40,"_151":24,"_37":201,"_39":26,"_69":21,"_153":202,"_71":30,"_154":-5,"_189":203,"_17":204},{"_33":192,"_13":193,"_66":89,"_43":-5,"_35":36,"_150":40,"_151":24,"_37":194,"_39":26,"_69":187,"_153":195,"_71":30,"_154":-5,"_189":196,"_17":197},{"_33":182,"_13":183,"_66":184,"_43":-5,"_35":36,"_150":113,"_151":24,"_37":185,"_39":186,"_69":187,"_153":188,"_71":30,"_154":-5,"_189":190,"_17":191},"040e220e-06ba-11f1-a816-42dde27851f2","new-file-69.ts","26217acc-06b9-11f1-9da0-42dde27851f2",["D",1770753142675],3,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Pretty please? 🥺\",\n \"But we'd be so cute together! 💕\",\n \"One more chance, pookie?\",\n \"Don't break my heart :(\",\n \"What about a maybe?\",\n \"Please don't do this to me, I'm fragile\",\n \"Im done being nice now\",\n \"Say yes or ill beat you ala\",\n \"chimutu\",\n \"HAHA you cant say no NITA\",\n \"Say yes now fast fast\",\n];\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg =\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n };\n\n const handleYes = () => {\n setIsValentine(true);\n };\n\n return (\n \n {!isValentine\n ? (\n <>\n

Will you be my Valentine? 💘

\n \n Yes\n \n \n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n

\n \n )\n : (\n <>\n

\n \n I LOVE YOU NITAAA!!! 💖\n \n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Valentine's Day Invitation\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","children",[],[183],"3639c194-06af-11f1-93a9-42dde27851f2","index.ts",["D",1770748502305],"import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[193],"3639b438-06af-11f1-93a9-42dde27851f2","README.md","019c48d5-e172-777f-a26a-3c2d723991aa",["D",1770748502305],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[],[199],"3639acea-06af-11f1-93a9-42dde27851f2","style.css","019c48d5-e172-777f-a26a-34a0c0b940d6",["D",1770748502305],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[156,206],"3639a7fe-06af-11f1-93a9-42dde27851f2","index.tsx","019c48d5-e172-777f-a26a-308f12beaf12",["D",1770748502305],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[156,213],"3639a36c-06af-11f1-93a9-42dde27851f2","index.html","019c48d5-e172-777f-a26a-2dc8aaddb79b",["D",1770748502305],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[156,220],"36399ee4-06af-11f1-93a9-42dde27851f2","favicon.svg","019c48d5-e172-777f-a26a-286de2166db7",["D",1770748502305],"\n",[],[156,227],["D",1770748502305],[],[156,76,68],["D",1770748502305],[174],[156,76],"3639b140-06af-11f1-93a9-42dde27851f2",["D",1770748502305],[173,175,176,177,178],[156],["D",1770748502305],{"_11":12,"_126":74},{"_11":12,"_122":-5,"_73":74,"_31":72,"_123":124,"_125":30},{"_39":113,"_13":16,"_33":36,"_114":79,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":14,"_121":12},"ctx",{"_52":-5,"_145":280,"_281":282,"_283":284,"_285":30,"_286":30,"_287":30,"_288":24,"_289":-5,"_290":-7,"_291":-7,"_292":26,"_293":30,"_294":30,"_295":-5,"_296":30,"_297":30,"_298":30,"_299":-5},"ENV",{"_251":252,"_253":254,"_255":16,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · components