Tweet
Tweet

Slide 1

Slide 1 text

TS CompilerがVueを
 喋れても良いじゃないか
 @andoshin11
 2020/12/07
 #v-tokyo


Slide 2

Slide 2 text

Andy (Shin Ando)
 @andoshin11
 ● 最近Open Stackの会社に就職した 
 ● BizDev・PM (@managed k8s team) ≠ Software Developer
 ● 何でもやる人


Slide 3

Slide 3 text

Vue.js x TypeScript
 ● 長い戦いの歴史
 ● thisの推論が改善されたり、Vue.extendの表現力が向上したり 
 ● どれも ブロックの中の話 
 ● の中やComponentを跨いだ型検査は夢の話 
 → 本質的な解決には至らず...


Slide 4

Slide 4 text

Vue.js x TypeScript
 veturのブレイクスルー
 (Thanks to Pine & Katashin)


Slide 5

Slide 5 text

Vue.js x TypeScript
 veturのブレイクスルー
 (Thanks to Pine & Katashin)
 詳しくはこちら → Web猫 - Vue テンプレート内の式の型チェックと解析ができるまで

Slide 6

Slide 6 text

After vetur:
 ● 基本的なInline Template検査が可能に 
 ● 実装はかなり力技...
 ○ Sourcemap generator/consumerの内部開発 
 ○ 独自のSFC -> AST変換(ほぼeslint vue parser?) 
 ● 型検査機構とVSCode拡張の密結合も、応用技術の発展を難しくさせてい た
 ● 以降、Vueコミュニティ全体で凪の時代が続く 


Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Vue 3.0


Slide 9

Slide 9 text

New API


Slide 10

Slide 10 text

New API
 SFCのコンパイル時に
 誰でもSourcemapを
 扱えるように！！


Slide 11

Slide 11 text

SFC meets Sourcemap
 Render Function上のエラーを誰でもVue SFC上にマッピングできるようになった 
 → ECMAScript/TypeScriptをparse・transpile・analyzeするツールで遊 び放題になった


Slide 12

Slide 12 text

Time to work...


Slide 13

Slide 13 text

Step 1
 - Static Analysis -


Slide 14

Slide 14 text

Step 1: Static Analysis


Slide 15

Slide 15 text

Step 1: Static Analysis
 ● TypeScript Compiler API
 ● TS Program(本体)に解析対象のファイルを登録したり、エラーメッセージを 取得するAPI群
 ● tsc はこのラッパー
 ● Language Service HostをinjectしてTS ProgramのOSに対するFile I/Oに介 入できるのが特徴


Slide 16

Slide 16 text

Step 1: Static Analysis


Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

DEMO
 https://youtu.be/XEEBIhLKI2g


Slide 20

Slide 20 text

Step 2
 - Editor Experience -


Slide 21

Slide 21 text

Step 2: Editor Experience
 ● CLIツールによる型解析は行えるようになった 
 ● エディタ上でリアルタイムに型検査を行いたい！補完を行いたい！ 
 → Language Serverにポーティングしよう！


Slide 22

Slide 22 text

Step 2: Editor Experience


Slide 23

Slide 23 text

Step 2: Editor Experience
 ● TypeScript Language Service Plugin 
 ● Language Serviceの各Hooksの処理に介入できる 
 ○ getSemanticDiagnostics
 ○ getCompletionsAtPosition
 ○ getQuickInfoAtPosition
 ○ etc...
 


Slide 24

Slide 24 text

Step 2: Editor Experience


Slide 25

Slide 25 text

Step 2: Editor Experience


Slide 26

Slide 26 text

作った


Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Architecture
 TS ServerとLSH
 の処理にひたすらpatch


Slide 29

Slide 29 text

DEMO
 https://youtu.be/7yvyvo7SDRQ


Slide 30

Slide 30 text

What’s good?
 ● Portable
 ○ エディタ拡張ではなくLanguage Service Pluginなので, vim, Atom, Sublimeといった他のエディタへの応用が容易 
 ● Minimal
 ○ 仮想ドキュメントレジストリの実装含めてVSCode周辺ライブラリにゼ ロ依存
 ○ Core(transformer, analyzer, report)機能がvue-type-auditに良い感じ に切り出されてる


Slide 31

Slide 31 text

Future Plans
 ● 正直、開発を継続するモチベはあまりない...
 ● 仕事でフロントエンドを書く機会が無くなってしまった 
 ○ というかそもそも本業がエンジニアリング -> Bizになった 
 ● Vue界隈のプラクティスが多様化しすぎた 
 ○ Pug
 ○ Custom Block
 ○ Setup block
 ○ Class Component


Slide 32

Slide 32 text

Future Plans
 ● 正直、開発を継続するモチベはあまりない...
 ● 仕事でフロントエンドを書く機会が無くなってしまった 
 ○ というかそもそも本業がエンジニアリング -> Bizになった 
 ● Vue界隈のプラクティスが多様化しすぎた 
 ○ Pug
 ○ Custom Block
 ○ Setup block
 ○ Class Component
 メンテナ募集中です！


Slide 33

Slide 33 text

Related Works
 Rahul(@znck)が似たものをつくってる 


Slide 34

Slide 34 text

Related Works
 veturがよりTS Nativeに寄ってくるかも 


Slide 35

Slide 35 text

Thanks!!