nchantjs
v1.1.1
Published
A teeny html rendering library inspired by the elm language.
Downloads
10
Readme
nchantjs
A teeny library for building web apps. I was inspired by redux, elm, and functional reactive style programming. Its pretty vanilla, but it is intended to be used like elm, in a particular architecture that does not vary.
Docs
!!Work in progress!! https://arlenner.github.io/nchantjs/docs/index
How to use it:
- make a root element to build off of
<!DOCTYPE html>
<!-- ...html stuffs><-->
<body>
<div id="root"></div>
</body>- in your code, define a model
const DEFAULT = { my: 'default', model: 'props' }- nchant uses action-like messages in the simplest possible way. You'll need to define them and then map them to corresponding update functions in an object:
const Inc = '[Msg] Inc'
const Say = '[Msg] Say'
const UMap = {
[Inc]: (model, n) => ({ ...model, value: model.value + n }),
[Say]: (model, what, who) => ({...model, greeting: what +', ' + who})
}- now build a store stream to push changes in your model to the DOM:
const mystore = store(DEFAULT, Umap)- then use the variety of functions provided to build up your html (make sure you make your view functions take a model as a parameter):
const myview = model => div([/*atts*/],[/*els*/])- finally hook it all together using the
connectfunction:
connect(mystore, myview)Awesome! Now it should:
render the supplied component to the dom
react to changes in the dom, re-rendering only the changed portions
But now you want more. Separate files, multiple components - something non-trivial. Use
the metaStore function and provide either a map or an array of key-value-pairs:
//... index.js
import * as fromA from './component-a'
import * as fromB from './component-b'
const rootStore = metaStore([
[fromA.model, fromA.update],
[fromB.model, fromB.update]
//...
])
const rootView = model => div(
[],
[fromA.view(model),
fromB.view(model)
]
)
connect(rootStore, rootView)