Test Addon: Add Web Components support

[shilman]

Closes #28891

What I did

• Checking how much effort it actually is to add PS support for Web Components
• Seeing how feasible are the tests (because of shadow-dom)
• Updating the storybook add postinstall script to allow installation for this renderer
• Updating docs

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. In a web components project, install the canary either using npx storybook@<canary-version-below> init or by manually updating the versions in package.json.
2. Then add the test addon. If you already have the canary installed, it will add the right version of the addon

npx storybook add @experimental-addon-test

3. Then play around with the features and with writing tests. You should be able to run the tests from Storybook's UI, from the CLI, or from Vitest's VSCode extension as long as you have a test script in your package.json.
4. Please play around with shadow DOM stuff especially!!!

🦋 Canary release

This pull request has been released as version 0.0.0-pr-30047-sha-10ab439e. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-30047-sha-10ab439e
Triggered by	@shilman
Repository	storybookjs/storybook
Branch	shilman/test-addon-add-web-components
Commit	10ab439e
Datetime	Thu Dec 12 14:28:39 UTC 2024 (1734013719)
Workflow run	12298456295

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=30047

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.7 MB	77.7 MB	0 B	1.35	0%
initSize	133 MB	133 MB	0 B	1.18	0%
diffSize	55.3 MB	55.3 MB	0 B	1.17	0%
buildSize	6.87 MB	6.87 MB	0 B	-1	0%
buildSbAddonsSize	1.51 MB	1.51 MB	0 B	-1	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.86 MB	0 B	-1.11	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.57 MB	3.57 MB	0 B	-1	0%
buildPreviewSize	3.3 MB	3.3 MB	0 B	-1.11	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	9.2s	6.9s	-2s -297ms	-0.89	-33.1%
generateTime	27.7s	20.6s	-7s -28ms	-0.47	-34%
initTime	18s	14.7s	-3s -351ms	-0.3	-22.7%
buildTime	9.4s	9.9s	435ms	0.88	4.4%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7s	5.6s	-1s -436ms	0.69	-25.6%
devManagerResponsive	5.3s	3.8s	-1s -434ms	0.13	-37.1%
devManagerHeaderVisible	878ms	805ms	-73ms	2.48	🔰-9.1%
devManagerIndexVisible	925ms	866ms	-59ms	2.66	🔰-6.8%
devStoryVisibleUncached	2.1s	2.2s	52ms	1.21	2.4%
devStoryVisible	931ms	867ms	-64ms	2.58	🔰-7.4%
devAutodocsVisible	769ms	638ms	-131ms	1.23	-20.5%
devMDXVisible	851ms	717ms	-134ms	1.63	🔰-18.7%
buildManagerHeaderVisible	973ms	811ms	-162ms	1.63	🔰-20%
buildManagerIndexVisible	1.1s	929ms	-181ms	1.71	🔰-19.5%
buildStoryVisible	928ms	744ms	-184ms	1.7	🔰-24.7%
buildAutodocsVisible	851ms	597ms	-254ms	1.16	-42.5%
buildMDXVisible	776ms	551ms	-225ms	1.03	-40.8%

[github-actions]

	Fails
🚫	PR is not labeled with one of: ["ci:normal","ci:merged","ci:daily","ci:docs"]

Generated by 🚫 dangerJS against 10ab439

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 10ab439. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.