Example for vanilla js web components

[msteller-connyun]

Can you please add an example for vanilla web components?

[sseira]

Yes would love to see how this integrates with Lit components as well

[Atulin]

I'm using a combination of web-component-analyzer-webtypes and lit-web-types dev packages, and can generate web-types.json using this unholy abomination of a script:

"t:webtypes": "wca-webtypes analyze ./src/**/*.ts --format webtypes --outFile ./web-types.json --webtypesConfig=\"{\"\"name\"\": \"\"web-types-custom\"\", \"\"version\"\": \"\"0.0.1\"\", \"\"description-markup\"\": \"\"markdown\"\", \"\"framework\"\": \"\"lit\"\"}\""

It picks up my components just fine without even any JSDoc. Although the functions my components expose aren't there

Sample output

{
    "name": "quote-box",
    "source": {
        "module": "./src\\wcomps\\quote-box.ts",
        "symbol": "QuoteBox"
    },
    "attributes": [
        {
            "name": "endpoint",
            "required": false,
            "priority": "normal",
            "value": {
                "type": "string",
                "required": true
            }
        }
    ],
    "js": {
        "properties": [
            {
                "name": "endpoint",
                "required": false,
                "priority": "normal",
                "value": {
                    "type": "string",
                    "required": true
                }
            },
            {
                "name": "_loading",
                "required": false,
                "priority": "lowest",
                "value": {
                    "type": "boolean",
                    "required": true
                }
            },
            {
                "name": "_quote",
                "required": false,
                "priority": "lowest",
                "value": {
                    "type": "Quote",
                    "required": true
                }
            }
        ]
    }
},

Edit: I don't want to rely on the author of this package to fix the forementioned issues, so I took the matters into my own hands with Atulin/web-component-analyzer.

I also fixed reference paths on Windows while I was at it.

[piotrtomiak]

Angius (@Atulin) thanks for the information. Let's wait for the PR to be merged and than I'll update documentation: runem/web-component-analyzer#239 (review)

[piotrtomiak]

WebStorm and other IDEs support Custom Elements Manifest since 2023.2, so you don't really need to generate Web types for components themselves, unless you need some support for patterns.

The lit library Web Types should be downloaded automatically now, so you should get code completion for lit specific syntax, like @... attributes.