Foldkit Counter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_188":189,"_190":191},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_142":-5,"_20":143,"_22":144,"_145":146,"_147":148,"_26":149,"_24":150,"_151":-5,"_152":-5,"_153":51,"_154":155,"_156":43,"_157":-5,"_158":-5,"_159":160},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","stevekrouse","name","foldkit-counter","branchName","main","version","path","index.html","project",{"_33":88,"_13":14,"_44":89,"_90":-5,"_91":51,"_92":93,"_94":93,"_95":96,"_97":-5,"_98":99,"_100":-5,"_101":51,"_102":-5,"_103":-5,"_104":46,"_105":106,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":112,"_113":112,"_114":115,"_116":115,"_117":115,"_118":112,"_119":112,"_120":121,"_122":123,"_124":125,"_126":51},"tree",[54,55,56,57],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","880a89d8-5f5e-11f1-8388-1607ee4eb77e","fileId","880a8ab4-5f5e-11f1-8388-1607ee4eb77e","parentId","branchId","79c30918-5f5e-11f1-a9fc-1607ee4eb77e","branchVersion",3,"latest",true,"createdAt",["D",1780499503900],0,"fileType","content","\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","deleted",false,"label",[19],{"_33":80,"_13":81,"_35":82,"_37":-5,"_38":39,"_40":83,"_42":43,"_44":84,"_17":46,"_47":24,"_48":85,"_50":51,"_52":-5,"_65":86,"_18":87},{"_33":71,"_13":72,"_35":73,"_37":-5,"_38":39,"_40":74,"_42":43,"_44":75,"_17":41,"_47":76,"_48":77,"_50":51,"_52":-5,"_65":78,"_18":79},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":68,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_65":69,"_18":70},{"_33":58,"_13":59,"_35":60,"_37":-5,"_38":39,"_40":61,"_42":43,"_44":62,"_17":41,"_47":63,"_48":64,"_50":51,"_52":-5,"_65":66,"_18":67},"eca892a8-5f5f-11f1-8078-1607ee4eb77e","main.ts","79c7110c-5f5e-11f1-a9fc-1607ee4eb77e",7,["D",1780500102203],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();","children",[],[59],["D",1780499503900],[],[19],"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);",[],[72],"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",[],[81],"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,"_141":137},"org",{"_11":12,"_135":-5,"_136":137,"_98":99,"_138":139,"_140":51},"branch",{"_17":74,"_13":16,"_33":39,"_127":88,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":14,"_134":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",{"_33":88,"_13":14,"_44":184,"_90":-5,"_91":51,"_92":93,"_94":93,"_95":96,"_97":-5,"_98":99,"_100":-5,"_101":51,"_102":-5,"_103":-5,"_104":46,"_105":106,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":112,"_113":112,"_114":115,"_116":115,"_117":115,"_118":112,"_119":112,"_120":185,"_122":186,"_124":187,"_126":51},[172,173,174,175],"files",[172,173,174,175],"counts",{"_162":46,"_163":164,"_165":46,"_32":166,"_167":168},[],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":161},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches",1,"forks",{"_169":46,"_171":46},"connections",{"_169":46,"_170":46},"count","unfilledCount","emptyCount",{"_33":80,"_13":81,"_35":82,"_37":-5,"_38":39,"_40":83,"_42":43,"_44":84,"_17":46,"_47":24,"_48":85,"_50":51,"_52":-5,"_65":182,"_18":183},{"_33":71,"_13":72,"_35":73,"_37":-5,"_38":39,"_40":74,"_42":43,"_44":75,"_17":41,"_47":76,"_48":77,"_50":51,"_52":-5,"_65":180,"_18":181},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":68,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_65":178,"_18":179},{"_33":58,"_13":59,"_35":60,"_37":-5,"_38":39,"_40":61,"_42":43,"_44":62,"_17":41,"_47":63,"_48":64,"_50":51,"_52":-5,"_65":176,"_18":177},[],[59],[],[19],[],[72],[],[81],["D",1780499479951],{"_11":12,"_141":137},{"_11":12,"_135":-5,"_136":137,"_98":99,"_138":139,"_140":51},{"_17":74,"_13":16,"_33":39,"_127":88,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":14,"_134":12},"ctx",{"_120":-5,"_158":221,"_222":223,"_224":225,"_226":51,"_227":51,"_228":51,"_229":43,"_230":-5,"_231":-7,"_232":-7,"_233":46,"_234":51,"_235":51,"_236":-5,"_237":51,"_238":51,"_239":51,"_240":-5},"ENV",{"_192":193,"_194":195,"_196":16,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220},"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"]