bouzuya/boajs-vdom 0.1.1 のことを書く。変更点は initial commit...0.1.1 を参照。

bouzuya/boajs-vdom は Matt-Esch/virtual-dom およびそれから HTML などに変換する npm package をまとめたものだ。bouzuya/boajs-vdom は bouzuya/boajs-handler-dom などに使われている。

bouzuya/boajs-vdom をつくる以前は個別に package を npm install していた。 virtual-dom / vdom-to-html / vdom-parser などがそうだ。しかし一括で npm install できるほうがうれしい。以前は diff / patch などの boilerplate code を書いていた。これもよく使うものを用意しておくほうがうれしい。TypeScript から使うとまともな型定義がない。npm install で型定義までほしい。これらの要望を解決するためにつくった。まとめると次のとおりだ。

• 個別 npm package を一括 npm install したい
• よく使うもの関数が欲しい
• .d.ts も npm で欲しい

bouzuya/boajs-vdom の実装は TypeScript で Matt-Esch/virtual-dom などの各種 npm package をまとめただけだ。型定義は上記の目的のために独自のもので wrap している。

今回の npm package 化にあわせて vdom-parser を vdom-virtualize に置き換えている点だ。bouzuya/rally-rxjs では vdom-parser を使っていたが、DOMParser の存在しない Node.js 環境などでも参照してしまうので test する際などに邪魔だったので置き換えた。置き換えにあたっては、以前まとめた『Matt-Esch/virtual-dom を変換する npm package - Qiita』を活用している。

bouzuya/boajs-vdom の API は次のとおりだ。

• create ... VDOM を構築するための関数 (virtual-dom の h に相当)
• VDOM ... create により構築されるもの (virtual-dom の VTree に相当)
• DOM ... DOM 向けの render (diff / patch) をまとめたもの
  • init ... DOM 向けの Render を構築するための関数 (vdom-virtualize に相当)
  • Render ... DOM 向けの render を行う関数 (virtual-dom の diff / patch に相当)
  • RDOM ... DOM 向けの Render の結果 (Element に相当)
• HTML ... HTML 向けの render をまとめたもの
  • init ... HTML 向けの Render を構築するための関数
  • Render ... HTML 向けの render を行う関数 (vdom-to-html の renderToHTML に相当)
  • HTML ... HTML 向けの Render の結果 (HTML を表す string)

使いかたは bouzuya/boajs-handler-dom の実例を見るか README を見るなどしてほしい。Source code を読むほうが早いかもしれない。