picodom

Picodom

Picodom is a 1 KB VDOM builder and patch function.

Try it Online

import { h, patch } from "picodom"

let node

function render(view, withState) {
  patch(node, (node = view(withState)))
}

function view(state) {
  return (
    <div>
      <h1>{state}</h1>
      <input
        autofocus
        type="text"
        value={state}
        oninput={e => render(view, e.target.value)}
      />
    </div>
  )
}

render(view, "Hello!")

Picodom supports keyed updates & lifecycle events — all with no dependencies. Mix it with your favorite state management library or create your own custom view framework.

Installation

Install with npm or Yarn.

npm i picodom

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import { h, app } from "picodom"

Or download directly from unpkg or jsDelivr.

<script src="https://unpkg.com/picodom"></script>

Then find it in window.picodom.

const { h, app } = picodom

We support all ES5-compliant browsers, including Internet Explorer 10 and above.

Usage

Create virtual nodes with the built-in h() function. A virtual node is an object that describes a DOM tree.

const node = h("h1", { id: "title" }, "Hello.")

To create a component, define a function that returns a virtual node.

function AwesomeTitle(text) {
  return h("h1", { class: "awesome title" }, text)
}

Lifecycle

oncreate

Fired after the element is created and attached to the DOM.

oncreate(Element)

onupdate

Fired after the element attributes are updated. This event will fire even if the attributes have not changed.

onupdate(Element, oldProps: Attributes)

onremove

Fired before the element is removed from the DOM. Return a function that takes a remove() function and use it to remove the element asynchronously.

onremove(Element)

patch

Use patch to diff two nodes and update the DOM. Patch returns the patched HTML element.

const element = patch(
  oldNode: VNode,
  newNode,
  container
)

Links

• Twitter
• CodePen
• /r/picodom

License

Picodom is MIT licensed. See LICENSE.