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.

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!