Vue template-parserを作っている話

vue-template-parserを作っている話
s1240075 棗
光幹

自己紹介
名前：棗光幹
大学：会津大学学部２年（24期）
好きな技術：Web
好きな言語：Golang, JavaScript
SNS：natsumen
マイブーム：うまるちゃん、言語処理系

目次
1. vue-template-parserって？
2. 動機
3. 中身について
4. まとめ

vue-template-parserって？
● .vueファイルをパースするライブラリ
● vue用パーサコンビネータ
● JavaScript実装
● まだ途中です

vue-template-parserって？
● .vueファイルをパースするライブラリ
● vue用パーサコンビネータ
● JavaScript実装
● まだ途中です
● 進捗はまだ温まってないです。

動機
● アルバイトで少々Vue.jsを書いてた。
● vueのVSCode pluginを書きたかった。
● 既存vueのparserを使いたかったが,いい感じのがなかった。
● ので、自作しよう。

中身について
● template部分 -> htmlparser2 で実装
● script部分 -> babylon で実装
● style部分 -> reworkcss/css で実装 ?(未定)

中身について
● template部分 -> htmlparser2 で実装
● script部分 -> babylon で実装
● style部分 -> reworkcss/css で実装 ?(未定)
目標！
templateとscript部分を依存関係含めASTの構造に
直せるようにする。

tempalte部分
● メインでhtmlparser2を利用。
● htmlparser2の結果をさらに自分で解析していく。
● htmlparser2は、タグ構造なら（たぶん）なんでもよしなにパースしてくれる。

htmlparser2
こんな感じでタグがパースされる。
これをscriptのデータとひも付けたり
する。で、その途中。

script部分
● メインでbabylonを利用。
● パースできないものがあったら、随時自実装。

babylonとは
● webフロントでおなじみのBabelの内部で利用されている
JavaScriptパーサー。
JS parser AST
generato
r
JS
traverser
AST

babylonとは
● webフロントでおなじみBabelの内部で利用されている
JavaScriptパーサー。
JS babylon AST
generato
r
JS
traverser
AST

babylon便利だ、楽しいな！
基本はこの２つのみ。
babylon.parser(code, [option])
babylon.parserExpression(code, [option])
返り値は Babel AST formatというオブジェクト。
babel-log（ライブラリ）とかで見れる。

fileやmoduleなど
形式の指定。
JSXなどなどもパ
ースできる。

結構長い。
5*5+(4-2)*2+9 で 452行分いく。
ASTのNodeの情報 Nodeの位置とかト
ークンの情報
(より細かい)

bindingする変数や関数、コンポーネントを
htmlparser2のtreeとひも付ける。

bindingする変数や関数、コンポーネントを
htmlのtreeとひも付ける。
そんな感じで依存関係をもたせた
templateとscriptの二つのASTオブジ
ェクトの入った配列を返す。

これから
● とりあえず、ファイル一つパースできるように。
● pug(元jade)対応とかcss対応。
● 依存関係を拾う。（子と親コンポーネントとか）
● もはや、自作でパーサー書いてみたり。

まとめ
● htmlparser2はけっこうよしなにやってくれる。
● babylon便利。
● BabelなどJSのトランスパイル文化は楽しい。
● 言語処理系は楽しい。

ご清聴ありがとう
ございました！

Vue template-parserを作っている話

More Related Content

What's hot (20)

More from Koki Natsume (9)

Vue template-parserを作っている話