JS import support from web-types definition

Hi, It would be awesome to have IDE javascript ES6 import support from its HTML usage. When an HTML element is defined in web-types with source property having module and symbol, IDE should have enough information to build JS ES6 import.

Currently when I right click on a web-types defined HTML tag > Go To > Declaration or Usages, it goes to corresponding class, so link to class is properly defined.

Exemple project for demo: web-types-import In proposal I would like to have an insert JS import proposal. When clicked it would add import './demo-to-be-imported.js' at top of js file.

package.json:

{
  "name": "test",
  "version": "0.0.0",
  "dependencies": {
    "lit": "^2.2.0"
  },
  "devDependencies": {
    "@web-types/lit": "^2.0.0-3",
    "web-component-analyzer-webtypes": "^2.0.10"
  },
  "scripts": {
    "web-types": "wca-webtypes analyze '*.js' --format webtypes --outFile ./web-types.json"
  },
  "wca": {
    "webtypesConfig": {
      "description-markup": "markdown"
    }
  },
  "web-types": [
    "./web-types.json"
  ]
}

demo-to-be-imported.js

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

/**
 * Demo component to be imported by the other demo component
 */
@customElement('demo-to-be-imported')
export class DemoToBeImported extends LitElement {

  @property()
  text = '';

  render() {
    return html`
      Demo content: ${this.text}
    `;
  }
}

demo-for-import.js

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('demo-for-import')
export class DemoForImport extends LitElement {
  render() {
    return html`
      <demo-to-be-imported text="Demo"></demo-to-be-imported>
    `;
  }
}

web-types.js

{
    "$schema": "http://json.schemastore.org/web-types",
    "name": "test",
    "version": "0.0.0",
    "description-markup": "markdown",
    "contributions": {
        "html": {
            "elements": [
                {
                    "name": "demo-for-import",
                    "source": {
                        "module": "./demo-for-import.js",
                        "symbol": "DemoForImport"
                    }
                },
                {
                    "name": "demo-to-be-imported",
                    "description": "Demo component to be imported by the other demo component",
                    "source": {
                        "module": "./demo-to-be-imported.js",
                        "symbol": "DemoToBeImported"
                    },
                    "attributes": [
                        {
                            "name": "text",
                            "required": false,
                            "priority": "normal",
                            "value": {
                                "type": "string",
                                "required": true,
                                "default": "\"\""
                            },
                            "source": {
                                "module": "./demo-to-be-imported.js",
                                "symbol": "DemoToBeImported.text"
                            }
                        }
                    ],
                    "js": {
                        "properties": [
                            {
                                "name": "text",
                                "required": false,
                                "priority": "normal",
                                "value": {
                                    "type": "string",
                                    "required": true,
                                    "default": "\"\""
                                },
                                "source": {
                                    "module": "./demo-to-be-imported.js",
                                    "symbol": "DemoToBeImported.text"
                                }
                            }
                        ]
                    }
                }
            ]
        },
        "css": {
            "properties": []
        }
    }
}

JetBrains / web-types

JS import support from web-types definition #69