Functional DOM containers based on Starplate and Redux.
stardux makes it easy to create predictable and functional DOM containers.
A Container is a wrapper around a DOM element and its state. State is
represented in objects and expressed in the DOM with ES6 template
notation. Containers use reducers and middleware to transform input
into state. If you are familiar with
redux and reducers then this should be
easy for you. DOM updates are made possible with
starplate and it's internal
patching algorithm built on
IncrementalDOM.
stardux manages an internal Map of containers allowing for container
traversal. Containers are aware of nested (child) containers and are
made available through traversal mechanisms.
$ npm install stardux --saveConsider the following simple DOM container that renders seconds elapsed since the moment it was renderer.
<div id="counter">
Seconds Elapsed: ${ elapsed }
</div>import { createContainer } from 'stardux'
const counter = createContainer(document.querySelector('#counter'))
let elapsed = 0
setInterval(_ => counter.update({elapsed: ++elapsed}), 1000)MIT