TESM

Appearance

TESMThe Elm State Machine

Expressive, concise and robust state management for typescript ecosystem

Quickstart
🛡️

Type Safety

Use reliable and expressive typescript constructs to build your app state

⚙️

Framework agnostic

Universal state management for any JS/TS tool

🧠

Elm Architecture

Use concepts from The Elm Architecture (Model, Msg, Cmd). Manage application state in a totally pure way

Simple App Loading Flow Example ​

View full example

ts
const AppLoadingState = defineFlow(
    m,
    "AppLoadingState",
    () => [m.states.initial({ loadingStarted: Date.now() }), m.cmds.loadLocalStorage()],
    {
        initial: {
            local_storage_loaded: (msg, model) => {
                return [
                    m.states.waiting_initialize({
                        ...model,
                        localSave: msg.localSave
                    }),
                    m.cmds.initialize()
                ];
            }
        },
        waiting_initialize: {
            initialized: (msg, model) => {
                return [
                    m.states.waiting_config({
                        ...model,
                        initialize_data: msg.data
                    }),
                    m.cmds.loadConfig(msg.data.configUrl)
                ];
            }
        },
        waiting_config: {
            config_loaded: (msg, model) => {
                return [
                    m.states.loaded({
                        ...model,
                        config: msg.config,
                        loadingFinished: msg.now
                    }),
                ];
            }
        },
        loaded: {}
    }
)