@emit-js/view v0.0.37

@emit-js/view

emit dom views

Install

npm install @emit-js/emit @emit-js/view

Setup

const emit = require("@emit-js/emit")()
require("@emit-js/view")(emit)

Usage

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

Attach to dom

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") })

SSR

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.

Props

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.

Related composers