Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to help your editor love your vue component library

30 views

Published on

For web developers, one of the best things about Vue is its flexibility. Various ways to develop components, powerful mixins, and the freedom to choose a build system are just some of the advantages of Vue.

In this talk I'll look at Vue component libraries from our perspective as IDE developers and discuss some challenges we're facing with such flexibility. How to find all the available components in a library? What types their props have? Where are the docs? These are just some of the questions we have to answer.

Finally, I'll tell the story of how we ended up creating web-types, a format for describing component libraries. I'll demonstrate how it can help editors and documentation generators and how to use it.

Published in: Software
  • Be the first to comment

  • Be the first to like this

How to help your editor love your vue component library

  1. 1. How to help your editor love your Vue component library — Piotr Tomiak, Senior Software Developer at JetBrains December 7, 2019
  2. 2. Piotr Tomiak WebStorm Senior Software Developer JetBrains piotr.tomiak@jetbrains.com @PiotrekTomiak Hello —
  3. 3. Dev tooling —
  4. 4. Dev tooling —
  5. 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. 6. What it takes to support language or framework? — • Syntax highlight • Code formatting • Code completion • Documentation • Inspections • Quick fixes • Refactorings
  7. 7. Syntax highlighting — Basic highlighting
  8. 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. 9. Syntax highlighting — Basic highlighting Semantic highlighting
  10. 10. Where is the model needed? — • Syntax highlight • Code formatting • Code completion • Documentation • Inspections • Quick fixes • Refactorings
  11. 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. 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. 13. Analysis of source code — • Index all source files • Parse the file • Create stubs • Store results in various indexes • Skip irrelevant library files
  14. 14. Stub creation —
  15. 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. 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. 17. Existing solutions for Vue — VSCode Vetur metadata: • tags • attributes • description • type tags.json attributes.json
  18. 18. Existing solutions for Vue — Quasar - QAjaxBar.json VueTypes - a proposition for a standard VueDoc Parser - example output
  19. 19. New standard? — https://xkcd.com/927/
  20. 20. Goals — • Open-source • Inclusive: IDEs, linters, documentation generators, … • Universal: Vue, Web Components, HTML, CSS, … • Easy to create and consume • Up to date
  21. 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. 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. 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. 24. Future — • Vue Mixins • CSS support • Regular HTML attributes • Web Components
  25. 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. 26. Thank you!

×