Foldkit Counter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_204":205,"_206":207},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_152":-5,"_20":153,"_22":154,"_155":156,"_157":158,"_25":159,"_24":-5,"_160":-5,"_161":-5,"_162":56,"_163":164,"_165":47,"_166":-5,"_167":-5,"_168":169},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","stevekrouse","name","foldkit-counter","branchName","main","version","path","","project",{"_36":98,"_13":14,"_48":99,"_100":-5,"_101":56,"_102":103,"_104":103,"_105":106,"_107":-5,"_108":109,"_110":-5,"_111":56,"_112":-5,"_113":-5,"_114":63,"_115":116,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_130":131,"_132":133,"_134":135,"_136":56},"tree",[81,82,83,84],"file","contents",[32,33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":78,"_17":63,"_51":24,"_53":79,"_55":56,"_57":-5,"_18":80},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":50,"_51":71,"_53":72,"_55":56,"_57":-5,"_18":73},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":62,"_17":63,"_51":24,"_53":64,"_55":56,"_57":-5,"_18":65},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":58},"id","eca892a8-5f5f-11f1-8078-1607ee4eb77e","main.ts","fileId","79c7110c-5f5e-11f1-a9fc-1607ee4eb77e","parentId","branchId","79c30918-5f5e-11f1-a9fc-1607ee4eb77e","branchVersion",7,"latest",true,"createdAt",["D",1780500102203],3,"fileType","http","content","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();","deleted",false,"label",[38],"880a89d8-5f5e-11f1-8388-1607ee4eb77e","index.html","880a8ab4-5f5e-11f1-8388-1607ee4eb77e",["D",1780499503900],0,"\n\n \n \n \n Foldkit Counter\n\n \n \n\n \n \n\n \n \n \n \n

\n\n view source\n\n \n \n\n",[60],"446dac12-5f60-11f1-97ba-1607ee4eb77e","client.js","80ff895e-5f5e-11f1-8597-1607ee4eb77e",10,["D",1780500249459],"script","// Foldkit counter — ported from foldkit/examples/counter/src/main.ts\nimport { Match as M, Schema as S } from \"effect\";\nimport * as Runtime from \"foldkit/runtime\";\nimport { html } from \"foldkit/html\";\nimport { m } from \"foldkit/message\";\n\n// MODEL\nconst Model = S.Struct({ count: S.Number });\n\n// MESSAGE\nconst ClickedDecrement = m(\"ClickedDecrement\");\nconst ClickedIncrement = m(\"ClickedIncrement\");\nconst ClickedReset = m(\"ClickedReset\");\nconst Message = S.Union([ClickedDecrement, ClickedIncrement, ClickedReset]);\n\n// UPDATE\nconst update = (model, message) =>\n M.value(message).pipe(\n M.tagsExhaustive({\n ClickedDecrement: () => [{ count: model.count - 1 }, []],\n ClickedIncrement: () => [{ count: model.count + 1 }, []],\n ClickedReset: () => [{ count: 0 }, []],\n }),\n );\n\n// INIT\nconst init = () => [{ count: 0 }, []];\n\n// VIEW\nconst buttonStyle =\n \"bg-black text-white hover:bg-gray-700 px-4 py-2 transition\";\n\nconst view = (model) => {\n const h = html();\n\n return {\n title: `Counter: ${model.count}`,\n body: h.div(\n [\n h.Class(\n \"min-h-screen bg-white flex flex-col items-center justify-center gap-6 p-6\",\n ),\n ],\n [\n h.div(\n [h.Class(\"text-6xl font-bold text-gray-800\")],\n [model.count.toString()],\n ),\n h.div(\n [h.Class(\"flex flex-wrap justify-center gap-4\")],\n [\n h.button(\n [h.OnClick(ClickedDecrement()), h.Class(buttonStyle)],\n [\"-\"],\n ),\n h.button([h.OnClick(ClickedReset()), h.Class(buttonStyle)], [\n \"Reset\",\n ]),\n h.button(\n [h.OnClick(ClickedIncrement()), h.Class(buttonStyle)],\n [\"+\"],\n ),\n ],\n ),\n ],\n ),\n };\n};\n\nconst program = Runtime.makeProgram({\n Model,\n init,\n update,\n view,\n container: document.getElementById(\"root\"),\n devTools: { Message },\n});\n\nRuntime.run(program);",[67],"5d983488-5f5f-11f1-bafe-1607ee4eb77e","README.md","5d98353c-5f5f-11f1-bafe-1607ee4eb77e",6,["D",1780499862190],"# Foldkit Counter — on Val Town\n\nA port of the [Foldkit](https://foldkit.dev) counter playground\n([foldkit/examples/counter](https://github.com/foldkit/foldkit/tree/main/examples/counter))\nto Val Town — **no build step, no bundler**.\n\nFoldkit is a TypeScript frontend framework built on Effect, using\n[The Elm Architecture](https://guide.elm-lang.org/architecture/): one immutable\n`Model`, typed `Message`s, a pure `update`, and a `view`. The original example\nis compiled with Vite. Here it runs straight in the browser via an\n[import map](#how-the-no-build-port-works) that pulls Foldkit + Effect from\n[esm.sh](https://esm.sh).\n\n## Architecture\n\n```mermaid\nflowchart LR\n subgraph server[\"main.ts (HTTP val)\"]\n R[\"GET /\"] --> H[\"index.html\"]\n C[\"GET /client.js\"] --> J[\"client.js (Foldkit app)\"]\n S[\"GET /source\"] --> V[\"redirect to val\"]\n end\n H -- import map --> ESM[\"esm.sh: foldkit + effect\"]\n H -- type=module --> J\n J --> ESM\n\n subgraph tea[\"The Elm Architecture (in the browser)\"]\n direction LR\n Msg[\"Message
(Clicked±, Reset)\"] --> Upd[\"update(model, msg)\"]\n Upd --> Mod[\"Model { count }\"]\n Mod --> View[\"view(model)\"]\n View -- \"OnClick\" --> Msg\n end\n J --> tea\n```\n\n## Files\n\n| File | Role |\n| ------------ | -------------------------------------------------------------------------- |\n| `main.ts` | HTTP handler. Serves the shell, the client module, and a `/source` redirect. |\n| `index.html` | The shell: Twind (runtime Tailwind), the import map, and `

