SlideShare a Scribd company logo
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!

More Related Content

What's hot

Get Started with Zend Framework 2
Get Started with Zend Framework 2Get Started with Zend Framework 2
Get Started with Zend Framework 2
Mindfire Solutions
 
Kandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalKandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_final
NAVER D2
 
Cordova iOS Native Plugin Development
Cordova iOS Native Plugin DevelopmentCordova iOS Native Plugin Development
Cordova iOS Native Plugin Development
Josue Bustos
 
前端網頁自動測試
前端網頁自動測試 前端網頁自動測試
前端網頁自動測試
政億 林
 
Testing PHP with Codeception
Testing PHP with CodeceptionTesting PHP with Codeception
Testing PHP with Codeception
John Paul Ada
 
Composer for Magento 1.x and Magento 2
Composer for Magento 1.x and Magento 2Composer for Magento 1.x and Magento 2
Composer for Magento 1.x and Magento 2
Sergii Shymko
 
OSGi Feature Model - Where Art Thou - David Bosschaert (Adobe)
OSGi Feature Model - Where Art Thou - David Bosschaert (Adobe)OSGi Feature Model - Where Art Thou - David Bosschaert (Adobe)
OSGi Feature Model - Where Art Thou - David Bosschaert (Adobe)
mfrancis
 
Apigility introduction v2 (glasgow php)
Apigility introduction v2 (glasgow php)Apigility introduction v2 (glasgow php)
Apigility introduction v2 (glasgow php)
Engineor
 
Intro to JavaScript Tooling in Visual Studio Code
Intro to JavaScript Tooling in Visual Studio CodeIntro to JavaScript Tooling in Visual Studio Code
Intro to JavaScript Tooling in Visual Studio Code
ColdFusionConference
 
ElggCamp Santiago - Dev Edition
ElggCamp Santiago - Dev EditionElggCamp Santiago - Dev Edition
ElggCamp Santiago - Dev Edition
Brett Profitt
 
Test Automation with Twist and Sahi
Test Automation with Twist and SahiTest Automation with Twist and Sahi
Test Automation with Twist and Sahi
ericjamesblackburn
 
Extra aem development tools by Justin Edelson
Extra aem development tools by Justin EdelsonExtra aem development tools by Justin Edelson
Extra aem development tools by Justin Edelson
AEM HUB
 
Pde build
Pde buildPde build
Pde build
Owen Ou
 
Visual Regression Testing: In search of an Ember solution
Visual Regression Testing: In search of an Ember solutionVisual Regression Testing: In search of an Ember solution
Visual Regression Testing: In search of an Ember solution
Lisa Backer
 
Bundle your modules with Webpack
Bundle your modules with WebpackBundle your modules with Webpack
Bundle your modules with Webpack
Jake Peyser
 
Maven
MavenMaven
Maven
MavenMaven
Play Framework: The Basics
Play Framework: The BasicsPlay Framework: The Basics
Play Framework: The Basics
Philip Langer
 
Webpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ StepsWebpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ Steps
Grgur Grisogono
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with Webpack
Thiago Temple
 

What's hot (20)

Get Started with Zend Framework 2
Get Started with Zend Framework 2Get Started with Zend Framework 2
Get Started with Zend Framework 2
 
Kandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalKandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_final
 
Cordova iOS Native Plugin Development
Cordova iOS Native Plugin DevelopmentCordova iOS Native Plugin Development
Cordova iOS Native Plugin Development
 
前端網頁自動測試
前端網頁自動測試 前端網頁自動測試
前端網頁自動測試
 
Testing PHP with Codeception
Testing PHP with CodeceptionTesting PHP with Codeception
Testing PHP with Codeception
 
Composer for Magento 1.x and Magento 2
Composer for Magento 1.x and Magento 2Composer for Magento 1.x and Magento 2
Composer for Magento 1.x and Magento 2
 
