Foldkit Counter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_185":186,"_187":188},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_87":-7,"_88":89,"_29":-7,"_90":-5,"_15":91,"_92":93,"_94":95,"_96":97,"_98":99,"_100":-5,"_101":-5,"_102":-5,"_103":38,"_104":105,"_106":107,"_108":-5,"_109":-5,"_110":111},"routes/_app.x.$handle.$name.branches",{"_11":12,"_13":14,"_15":16,"_17":18},"handle","stevekrouse","name","foldkit-counter","project",{"_20":28,"_13":14,"_22":36,"_35":-5,"_37":38,"_39":40,"_41":40,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":38,"_49":-5,"_50":-5,"_51":52,"_53":54,"_55":-5,"_56":-5,"_57":-5,"_58":-5,"_59":60,"_61":60,"_62":63,"_64":63,"_65":63,"_66":60,"_67":60,"_68":69,"_70":71,"_72":73,"_74":38},"branches",[19],{"_20":21,"_22":23,"_24":25,"_13":26,"_27":28,"_29":30,"_31":-5,"_32":-5,"_33":34,"_35":-5},"id","79c30918-5f5e-11f1-a9fc-1607ee4eb77e","createdAt",["D",1780499479958],"updatedAt",["D",1780500249459],"main","projectId","79c2000e-5f5e-11f1-a9fc-1607ee4eb77e","version",10,"forkedBranchId","forkedBranchVersion","lockfileKey","1780505595955-esm.town_v_stevekrouse_foldkit-counter@10-main","deletedAt",["D",1780499479951],"legacyEnvVars",false,"privacy","public","httpPrivacy","description","Foldkit counter ported to Val Town","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_86":82},"org",{"_11":12,"_80":-5,"_81":82,"_45":46,"_83":84,"_85":38},"branch",{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_75":-5,"_76":-5,"_77":-5,"_78":14,"_79":12},"isOwned","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_20":28,"_13":14,"_22":181,"_35":-5,"_37":38,"_39":40,"_41":40,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":38,"_49":-5,"_50":-5,"_51":52,"_53":54,"_55":-5,"_56":-5,"_57":-5,"_58":-5,"_59":60,"_61":60,"_62":63,"_64":63,"_65":63,"_66":60,"_67":60,"_68":182,"_70":183,"_72":184,"_74":38},"tree",[164,165,166,167],"files",[164,165,166,167],"counts",{"_154":52,"_17":155,"_156":52,"_157":158,"_159":160},"contents",[112,113,114,115],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_20":147,"_13":148,"_118":149,"_120":-5,"_121":21,"_122":150,"_124":107,"_22":151,"_29":52,"_127":100,"_129":152,"_131":38,"_132":-5,"_88":153},{"_20":140,"_13":141,"_118":142,"_120":-5,"_121":21,"_122":30,"_124":107,"_22":143,"_29":126,"_127":144,"_129":145,"_131":38,"_132":-5,"_88":146},{"_20":134,"_13":135,"_118":136,"_120":-5,"_121":21,"_122":126,"_124":107,"_22":137,"_29":52,"_127":100,"_129":138,"_131":38,"_132":-5,"_88":139},{"_20":116,"_13":117,"_118":119,"_120":-5,"_121":21,"_122":123,"_124":107,"_22":125,"_29":126,"_127":128,"_129":130,"_131":38,"_132":-5,"_88":133},"eca892a8-5f5f-11f1-8078-1607ee4eb77e","main.ts","fileId","79c7110c-5f5e-11f1-a9fc-1607ee4eb77e","parentId","branchId","branchVersion",7,"latest",["D",1780500102203],3,"fileType","http","content","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();","deleted","label",[117],"880a89d8-5f5e-11f1-8388-1607ee4eb77e","index.html","880a8ab4-5f5e-11f1-8388-1607ee4eb77e",["D",1780499503900],"\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",[135],"446dac12-5f60-11f1-97ba-1607ee4eb77e","client.js","80ff895e-5f5e-11f1-8597-1607ee4eb77e",["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);",[141],"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",[148],"pulls",1,"forks","envVars",{"_161":52,"_163":52},"connections",{"_161":52,"_162":52},"count","unfilledCount","emptyCount",{"_20":147,"_13":148,"_118":149,"_120":-5,"_121":21,"_122":150,"_124":107,"_22":178,"_29":52,"_127":100,"_129":152,"_131":38,"_132":-5,"_169":179,"_88":180},{"_20":140,"_13":141,"_118":142,"_120":-5,"_121":21,"_122":30,"_124":107,"_22":175,"_29":126,"_127":144,"_129":145,"_131":38,"_132":-5,"_169":176,"_88":177},{"_20":134,"_13":135,"_118":136,"_120":-5,"_121":21,"_122":126,"_124":107,"_22":172,"_29":52,"_127":100,"_129":138,"_131":38,"_132":-5,"_169":173,"_88":174},{"_20":116,"_13":117,"_118":119,"_120":-5,"_121":21,"_122":123,"_124":107,"_22":168,"_29":126,"_127":128,"_129":130,"_131":38,"_132":-5,"_169":170,"_88":171},["D",1780500102203],"children",[],[117],["D",1780499503900],[],[135],["D",1780500249459],[],[141],["D",1780499862190],[],[148],["D",1780499479951],{"_11":12,"_86":82},{"_11":12,"_80":-5,"_81":82,"_45":46,"_83":84,"_85":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_75":-5,"_76":-5,"_77":-5,"_78":14,"_79":12},"ctx",{"_68":-5,"_109":218,"_219":220,"_221":222,"_223":38,"_224":38,"_225":38,"_226":107,"_227":-5,"_228":-7,"_229":-7,"_230":52,"_231":38,"_232":38,"_233":-5,"_234":38,"_235":38,"_236":38,"_237":-5},"ENV",{"_189":190,"_191":192,"_193":26,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217},"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"]

Branches1

Branches
1