The vue3 global component setting web-types.json component cannot jump?

[Autumn-one]

Hi, I am using vue3 in my project, I use vue-docgen-web-types to generate global component information in the project, this prevents webstorm from making errors on global component tags, but since I have done this I cannot jump to the corresponding global component file in the vue file by tag. This surprised me, because when there is no web types.json file, although tags are not recognized, tags can jump instead.

[Autumn-one]

I have checked the contents of the generated web-types.json file and it is generated in the correct path, I will post the contents of the generated file below

{
    "framework": "vue",
    "name": "bo-manage",
    "version": "0.0.0",
    "contributions": {
        "html": {
            "description-markup": "markdown",
            "types-syntax": "typescript",
            "tags": [
                {
                    "name": "BasicDialog",
                    "description": "",
                    "attributes": [
                        {
                            "name": "visible",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "false"
                        },
                        {
                            "name": "title",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "''"
                        },
                        {
                            "name": "width",
                            "value": {
                                "kind": "expression",
                                "type": "string|number"
                            },
                            "default": "600"
                        },
                        {
                            "name": "cancel_btn_text",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "'取消'"
                        },
                        {
                            "name": "confirm_btn_text",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "'确定'"
                        },
                        {
                            "name": "show_cancel_btn",
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "true"
                        },
                        {
                            "name": "show_confirm_btn",
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "true"
                        }
                    ],
                    "events": [
                        {
                            "name": "close"
                        },
                        {
                            "name": "confirm"
                        }
                    ],
                    "slots": [
                        {
                            "name": "default"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BasicDialog.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "BasicPagination",
                    "description": "",
                    "attributes": [
                        {
                            "name": "total",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "number"
                            }
                        },
                        {
                            "name": "page_num",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "number"
                            }
                        },
                        {
                            "name": "page_size",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "number"
                            }
                        }
                    ],
                    "events": [
                        {
                            "name": "change"
                        },
                        {
                            "name": "update:page_size"
                        },
                        {
                            "name": "update:page_num"
                        }
                    ],
                    "source": {
                        "module": "./src/components/Table/BasicPagination.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "BasicTable",
                    "description": "",
                    "attributes": [
                        {
                            "name": "tableData",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "Array"
                            }
                        },
                        {
                            "name": "columns",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "Columns"
                            }
                        },
                        {
                            "name": "loading",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            }
                        },
                        {
                            "name": "showSelectAll",
                            "required": false,
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            }
                        }
                    ],
                    "events": [
                        {
                            "name": "select_row"
                        }
                    ],
                    "slots": [
                        {
                            "name": " item.slot "
                        }
                    ],
                    "source": {
                        "module": "./src/components/Table/BasicTable.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "BoDialog",
                    "description": "",
                    "attributes": [
                        {
                            "name": "modelValue",
                            "required": false,
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "true"
                        },
                        {
                            "name": "btnConfirmText",
                            "required": false,
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"确认\""
                        },
                        {
                            "name": "btnCancelText",
                            "required": false,
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"取消\""
                        },
                        {
                            "name": "hiddenFooter",
                            "required": false,
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "false"
                        },
                        {
                            "name": "minWidth",
                            "required": false,
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"375px\""
                        },
                        {
                            "name": "maxWidth",
                            "required": false,
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"600px\""
                        }
                    ],
                    "events": [
                        {
                            "name": "update:modelValue"
                        },
                        {
                            "name": "confirm"
                        },
                        {
                            "name": "cancel"
                        }
                    ],
                    "slots": [
                        {
                            "name": "header"
                        },
                        {
                            "name": "default"
                        },
                        {
                            "name": "footer"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoDialogDev/BoDialog.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "BoDialogDev1",
                    "description": "",
                    "attributes": [
                        {
                            "name": "modelValue",
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "true"
                        },
                        {
                            "name": "btnConfirmText",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"确认\""
                        },
                        {
                            "name": "btnCancelText",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"取消\""
                        }
                    ],
                    "events": [
                        {
                            "name": "confirm"
                        },
                        {
                            "name": "cancel"
                        }
                    ],
                    "slots": [
                        {
                            "name": "header"
                        },
                        {
                            "name": "default"
                        },
                        {
                            "name": "footer"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoDialogDev/BoDialogDev1.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "BoDialogJsxDev",
                    "description": "",
                    "attributes": [
                        {
                            "name": "modelValue",
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "true"
                        },
                        {
                            "name": "btnConfimText",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"确定\""
                        },
                        {
                            "name": "btnCancelText",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"取消\""
                        }
                    ],
                    "events": [
                        {
                            "name": "confirm"
                        },
                        {
                            "name": "cancel"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoDialogDev/BoDialogJsxDev.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "BoPaging",
                    "description": "",
                    "events": [
                        {
                            "name": "size-change"
                        },
                        {
                            "name": "change"
                        },
                        {
                            "name": "current-change"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoPagingDev/BoPaging.vue"
                    }
                },
                {
                    "name": "BoTabItem",
                    "description": "",
                    "attributes": [
                        {
                            "name": "label",
                            "value": {
                                "kind": "expression",
                                "type": "undefined"
                            }
                        }
                    ],
                    "slots": [
                        {
                            "name": "default"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoTabItem/BoTabItem.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "BoTable",
                    "description": "",
                    "slots": [
                        {
                            "name": "default"
                        },
                        {
                            "name": "append"
                        },
                        {
                            "name": "empty"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoTableDev/BoTable.vue"
                    }
                },
                {
                    "name": "BoTableCol",
                    "description": "",
                    "slots": [
                        {
                            "name": "default"
                        },
                        {
                            "name": "header"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoTableColDev/BoTableCol.vue"
                    }
                },
                {
                    "name": "BoTabs",
                    "description": "",
                    "attributes": [
                        {
                            "name": "modelValue",
                            "value": {
                                "kind": "expression",
                                "type": "undefined"
                            }
                        },
                        {
                            "name": "query",
                            "value": {
                                "kind": "expression",
                                "type": "undefined"
                            }
                        }
                    ],
                    "events": [
                        {
                            "name": "update:modelValue"
                        }
                    ],
                    "slots": [
                        {
                            "name": "default"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoTabs/BoTabs.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "BoTabs2",
                    "description": "",
                    "source": {
                        "module": "./src/components/BoTabs2/BoTabs2.vue"
                    }
                },
                {
                    "name": "BoValidInput",
                    "description": "",
                    "attributes": [
                        {
                            "name": "focus",
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "false"
                        },
                        {
                            "name": "clear",
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "false"
                        },
                        {
                            "name": "disabled",
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            },
                            "default": "false"
                        }
                    ],
                    "events": [
                        {
                            "name": "complete"
                        },
                        {
                            "name": "update:focus"
                        },
                        {
                            "name": "update:clear"
                        }
                    ],
                    "source": {
                        "module": "./src/components/BoValidInput/BoValidInput.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "Demo01",
                    "description": "",
                    "source": {
                        "module": "./src/components/Demo/Demo01.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "FatherDemo",
                    "description": "",
                    "source": {
                        "module": "./src/components/Demo/FatherDemo.vue"
                    }
                },
                {
                    "name": "GrandpaDemo",
                    "description": "",
                    "attributes": [
                        {
                            "name": "aabb",
                            "value": {
                                "kind": "expression",
                                "type": "undefined"
                            }
                        }
                    ],
                    "source": {
                        "module": "./src/components/Demo/GrandpaDemo.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "Header",
                    "description": "",
                    "source": {
                        "module": "./src/components/Header/Header.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "PageContainer",
                    "description": "",
                    "slots": [
                        {
                            "name": "page-title"
                        },
                        {
                            "name": "page-main"
                        }
                    ],
                    "source": {
                        "module": "./src/components/PageContainer.vue"
                    }
                },
                {
                    "name": "PageError",
                    "description": "",
                    "source": {
                        "module": "./src/components/PageError/PageError.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "PageLoading",
                    "description": "",
                    "source": {
                        "module": "./src/components/PageLoading/PageLoading.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "SonDemo",
                    "description": "",
                    "attributes": [
                        {
                            "name": "foo",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"foo默认值\""
                        },
                        {
                            "name": "bar",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            },
                            "default": "\"bar默认值\""
                        },
                        {
                            "name": "callback",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "Function"
                            }
                        },
                        {
                            "name": "aabb",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            }
                        }
                    ],
                    "events": [
                        {
                            "name": "click"
                        }
                    ],
                    "source": {
                        "module": "./src/components/Demo/SonDemo.vue",
                        "symbol": "default"
                    }
                },
                {
                    "name": "ValidDialog",
                    "description": "",
                    "attributes": [
                        {
                            "name": "show",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "boolean"
                            }
                        },
                        {
                            "name": "title",
                            "required": true,
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            }
                        }
                    ],
                    "events": [
                        {
                            "name": "update:show"
                        },
                        {
                            "name": "input_complete"
                        }
                    ],
                    "source": {
                        "module": "./src/components/ValidDialog/ValidDialog.vue",
                        "symbol": "default"
                    }
                }
            ]
        }
    }
}

[piotrtomiak]

@Autumn-one - Hi! The generated file looks ok indeed. Seems like something's wrong with the source mapping. Could you please share a small portion of your project with one or two components, so that I can reproduce locally the issue?

[Autumn-one]

Can't this problem be reproduced in the attached item? I think it is probably caused by using unplugin-auto-import to automatically introduce some methods. I have reproduced the problem described in the attached project. I recorded a video and put it in the attachment, you can have a look at it

Line 26 of the video should jump straight to the definition on line 14, but instead it makes three suggestions, including definitions that aren't even in the current file

Autumn @.***

 

------------------ 原始邮件 ------------------ 发件人: "JetBrains/web-types" @.>; 发送时间: 2023年3月21日(星期二) 晚上8:37 @.>; @.**@.>; 主题: Re: [JetBrains/web-types] The vue3 global component setting web-types.json component cannot jump? (Issue #65)

@Autumn-one - Hi! The generated file looks ok indeed. Seems like something's wrong with the source mapping. Could you please share a small portion of your project with one or two components, so that I can reproduce locally the issue?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[Autumn-one]

Did you get the demo video I sent you?

Autumn @.***

 

------------------ 原始邮件 ------------------ 发件人: "JetBrains/web-types" @.>; 发送时间: 2023年3月21日(星期二) 晚上8:37 @.>; @.**@.>; 主题: Re: [JetBrains/web-types] The vue3 global component setting web-types.json component cannot jump? (Issue #65)

@Autumn-one - Hi! The generated file looks ok indeed. Seems like something's wrong with the source mapping. Could you please share a small portion of your project with one or two components, so that I can reproduce locally the issue?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[piotrtomiak]

@Autumn-one - Unfortunately I don't see any videos her in the thread.

[Autumn-one]

I reuploaded a copy in the email attachment

Autumn @.***

 

------------------ 原始邮件 ------------------ 发件人: "JetBrains/web-types" @.>; 发送时间: 2023年3月31日(星期五) 下午5:11 @.>; @.**@.>; 主题: Re: [JetBrains/web-types] The vue3 global component setting web-types.json component cannot jump? (Issue #65)

@Autumn-one - Unfortunately I don't see any videos her in the thread.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[Autumn-one]

@Autumn-one - Unfortunately I don't see any videos her in the thread.

Rec 0157.zip

[lukachi]

Hi, are there any updates on this issue? I generated the web-types.json file in the same manner, but WebStorm still doesn't recognize any props from my Vue UI components library. Could this be happening because I am using it in development mode with yarn link? here is a part of my web-types.json

{
  "framework": "vue",
  "name": "my-components-lib",
  "version": "0.0.0-rc.2",
  "contributions": {
    "html": {
      "description-markup": "markdown",
      "types-syntax": "typescript",
      "tags": [
        {
          "name": "AppButton",
          "description": "",
          "attributes": [
            {
              "name": "text",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "string"
              },
              "default": "''"
            },
            {
              "name": "scheme",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "union"
              },
              "default": "'filled'"
            },
            {
              "name": "modification",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "union"
              },
              "default": "'border-rounded'"
            },
            {
              "name": "color",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "union"
              },
              "default": "'primary'"
            },
            {
              "name": "size",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "union"
              },
              "default": "'medium'"
            },
            {
              "name": "route",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "LocationAsRelativeRaw"
              },
              "default": "undefined"
            },
            {
              "name": "href",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "string"
              },
              "default": "''"
            },
            {
              "name": "iconLeft",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "ICON_NAMES"
              },
              "default": "undefined"
            },
            {
              "name": "iconRight",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "ICON_NAMES"
              },
              "default": "undefined"
            }
          ],
          "slots": [
            {
              "name": "default"
            }
          ],
          "source": {
            "module": "./src/common/AppButton.vue",
            "symbol": "default"
          }
        },
        {
          "name": "AppTable",
          "description": "",
          "slots": [
            {
              "name": "thead"
            },
            {
              "name": "tbody"
            }
          ],
          "source": {
            "module": "./src/common/AppTable.vue",
            "symbol": "default"
          }
        },
        {
          "name": "AppTooltip",
          "description": "",
          "attributes": [
            {
              "name": "isPreferClick",
              "required": false,
              "value": {
                "kind": "expression",
                "type": "boolean"
              },
              "default": "false"
            }
          ],
          "slots": [
            {
              "name": "trigger"
            },
            {
              "name": "default"
            }
          ],
          "source": {
            "module": "./src/common/AppTooltip.vue",
            "symbol": "default"
          }
        },
       ]
    }
  }
}

and the way i include it in my package.json

{
"files": ["dist", "web-types.json", "es"],
"web-types": "./web-types.json"
}

[piotrtomiak]

@lukachi - you are using a deprecated syntax, so I am not sure if this will work. Please refer to https://plugins.jetbrains.com/docs/intellij/websymbols-static-symbols.html#vue for the reference. I've just noticed that the documentation is missing an example, so for now you can check definitions here.

[piotrtomiak]

@Autumn-one - Unfortunately I don't see any videos her in the thread.

Rec 0157.zip

@Autumn-one - this video doesn't show any problem related to Web Types. It looks like some problem with JS/TS resolution, which needs to be filed on WebStorm's YouTrack.

[lukachi]

@piotrtomiak Hi, thanks for your answer. Unfortunately, i use vue-docgen-web-types to generate web-types.json file and i'm change nothing after that, event paths, because seems like they are valid.

Anyway, after i published my lib to npm, suddenly props suggestion and types validation starts working, and i don't know why :). declaration files was generated by vue-tsc as usually. Maybe webstorm recognize web-types bad if i use yarn link to testing my library(monorepo)

[piotrtomiak]

Maybe webstorm recognize web-types bad if i use yarn link to testing my library(monorepo)

We might have troubles with yarn link and Web Types indeed.

@Autumn-one - I am closing the issue. Please provide a small project on which I can reproduce the issue in case you're still experiencing the issue