Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

andoshin11
December 08, 2020

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

andoshin11

December 08, 2020
Tweet

More Decks by andoshin11

Other Decks in Technology

Transcript

  1. TS CompilerがVueを

    喋れても良いじゃないか

    @andoshin11

    2020/12/07

    #v-tokyo


    View full-size slide

  2. Andy (Shin Ando)

    @andoshin11

    ● 最近Open Stackの会社に就職した

    ● BizDev・PM (@managed k8s team) ≠
    Software Developer

    ● 何でもやる人


    View full-size slide

  3. Vue.js x TypeScript

    ● 長い戦いの歴史

    ● thisの推論が改善されたり、Vue.extendの表現力が向上したり

    ● どれも ブロックの中の話

    ● の中やComponentを跨いだ型検査は夢の話

    → 本質的な解決には至らず...


    View full-size slide

  4. Vue.js x TypeScript

    veturのブレイクスルー

    (Thanks to Pine & Katashin)


    View full-size slide

  5. Vue.js x TypeScript

    veturのブレイクスルー

    (Thanks to Pine & Katashin)

    詳しくはこちら →
    Web猫 - Vue テンプレート内の式の型チェックと解析ができるまで

    View full-size slide

  6. After vetur:

    ● 基本的なInline Template検査が可能に

    ● 実装はかなり力技...

    ○ Sourcemap generator/consumerの内部開発

    ○ 独自のSFC -> AST変換(ほぼeslint vue parser?)

    ● 型検査機構とVSCode拡張の密結合も、応用技術の発展を難しくさせてい
    た

    ● 以降、Vueコミュニティ全体で凪の時代が続く

    View full-size slide

  7. New API

    SFCのコンパイル時に

    誰でもSourcemapを

    扱えるように!!


    View full-size slide

  8. SFC meets Sourcemap

    Render Function上のエラーを誰でもVue SFC上にマッピングできるようになった

    → ECMAScript/TypeScriptをparse・transpile・analyzeするツールで遊
    び放題になった


    View full-size slide

  9. Time to work...


    View full-size slide

  10. Step 1

    - Static Analysis -


    View full-size slide

  11. Step 1: Static Analysis


    View full-size slide

  12. Step 1: Static Analysis

    ● TypeScript Compiler API

    ● TS Program(本体)に解析対象のファイルを登録したり、エラーメッセージを
    取得するAPI群

    ● tsc はこのラッパー

    ● Language Service HostをinjectしてTS ProgramのOSに対するFile I/Oに介
    入できるのが特徴


    View full-size slide

  13. Step 1: Static Analysis


    View full-size slide

  14. DEMO

    https://youtu.be/XEEBIhLKI2g


    View full-size slide

  15. Step 2

    - Editor Experience -


    View full-size slide

  16. Step 2: Editor Experience

    ● CLIツールによる型解析は行えるようになった

    ● エディタ上でリアルタイムに型検査を行いたい!補完を行いたい!

    → Language Serverにポーティングしよう!


    View full-size slide

  17. Step 2: Editor Experience


    View full-size slide

  18. Step 2: Editor Experience

    ● TypeScript Language Service Plugin

    ● Language Serviceの各Hooksの処理に介入できる

    ○ getSemanticDiagnostics

    ○ getCompletionsAtPosition

    ○ getQuickInfoAtPosition

    ○ etc...


    View full-size slide

  19. Step 2: Editor Experience


    View full-size slide

  20. Step 2: Editor Experience


    View full-size slide

  21. 作った


    View full-size slide

  22. Architecture

    TS ServerとLSH

    の処理にひたすらpatch


    View full-size slide

  23. DEMO

    https://youtu.be/7yvyvo7SDRQ


    View full-size slide

  24. What’s good?

    ● Portable

    ○ エディタ拡張ではなくLanguage Service Pluginなので, vim, Atom,
    Sublimeといった他のエディタへの応用が容易

    ● Minimal

    ○ 仮想ドキュメントレジストリの実装含めてVSCode周辺ライブラリにゼ
    ロ依存

    ○ Core(transformer, analyzer, report)機能がvue-type-auditに良い感じ
    に切り出されてる


    View full-size slide

  25. Future Plans

    ● 正直、開発を継続するモチベはあまりない...

    ● 仕事でフロントエンドを書く機会が無くなってしまった

    ○ というかそもそも本業がエンジニアリング -> Bizになった

    ● Vue界隈のプラクティスが多様化しすぎた

    ○ Pug

    ○ Custom Block

    ○ Setup block

    ○ Class Component


    View full-size slide

  26. Future Plans

    ● 正直、開発を継続するモチベはあまりない...

    ● 仕事でフロントエンドを書く機会が無くなってしまった

    ○ というかそもそも本業がエンジニアリング -> Bizになった

    ● Vue界隈のプラクティスが多様化しすぎた

    ○ Pug

    ○ Custom Block

    ○ Setup block

    ○ Class Component

    メンテナ募集中です!


    View full-size slide

  27. Related Works

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

    View full-size slide

  28. Related Works

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

    View full-size slide