Vue の SFC の正しい構文をシュっとブラウザで試せるやつがほしいので作った。
1. Vue の SFC の公式のパーサーを Rollup でブラウザ向けにビルドする。
https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc の parse という関数をそのままでは動かないので Rollup でごにょごにょしてブラウザ向けにビルドする。ビルドしたのがこちら。
Rollup よくわからないので雰囲気でプラグイン突っ込んだり書いたりしたら動いた。vue-next 本家の rollup.config.js が大変参考になった。
2. せっかくなので vue-next を使ってみる、でも TSX を tsc のみでコンパイルしたい。
Vueっぽいツールを作るので、せっかくだから vue-next を使ってみたいと思ったけど、tsc のみで TSX のコンパイルができたらかっこいいなと思ったので、そういうサンプルを探してみる。potato4d さんの https://github.com/potato4d/vue-next-tsx-only-tsc を見つけたので参考にして tsx で書いてみる。できた。この書き方でやると、書き心地がだいぶ React に近くなる気がする。
3. Web Worker でパースができるとかっこいい。
パースなんて重い処理をメインスレッドにさせちゃあかんので、Web Worker 上で動かせたらかっこいい。webpack でバンドルしているので、worker-loader、WorkerPlugin つっこんで Comlink でやったら動いた。
4. まあ便利なんだけど使い所が限られすぎる
よく考えたらあんまり欲しいときがないけど楽しかったのでよし。