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

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

Dev tooling
—

Dev tooling
—

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.

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

Syntax highlighting
—
Basic highlighting

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

Syntax highlighting
—
Basic highlighting
Semantic highlighting

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

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

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

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

Stub creation
—

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

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
}

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

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

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

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

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)

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

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

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

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

Thank you!