Add Web-Types for Lit framework (2.1.1)

[gaetanmaisse]

Description

This PR contains a first version of the Web-Types for Lit framework: https://lit.dev/

It might not cover everything provided by Lit but provides the core features and is intended to be a 1st PR done by an external contributor. This will be a good way to check contribution steps.

Questions to discuss

• How should we manage icons? Should we start with a simple icon folder inside packages/<framework>/?
• I tried the publish script (in dry-run mode) locally and it failed because @web-types/lit doesn't exist yet on the NPM registry, is there something I can do to help on that side?
• I'm used to having some tests/lint checks, I think JSON files format is checked before publishing, should we have this check in the PR too?

[piotrtomiak]

@gaetanmaisse Thank you for your contribution! So far I haven't been publishing anything with the icons, so I think it would make sense to create a folder packages/lit/lit@2.1.1 and place full contents of the package inside.

@jpradelle has been doing some stuff around Web-Types for lit. Is there anything you would add to the file?

[piotrtomiak]

@piotrtomiak what would you recommend on that for bubbling events

What do you mean by "bubbling events" - I am not an expert with frontend ;)

@jpradelle "/html/events" is the same as "/js/events" so you don't need to include both.

[jpradelle]

For event bubbling I won't be as good as other resources to explain it https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing

I made a small demo to explain the issue here In the demo when you click the button it fires an event, one bubbling and the other not, you will see difference in displayed logs. The point which impact us for web-types is around that part:

      <div @foo-event="${this.fooEventBubble}">
        <foo-component @foo-event="${this.fooEvent}"></foo-component>
        <foo-component bubble @foo-event="${this.fooEvent}"></foo-component>
      </div>

If foo-component fires foo-event with bubbling upper div can listen on foo-event. (bubbling will continue until it reach root node of the dom). If foo-event doesn't bubble, div won't receive it.

Currently on IntelliJ, with this PR web-types definition for lit, and following webcomponent web-types definition, that's gives this result: foo-event is not recognized on div, but it will exist.

When using following following web-types definition

{
    "$schema": "http://json.schemastore.org/web-types",
    "name": "web-types-test",
    "version": "0.1.0",
    "framework": "lit",
    "contributions": {
        "html": {
            "elements": [
                {
                    "name": "bar-component",
                    "js": {
                        "properties": [
                            {
                                "name": "logs",
                                "required": false,
                                "value": {
                                    "type": "array",
                                    "required": true,
                                    "default": "[]"
                                }
                            }
                        ]
                    }
                },
                {
                    "name": "foo-component",
                    "attributes": [
                        {
                            "name": "bubble",
                            "required": false,
                            "value": {
                                "type": "boolean",
                                "required": false,
                                "default": "false"
                            }
                        }
                    ],
                    "js": {
                        "properties": [
                            {
                                "name": "bubble",
                                "required": false,
                                "value": {
                                    "type": "boolean",
                                    "required": true,
                                    "default": "false"
                                }
                            }
                        ],
                        "events": [
                            {
                                "name": "foo-event"
                            }
                        ]
                    }
                }
            ]
        }
    }
}

When listening an event with bubbling, the event can come from a very far away place from which it is listened. Composed concept also enter in the game for a greater complexity. Which can make it very complicated on your side.

Alternatively, I could build web-types file differently to define event globally and have it understood by IDE, but this tells event exists everywhere, where it not really the case:

{
    "$schema": "http://json.schemastore.org/web-types",
    "name": "web-types-test",
    "version": "0.1.0",
    "framework": "lit",
    "contributions": {
        "html": {
            "elements": [
                {
                    "name": "bar-component",
                    "js": {
                        "properties": [
                            {
                                "name": "logs",
                                "required": false,
                                "value": {
                                    "type": "array",
                                    "required": true,
                                    "default": "[]"
                                }
                            }
                        ]
                    }
                },
                {
                    "name": "foo-component",
                    "attributes": [
                        {
                            "name": "bubble",
                            "required": false,
                            "value": {
                                "type": "boolean",
                                "required": false,
                                "default": "false"
                            }
                        }
                    ],
                    "js": {
                        "properties": [
                            {
                                "name": "bubble",
                                "required": false,
                                "value": {
                                    "type": "boolean",
                                    "required": true,
                                    "default": "false"
                                }
                            }
                        ]
                    }
                }
            ]
        },
        "js": {
            "events": [
                {
                    "name": "foo-event"
                }
            ]
        }
    }
}

[piotrtomiak]

@jpradelle To correctly handle event bubbling I think one would need to write a plugin, which based on the file contents would add additional events on the elements. I think the current solution is good enough.

@gaetanmaisse It would be great to finish this PR and deliver these web-types automatically to all IDE users.

[gaetanmaisse]

@piotrtomiak I was quite busy these days but I will take some time to review the comments done and update the PR 😉

[gaetanmaisse]

@jpradelle thanks for the detailed feedback! I updated the Web-Types file according to them, can you take it a look and lmk if you think it could be a good first version?

@piotrtomiak as you proposed in a previous comment to handle some extra files I used folder structure, for instance:

To be able to publish this kind of package I updated the publication script, it should handle both file and folder structure. If it's ok for you I think we will be able to publish the first community-written Web-Types file 😁

I tested the publication process locally with verdaccio and it looks ✅

-- Note:

• ~I need to handle the files attributes of package.json when dealing with a folder~
• ~I need to fix the version set in package.json~

[piotrtomiak]

@gaetanmaisse Thank you for the changes! I will update the web-types file according to @jpradelle remarks.

[piotrtomiak]

I have also published the package. It looks like IDE is not automatically downloading it, so you must explicitly install it ("@web-types/lit"), similarly to "@types" packages.