`. |\n| `client.js` | The Foldkit app — a faithful port of the example's `main.ts` + `entry.ts`. |\n\n## How the no-build port works\n\n`client.js` uses the exact bare specifiers Foldkit's own source uses\n(`effect`, `foldkit/runtime`, `foldkit/html`, `foldkit/message`). A browser\nimport map in `index.html` resolves them to esm.sh:\n\n- The Foldkit subpaths are requested with `?external=effect,@effect/platform-browser`\n so they don't bundle their own copy of Effect.\n- `\"effect\"` **and** `\"effect/\"` both point at the same pinned Effect build.\n Foldkit imports the `effect` namespace; `@effect/platform-browser` imports\n granular subpaths (`effect/Effect`, `effect/Schema`, …). Both forms resolve to\n the same chunks, so Effect stays a **single shared instance** — without that,\n Effect's Context tags wouldn't match and the runtime would fail.\n\nThe only port-level change from the upstream TypeScript is dropping the\ntype annotations (and the type-only `withReturnType`) so the file is plain JS the\nbrowser runs as-is. The `Model`, `Message`, `update`, `init`, and `view` are\notherwise identical to the original.\n\n## Notes\n\n- Styling uses [Twind](https://twind.style) so the original Tailwind utility\n classes work with no build. Twind rewrites them to hashed class names at\n runtime — the visual result is the same.\n- DevTools are enabled via `devTools: { Message }`, matching the upstream\n `entry.ts`.\n- Click **view source** (bottom-right) to open this val.\n",[75],{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":95,"_17":63,"_51":24,"_53":79,"_55":56,"_57":-5,"_86":96,"_18":97},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":92,"_17":50,"_51":71,"_53":72,"_55":56,"_57":-5,"_86":93,"_18":94},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":89,"_17":63,"_51":24,"_53":64,"_55":56,"_57":-5,"_86":90,"_18":91},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":85,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_86":87,"_18":88},["D",1780500102203],"children",[],[38],["D",1780499503900],[],[60],["D",1780500249459],[],[67],["D",1780499862190],[],[75],"79c2000e-5f5e-11f1-a9fc-1607ee4eb77e",["D",1780499479951],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Foldkit counter ported to Val Town","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_151":147},"org",{"_11":12,"_145":-5,"_146":147,"_108":109,"_148":149,"_150":56},"branch",{"_17":69,"_13":16,"_36":43,"_137":98,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":14,"_144":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":98,"_13":14,"_48":200,"_100":-5,"_101":56,"_102":103,"_104":103,"_105":106,"_107":-5,"_108":109,"_110":-5,"_111":56,"_112":-5,"_113":-5,"_114":63,"_115":116,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_130":201,"_132":202,"_134":203,"_136":56},[188,189,190,191],"files",[188,189,190,191],"counts",{"_178":63,"_179":180,"_181":63,"_31":182,"_183":184},[170,171,172,173],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":78,"_17":63,"_51":24,"_53":79,"_55":56,"_57":-5,"_18":177},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":50,"_51":71,"_53":72,"_55":56,"_57":-5,"_18":176},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":62,"_17":63,"_51":24,"_53":64,"_55":56,"_57":-5,"_18":175},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":174},[38],[60],[67],[75],"pulls","branches",1,"forks",{"_185":63,"_187":63},"connections",{"_185":63,"_186":63},"count","unfilledCount","emptyCount",{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":95,"_17":63,"_51":24,"_53":79,"_55":56,"_57":-5,"_86":198,"_18":199},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":92,"_17":50,"_51":71,"_53":72,"_55":56,"_57":-5,"_86":196,"_18":197},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":89,"_17":63,"_51":24,"_53":64,"_55":56,"_57":-5,"_86":194,"_18":195},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":85,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_86":192,"_18":193},[],[38],[],[60],[],[67],[],[75],["D",1780499479951],{"_11":12,"_151":147},{"_11":12,"_145":-5,"_146":147,"_108":109,"_148":149,"_150":56},{"_17":69,"_13":16,"_36":43,"_137":98,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":14,"_144":12},"ctx",{"_130":-5,"_167":237,"_238":239,"_240":241,"_242":56,"_243":56,"_244":56,"_245":47,"_246":-5,"_247":-7,"_248":-7,"_249":63,"_250":56,"_251":56,"_252":-5,"_253":56,"_254":56,"_255":56,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":16,"_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","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code