Foldkit Counter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_180":181,"_182":183},"routes/_app.x.$handle.$name",{"_16":17,"_20":21,"_82":65,"_83":84,"_63":-7,"_85":-5,"_13":86,"_87":88,"_11":89,"_90":91,"_92":93,"_94":-5,"_95":-5,"_96":-5,"_97":26,"_98":99,"_100":101,"_102":-5,"_103":-5,"_104":105},"routes/_app.x.$handle.$name.search.$(branch)",{"_11":12,"_13":14,"_15":-5,"_16":17},"files",[],"project",{"_18":19,"_20":21,"_22":23,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":31,"_32":-5,"_33":34,"_35":-5,"_36":26,"_37":-5,"_38":-5,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":48,"_49":48,"_50":51,"_52":51,"_53":51,"_54":48,"_55":48,"_56":57,"_58":59,"_60":61,"_62":26},"query","handle","stevekrouse","id","79c2000e-5f5e-11f1-a9fc-1607ee4eb77e","name","foldkit-counter","createdAt",["D",1780499479951],"deletedAt","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",{"_16":17,"_81":77},"org",{"_16":17,"_75":-5,"_76":77,"_33":34,"_78":79,"_80":26},"branch",{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"isOwned","version",10,"main","79c30918-5f5e-11f1-a9fc-1607ee4eb77e","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_18":19,"_20":21,"_22":176,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":31,"_32":-5,"_33":34,"_35":-5,"_36":26,"_37":-5,"_38":-5,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":48,"_49":48,"_50":51,"_52":51,"_53":51,"_54":48,"_55":48,"_56":177,"_58":178,"_60":179,"_62":26},"tree",[159,160,161,162],[159,160,161,162],"counts",{"_148":40,"_149":150,"_151":40,"_152":153,"_154":155},"contents",[106,107,108,109],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_18":141,"_20":142,"_112":143,"_114":-5,"_115":66,"_116":144,"_118":101,"_22":145,"_63":40,"_121":94,"_123":146,"_125":26,"_126":-5,"_83":147},{"_18":134,"_20":135,"_112":136,"_114":-5,"_115":66,"_116":64,"_118":101,"_22":137,"_63":120,"_121":138,"_123":139,"_125":26,"_126":-5,"_83":140},{"_18":128,"_20":129,"_112":130,"_114":-5,"_115":66,"_116":120,"_118":101,"_22":131,"_63":40,"_121":94,"_123":132,"_125":26,"_126":-5,"_83":133},{"_18":110,"_20":111,"_112":113,"_114":-5,"_115":66,"_116":117,"_118":101,"_22":119,"_63":120,"_121":122,"_123":124,"_125":26,"_126":-5,"_83":127},"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",[111],"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",[129],"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);",[135],"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",[142],"pulls","branches",1,"forks","envVars",{"_156":40,"_158":40},"connections",{"_156":40,"_157":40},"count","unfilledCount","emptyCount",{"_18":141,"_20":142,"_112":143,"_114":-5,"_115":66,"_116":144,"_118":101,"_22":173,"_63":40,"_121":94,"_123":146,"_125":26,"_126":-5,"_164":174,"_83":175},{"_18":134,"_20":135,"_112":136,"_114":-5,"_115":66,"_116":64,"_118":101,"_22":170,"_63":120,"_121":138,"_123":139,"_125":26,"_126":-5,"_164":171,"_83":172},{"_18":128,"_20":129,"_112":130,"_114":-5,"_115":66,"_116":120,"_118":101,"_22":167,"_63":40,"_121":94,"_123":132,"_125":26,"_126":-5,"_164":168,"_83":169},{"_18":110,"_20":111,"_112":113,"_114":-5,"_115":66,"_116":117,"_118":101,"_22":163,"_63":120,"_121":122,"_123":124,"_125":26,"_126":-5,"_164":165,"_83":166},["D",1780500102203],"children",[],[111],["D",1780499503900],[],[129],["D",1780500249459],[],[135],["D",1780499862190],[],[142],["D",1780499479951],{"_16":17,"_81":77},{"_16":17,"_75":-5,"_76":77,"_33":34,"_78":79,"_80":26},{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"ctx",{"_56":-5,"_103":213,"_214":215,"_216":217,"_218":26,"_219":26,"_220":26,"_221":101,"_222":-5,"_223":-7,"_224":-7,"_225":40,"_226":26,"_227":26,"_228":-5,"_229":26,"_230":26,"_231":26,"_232":-5},"ENV",{"_184":185,"_186":187,"_188":65,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"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"]

Search