Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joanllenas/tea-ts
An experimental port of The Elm Architecture to TypeScript
https://github.com/joanllenas/tea-ts
elm elm-architecture typescript
Last synced: about 2 months ago
JSON representation
An experimental port of The Elm Architecture to TypeScript
- Host: GitHub
- URL: https://github.com/joanllenas/tea-ts
- Owner: joanllenas
- Created: 2024-04-13T08:34:14.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-06T06:47:20.000Z (8 months ago)
- Last Synced: 2024-10-14T00:42:35.543Z (3 months ago)
- Topics: elm, elm-architecture, typescript
- Language: TypeScript
- Homepage:
- Size: 217 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tea-ts
An experimental port of [The Elm Architecture](https://guide.elm-lang.org/architecture/) to Typescript.
## Program
```ts
// Simple Program
function simple(
init: () => Model,
update: (msg: Msg, model: Model) => Model,
view: (model: Model) => Html.Html,
);
// Program with managed effects
function advanced(
init: (flags: Flags) => [Model, Eff],
update: (msg: Msg, model: Model) => [Model, Eff],
effects: (eff: Eff) => Effect.EffectFn,
subscriptions: (model: Model) => Subscription.Sub,
view: (model: Model) => Html.Html,
);
```
## Counter
```ts
import * as Tea from './tea/program';
import * as Message from './tea/message';
import * as Html from './tea/html';
type Model = {
count: number;
};
type Msg = Message.Msg<'Increment', number> | Message.Msg<'Decrement'>;
const msg: Message.MsgRecord = {
Increment: (n: number) => Message.msg('Increment', n),
Decrement: () => Message.msg('Decrement'),
};
const init = (): Model => ({
count: 0,
});
const update = (msg: Msg, model: Model): Model => {
switch (msg.name) {
case 'Increment': {
return { count: model.count + msg.payload };
}
case 'Decrement': {
return { count: model.count - 1 };
}
}
};
const view = (model: Model): Html.Html => {
return Html.div(
[],
[
Html.h3([], [Html.text('Simple')]),
Html.button([Html.onClick(() => msg.Increment(2))], [Html.text('+')]),
Html.button([Html.onClick(() => msg.Decrement())], [Html.text('-')]),
Html.div([], [Html.text('Count: ' + model.count)]),
],
);
};
Tea.simple(init, update, view).run(document.getElementById('app')!);
```