stage0
Collection of low-level DOM tools for building high performance web interfaces using plain old Vanilla JS.
Eh?
Given a function h
for building and working with the DOM nodes, organize your work however you like and use the full power of the native DOM API.
Benefits
- Zero dependencies, tiny size (570B index.js + 1.04Kb reconcile.js).
- No building, no polyfills required.
- No abstractions. Complete freedom over rendering and updating pipelines. The code will do only what you want it to do.
- Template strings. Produce real DOM node ready for cloning or using directly.
- Performance. This library has all of the good ideas of the domc library, which is already doing pretty well.
Check out the examples
How can I use it?
Let's build a simple counter as an example:
// Create view template.// Mark dynamic references with a #-syntax where needed.const view = h` <div> <h1>#count</h1> <button #down>-</button> <button #up>+</button> </div>` { const root = view // Collect references to dynamic parts const count down up = view const state = count: 0 down { statecount-- } up { statecount++ } const update = countnodeValue = statecount return root} documentbody
A more complex example:
const itemView = h` <tr> <td class="col-md-1">#id</td> <td class="col-md-4"> <a #select>#label</a> </td> <td class="col-md-1"><a #del><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td> <td class="col-md-6"></td> </tr>` { const root = itemView const id label select del = itemView // One time data binding idnodeValue = itemid labelnodeValue = itemlabel select scope del scope // Handcrafted update function, we know exactly what parts of component will change after creation // and what parameters we need to update the view let a = '' a2 b = itemlabel b2 root { a2 = itemid === selected ? 'danger' : '' b2 = itemlabel if a2 !== a a = rootclassName = a2 if b2 !== b b = labelnodeValue = b2 } return root} // Create componentconst node = documentbody // And update the nodeconst selected = 1node
h
const node = h` <div #root> <span>#header</span> <div #content></div> </div>`// will give you a ready to use DOM node, which you can clone or append directly wherever you need // h augments the dom node with a function `collect` which collects and memoizes references to DOM nodes const refs = node// refs === {root: Node, header: Node, content: Node}
setupSyntheticEvent
// will setup a global event handler that will run the handler from nearest predecessor in the DOM tree,// greatly reducing the number of listeners on the page // To attach an event handler to a dom node, simply donode console
reconcile
// Reconcile nodes in the given parent, comparing new and previous data arrays.// Used for displaying node arrays.// Good for arrays with mutable data, because it compares array items directly.
keyed
// Reconcile implementation for keyed collections.// Good for immutable data arrays.
reuseNodes
// Similar to reconcile, with exception that it will not move any node,// doing only updates on all nodes and adding/removing nodes if neccessary.// Used as more performant alternative of reconcile.// Same as reconcile, it's designed for arrays with mutable items.
styles
// Small CSS-in-JS utility for generating classNames and corresponding cssRules in document.headconst s = // s will have s.base === 'base-a'// styles will generate uniq alphabet tokens and append it to the end of className
keyframes
// Utility for generating keyframes, similar to `styles`const s = // s will have s.effect === 'effect-a'