chore: auto generate web-types.json to provide autocomplete for JetBrains IDEs

[vaibhavhrt]

• closes [Feature Request] Support jetbrains web-types standard #7674
• tests added/passed
  Follow up to [WIP] Auto generate web-types.json to provide autocomplete for JetBrains IDEs #7905

[TravisBuddy]

Travis tests have failed

Hey @vaibhavhrt,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

Node.js: 12

View build log

yarn run lint

yarn run v1.15.2
$ lerna run lint --parallel
lerna notice cli v3.16.2
lerna info ci enabled
lerna info Executing command in 4 packages: "yarn run lint"
vuetifyjs.com: $ eslint --ext .js,.vue,.json src -f codeframe
@vuetify/api-generator: $ eslint --ext .js src
@vuetify/kitchen: $ eslint --ext .js,.vue src
vuetify: $ concurrently -n "tsc,tslint,eslint,types" --kill-others-on-fail "tsc --noEmit --pretty" "tslint -p . src/**/*.ts -t verbose" "eslint --ext .js,.ts src" "yarn test:types"
vuetify: [types] $ tsc -p ./types/test/tsconfig.json
vuetify: [tslint] no-use-before-declare is deprecated. Since TypeScript 2.9. Please use the built-in compiler checks instead.
@vuetify/api-generator: /home/travis/build/vuetifyjs/vuetify/packages/api-generator/src/index.js
@vuetify/api-generator:   278:12  error  Strings must use singlequote  quotes
@vuetify/api-generator: ✖ 1 problem (1 error, 0 warnings)
@vuetify/api-generator:   1 error and 0 warnings potentially fixable with the `--fix` option.
@vuetify/api-generator: error Command failed with exit code 1.
@vuetify/api-generator: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run lint exited 1 in '@vuetify/api-generator'
lerna ERR! yarn run lint stdout:
$ eslint --ext .js src

/home/travis/build/vuetifyjs/vuetify/packages/api-generator/src/index.js
  278:12  error  Strings must use singlequote  quotes

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run lint stderr:
error Command failed with exit code 1.

lerna ERR! yarn run lint exited 1 in '@vuetify/api-generator'
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

TravisBuddy Request Identifier: 0597de10-ddec-11e9-8141-977217faf2ea

[codecov]

Codecov Report

Merging #7906 into next will increase coverage by 0.02%.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             next   #7906      +/-   ##
=========================================
+ Coverage   85.77%   85.8%   +0.02%     
=========================================
  Files         334     334              
  Lines        9092    9095       +3     
  Branches     2413    2418       +5     
=========================================
+ Hits         7799    7804       +5     
+ Misses       1205    1203       -2     
  Partials       88      88

Impacted Files	Coverage Δ
packages/vuetify/src/components/VApp/VApp.ts	88.88% <0%> (-11.12%)	⬇️
...uetify/src/components/VDataIterator/VDataFooter.ts	94.33% <0%> (-2.03%)	⬇️
.../vuetify/src/components/VPagination/VPagination.ts	100% <0%> (ø)	⬆️
...es/vuetify/src/components/VSystemBar/VSystemBar.ts	94.11% <0%> (ø)	⬆️
...es/vuetify/src/components/VDataTable/VDataTable.ts	83.75% <0%> (ø)	⬆️
packages/vuetify/src/services/goto/index.ts	92.85% <0%> (ø)	⬆️
.../vuetify/src/components/VSlideGroup/VSlideGroup.ts	84.37% <0%> (ø)	⬆️
...es/vuetify/src/components/VFileInput/VFileInput.ts	82.81% <0%> (ø)	⬆️
packages/vuetify/src/components/VTabs/VTabsBar.ts	96.15% <0%> (ø)	⬆️
...rc/components/VDataTable/VDataTableHeaderMobile.ts	93.75% <0%> (+0.2%)	⬆️
... and 1 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6a80746...7ef2d12. Read the comment docs.

[vaibhavhrt]

@KaelWD take a look please.

[vaibhavhrt]

case of name fixed too, should now match web-types.json from JetBrains.

[vaibhavhrt]

@KaelWD what are we going to do about the schema. Also can you please review.

[vaibhavhrt]

Added the schema, the json generated is not even close to the schema, will investigate later. Meanwhile any help is appreciated, @KaelWD @piotrtomiak

[piotrtomiak]

@vaibhavhrt Here is code, which satisfies the schema when it comes to component attributes and directives:

// Create web-types.json to provide autocomplete in JetBrains IDEs
const webTypes = {
  $schema: "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  framework: 'vue',
  name: 'vuetify',
  version: pkg.version,
  contributions: {
    html: {
      'types-syntax': 'typescript',
      tags: [],
      attributes: []
    },
  },
}

components['$vuetify'] = map['$vuetify']
components['internationalization'] = map['internationalization']

