t-kinoshita/picodom

1 KB Virtual DOM builder and patch function.

Picodom

Picodom is a 1 KB Virtual DOM builder and patch function.

Try it Online

import { h, patch } from "picodom"

let element, oldNode

function render(node) {
  return element = patch(oldNode, (oldNode = node), element)
}

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 and roll your own custom view framework.

Installation

Download the minified library from a CDN.

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

Then access the exported global.

const { h, patch } = picodom

Or install with npm / Yarn.

npm i picodom

Then build with a bundler, e.g., Browserify, Rollup, Webpack, etc., and import it.

import { h, patch } from "picodom"

API

h

h(
  string | VirtualComponent,
  Attributes,
  Array<VirtualNode> | string
): VirtualNode

VirtualNode

{
  tag: string,
  data: Attributes,
  children: Array<VirtualNode>
}

VirtualComponent

(any, Array<VirtualNode> | string): VirtualNode

Attributes

HTMLAttributes | SVGAttributes | DOMEvents | VirtualDOMEvents

VirtualDOMEvents

oncreate

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

oncreate(Element): void

onupdate

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

onupdate(Element, oldData: Attributes): void

onremove

Fired before the element is removed from the DOM.

onremove(Element): void

patch

patch(
  oldNode: VirtualNode,
  newNode: VirtualNode,
  element: HTMLElement,
  root: HTMLElement | document.body
): HTMLElement

Links

• Twitter
• CodePen
• /r/picodom

License

Picodom is MIT licensed. See LICENSE.