Matt-Esch/virtual-dom を変換する npm package

概要

Matt-Esch/virtual-dom を HTML や DOM と相互変換する npm package についてまとめた。公式の Wiki にも書いてあるが、分類が怪しかったので実装を確認しながら補足した。

キーワード

• VDOM は VTree / VNode / VText のオブジェクト
• DOM は Node / Element のオブジェクト
• HTML は HTML 形式の文字列
• hyperscript は hyperscript 形式の文字列
• DOMParser は DOM Parsing and Serialization で仕様化されているもの。文字列→ DOM変換ができる。

一覧

VDOM -> DOM

• Matt-Esch/virtual-dom (公式)

VDOM -> HTML

• alexmingoia/virtual-dom-stringify
  • DEPRECATED : Use nthtran/vdom-to-html
• nthtran/vdom-to-html

DOM -> VDOM

• bitinn/vdom-parser
  • DOMParser が要求される (もし "HTML -> VDOM" 変換を使わなくても)
• marcelklehr/vdom-virtualize

HTML -> VDOM

• TimBeyer/html-to-vdom
  • fb55/htmlparser2 を HTML parser に利用
• bitinn/vdom-parser
  • DOMParser が要求される ( HTML parser として利用 )
• marcelklehr/vdom-virtualize
  • DOMParser を利用、なければ iframe を利用
• yoshuawuyts/virtual-html
  • callback が要求される (非同期かも?)
  • defunctzombie/node-htmltree を HTML parser として利用

DOM -> hyperscript

• AkeemMcLennon/dom2hscript
  • DOMParser が要求される

HTML -> hyperscript

• AkeemMcLennon/dom2hscript
• unframework/html2hyperscript
  • CLI 。 HTML -> hyperscript
  • fb55/htmlparser2 を HTML parser として利用

補足

この記事は以前 Gist に個人用途で書いたものの転載だ。Gist じゃ活用されなさそうなので。

• https://gist.github.com/bouzuya/369e1b48baeafcde5844