MSG: Message Signal Generator
Exports a single function which takes an object of name -> function pairs and contructs a data structure which can be used to make an Elm Architecture / Redux style app. Inspired by union-type.
295 bytes. No dependencies.
What it does
npm i -S msg
const Route = { modelroute = path; return model }const Select = { modelselected = name; return model }const Saved = { modelsaved = true; return model } const actions = Route Select Saved const Action = console
console
Action //=> trueAction //=> falseMessageprototype //=> trueAction instanceof Message //=> true
What it's for
Define effects
const Effect =
Initialise model
const init = route: '/' selected: localStorage names: 'Johnathan Best' 'Adonai Reynolds' 'Kasandra Ursler' 'Honora Bognár' saved: false
Define the view Import update as render so it doesn't clash with our model update function
const view = yo`<div> <button onclick=>Save</button> <ul> </ul> </div>`
Define flyd streams. Flyd has a good explanation in its README.
const update = actionvalue model ...actionargs const instanceOf = type const message$ = const action$ = const model$ = // Contains the entire state of the applicationconst node$ = // Stream of DOM nodes to patch the document
message$
is short for messageStream. message$
is a function which takes one or zero arguments. If you pass a value to action$
, that becomes the value returned next time message$
is called with no argument.
// => 'example'
The scan
function is like reduce. It returns a new stream based on manipulating the stream passed as its third argument. The second argument is the initial value of the returned stream. Each time something is pushed onto action$
by calling action$( something )
, scan
runs update
and passes it two arguments. 1: model
- the last value passed to model$
. 2: action
- the last value passed to action$
. The value returned by update
becomes the new value of model$
.
const container = document const effect$ =