@ricann/html2vnode

html2vnode

Convert html node to vnode.

Usage

import { toVNode } from 'html2VNode'

// html => <div id="app">html2vnode</div>
const ele = document.querySelector('#app')
toVNode(ele)
// {
//    type: 'div',
//    props: { id: 'app' },
//    children: [
//      {
//        type: Symbol('TEXT'),
//        children: 'html2vnode',
//        props: {}
//      }
//    ]
//  }

🚀 A simple scene, we can use it to take dom snapshot. like these:

import('https://cdn.jsdelivr.net/npm/@ricann/html2vnode@0.1.1/dist/html2vnode.umd.production.min.js')
// Which node you want to take snapshot.
// @param {string} selector
window.html2vnode.shot('html')

Interface

toVNode

interface {
  toVNode(ele: Element): VNode
}

createVNode

interface createVNode {
  (type: VNodeTypes, props: Data | null, children: unknown ): VNode
}

createTextVNode

interface createTextVNode {
  (text: string) : VNode
}

createCommentVNode

interface createCommentVNode {
  (text: string) : VNode
}

VNode

interface VNode {
  type: VNodeTypes;
  props?: Record<string, any> | null;
  children?: NormalizedChildren;
  shapeFlag?: number;
}

Command

TSDX scaffolds your new library inside /src.

To run TSDX, use:

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

To do a one-off build, use npm run build or yarn build.

To run tests, use npm test or yarn test.