Web-components: Custom Elements Manifest v1 support

[thepassle]

Issue:

What I did

This adds support for the V1 version of the Custom Elements Manifest schema. This change is non breaking

TODO:

• I'd like to test the changes locally, but I havent figured out how to make that happen (as mentioned on discord)

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 56d28eb. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[gaetanmaisse]

@thepassle feels free to ping me on discord if you need help I would be glad to try to help 😉

[gaetanmaisse]

@thepassle I think you were just an export away 😉

I push a couple of commits to add JSDoc on the component used in the WC kitchen sink, add an NPM Script to run the analyzer easily and it looks like it is working:

On the screenshot you will see that the descriptions are empty for the properties even if I added some in the JSDoc, I think it's because I activated the --litelement option and so we are ending with multiple times the same property in the manifest:

• First time based on the JSDoc here: https://github.com/storybookjs/storybook/pull/15138/files#diff-c004e78b410c9dff2857b3a2cf9bc7ad4452e1bf234006d7ce0dc500098616f9R44
• Second time, auto-discovered by the --litelement mode?, here: https://github.com/storybookjs/storybook/pull/15138/files#diff-c004e78b410c9dff2857b3a2cf9bc7ad4452e1bf234006d7ce0dc500098616f9R82

I think we should merge these 2 objects describing the same property. Do you think it's something that could/should be changed on @custom-elements-manifest/analyzer side?

Notes: I set a specific version of TypeScript using Yarn's resolution because we need to update Yarn before being able to us the latest version, this isn't related to this PR.

[thepassle]

On the screenshot you will see that the descriptions are empty for the properties even if I added some in the JSDoc, I think it's because I activated the --litelement option and so we are ending with multiple times the same property in the manifest:

Thats odd — that should not be the case. Let me doublecheck this in the analyzer
Edit: Yeah, this is a bug on my side. Working on a fix 🙂

@thepassle I think you were just an export away 😉

Doh 🤦‍♂️🤦‍♂️🤦‍♂️

[thepassle]

@gaetanmaisse The duplicate fields appearing the manifest bug should be fixed in @custom-elements-manifest/analyzer@0.3.1. I forgot to add a check to see if there was already an existing field with the same name in the manifest. Thanks for pointing it out 😄

I think we also need to add some docs to document how to use the new version of the manifest, do we need anything else to move forward with this PR?

[thepassle]

@gaetanmaisse @shilman I've updated the documentation 🙂

[gaetanmaisse]

Notes: I set a fixed version to avoid compat' issue with the Yarn 2 version we are using for now

[gaetanmaisse]

LGTM 🚀

Notes: e2e errors are not related to this PR, see #15411

[gaetanmaisse]

Merged! Thanks for the PR @thepassle and let see what could be the next improvements on that topic :)

[thepassle]

Awesome! Thanks so much for the help on this 🙂 Do you have any indication on when this will get released?

[shilman]

6.4-alpha = release later today
6.4-final = september

see #15355

[edoardocavazza]

Hello!

It seems that it does not handle the privacy field, so it also processes private properties. Is this the correct behaviour or should I open an issue for that?

[shilman]

@edoardocavazza new issue please! 🙏

[jonniebigodes]

@thepassle one final thing I would like to ask of you. If you don't mind popping into our Discord Server and message me (same username) to follow up on a couple of items.