TS CompilerがVueを喋れても良いじゃないか

Event: Vue.js v-tokyo オンライン Meetup#12 (https://vuejs-meetup.connpass.com/event/195236/)
Date: 2020/12/07

DEMO:
- vue-type-audit: https://youtu.be/XEEBIhLKI2g
- vue-ts-plugin: https://youtu.be/7yvyvo7SDRQ

Repository:
- vue-type-audit: https://github.com/andoshin11/vue-type-audit
- vue-ts-plugin: https://github.com/andoshin11/vue-ts-plugin

Transcript

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

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

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

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

5. Vue.js x TypeScript
 veturのブレイクスルー
 (Thanks to Pine & Katashin)
 詳しくはこちら → Web猫 - Vue テンプレート内の式の型チェックと解析ができるまで
6. After vetur:
 • 基本的なInline Template検査が可能に 
 • 実装はかなり力技...
 ◦ Sourcemap generator/consumerの内部開発 
 ◦ 独自のSFC -> AST変換(ほぼeslint vue parser?) 
 • 型検査機構とVSCode拡張の密結合も、応用技術の発展を難しくさせてい た
 • 以降、Vueコミュニティ全体で凪の時代が続く 

8. Vue 3.0

9. New API

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

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

12. Time to work...

13. Step 1
 - Static Analysis -

14. Step 1: Static Analysis

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

16. Step 1: Static Analysis

19. DEMO
 https://youtu.be/XEEBIhLKI2g

20. Step 2
 - Editor Experience -

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

22. Step 2: Editor Experience

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

24. Step 2: Editor Experience

25. Step 2: Editor Experience

26. 作った

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

29. DEMO
 https://youtu.be/7yvyvo7SDRQ

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

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

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

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

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

35. Thanks!!