Skip to content

SME-FE/sme-vdom

Repository files navigation

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 <[email protected]>'
    },
    {
      // 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

🤔 💻 🎨 📖 💡