{"id":15059508,"url":"https://github.com/rjdellecese/elm-ts","last_synced_at":"2025-10-04T18:31:41.700Z","repository":{"id":64969634,"uuid":"548115609","full_name":"rjdellecese/elm-ts","owner":"rjdellecese","description":"A porting to TypeScript featuring fp-ts, RxJS and React","archived":true,"fork":false,"pushed_at":"2023-02-06T19:21:26.000Z","size":2221,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-19T11:32:08.449Z","etag":null,"topics":["elm-lang","fp-ts","functional-programming","react","rxjs","typescript"],"latest_commit_sha":null,"homepage":"https://rjdellecese.github.io/elm-ts","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rjdellecese.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-09T00:22:12.000Z","updated_at":"2023-02-10T16:17:22.000Z","dependencies_parsed_at":"2023-02-10T05:45:33.132Z","dependency_job_id":null,"html_url":"https://github.com/rjdellecese/elm-ts","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjdellecese%2Felm-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjdellecese%2Felm-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjdellecese%2Felm-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjdellecese%2Felm-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rjdellecese","download_url":"https://codeload.github.com/rjdellecese/elm-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234911066,"owners_count":18905835,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm-lang","fp-ts","functional-programming","react","rxjs","typescript"],"created_at":"2024-09-24T22:44:38.019Z","updated_at":"2025-10-04T18:31:41.238Z","avatar_url":"https://github.com/rjdellecese.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"⚠️ This is a fork of [gcanti/elm-ts](https://github.com/gcanti/elm-ts). ⚠️\n\n# elm-ts\n\n![npm (scoped)](https://img.shields.io/npm/v/@rjdellecese/elm-ts)\n\nA porting of [_The Elm Architecture_](https://guide.elm-lang.org/architecture/) to TypeScript featuring `fp-ts`, `RxJS` and `React`.\n\n## Installation\n\n```sh\nnpm install @rjdellecese/elm-ts fp-ts rxjs react\n```\n\nNote: `fp-ts`, `rxjs` and `react` are peer dependencies\n\n## Differences from Elm\n\n- no ports\n- `React` instead of `virtual-dom` (pluggable)\n- `Navigation` is based on [history](https://github.com/remix-run/history)\n\n## React\n\n```ts\nimport * as React from 'elm-ts/lib/React'\nimport { render } from 'react-dom'\nimport * as component from './examples/Counter'\n\nconst main = React.program(component.init, component.update, component.view)\n\nReact.run(main, dom =\u003e render(dom, document.getElementById('app')!))\n```\n\n## How to derive decoders from [io-ts](https://github.com/gcanti/io-ts) codecs\n\n```ts\nimport * as t from 'io-ts'\nimport { failure } from 'io-ts/lib/PathReporter'\n\nfunction fromCodec\u003cA\u003e(codec: t.Decoder\u003cunknown, A\u003e): Decoder\u003cA\u003e {\n  return flow(\n    codec.decode,\n    E.mapLeft(errors =\u003e failure(errors).join('\\n'))\n  )\n}\n```\n\n## Enable debugger in development mode\n\nFor `Html` (and its specializations) programs:\n\n```ts\nimport { programWithDebugger } from 'elm-ts/lib/Debug/Html'\nimport * as React from 'elm-ts/lib/React'\nimport { render } from 'react-dom'\nimport * as component from './examples/Counter'\n\nconst program = process.env.NODE_ENV === 'production' ? React.program : programWithDebugger\n\nconst main = program(component.init, component.update, component.view)\n\nReact.run(main, dom =\u003e render(dom, document.getElementById('app')!))\n```\n\nFor `Navigation` (and its specializations) programs:\n\n```ts\nimport { programWithDebuggerWithFlags } from 'elm-ts/lib/Debug/Navigation'\nimport * as Navigation from 'elm-ts/lib/Navigation'\nimport * as React from 'elm-ts/lib/React'\nimport { render } from 'react-dom'\nimport * as component from './examples/Navigation'\n\nconst program = process.env.NODE_ENV === 'production' ? Navigation.programWithFlags : programWithDebuggerWithFlags\n\nconst main = program(component.locationToMsg, component.init, component.update, component.view)\n\nReact.run(main(component.flags), dom =\u003e render(dom, document.getElementById('app')!))\n```\n\n## Stop the application\n\nIf you need to stop the application for any reason, you can use the `withStop` combinator:\n\n```ts\nimport { withStop } from 'elm-ts/lib/Html'\nimport * as React from 'elm-ts/lib/React'\nimport { render } from 'react-dom'\nimport { fromEvent } from 'rxjs'\nimport * as component from './examples/Counter'\n\nconst stopSignal$ = fromEvent(document.getElementById('stop-btn'), 'click')\n\nconst program = React.program(component.init, component.update, component.view)\n\nconst main = withStop(stopSignal$)(program)\n\nReact.run(main, dom =\u003e render(dom, document.getElementById('app')!))\n```\n\nThe combinator takes a `Program` and stops consuming it when the provided `Observable` emits a value.\n\nIn case you want to enable the debugger, you have to use some specific functions from the `Debug` sub-module:\n\n```ts\n// instead of `programWithDebuggerWithFlags`\nimport { programWithDebuggerWithFlagsWithStop } from 'elm-ts/lib/Debug/Navigation'\nimport { withStop } from 'elm-ts/lib/Html'\nimport * as Navigation from 'elm-ts/lib/Navigation'\nimport * as React from 'elm-ts/lib/React'\nimport { render } from 'react-dom'\nimport * as component from './examples/Navigation'\n\nconst stopSignal$ = fromEvent(document.getElementById('stop-btn'), 'click')\n\nconst program =\n  process.env.NODE_ENV === 'production'\n    ? Navigation.programWithFlags\n    : programWithDebuggerWithFlagsWithStop(stopSignal$)\n\nconst main = withStop(stopSignal$)(program(component.locationToMsg, component.init, component.update, component.view))\n\nReact.run(main(component.flags), dom =\u003e render(dom, document.getElementById('app')!))\n```\n\n## Examples\n\n- [Counter](examples/Counter.tsx)\n- [Labeled Checkboxes (with a sprinkle of functional optics)](examples/LabeledCheckboxes.tsx)\n- [Task, Time and Option](examples/Task.tsx)\n- [Http and Either](examples/Http.tsx)\n- [Navigation](examples/Navigation.tsx)\n- [Compose Modules](examples/ComposeModules/index.tsx)\n\n## Documentation\n\n- [API Reference](https://rjdellecese.github.io/elm-ts)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frjdellecese%2Felm-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frjdellecese%2Felm-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frjdellecese%2Felm-ts/lists"}