nuǝɯ pǝɥsᴉꞁod mǝu
Introducing npm Teams! Private packages + team management tools.Learn more »

hg-virtual-dom

1.0.5 • Public • Published

hg-virtual-dom

An easy-to-use solution to reduce manual DOM manipulation.

中文文档

Usage

import { h, diff, patch, create } from "hg-virtual-dom";
 
// use `h` to create a virtual dom tree
var tree = h("div", { id: "container" }, [
  h("h1", { style: "color: blue" }, ["simple virtal dom"]),
  h("p", ["Hello, virtual-dom"]),
  h("ul", [h("li")])
]);
 
// use `create` generate a real dom from virtual dom.
var root = create(tree);
 
// generate another different virtual dom tree
var newTree = h("div", { id: "container" }, [
  h("h1", { style: "color: red" }, ["simple virtal dom"]),
  h("p", ["Hello, virtual-dom"]),
  h("ul", [h("li"), h("li")])
]);
 
// use `diff` diff two virtual dom trees and get patches
var patches = diff(tree, newTree);
 
// use `patch` apply patches to real dom
patch(root, patches);

You can checkout an another example in example folder.

You should always provide a unique key property for each child in array(just like ReactJS's keyed children) for hg-virtual-dom to reorder children instead of replacing the whole list when perform diff algorithm.

var root = h("ul", [
  h("li", { key: "1" }, ["Jerry"]),
  h("li", { key: "2" }, ["Tomy"]),
  h("li", { key: "3" }, ["Lucy"])
]);
 
var newRoot = h("ul", [
  h("li", { key: "1" }, ["Jerry"]),
  h("li", { key: "2" }, ["Tomy"]),
  h("li", { key: "4" }, ["Lily"]),
  h("li", { key: "3" }, ["Lucy"])
]);
 
// ensure `patches` is minimum
var patches = diff(root, newRoot);

Install

npm i hg-virtual-dom

DownloadsWeekly Downloads

13

Version

1.0.5

License

MIT

Unpacked Size

45.2 kB

Total Files

27

Last publish

Collaborators

  • avatar