Skip to main content Link Menu Expand (external link) Document Search Copy Copied
elm-ts

This module makes available a debugging utility for elm-ts applications running Navigation programs.

elm-ts ships with a Redux DevTool Extension integration, falling back to a simple debugger via standard browser’s console in case the extension is not available.

Note: debugging is to be considered unsafe by design so it should be used only in development.

This is an example of usage:

import { react, cmd } from 'elm-ts'
import { programWithDebugger } from 'elm-ts/lib/Debug/Navigation'
import { Location, program } from 'elm-ts/lib/Navigation'
import { render } from 'react-dom'

type Model = number
type Msg = 'INCREMENT' | 'DECREMENT'

declare function locationToMsg(location: Location): Msg
declare function init(location: Location): [Model, cmd.none]
declare function update(msg: Msg, model: Model): [Model, cmd.Cmd<Msg>]
declare function view(model: Model): react.Html<Msg>

const program = process.NODE_ENV === 'production' ? program : programWithDebugger

const main = program(locationToMsg, init, update, view)

react.run(main, (dom) => render(dom, document.getElementById('app')))

Added in v0.5.3

Table of contents

constructors

programWithDebugger

Adds a debugging capability to a generic Navigation Program.

It tracks every Message dispatched and resulting Model update.

It also lets directly updating the application’s state with a special Message of type:

{
  type: '__DebugUpdateModel__'
  payload: Model
}

or applying a message with:

{
  type: '__DebugApplyMsg__'
  payload: Msg
}

Signature

export declare function programWithDebugger<Model, Msg, Dom>(
  locationToMessage: (location: Location) => Msg,
  init: (location: Location) => [Model, Cmd<Msg>],
  update: (msg: Msg, model: Model) => [Model, Cmd<Msg>],
  view: (model: Model) => Html<Dom, Msg>,
  subscriptions?: (model: Model) => Sub<Msg>
): Program<Model, Msg, Dom>

Added in v0.5.3

programWithDebuggerWithFlags

Same as programWithDebugger() but with Flags that can be passed when the Program is created in order to manage initial values.

Signature

export declare function programWithDebuggerWithFlags<Flags, Model, Msg, Dom>(
  locationToMessage: (location: Location) => Msg,
  init: (flags: Flags) => (location: Location) => [Model, Cmd<Msg>],
  update: (msg: Msg, model: Model) => [Model, Cmd<Msg>],
  view: (model: Model) => Html<Dom, Msg>,
  subscriptions?: (model: Model) => Sub<Msg>
): (flags: Flags) => Program<Model, Msg, Dom>

Added in v0.5.3

programWithDebuggerWithFlagsWithStop

Same as programWithDebuggerWithStop() but with Flags that can be passed when the Program is created in order to manage initial values.

Signature

export declare function programWithDebuggerWithFlagsWithStop<Model, Msg, Dom>(
  stopDebuggerOn: Observable<unknown>
): <Flags, S extends Model, M extends Msg, D extends Dom>(
  locationToMessage: (location: Location) => M,
  init: (flags: Flags) => (location: Location) => [S, Cmd<M>],
  update: (msg: M, model: S) => [S, Cmd<M>],
  view: (model: S) => Html<D, M>,
  subscriptions?: (model: S) => Sub<M>
) => (flags: Flags) => Program<S, M, D>

Added in v0.5.4

programWithDebuggerWithStop

A function that requires an Observable and returns a programWithDebugger() function: the underlying debugger will stop when the Observable emits a value.

Signature

export declare function programWithDebuggerWithStop<Model, Msg, Dom>(
  stopDebuggerOn: Observable<unknown>
): <S extends Model, M extends Msg, D extends Dom>(
  locationToMessage: (location: Location) => M,
  init: (location: Location) => [S, Cmd<M>],
  update: (msg: M, model: S) => [S, Cmd<M>],
  view: (model: S) => Html<D, M>,
  subscriptions?: (model: S) => Sub<M>
) => Program<S, M, D>

Added in v0.5.4