search

JetBrains / web-types

JSON standard for documenting web component libraries for IDEs, documentation generators and other tools
Apache License 2.0
279 stars 25 forks source link

Use web-types.json localy #3

Closed VitProg closed 4 years ago

VitProg commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

VitProg commented 4 years ago

@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 commented 4 years ago

@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 commented 3 years ago

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

piotrtomiak commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 2 years ago

Hi any update on Web components?

piotrtomiak commented 1 year ago

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

kiawin commented 1 year ago

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 commented 1 year ago

Found a workaround by utilizing the type definitions, based on https://github.com/antfu/unplugin-vue-components/issues/477#issuecomment-1211069582 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 commented 1 year ago

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