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",[144],"1bc3ec86-26e0-11f0-949d-569c3dd06744","index.tsx","24a6fb14-26df-11f0-a5b3-569c3dd06744",6,["D",1746140442874],3,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { defineAction, defineLoader, Form, render, useActionData, useLoaderData } from \"./render.tsx\";\n\nconst loader = defineLoader(async () => {\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! I'm from the server from ${new Date().toUTCString()}`,\n colors,\n };\n});\n\n// Use action + to do things on the server\nconst action = defineAction(async (form, req) => {\n try {\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

Server data

\n Favorite Colors\n

{color}

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

{actionData.message}

}\n \n \n\n

Local data

\n \n

\n );\n});",[155],"24a701a4-26df-11f0-a5b3-569c3dd06744","README.md","24a70226-26df-11f0-a5b3-569c3dd06744",["D",1745892030281],"# Server-side Render React Mini Framework\n\nThis is very experimental, more of a prototype of an architecture, than a true framework\n\nExample: https://www.val.town/v/stevekrouse/TodoApp",[164],"8b79b2bc-2d17-11f0-ac23-569c3dd06744",["D",1746823959591],[27],"pulls","branches","forks",2,"envVars",{"_180":89,"_182":89},"connections",{"_180":89,"_181":89},"count","unfilledCount","emptyCount",{"_40":169,"_31":27,"_29":30,"_146":-5,"_38":39,"_37":14,"_148":46,"_35":197,"_13":89,"_32":20,"_33":34,"_23":24,"_152":-5,"_188":198,"_26":199},{"_40":163,"_31":164,"_29":165,"_146":-5,"_38":39,"_37":60,"_148":24,"_35":194,"_13":89,"_32":20,"_33":167,"_23":24,"_152":-5,"_188":195,"_26":196},{"_40":154,"_31":155,"_29":156,"_146":-5,"_38":39,"_37":157,"_148":24,"_35":191,"_13":159,"_32":160,"_33":161,"_23":24,"_152":-5,"_188":192,"_26":193},{"_40":143,"_31":144,"_29":145,"_146":-5,"_38":39,"_37":147,"_148":24,"_35":187,"_13":60,"_32":150,"_33":151,"_23":24,"_152":-5,"_188":189,"_26":190},["D",1746140436201],"children",[],[144],["D",1746140442874],[],[155],["D",1745892030281],[],[164],["D",1746823959591],[],[27],["D",1746140028276],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":52,"_102":103,"_104":24},{"_13":83,"_31":84,"_40":39,"_85":41,"_86":87,"_88":89,"_90":48,"_91":92,"_93":94,"_95":42,"_96":97},"ctx",{"_76":-5,"_127":237,"_238":239,"_240":241,"_242":24,"_243":24,"_244":24,"_245":46,"_246":-5,"_247":-7,"_248":-7,"_249":89,"_250":24,"_251":24,"_252":-5,"_253":24,"_254":24,"_255":24,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":84,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"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 · v7