ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.52k stars 782 forks source link

feat(runtime): support already-existing shadow roots #5787

Closed alicewriteswrongs closed 4 months ago

alicewriteswrongs commented 4 months ago

This adds some checks when a Stencil component is booting up that will re-use a shadow root if the host element already has one, instead of just calling this.attachShadow in all cases.

Additionally, Stencil's virtual DOM will now cleanly take over any elements which are already present in its root element when it first runs. This will allow it to re-use elements that were already created in the shadow root, as well as clean up any stray elements that shouldn't be there.

Together these changes will allow the Stencil runtime to smoothly take over a shadow root which was created via a <template> tag in the page's HTML, i.e. via declarative shadow DOM (DSD).

NOTE this only enables the Stencil runtime to re-use a shadow root created via DSD, it does not add any support to Stencil for rendering a suitable <template>... HTML string.

STENCIL-1316

What is the current behavior?

GitHub Issue Number: N/A

What is the new behavior?

Documentation

Does this introduce a breaking change?

Testing

Other information

github-actions[bot] commented 4 months ago

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1080 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files | Path | Error Count | | --- | --- | | src/dev-server/index.ts | 37 | | src/dev-server/server-process.ts | 32 | | src/compiler/prerender/prerender-main.ts | 22 | | src/runtime/vdom/vdom-render.ts | 21 | | src/runtime/client-hydrate.ts | 20 | | src/screenshot/connector-base.ts | 19 | | src/testing/puppeteer/puppeteer-element.ts | 19 | | src/dev-server/request-handler.ts | 15 | | src/compiler/prerender/prerender-optimize.ts | 14 | | src/compiler/sys/stencil-sys.ts | 14 | | src/runtime/connected-callback.ts | 14 | | src/sys/node/node-sys.ts | 14 | | src/compiler/prerender/prerender-queue.ts | 13 | | src/compiler/sys/in-memory-fs.ts | 13 | | src/runtime/set-value.ts | 13 | | src/compiler/output-targets/output-www.ts | 12 | | src/compiler/transformers/test/parse-vdom.spec.ts | 12 | | src/compiler/transformers/transform-utils.ts | 12 | | src/mock-doc/test/attribute.spec.ts | 12 | | src/compiler/build/compiler-ctx.ts | 11 |
Our most common errors | [Typescript Error Code](https://github.com/microsoft/TypeScript/blob/main/src/compiler/diagnosticMessages.json) | Count | | --- | --- | | TS2322 | 351 | | TS2345 | 330 | | TS18048 | 193 | | TS18047 | 76 | | TS2722 | 27 | | TS2532 | 24 | | TS2531 | 19 | | TS2454 | 14 | | TS2790 | 11 | | TS2352 | 9 | | TS2769 | 8 | | TS2416 | 7 | | TS2538 | 4 | | TS2493 | 3 | | TS18046 | 2 | | TS2684 | 1 | | TS2430 | 1 |

Unused exports report

There are 15 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports | File | Line | Identifier | | --- | --- | --- | | src/runtime/bootstrap-lazy.ts | 21 | setNonce | | src/screenshot/screenshot-fs.ts | 18 | readScreenshotData | | src/testing/testing-utils.ts | 198 | withSilentWarn | | src/utils/index.ts | 145 | CUSTOM | | src/utils/index.ts | 245 | NODE_TYPES | | src/utils/index.ts | 269 | normalize | | src/utils/index.ts | 7 | escapeRegExpSpecialCharacters | | src/compiler/app-core/app-data.ts | 25 | BUILD | | src/compiler/app-core/app-data.ts | 116 | Env | | src/compiler/app-core/app-data.ts | 118 | NAMESPACE | | src/compiler/fs-watch/fs-watch-rebuild.ts | 123 | updateCacheFromRebuild | | src/compiler/types/validate-primary-package-output-target.ts | 61 | satisfies | | src/compiler/types/validate-primary-package-output-target.ts | 61 | Record | | src/testing/puppeteer/puppeteer-declarations.ts | 485 | WaitForEventOptions | | src/compiler/sys/fetch/write-fetch-success.ts | 7 | writeFetchSuccessSync |
github-actions[bot] commented 4 months ago

PR built and packed!

Download the tarball here: https://github.com/ionic-team/stencil/actions/runs/9269810431/artifacts/1544211247

If your browser saves files to ~/Downloads you can install it like so:

unzip -d ~/Downloads ~/Downloads/stencil-core-4.18.2-dev.1716901330.409504a.tgz.zip && npm install ~/Downloads/stencil-core-4.18.2-dev.1716901330.409504a.tgz
alicewriteswrongs commented 4 months ago

closing in favor of #5792