feat(IDE) generate web-types (helper file for WebStorm)

ui/build/build.utils.js

@@ -2,7 +2,8 @@ const
   fs = require('fs'),
   path = require('path'),
   zlib = require('zlib'),
-  { green, blue, red, cyan } = require('chalk')
+  { green, blue, red, cyan } = require('chalk'),
+  kebabRegex = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g
 
 function getSize (code) {
   return (code.length / 1024).toFixed(2) + 'kb'
@@ -64,3 +65,10 @@ module.exports.rollupQuasarUMD = function (config = {}) {
     }
   }
 }
+
+module.exports.kebabCase = function (str) {
+  return str.replace(
+    kebabRegex,
+    match => '-' + match.toLowerCase()
+  ).substring(1)
+}

ui/build/build.vetur.js

@@ -2,16 +2,8 @@ const
   path = require('path')
 
 const
-  { logError, writeFile } = require('./build.utils'),
-  resolve = file => path.resolve(__dirname, '../dist/vetur', file),
-  kebabRegex = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g
-
-function kebabCase (str) {
-  return str.replace(
-    kebabRegex,
-    match => '-' + match.toLowerCase()
-  ).substring(1)
-}
+  { logError, writeFile, kebabCase } = require('./build.utils'),
+  resolve = file => path.resolve(__dirname, '../dist/vetur', file)
 
 function getTags (data) {
   const tags = {}

ui/build/build.web-types.js

@@ -0,0 +1,156 @@
+const
+  path = require('path'),
+  fs = require('fs'),
+  { logError, writeFile, kebabCase } = require('./build.utils')
+
+function resolveType ({ type, values }) {
+  // TODO transform Object with "values" and arrays Objects with values
+  if (Array.isArray(type)) {
+    return type.map(type => resolveType({ type })).join('|')
+  }
+  if (type === 'String' && values) {
+    return values.map(v => v === null ? 'null' : `'${v}'`).join('|')
+  }
+  if (['Any', 'String', 'Boolean', 'Number', 'Object'].includes(type)) {
+    return type.toLowerCase()
+  }
+  if (type === 'Array') {
+    return 'any[]'
+  }
+  return type
+}
+
+function getDescription (propApi) {
+  return propApi.examples
+    ? propApi.desc + '\n\nExamples:\n' + propApi.examples.join('\n')
+    : propApi.desc
+}
+
+module.exports.generate = function (data) {
+  try {
+    const webtypes = JSON.stringify({
+      $schema: '',
+      framework: 'vue',
+      name: 'quasar',
+      version: process.env.VERSION || require('../package.json').version,
+      contributions: {
+        html: {
+          'types-syntax': 'typescript',
+          tags: data.components.map(({ api: { events, props, scopedSlots, slots }, name }) => {
+            let result = {
+              name,
+              source: {
+                module: 'quasar',
+                symbol: name
+              },
+              attributes: props && Object.entries(props).map(([name, propApi]) => {
+                let result = {
+                  name,
+                  value: {
+                    kind: 'expression',
+                    type: resolveType(propApi)
+                  },
+                  description: getDescription(propApi),
+                  'doc-url': 'https://quasar.dev'
+                }
+                if (propApi.required) {
+                  result.required = true
+                }
+                if (propApi.default) {
+                  result.default = JSON.stringify(propApi.default)
+                }
+                if (propApi.type === 'Boolean') {
+                  // Deprecated but used for compatibility with WebStorm 2019.2.
+                  result.type = 'boolean'
+                }
+                return result
+              }),
+              events: events && Object.entries(events).map(([name, eventApi]) => ({
+                name,
+                arguments: eventApi.params && Object.entries(eventApi.params).map(([paramName, paramApi]) => ({
+                  name: paramName,
+                  type: resolveType(paramApi),
+                  description: getDescription(paramApi),
+                  'doc-url': 'https://quasar.dev'
+                })),
+                description: getDescription(eventApi),
+                'doc-url': 'https://quasar.dev'
+              })),
+              slots: slots && Object.entries(slots).map(([name, slotApi]) => ({
+                name,
+                description: getDescription(slotApi),
+                'doc-url': 'https://quasar.dev'
+              })),
+              'vue-scoped-slots': scopedSlots && Object.entries(scopedSlots).map(([name, slotApi]) => ({
+                name,
+                properties: slotApi.scope && Object.entries(slotApi.scope).map(([name, api]) => ({
+                  name,
+                  type: resolveType(api),
+                  description: getDescription(api),
+                  'doc-url': 'https://quasar.dev'
+                })),
+                description: getDescription(slotApi),
+                'doc-url': 'https://quasar.dev'
+              })),
+              description: `${name} - Quasar component`,
+              'doc-url': 'https://quasar.dev'
+            }
+            if (props && props.value && ((events && events.input) || props.value.category === 'model')) {
+              result['vue-model'] = {
+                prop: 'value',
+                event: 'input'
+              }
+            }
+            Object.entries(result).forEach(([key, v]) => {
+              if (!v) {
+                delete result[key]
+              }
+            })
+
+            return result
+          }),
+          attributes: data.directives.map(({ name, api: { modifiers, value } }) => {
+            let valueType = value.type
+            let result = {
+              name: 'v-' + kebabCase(name),
+              source: {
+                module: 'quasar',
+                symbol: name
+              },
+              required: false, // Directive is never required
+              description: `${name} - Quasar directive`,
+              'doc-url': 'https://quasar.dev'
+            }
+            if (modifiers) {
+              result['vue-modifiers'] = Object.entries(modifiers).map(([name, api]) => ({
+                name,
+                description: getDescription(api),
+                'doc-url': 'https://quasar.dev'
+              }))
+            }
+            if (valueType !== 'Boolean') {
+              result.value = {
+                kind: 'expression',
+                type: resolveType(value)
+              }
+            }
+            return result
+          })
+        }
+      }
+    }, null, 2)
+    let webTypesPath = path.resolve(__dirname, '../dist/web-types')
+
+    if (!fs.existsSync(webTypesPath)) {
+      fs.mkdirSync(webTypesPath)
+    }
+    writeFile(path.resolve(webTypesPath, 'web-types.json'), webtypes)
+  }
+  catch (err) {
+    logError(`build.web-types.js: something went wrong...`)
+    console.log()
+    console.error(err)
+    console.log()
+    process.exit(1)
+  }
+}

ui/build/script.build.javascript.js

@@ -95,6 +95,7 @@ require('./build.api').generate()
     require('./build.vetur').generate(data)
     require('./build.lang-index').generate()
     require('./build.types').generate(data)
+    require('./build.web-types').generate(data)
   })
 
 /**

ui/package.json

@@ -106,6 +106,7 @@
     "tags": "dist/vetur/quasar-tags.json",
     "attributes": "dist/vetur/quasar-attributes.json"
   },
+  "web-types": "dist/web-types/web-types.json",
   "engines": {
     "node": ">= 8.9.0",
     "npm": ">= 5.6.0",