Picodom is a 1 KB VDOM builder and patch function.
import { h, patch } from "picodom"
let node
function render(view, withState) {
patch(document.body, 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.
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.
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)
}
Fired after the element is created and attached to the DOM.
oncreate(Element)
Fired after the element attributes are updated. This event will fire even if the attributes have not changed.
onupdate(Element, oldProps: Attributes)
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)
Use patch
to diff two nodes and update the DOM. patch
returns the patched child element.
const element = patch(
parent, // parent HTMLElement to be patched
oldNode, // the old VNode
newNode // the new VNode
)
Picodom is MIT licensed. See LICENSE.