@koy/architecture v0.6.8

@koy/architecture

An architecture for building koy app in the browser.

Have yuu heard the Elm architecture? Here's the same as that.

Usage

Now, the library export two function -- sandbox and application.

The sandbox function expects an init model、 an view that knows how to render dom by model and an node(Maybe type) that the rendered node should be mounted at.

The application function expects an init model、 an view that knows how to render dom by model、an onUrlChange funciton and an node(Maybe type) that the rendered node should be mounted at.

Note: onUrlChange accepts dispatch and url then you can do anything you want to do when url changed.

example here:

const init = {text: 'koy'}

const view = (dispatch, model) => Element.of(
  'p',
  Element.of('button', {
    onclick: () => dispatch({key: lensProp('text'), value: 'murakami'}),
  }, 'Change Text'),
  Element.of('span', prop('text', model)),
)

// const view = (dispatch, model) => Element.of(
//   'div',
//   Element.of(
//     'p',
//     Element.of('button', {
//       onclick: () => dispatch({key: lensProp('text'), value: 'murakami'}),
//     }, 'Change Text'),
//     Element.of('span', prop('text', model)),
//   ),
//   Element.of(
//     'p',
//     Link({href: '/home'}, 'Home Link'),
//     Element.of('span', concat(prop('url', model), 'url: '))
//   ),
// )

const mRootNode = of(Maybe, document.getElementById('app'))

sandbox(init, view, mRootNode) // open your browser to see what happened

// application(init, view, curry((dispatch, url) => dispatch({
//   key: lensProp('url'),
//   value: url,
// })), mRootNode) // open your browser to see what happened

And you can change the view code or the init code or the onUrlChange funciton or the mRootNode that you'd like to see whatever you want.

Node: The dispatch function can send a message for update model.

Dispatch Message

You can dispatch four kinds of message:

• lensMessage -- format is {key: Lens, value: Data | Function}
• IOMessage -- format is of(IO, ...)
• TaskMessage -- format is {task: Task, error: Function}
• ArrayMessage == format is LensMessage, ..., this is for performance
• replaceMessage -- any message isn't like the above two messages will be think of replace model for some special occasion like routing.

Note: For message, key and task is a reserved words.