Jelms

Elm inspired state management for TypeScript apps. Tiny size (223 bytes minified and gzipped) makes it a perfect partner in crime with Preact.

Examples

You can some some examples under the Jelms Examples repo. Here is the canonical counter app:

import { h, render } from "preact"
import { program } from "jelms"

type Model = {
  readonly counter: number
}

type Decrement = {
  type: "Decrement"
}

type Increment = {
  type: "Increment"
}

type Msg = Decrement | Increment

program<Model, Msg>({
  init() {
    return { counter: 0 }
  },

  update(model, msg) {
    switch (msg.type) {
      case "Decrement":
        return { counter: model.counter - 1 }

      case "Increment":
        return { counter: model.counter + 1 }
    }
  },

  view(model, emit) {
    render(
      <div>
        <h1>{model.counter}</h1>
        <button onClick={() => emit({ type: "Decrement" })}>-</button>
        <button onClick={() => emit({ type: "Increment" })}>+</button>
      </div>,
      document.body,
    )
  },
})