How to help your editor love your vue component library

1. How to help your editor love your Vue component library — Piotr Tomiak, Senior Software Developer at JetBrains December 7, 2019

2. Piotr Tomiak WebStorm Senior Software Developer JetBrains piotr.tomiak@jetbrains.com @PiotrekTomiak Hello —

3. Dev tooling —

4. Dev tooling —

5. Vue from IDE perspective — Code completion for: HTML tag, Vue directive, it’s modifiers, component property and it’s members; parameter hints and inlay parameter hints.

6. What it takes to support language or framework? — • Syntax highlight • Code formatting • Code completion • Documentation • Inspections • Quick fixes • Refactorings

7. Syntax highlighting — Basic highlighting

8. Syntax highlighting — Basic highlighting XML_NAME XML_EQ XML_ATTRIBUTE_VALUE_START_DELIMITER JS_IDENTIFIER JS_IN_KEYWORD JS_LBRACKET JS_STRING_LITERAL JS_COMMA v-for = ' name in [ "as is” , Tokenized expression

9. Syntax highlighting — Basic highlighting Semantic highlighting

10. Where is the model needed? — • Syntax highlight • Code formatting • Code completion • Documentation • Inspections • Quick fixes • Refactorings

11. Vue project model — Vue global Components Filters Mixins Directives Components Filters Directives Other extensions Plugins Components Filters Mixins Directives Components Filters Directives Other extensions Application Components Filters Mixins Directives Components Filters Directives Other extensionsPlugins Components Components Filters Mixins Directives Components Filters Directives Other extensions Other extensions

12. Finding available filters — Vue.mixin({ filters: { globalMixinFilter(p: number | {}): boolean { return p == 12 } }, mixins: [recursiveMixin] }) Example of mixin declaration Code completion for a filter

13. Analysis of source code — • Index all source files • Parse the file • Create stubs • Store results in various indexes • Skip irrelevant library files

14. Stub creation —

15. Analysis of libraries — • Perform static analysis as with source code • Run library and extract runtime information • Run library, extract information and combine with static analysis

16. TypeScript Definition Files — • .d.ts file specifies library API contract • d.ts file hides implementation details and allow to treat library as a blackbox • custom library typings available from `@types` NPM namespace // Generic BvEvent Object export interface BvEvent { readonly type: string readonly cancelable: boolean readonly nativeEvent: any readonly target: any readonly relatedTarget: any readonly defaultPrevented: boolean readonly vueTarget: Vue | Component | null readonly componentId: string | null preventDefault: () => void // Catch all [key: string]: any } // Vue prototype augments import './vue-injections' // BvConfig Plugin export * from './bv-config' // Components/Plugins export * from './components' // Directives/Plugins export * from './directives' declare const BootstrapVue: BootstrapVuePlugin export default BootstrapVue export interface BootstrapVuePlugin extends BvPlugin { setConfig: (config: BvConfigOptions) => void }

17. Existing solutions for Vue — VSCode Vetur metadata: • tags • attributes • description • type tags.json attributes.json

18. Existing solutions for Vue — Quasar - QAjaxBar.json VueTypes - a proposition for a standard VueDoc Parser - example output

19. New standard? — https://xkcd.com/927/

20. Goals — • Open-source • Inclusive: IDEs, linters, documentation generators, … • Universal: Vue, Web Components, HTML, CSS, … • Easy to create and consume • Up to date

21. Web-types — • JSON file specifies library contributions to a particular web framework • Custom library typings available from `@web-types` NPM namespace • Applicable to local projects and private libraries • Schema available on SchemaStore (automatic support for web-types.json files)

22. Web-types in use — • Bundled: • Bootstrap-vue -   exemplary support • Quasar framework • Vuetify • Available through @web-types • Vue Bootstrap-vue web-types with <b-alert> component metadata

23. Web-types capabilities — • General • Documentation markup - HTML/ markdown/plain text • Source navigation • Types syntax - TypeScript • Vue • Component • input props and their values • slots • events • model • Directive • value • argument • modifiers • Filters

24. Future — • Vue Mixins • CSS support • Regular HTML attributes • Web Components

25. Get involved — • Contribute web-types to your favourite library • PR to @web-types namespace in web-types GitHub repo • PR to bundle with the library in library’s GitHub repo • Add support for web-types   to your favourite documentation generator • PR to improve web-types schema https://github.com/JetBrains/web-types

26. Thank you!