# savkelita/tea-effect architecture

> Architecture diagram of the GitHub repository savkelita/tea-effect, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/savkelita/tea-effect
- Repository: https://github.com/savkelita/tea-effect

## Overview

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: [`src/Navigation.ts`](https://github.com/savkelita/tea-effect/blob/main/src/Navigation.ts) (History navigation), [`src/Platform.ts`](https://github.com/savkelita/tea-effect/blob/main/src/Platform.ts) (TEA runtime), [`src/Cmd.ts`](https://github.com/savkelita/tea-effect/blob/main/src/Cmd.ts) (Commands), [`src/LocalStorage.ts`](https://github.com/savkelita/tea-effect/blob/main/src/LocalStorage.ts) (Schema storage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["TEA runtime"]
  node_react["React integration<br/>[React.ts]"]
  node_html["View programs<br/>[Html.ts]"]
  node_platform["TEA runtime<br/>[Platform.ts]"]
end

subgraph group_effects["Effects"]
  node_cmd["Commands<br/>[Cmd.ts]"]
  node_sub["Subscriptions<br/>[Sub.ts]"]
  node_task["Effect tasks<br/>[Task.ts]"]
  node_http["HTTP requests<br/>[Http.ts]"]
end

subgraph group_browser["Browser capabilities"]
  node_localstorage["Schema storage<br/>[LocalStorage.ts]"]
  node_navigation["History navigation<br/>[Navigation.ts]"]
end

subgraph group_routing["Typed routing"]
  node_router["Route definitions<br/>[Router.ts]"]
  node_route["Parsed route<br/>[Route.ts]"]
  node_parser["Route parser<br/>[Parser.ts]"]
  node_formatter["URL formatter<br/>[Formatter.ts]"]
  node_matcher["Bidirectional matcher<br/>[Matcher.ts]"]
end

node_developer(("App developer"))
node_user(("App user"))
node_network{{"HTTP service"}}
node_browserstorage[("Browser storage")]
node_browser{{"Browser"}}

node_developer -->|"starts program"| node_react
node_react -->|"runs program"| node_platform
node_user -->|"interacts with view"| node_html
node_html -->|"dispatches messages"| node_platform
node_platform -->|"executes effects"| node_cmd
node_platform -->|"runs subscriptions"| node_sub
node_http -->|"creates commands"| node_cmd
node_http -->|"sends requests"| node_network
node_localstorage -->|"creates commands"| node_cmd
node_localstorage -->|"creates subscriptions"| node_sub
node_localstorage -->|"reads and writes"| node_browserstorage
node_navigation -->|"creates commands"| node_cmd
node_navigation -->|"batches subscriptions"| node_sub
node_navigation -->|"updates history"| node_browser
node_browser -->|"emits location events"| node_navigation
node_router -->|"parses routes"| node_parser
node_router -->|"defines matchers"| node_matcher
node_matcher -->|"uses parser"| node_parser
node_matcher -->|"uses formatter"| node_formatter
node_parser -->|"consumes route"| node_route
node_formatter -->|"builds route"| node_route

click node_react "https://github.com/savkelita/tea-effect/blob/main/src/React.ts"
click node_html "https://github.com/savkelita/tea-effect/blob/main/src/Html.ts"
click node_platform "https://github.com/savkelita/tea-effect/blob/main/src/Platform.ts"
click node_cmd "https://github.com/savkelita/tea-effect/blob/main/src/Cmd.ts"
click node_sub "https://github.com/savkelita/tea-effect/blob/main/src/Sub.ts"
click node_task "https://github.com/savkelita/tea-effect/blob/main/src/Task.ts"
click node_http "https://github.com/savkelita/tea-effect/blob/main/src/Http.ts"
click node_localstorage "https://github.com/savkelita/tea-effect/blob/main/src/LocalStorage.ts"
click node_navigation "https://github.com/savkelita/tea-effect/blob/main/src/Navigation.ts"
click node_router "https://github.com/savkelita/tea-effect/blob/main/src/Router.ts"
click node_route "https://github.com/savkelita/tea-effect/blob/main/src/Router/Route.ts"
click node_parser "https://github.com/savkelita/tea-effect/blob/main/src/Router/Parser.ts"
click node_formatter "https://github.com/savkelita/tea-effect/blob/main/src/Router/Formatter.ts"
click node_matcher "https://github.com/savkelita/tea-effect/blob/main/src/Router/Matcher.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_react,node_html,node_platform,node_user,node_browser toneBlue
class node_cmd,node_sub,node_task,node_http,node_browserstorage toneAmber
class node_localstorage,node_navigation toneMint
class node_router,node_route,node_parser,node_formatter,node_matcher toneRose
class node_developer,node_network toneIndigo
```

## Components

### TEA runtime

- [React integration](https://github.com/savkelita/tea-effect/blob/main/src/React.ts): `src/React.ts`
- [View programs](https://github.com/savkelita/tea-effect/blob/main/src/Html.ts): `src/Html.ts`
- [TEA runtime](https://github.com/savkelita/tea-effect/blob/main/src/Platform.ts): `src/Platform.ts`

### Effects

- [Commands](https://github.com/savkelita/tea-effect/blob/main/src/Cmd.ts): `src/Cmd.ts`
- [Subscriptions](https://github.com/savkelita/tea-effect/blob/main/src/Sub.ts): `src/Sub.ts`
- [Effect tasks](https://github.com/savkelita/tea-effect/blob/main/src/Task.ts): `src/Task.ts`
- [HTTP requests](https://github.com/savkelita/tea-effect/blob/main/src/Http.ts): `src/Http.ts`

### Browser capabilities

- [Schema storage](https://github.com/savkelita/tea-effect/blob/main/src/LocalStorage.ts): `src/LocalStorage.ts`
- [History navigation](https://github.com/savkelita/tea-effect/blob/main/src/Navigation.ts): `src/Navigation.ts`

### Typed routing

- [Route definitions](https://github.com/savkelita/tea-effect/blob/main/src/Router.ts): `src/Router.ts`
- [Parsed route](https://github.com/savkelita/tea-effect/blob/main/src/Router/Route.ts): `src/Router/Route.ts`
- [Route parser](https://github.com/savkelita/tea-effect/blob/main/src/Router/Parser.ts): `src/Router/Parser.ts`
- [URL formatter](https://github.com/savkelita/tea-effect/blob/main/src/Router/Formatter.ts): `src/Router/Formatter.ts`
- [Bidirectional matcher](https://github.com/savkelita/tea-effect/blob/main/src/Router/Matcher.ts): `src/Router/Matcher.ts`

### Other components

- **App developer**
- **App user**
- **HTTP service**
- **Browser storage**
- **Browser**

## Connections

- 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