OSGi Feature Model - Where Art Thou - David Bosschaert (Adobe)
OSGi Feature Model - Where Art Thou - David Bosschaert (Adobe)OSGi Feature Model - Where Art Thou - David Bosschaert (Adobe)
OSGi Feature Model - Where Art Thou - David Bosschaert (Adobe)
 
Apigility introduction v2 (glasgow php)
Apigility introduction v2 (glasgow php)Apigility introduction v2 (glasgow php)
Apigility introduction v2 (glasgow php)
 
Intro to JavaScript Tooling in Visual Studio Code
Intro to JavaScript Tooling in Visual Studio CodeIntro to JavaScript Tooling in Visual Studio Code
Intro to JavaScript Tooling in Visual Studio Code
 
ElggCamp Santiago - Dev Edition
ElggCamp Santiago - Dev EditionElggCamp Santiago - Dev Edition
ElggCamp Santiago - Dev Edition
 
Test Automation with Twist and Sahi
Test Automation with Twist and SahiTest Automation with Twist and Sahi
Test Automation with Twist and Sahi
 
Extra aem development tools by Justin Edelson
Extra aem development tools by Justin EdelsonExtra aem development tools by Justin Edelson
Extra aem development tools by Justin Edelson
 
Pde build
Pde buildPde build
Pde build
 
Visual Regression Testing: In search of an Ember solution
Visual Regression Testing: In search of an Ember solutionVisual Regression Testing: In search of an Ember solution
Visual Regression Testing: In search of an Ember solution
 
Bundle your modules with Webpack
Bundle your modules with WebpackBundle your modules with Webpack
Bundle your modules with Webpack
 
Maven
MavenMaven
Maven
 
Maven
MavenMaven
Maven
 
Play Framework: The Basics
Play Framework: The BasicsPlay Framework: The Basics
Play Framework: The Basics
 
Webpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ StepsWebpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ Steps
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with Webpack
 

Similar to How to help your editor love your vue component library

Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Anupam Ranku
 
MVC 6 - the new unified Web programming model
MVC 6 - the new unified Web programming modelMVC 6 - the new unified Web programming model
MVC 6 - the new unified Web programming model
Alex Thissen
 
Apache DeltaSpike the CDI toolbox
Apache DeltaSpike the CDI toolboxApache DeltaSpike the CDI toolbox
Apache DeltaSpike the CDI toolbox
Antoine Sabot-Durand
 
Apache DeltaSpike: The CDI Toolbox
Apache DeltaSpike: The CDI ToolboxApache DeltaSpike: The CDI Toolbox
Apache DeltaSpike: The CDI Toolbox
Virtual JBoss User Group
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
Lucas Jellema
 
HOW TO DRONE.IO IN CI/CD WORLD
HOW TO DRONE.IO IN CI/CD WORLDHOW TO DRONE.IO IN CI/CD WORLD
HOW TO DRONE.IO IN CI/CD WORLD
Aleksandr Maklakov
 
ASP.NET 5 Overview - Post Build 2015
ASP.NET 5 Overview - Post Build 2015ASP.NET 5 Overview - Post Build 2015
ASP.NET 5 Overview - Post Build 2015
Shahed Chowdhuri
 
Dev Ops
Dev OpsDev Ops
Dev Ops
Narayana B
 
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit SoftwaretestsEffizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
DECK36
 
ASP.NET MVC 3
ASP.NET MVC 3ASP.NET MVC 3
ASP.NET MVC 3
Buu Nguyen
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
jonknapp
 
2011 NetUG HH: ASP.NET MVC & HTML 5
2011 NetUG HH: ASP.NET MVC & HTML 52011 NetUG HH: ASP.NET MVC & HTML 5
2011 NetUG HH: ASP.NET MVC & HTML 5
Daniel Fisher
 
Introduction To Code Igniter
Introduction To Code IgniterIntroduction To Code Igniter
Introduction To Code Igniter
Amzad Hossain
 
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
Bastian Feder
 
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvpZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
Chalermpon Areepong
 
