Use web-types.json localy

[VitProg]

WebStorm 2019.2 and PhpStorm 2019.2
Ubuntu 18.04

We are trying to add support for web types to our project as a local file.

About our project:
Typscript, use VueJs for UI.
We have a very unusual use of Vue.
All components wrote on classes with many syntactic sugar.
A component consists of several files: component class, template, styles, and unit test.
Of course, IDE does not understand our component syntax. There are no normal autocomplete in the our template files.

With the introduction of 2019.2 we got the idea to use web types locally. We want to generate a web type file on all our components on the fly. There we want to greatly improve the usability of the development, since there will be a full autocomplete for all components and their properties.

But something went wrong, and the web-types don't work. It feels like the IDE doesn't see them.

Our steps for the test:

1. created a file web-types.json with a description of one of our components - control-progress-line
2. added a line in package.json: "web-types": "./web-types.json"

This does not work. What are we doing wrong?

File web-types.json:

{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.schema.json",
  "framework": "vue",
  "name": "ui",
  "version": "0.0.2",
  "contributions": {
    "html": {
      "types-syntax": "typescript",
      "tags": [
        {
          "name": "control-progress-line",
          "source-file": "./src/ui/components/control-progress-line/index.ts",
          "attributes": [
            {
              "name": "buffer",
              "type": "number",
              "required": true,
              "default": "-1"
            },
            {
              "name": "value",
              "type": "number",
              "required": true,
              "default": "-1"
            },
            {
              "name": "max",
              "type": "number",
              "required": true,
              "default": "0"
            },
            {
              "name": "tooltip",
              "type": "boolean",
              "default": "true"
            },
            {
              "name": "outerWidth",
              "type": "number"
            }
          ],
          "events": [
            {
              "name": "timeClick",
              "arguments": [
                {
                  "name": "value",
                  "type": "number"
                }
              ]
            }
          ]
        }
      ],
      "attributes": [

      ]
    }
  }
}

Part of file package.json:

{
  "name": "***",
  "version": "0.0.2",
  "description": "***",
  "main": "index.js",
  "scripts": {
    ***
  },
  "devDependencies": {
    ....
    "@types/chai": "^4.1.7",
    "@types/copy-webpack-plugin": "^5.0.0",
    "@types/html-webpack-plugin": "^3.2.1",
    "@types/jasmine": "^3.3.16",
    "@types/mocha": "^5.2.7",
    "@types/webpack": "^4.32.1",
    "@web-types/vue": "^2.5.0-1",
    ....
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "fork-ts-checker-webpack-plugin": "^1.4.3",
    "html-webpack-plugin": "^3.2.0",
    ...
    "jasmine-core": "^3.4.0",
    "reflect-metadata": "^0.1.13",
    "ts-loader": "^6.0.4",
    "tslint": "^5.18.0",
    "typescript": "^3.5.3",
    "vue": "^2.6.10",
    "vue-class-component": "^7.1.0",
    "vue-loader": "^15.7.1",
    "vue-property-decorator": "^8.2.1",
    "vue-rx-decorators": "^0.0.8",
    "vue-template-compiler": "^2.6.10",
    "vue-template-loader": "^1.0.0",
    "vue-tsx-support": "^2.3.1",
    "vuex": "^3.1.1",
    "webpack": "^4.38.0",
    ....
  },
  "web-types": "web-types.json"
}

Component template file example:

<div>
   <control-progress-line :value="currentTime" :buffer="currentBuffer" :max="duration" @timeClick="onTimeClick"></control-progress-line>
</div>

[piotrtomiak]

@VitProg As I wrote in the issue #1 I haven't expected web-types to be used for local project development, so there is no support for it. Your timing with this report is perfect as I am working on improvements for 2019.2.1 for web-types and I will include your use case as well. As far as I understood, you are adding web-types to you project's own package.json, correct?

[piotrtomiak]

YouTrack issue: https://youtrack.jetbrains.com/issue/WEB-40349

[VitProg]

@piotrtomiak, thank you for your quick response.

As far as I understood, you are adding web-types to you project's own package.json, correct?

Yes.

I did a little test - https://github.com/VitProg/web-types--issue-3
He's roughly showing me what I want to achieve.

The root of the project is the web-types.json file with the description of the cmp-test component from src/components/CTest.vue

In package.json the line "web-types" is extracted: "./web-types.json"`

In the Home component (src/views/Home.vue) the cmp-test component is used. But IDE doesn't know anything about it and doesn't give any hints, says "Unknown html tag cmp-test".

[piotrtomiak]

@VitProg I've added support for your use case to 2019.2.1. You will be able to check it out in this weeks EAPs release.

[SavoInfostream]

@piotrtomiak Is Rider supported by web-types? This isn't Vue components only, right?

[piotrtomiak]

@SavoInfostream I am not sure I understand your question correct. Web-types in current form support only Vue.js components and work when Vue.js plugin is installed. You can install it into Rider of course. We are planning to extend web-types to support generic use cases and other frameworks.

[SavoInfostream]

@piotrtomiak Naming is a bit confusing, but I was hoping that vanilla Web Components would be supported. This repository was linked in several discussions about how to add support for these web components in IDEs.
I think you should be more explicit that it's currently Vue only :)

[piotrtomiak]

@SavoInfostream One of our main goals is to support Web Components within up to 2-3 months, we were developing web-types with such support in mind. It's just that we had to focus on a single framework first. I am sorry for the confusion.

[aiphee]

Hi any update on Web components?

[piotrtomiak]

@aiphee Web Components are supported since 2022.1 - it took much more than expected to create a generic format.

[kiawin]

I did a little test - https://github.com/VitProg/web-types--issue-3 He's roughly showing me what I want to achieve.

The root of the project is the web-types.json file with the description of the cmp-test component from src/components/CTest.vue

In package.json the line "web-types" is extracted: "./web-types.json"`

In the Home component (src/views/Home.vue) the cmp-test component is used. But IDE doesn't know anything about it and doesn't give any hints, says "Unknown html tag cmp-test".

Hi @piotrtomiak, I am having a similar issue in PyCharm 2022.2.3. I am using unplugin-vue-components, which allows me to skip defining the component import explicitly. I have generated a local copy of the web-types.json using vue-docgen-web-types and included in the package.json. However, it didn't work.

As I stumbled upon this issue, I cloned the https://github.com/VitProg/web-types--issue-3 repo and found out the IDE did not manage to find the CmpTest component declaration. On the other hand, the IDE managed to find the HelloWorld component declaration. It seems like it didn't manage to detect the local web-types.json file. Do you have any idea what went wrong? Thanks

[kiawin]

Found a workaround by utilizing the type definitions, based on unplugin/unplugin-vue-components#477 (comment) by adding the following in .npmrc.

public-hoist-pattern[]=@vue/runtime-core

It seems like it is a pnpm issue,

pnpm can only access a project's top-level dependencies, and @vue/runtime-core is a dependency nested inside the vue module (that is, not a top dependency). So, the declaration fails.

With the additional configuration in .npmrc, I was able to cmd+click to enter into the typescript definition file, and click on the actual component file. For example, I can click on the path as defined in the import(...).

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    HelloWorld: typeof import('./../src/components/HelloWorld.vue')['default']
  }
}

[piotrtomiak]

@kiawin Sorry for late reply! It would be great if you can share example project, so that I can check/debug what's wrong.