emit dom views
npm install @emit-js/emit @emit-js/view
const emit = require("@emit-js/emit")()
require("@emit-js/view")(emit)
First create your view composer:
module.exports = function(emit) {
emit.view("myView", { render, update })
}
function render() {
return document.createElement("DIV")
}
function update(arg, prop) {
arg.element.innerHTML = arg.value
}
Then use it:
require("./myView")(emit)
emit.myView() // `render` element
emit.myView({ value: "hello" }) // `update` element
By default, the view call finds the element id from props:
emit.myView("myId") // `render` element to #myId
emit.myView("myId") // `update` element if element returned
You may also specify a selector:
emit.myView({ selector: "#myId" }) // `render` element to #myId
Or provide the element to replace directly:
emit.myView({ element: document.getElementById("myId") })
If an element already exists and has content, the update
function is called instead of the inital render
.
The emit argument to the update
function includes an ssr: true
option when in SSR mode.
Commonly we append the view name to the prop
array and pass the concatenated props to sub-events.
Passing those props down produces descriptive element ids and logs that describe the call stack.
Luckily, the view
composer injects the view name into the prop
array automatically, eliminating the view name append step.
Library | Description | URL |
---|---|---|
controller | DOM controller | https://github.com/emit-js/controller#readme |
el | DOM elements | https://github.com/emit-js/el#readme |
render | Server side render | https://github.com/emit-js/render#readme |