Tutorial

This tutorial builds one application, a list of timers, in four short steps. Each step is a program of the example examples/timer, and every block of code on these pages is taken from its files, which are typechecked and tested with the library. The finished application runs in the browser.

The tutorial shows how the pieces fit; the Guide is the specification, and each page links to the rules it uses there.

1. A first program: how long a timer lasts, set with "+" and "−". State, update, reject, the model, a view, run.
2. Commands and subscriptions: the timer itself, which ticks while it runs and rings a bell when it finishes.
3. Children: many timers, each the program of step 2 as it is, under a parent.
4. Testing: update, the view and a scenario, tested without a runtime.

Before you start

You need TypeScript and the basics of Effect v4: an Effect, pipe, Data.TaggedEnum and a service. Install the library with its peer dependency:

bun add @fgaudo/effect-tea effect
Copy

The library draws nothing: a view is a function of its model, and a small bridge draws it with a renderer. The tutorial draws with snabbdom, through the examples' bridge, examples/snabbdom.ts, which you can copy: renderInto draws each frame, onClick sends a message from a click, and messagesSentBy finds, in a test, what a view sends.