writeApiFile({ ...components, ...directives }, 'dist/api.js')

delete components['$vuetify']
delete components['internationalization']

Object.keys(components).forEach(function (key) {
  const name = capitalize(camelize(key))
  const attributes = transformAttributes(components[key].props)
  const events = components[key].events
  const slots = components[key].slots
  const tag = { name, attributes, events, slots }
  webTypes.contributions.html.tags.push(tag)

  function transformAttributes(attributes) {
    const result = []
    for (let attr of attributes) {
      attr = removeProperties(attr, "source")
      if (attr["type"]) {
        attr["value"] = {
          kind: "expression",
          type: attr["type"]
        }
        if (attr["type"] !== "boolean") {
          delete attr["type"]
        }
      }
      if (attr["default"]) {
        attr["default"] = JSON.stringify(attr["default"])
      }
      result.push(attr)
    }
    return result
  }

  function removeProperties(obj, ...names) {
    const result = {}
    Object.keys(obj).forEach(function(name) {
      if (names.indexOf(name) < 0) {
        result[name] = obj[name]
      }
    })
    return result
  }
})

Object.keys(directives).forEach(function (key) {
  const name = capitalize(camelize(key))
  const directive = { name }
  webTypes.contributions.html.attributes.push(directive)
})

writeJsonFile(webTypes, 'dist/web-types.json')

You need to make similar transformations for slots and events.

[vaibhavhrt]

wow, thanks. I will update it as soon as I find some time.

[piotrtomiak]

I've actually had some time to write other transformations:

// Create web-types.json to provide autocomplete in JetBrains IDEs
const webTypes = {
  $schema: "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  framework: 'vue',
  name: 'vuetify',
  version: pkg.version,
  contributions: {
    html: {
      'types-syntax': 'typescript',
      tags: [],
      attributes: []
    },
  },
}

components['$vuetify'] = map['$vuetify']
components['internationalization'] = map['internationalization']

writeApiFile({...components, ...directives}, 'dist/api.js')

delete components['$vuetify']
delete components['internationalization']

Object.keys(components).forEach(function (key) {
  const name = capitalize(camelize(key))
  const attributes = mapArray(components[key].props, transformAttribute)
  const events = mapArray(components[key].events, transformEvent)
  const slots = mapArray(components[key].slots, transformSlot)
  const tag = {name, attributes, events, slots}
  webTypes.contributions.html.tags.push(tag)

  function mapArray(arr, mapper) {
    return arr !== undefined ? arr.map(mapper) : undefined
  }

  function transformAttribute(attr) {
    attr = copyObject(attr)
    delete attr["source"]
    if (attr["type"]) {
      attr["value"] = {
        kind: "expression",
        type: attr["type"]
      }
      if (attr["type"] !== "boolean") {
        delete attr["type"]
      }
    }
    if (attr["default"] !== undefined) {
      attr["default"] = JSON.stringify(attr["default"])
    }
    delete attr["example"]
    return attr
  }

  function transformEvent(event) {
    event = copyObject(event)
    if (event["value"] !== undefined) {
      let type = event["value"]
      event.arguments = [{
        name: "argument",
        type: typeof type === "string" ? type : JSON.stringify(type)
      }]
    }
    delete event["value"]
    delete event['source']
    return event
  }

  function transformSlot(slot) {
    slot = copyObject(slot)
    if (slot["props"] !== undefined) {
      const props = []
      Object.keys(slot["props"]).forEach(function (name) {
        let type = slot['props'][name]
        props.push({
          name,
          type: typeof type === "string" ? type : JSON.stringify(type)
        })
      })
      slot["vue-properties"] = props
    }
    delete slot["props"]
    delete slot['source']
    return slot
  }

  function copyObject(obj) {
    const result = {}
    if (typeof obj === "string") {
      result["name"] = obj
    } else {
      Object.keys(obj).forEach(function (name) {
        result[name] = obj[name]
      })
    }
    return result
  }
})

Object.keys(directives).forEach(function (key) {
  const name = capitalize(camelize(key))
  const directive = {name}
  webTypes.contributions.html.attributes.push(directive)
})

writeJsonFile(webTypes, 'dist/web-types.json')

The web-types JSON generated with this code is fully compatible with the schema :)

[piotrtomiak]

There is however some polishing required to properly generate types - some of them require processing instead of simple JSON.stringify.

[piotrtomiak]

@vaibhavhrt Any chances for getting this change integrated into build this week?

[vaibhavhrt]

sorry, been too busy with work. I will update my PR tomorrow.

[piotrtomiak]

Sure, thanks!

[piotrtomiak]

@vaibhavhrt Friendly reminder :)

[piotrtomiak]

@vaibhavhrt I've created a PR #9440 with all of my changes on top of your work.

[johnleider]

Closing in favor of #9440