sme-vdom

sme-vdom

a simple virtual dom lib

start 👾

• install

npm i sme-vdom

• usage

import VirtualDom from 'sme-vdom'

const newDom = {
  tag: 'div',
  children: [
    {
      tag: 'h1',
      className: 'header',
      style: 'color: #7d7df1; padding-left: 16px;',
      text: 'Hii ~'
    },
    {
      tag: 'section',
      className: 'content',
      style: 'color: #606c76;  padding-left: 16px;',
      text: 'Hallo, vdom content ~~',
      children: [
        {
          tag: 'p',
          className: 'p1',
          text: 'too young'
        },
        {
          tag: 'p',
          className: 'p2',
          text: 'some time nativeeee'
        }
      ]
    },
    {
      tag: 'footer',
      style: 'margin: 20px 16px;',
      text: '@power by hwen <[e-mail]>'
    },
    {
      // tag 可缺省，默认为 div 标签
      style: 'color: #606c76;  padding-left: 16px;',
      text: '== (○´･д･)ﾉ 暴力膜不可取 =='
    }
  ]
}

const tree = new VirtualDom(newDom)
const $dom = tree.render()
const $app = document.querySelector('#app')
$app.replaceWith($dom)

live demo 🤓

demooooo

develop 🤕

npm i

npm run dev

open http://localhost:8080/

• build with webpack

npm run build

• build with rollup

npm run build:rollup

refrence 🐱‍

inspired by simple-virtual-dom

Contributors

Thanks goes to these wonderful people (emoji key):

hwen 🤔 💻 🎨 📖 💡