submissions\nasync function handleSubmit(e: React.FormEvent): Promise {\n try {\n e.preventDefault()\n const form = e.currentTarget as HTMLFormElement\n const res = await fetch(form.action || window.location.href, {\n method: form.method || \"POST\",\n body: new FormData(form),\n headers: { Accept: \"application/json\" },\n })\n if (res.status === 303) {\n window.location.href = res.headers.get(\"Location\")!\n } else {\n const { actionData, loaderData } = await res.json()\n console.log(`🎨 `, { actionData, loaderData })\n window._setLoaderData!(loaderData)\n window._setActionData!(actionData)\n }\n } catch (error) {\n console.log(`🚨 Failed to submit`, error)\n }\n}\n\n// Main render helper: wires up SSR and client hydration\nexport const render = , A extends Action>(\n httpUrl: string,\n loader: L,\n action?: A,\n Component?: React.FC,\n) => {\n const isClientRequest = typeof document !== \"undefined\"\n\n if (isClientRequest) {\n // Just render the Component!\n createRoot(document.getElementById(\"root\")!).render()\n } else {\n // Wither handle the action or return the html\n return async (req: Request): Promise => {\n const accept = req.headers.get(\"Accept\") || \"\"\n if (accept === \"application/json\") {\n // handle form submission\n return json(req, loader, action)\n } else {\n // Return html for non-POST requests\n return html(req, httpUrl, loader)\n }\n }\n }\n}\n\nconst json = async (req: Request, loader: Loader, action?: Action) => {\n if (!action) throw new Error(`Action is required for POST requests`)\n\n const form = await req.formData()\n const actionResult = await action(form, req)\n if (actionResult instanceof Response) return actionResult\n\n const loaderData = await loader(req)\n const result = { actionData: actionResult, loaderData }\n\n return new Response(JSON.stringify(result), {\n status: 200,\n headers: { \"Content-Type\": \"application/json\" },\n })\n}\n\nconst html = async (req: Request, httpUrl: string, loader: Loader) => {\n const loaderData = await loader(req)\n\n const htmlString = `\n\n\n \n Val Render\n \n \n\n\n

\n\n`\n\n return new Response(htmlString, { headers: { \"Content-Type\": \"text/html\" } })\n}","label",[143],"853ed080-31c7-11f0-b06c-569c3dd06744","index.tsx",["D",1747339345181],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { defineAction, defineLoader, Form, render, useActionData, useLoaderData } from \"./render.tsx\";\n\n\nconst loader = defineLoader(async () => {\n // You've got imports that only work on the server? Well, there is no fancy tree-shaking, so unfortunately, you have to do a dynamic import.\n const { createHmac } = await import(\"node:crypto\");\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n\n // When the page loads AND when an action is requested, THIS CODE RUNS ON THE SERVER!\n const colors: string[] = await blob.getJSON(\"colors\") ?? [];\n return {\n hello: `👋 Hello! This string was generated on the server at ${new Date().toUTCString()}`,\n createHmac: createHmac(\"sha256\", \"secret\").update(\"hello\").digest(\"hex\"),\n colors,\n };\n});\n\n// Use action + to do things on the server\nconst action = defineAction(async (form, _req) => {\n try {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n\n // When an action is requested THIS CODE RUNS ON THE SERVER!\n const color = form.get(\"color\") as string;\n console.log(`Received example: ${color}`);\n\n const colors = await blob.getJSON(\"colors\") ?? [];\n colors.push(color);\n await blob.setJSON(\"colors\", colors);\n\n return { success: true, message: `added ${color}` };\n } catch (error) {\n return { success: false, message: `${error}` };\n }\n});\n\n// This is how you render the component on the client\nexport default render(import.meta.url, loader, action, () => {\n // THIS CODE RUNS IN THE CLIENT\n const loaderData = useLoaderData();\n const actionData = useActionData();\n\n // Count is just local state used to show how local state persists\n const [count, setCount] = useState(0);\n return (\n

{loaderData.hello}

\n\n

Data from Server

SHA256 (uses node:crypto) {loaderData.createHmac}

\n\n\n Favorite Colors (adds values to a val blob)\n

{color}

\n \n \n {actionData?.message &&

{actionData.message}

}\n \n \n\n

Local data

\n \n

\n );\n});",[154],"853ecd6a-31c7-11f0-b06c-569c3dd06744","deno.json","96d7fc83-153b-4da1-9efc-6b5dbd693cfe",["D",1747339345181],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[160],"853ecad6-31c7-11f0-b06c-569c3dd06744","README.md","2a36cf8d-9b24-44b9-b3ae-695bab512ac1",["D",1747339345181],"# mini-remix\n\n**This is very experimental.**\n\n# What does this do?\n\nYou can write server side and client side react code in the same file and render it to a val.\n\n# Why?\n\nI love the simplicity of Remix. It does SSR, but it feels like you're building a static site. I love the simplicity of val.town! It makes it easy to create a live site with one file.\n\nSo I took those two things I liked and smashed them together to make this. Does it work? Yes. Is it done well? No. Is it a good idea? Probably not. But it's fun to play with.\n\n",[166],"853ea858-31c7-11f0-b06c-569c3dd06744",".vtignore","81dfd7f9-5c49-42fb-934d-d202e80fc327",["D",1747339345181],".git\n.DS_Store\nnode_modules\nvendor",[172],"pulls","branches","forks","envVars",{"_184":60,"_186":60},"connections",{"_184":60,"_185":60},"count","unfilledCount","emptyCount",{"_41":171,"_32":172,"_30":173,"_145":-5,"_39":40,"_38":146,"_147":25,"_36":205,"_13":60,"_33":20,"_34":175,"_24":47,"_151":-5,"_193":206,"_27":207},{"_41":165,"_32":166,"_30":167,"_145":-5,"_39":40,"_38":146,"_147":25,"_36":202,"_13":60,"_33":20,"_34":169,"_24":47,"_151":-5,"_193":203,"_27":204},{"_41":159,"_32":160,"_30":161,"_145":-5,"_39":40,"_38":146,"_147":47,"_36":199,"_13":60,"_33":20,"_34":163,"_24":47,"_151":-5,"_193":200,"_27":201},{"_41":153,"_32":154,"_30":55,"_145":-5,"_39":40,"_38":146,"_147":47,"_36":196,"_13":60,"_33":156,"_34":157,"_24":47,"_151":-5,"_193":197,"_27":198},{"_41":142,"_32":143,"_30":144,"_145":-5,"_39":40,"_38":146,"_147":47,"_36":192,"_13":60,"_33":149,"_34":150,"_24":47,"_151":-5,"_193":194,"_27":195},["D",1747339345181],"children",[],[143],["D",1747339345181],[],[154],["D",1747339345181],[],[160],["D",1747339345181],[],[166],["D",1747339345181],[],[172],["D",1747339345181],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":53,"_101":102,"_103":47},{"_13":83,"_32":84,"_41":40,"_85":42,"_86":87,"_88":89,"_90":49,"_91":92,"_93":62,"_94":43,"_95":96},"ctx",{"_76":-5,"_125":245,"_246":247,"_248":249,"_250":47,"_251":47,"_252":47,"_253":25,"_254":-5,"_255":-7,"_256":-7,"_257":60,"_258":47,"_259":47,"_260":-5,"_261":47,"_262":47,"_263":47,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":84,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Diff · v2