# npm
npm i simple-vdom
# pnpm
pnpm i simple-vdom
# yarn
yarn add simple-vdom
To build the example, clone the repository and write this to command line:
pnpm example
It will build the example. Then, launch a server for example
directory. For example:
serve -s example -p 3000
And open it in a browser.
import { h, render, diff } from 'simple-vdom'
import htm from 'htm'
const html = htm.bind(h)
// Create App component with a prop "counter"
let App = (counter) => html`<p style="${{ fontSize: counter * 2 + 'px' }}">
<span>${counter}</span>
</p>`
// Return component with passed prop
let AppWithProps = App(0)
// Mount first state of app to container
let mount = render(AppWithProps, document.getElementById('app'))
setInterval(() => {
// Generate random number
const newCounter = parseInt(Math.random() * 10)
// Return new state of app with new prop
const newApp = App(newCounter)
// Check for changes and collect patches
const patch = diff(AppWithProps, newApp)
// Replace old app with new one
AppWithProps = newApp
// Mount patched app
mount = patch(mount)
// Replace element
document.getElementById('app').firstChild.replaceWith(patch(mount))
}, 1000)
A hyperscript function that returns vnode (a plain object)
const el = h('h1', null, 'Hello')
console.log(el)
/*
{
tag: 'h1',
props: null,
children: 'Hello'
}
*/
Renders objects created by h
to DOM nodes
const vnode = renderNode(html`<h1>Hello World</h1>`)
console.log(vnode)
/*
[Object HTMLElement]
*/
Append vnode to DOM container.
render(html`<h1>Hello World</h1>`, document.getElementById('app'))
Check for differences in DOM and return patches.
const App = html`<p>Hi</p>`
const newApp = html`<p>Hello</p>`
const dom = diff(App, newApp)
render(dom, document.getElementById('app'))
MIT © v1rtl