Awesome

ts-elmish

Elmish architecture in Typescript

Features

• <b>minimalistic</b>, no dedicated ecosystem approach
• <b>unobtrusive</b>, doesn't capture app composition root
• <b>modular</b>, supports different view layers and effect handling strategies
• <b>testable</b>, encourages view/logic/effect separation

Packages

Getting started

At first you have to choose an effect handling strategy - currently there are two options:

• basic-effects - effects are created from sync or async functions just like in original Elmish, all errors have unknown type. Success and failure handlers are both optional, if failure handler is provided an error will be caught with try/catch statement.
• railway-effects - this approach embraces result type and railway oriented programming, effects are created from functions that return values of Result or AsyncResult types provided by ts-railway package, all errors are properly typed. Success handler is optional, but failure hanlder is either required or prohibited (when result error type is never). Despite this approach is quite handy for enforcing domain error handling, it has some catches too.

Then just add ts-elmish packages to your project:

• basic-effects with react/react-native:

  npm i @ts-elmish/core @ts-elmish/react @ts-elmish/basic-effects
  

• railway-effects with react/react-native:

  npm i @ts-elmish/core @ts-elmish/react @ts-elmish/railway-effects ts-railway
  

• basic-effects with mithril:

  npm i @ts-elmish/core @ts-elmish/mithril @ts-elmish/basic-effects
  

• railway-effects with mithril:

  npm i @ts-elmish/core @ts-elmish/mithril @ts-elmish/railway-effects ts-railway
  

Useful generic purpose modules:

• pipe-ts - handy for combining multiple result-returning functions into one
• eslint-plugin-functional - an essential eslint plugin for writing typescript in functional and immutable way
• react-native-promise-rejection-utils - global unhandled promise rejection tracker for react-native

Basic example

import m, { Component } from 'mithril'
import { ElmishAttrs, createElmishRootComponent } from '@ts-elmish/mithril'
import { Effect } from '@ts-elmish/basic-effects'

type State = {
  readonly count: number
}

type Action = 'increment' | 'decrement'

const init = (): State => {
  return { count: 0 }
}

const update = ({ count }: State, action: Action): State => {
  switch (action) {
    case 'increment':
      return { count: count + 1 }

    case 'decrement':
      return { count: count - 1 }
  }
}

const Counter: Component<ElmishAttrs<State, Action>> = {
  view: ({ attrs: { count, dispatch } }) =>
    m('div', [
      m('div', count),
      m('button', { onclick: () => dispatch('increment') }, '+'),
      m('button', { onclick: () => dispatch('decrement') }, '-')
    ])
}

const App = createElmishRootComponent({
  init: () => [init(), Effect.none<Action>()],
  update: (state, action) => [update(state, action), Effect.none()],
  view: Counter
})

m.mount(document.body, {
  view: () => m(App, {})
})

Learning ts-elmish

Due to small size it is worth just to look at the code. Also there is a basic and advanced examples.

Links

• Elmish docs and The Elmish Book - useful sources for learning <i>elmish ideology</i>. Almost everything applies to ts-elmish too, the main difference is that subscriptions are out of scope for ts-elmish - just use view layer capabilities for listening to events (e.g. useEffect hook in react).
• Railway oriented programming - introduction to ROP.
• Against Railway-Oriented Programming - reasons to avoid ROP.