Nchantjs NPM | npm.io

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 connect function:

    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)

@infinitebrahmanuniverse/nolb-nc @everything-registry/sub-chunk-2251 @zalastax/nolb-nc

1.1.1

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago