Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

simple-vdom

0.0.1 • Public • Published

Simple JavaScript Virtual DOM. Compatible with htm.

Installation

# npm 
npm i talentlessguy/vdom
# pnpm 
pnpm i talentlessguy/vdom
# yarn 
yarn add talentlessguy/vdom

Example

Try it yourself

To run the example, clone the repository and write this to command line:

npm run 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.

Code

import { h, render, diff } from 'talentlessguy/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)

API

h - hyperscript function

returns vnode (a plain object)

const el = h('h1', null, 'Hello')
 
console.log(el)
 
/*
{
  tag: 'h1',
  props: null,
  children: 'Hello'
}
*/

renderNode - renders single vnode (created with h)

Converts objects created by h to DOM nodes

const vnode = renderNode(html` <h1>Hello World</h1> `)
 
console.log(vnode)
 
/*
[Object HTMLElement]
*/

render - put vnode to container

render(html` <h1>Hello World</h1> `, document.getElementById('app'))

diff - 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'))

Keywords

none

Install

npm i simple-vdom

DownloadsWeekly Downloads

6

Version

0.0.1

License

MIT

Unpacked Size

7.82 kB

Total Files

6

Last publish

Collaborators

  • avatar