Red Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Red Hat JBoss BRMS and BPMS Workbench and Rich Client TechnologyRed Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Red Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Mark Proctor
 
DevNet Associate : Python introduction
DevNet Associate : Python introductionDevNet Associate : Python introduction
DevNet Associate : Python introduction
Joel W. King
 
JSS build and deployment
JSS build and deploymentJSS build and deployment
JSS build and deployment
David Szöke
 
BMO - Intelligent Projects with Maven
BMO - Intelligent Projects with MavenBMO - Intelligent Projects with Maven
BMO - Intelligent Projects with Maven
Mert Çalışkan
 

Similar to How to help your editor love your vue component library (20)

Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
 
MVC 6 - the new unified Web programming model
MVC 6 - the new unified Web programming modelMVC 6 - the new unified Web programming model
MVC 6 - the new unified Web programming model
 
Apache DeltaSpike the CDI toolbox
Apache DeltaSpike the CDI toolboxApache DeltaSpike the CDI toolbox
Apache DeltaSpike the CDI toolbox
 
Apache DeltaSpike: The CDI Toolbox
Apache DeltaSpike: The CDI ToolboxApache DeltaSpike: The CDI Toolbox
Apache DeltaSpike: The CDI Toolbox
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
 
HOW TO DRONE.IO IN CI/CD WORLD
HOW TO DRONE.IO IN CI/CD WORLDHOW TO DRONE.IO IN CI/CD WORLD
HOW TO DRONE.IO IN CI/CD WORLD
 
ASP.NET 5 Overview - Post Build 2015
ASP.NET 5 Overview - Post Build 2015ASP.NET 5 Overview - Post Build 2015
ASP.NET 5 Overview - Post Build 2015
 
Dev Ops
Dev OpsDev Ops
Dev Ops
 
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit SoftwaretestsEffizientere WordPress-Plugin-Entwicklung mit Softwaretests
Effizientere WordPress-Plugin-Entwicklung mit Softwaretests
 
ASP.NET MVC 3
ASP.NET MVC 3ASP.NET MVC 3
ASP.NET MVC 3
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
 
2011 NetUG HH: ASP.NET MVC & HTML 5
2011 NetUG HH: ASP.NET MVC & HTML 52011 NetUG HH: ASP.NET MVC & HTML 5
2011 NetUG HH: ASP.NET MVC & HTML 5
 
Introduction To Code Igniter
Introduction To Code IgniterIntroduction To Code Igniter
Introduction To Code Igniter
 
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
 
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvpZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
 
Red Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Red Hat JBoss BRMS and BPMS Workbench and Rich Client TechnologyRed Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Red Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
 
DevNet Associate : Python introduction
DevNet Associate : Python introductionDevNet Associate : Python introduction
DevNet Associate : Python introduction
 
JSS build and deployment
JSS build and deploymentJSS build and deployment
JSS build and deployment
 
BMO - Intelligent Projects with Maven
BMO - Intelligent Projects with MavenBMO - Intelligent Projects with Maven
BMO - Intelligent Projects with Maven
 

Recently uploaded

Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
wonyong hwang
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
kalichargn70th171
 
Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.
KrishnaveniMohan1
 
Microsoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptxMicrosoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptx
jrodriguezq3110
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
kalichargn70th171
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
ICS
 
What is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdfWhat is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdf
kalichargn70th171
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
VictoriaMetrics
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
safelyiotech
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
widenerjobeyrl638
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
Paul Brebner
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Peter Caitens
 
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
kalichargn70th171
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Paul Brebner
 

Recently uploaded (20)

Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
 
Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.
 
Microsoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptxMicrosoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptx
 
bgiolcb
bgiolcbbgiolcb
bgiolcb
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
 
What is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdfWhat is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdf
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
 
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
 

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 —
  • 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
  • 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
  • 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
  • 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
  • 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