Package Exports

picodom
picodom/src

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (picodom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Picodom

Picodom is a 1 KB VDOM 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

License

Picodom is MIT licensed. See LICENSE.

picodom