How savkelita/tea-effect works
tea-effect is a TypeScript implementation of The Elm Architecture using Effect: applications define model/update/view behavior, dispatch messages, and represent side effects as commands or subscriptions. Its React integration runs rendered programs; separate modules add HTTP, browser storage, navigation, and typed bidirectional routing. Routing internals are shown only where sampled code supports their relationships. The excerpts do not establish all runtime wiring, so uncertain links are omitted.
Main entry points: Navigation.ts History navigation · Platform.ts TEA runtime · Cmd.ts Commands · LocalStorage.ts Schema storage
Components 19
TEA runtime
- React integration
src/React.ts - View programs
src/Html.ts - TEA runtime
src/Platform.ts
Effects
- Commands
src/Cmd.ts - Subscriptions
src/Sub.ts - Effect tasks
src/Task.ts - HTTP requests
src/Http.ts
Browser capabilities
- Schema storage
src/LocalStorage.ts - History navigation
src/Navigation.ts
Typed routing
- Route definitions
src/Router.ts - Parsed route
src/Router/Route.ts - Route parser
src/Router/Parser.ts - URL formatter
src/Router/Formatter.ts - Bidirectional matcher
src/Router/Matcher.ts
Other components
- App developer
- App user
- HTTP service
- Browser storage
- Browser
Connections 21
- App developer → React integration: starts program
- React integration → TEA runtime: runs program
- App user → View programs: interacts with view
- View programs → TEA runtime: dispatches messages
- TEA runtime → Commands: executes effects
- TEA runtime → Subscriptions: runs subscriptions
- HTTP requests → Commands: creates commands
- HTTP requests → HTTP service: sends requests
- Schema storage → Commands: creates commands
- Schema storage → Subscriptions: creates subscriptions
- Schema storage → Browser storage: reads and writes
- History navigation → Commands: creates commands
- History navigation → Subscriptions: batches subscriptions
- History navigation → Browser: updates history
- Browser → History navigation: emits location events
- Route definitions → Route parser: parses routes
- Route definitions → Bidirectional matcher: defines matchers
- Bidirectional matcher → Route parser: uses parser
- Bidirectional matcher → URL formatter: uses formatter
- Route parser → Parsed route: consumes route
- URL formatter → Parsed route: builds route