Foldkit Counter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_195":196,"_197":198},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_17":18,"_38":-7,"_117":-5,"_19":118,"_119":120,"_121":122,"_123":124,"_125":126,"_21":127,"_128":-5,"_129":-5,"_130":24,"_131":132,"_133":134,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":24,"_30":-5},"handle","stevekrouse","name","foldkit-counter","branchName","main","path","index.html","project",{"_32":69,"_13":14,"_36":70,"_71":-5,"_72":24,"_73":74,"_75":74,"_76":77,"_78":-5,"_30":65,"_79":-5,"_80":24,"_81":-5,"_82":-5,"_83":26,"_40":41,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":89,"_90":89,"_91":92,"_93":92,"_94":92,"_95":89,"_96":89,"_51":97,"_98":99,"_100":101,"_102":24},"file",{"_61":62,"_13":18,"_63":21,"_64":24,"_68":-5},"isDirectory",false,"page",0,"history",[31],"hasNext","userId",{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":52,"_21":53,"_54":-5,"_55":-5,"_56":-5,"_57":-5,"_58":59},"id","880cd0ee-5f5e-11f1-8388-1607ee4eb77e","branchId","79c30918-5f5e-11f1-a9fc-1607ee4eb77e","createdAt",["D",1780499503900],"version",3,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","parentId","8104fdf8-5f5e-11f1-8597-1607ee4eb77e","incomingCommitId","aiChatMessageId","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_32":65,"_40":41,"_11":12,"_66":67},{"_61":62,"_13":18,"_63":21,"_64":24},"pull","merge","revert","multiple","commits",[60],{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":52,"_21":53,"_54":-5,"_55":-5,"_56":-5},"fileId","880a8ab4-5f5e-11f1-8388-1607ee4eb77e","fileType","deleted","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","deletedAtVersion","79c2000e-5f5e-11f1-a9fc-1607ee4eb77e",["D",1780499479951],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Foldkit counter ported to Val Town","imageUrl","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_116":67},"org",{"_11":12,"_112":-5,"_66":67,"_30":65,"_113":114,"_115":24},"branch",{"_38":103,"_13":16,"_32":35,"_104":69,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":14,"_111":12},"isOwned",10,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":69,"_13":14,"_36":191,"_71":-5,"_72":24,"_73":74,"_75":74,"_76":77,"_78":-5,"_30":65,"_79":-5,"_80":24,"_81":-5,"_82":-5,"_83":26,"_40":41,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":89,"_90":89,"_91":92,"_93":92,"_94":92,"_95":89,"_96":89,"_51":192,"_98":193,"_100":194,"_102":24},"tree",[158,159,160,161],"files",[158,159,160,161],"counts",{"_147":26,"_148":149,"_150":26,"_151":152,"_153":154},"contents",[],{"_32":139,"_13":18,"_61":62,"_42":-5,"_34":35,"_140":39,"_141":134,"_36":142,"_38":26,"_63":21,"_143":144,"_64":24,"_145":-5,"_17":146},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},"880a89d8-5f5e-11f1-8388-1607ee4eb77e","branchVersion","latest",["D",1780499503900],"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","label",[18],"pulls","branches",1,"forks","envVars",{"_155":26,"_157":26},"connections",{"_155":26,"_156":26},"count","unfilledCount","emptyCount",{"_32":183,"_13":184,"_61":185,"_42":-5,"_34":35,"_140":186,"_141":134,"_36":187,"_38":26,"_63":21,"_143":188,"_64":24,"_145":-5,"_169":189,"_17":190},{"_32":175,"_13":176,"_61":177,"_42":-5,"_34":35,"_140":103,"_141":134,"_36":178,"_38":39,"_63":179,"_143":180,"_64":24,"_145":-5,"_169":181,"_17":182},{"_32":139,"_13":18,"_61":62,"_42":-5,"_34":35,"_140":39,"_141":134,"_36":172,"_38":26,"_63":21,"_143":144,"_64":24,"_145":-5,"_169":173,"_17":174},{"_32":162,"_13":163,"_61":164,"_42":-5,"_34":35,"_140":165,"_141":134,"_36":166,"_38":39,"_63":167,"_143":168,"_64":24,"_145":-5,"_169":170,"_17":171},"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",[],[163],["D",1780499503900],[],[18],"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);",[],[176],"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",[],[184],["D",1780499479951],{"_11":12,"_116":67},{"_11":12,"_112":-5,"_66":67,"_30":65,"_113":114,"_115":24},{"_38":103,"_13":16,"_32":35,"_104":69,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":14,"_111":12},"ctx",{"_51":-5,"_136":228,"_229":230,"_231":232,"_233":24,"_234":24,"_235":24,"_236":134,"_237":-5,"_238":-7,"_239":-7,"_240":26,"_241":24,"_242":24,"_243":-5,"_244":24,"_245":24,"_246":24,"_247":-5},"ENV",{"_199":200,"_201":202,"_203":16,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227},"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"]

History · index.html