fix(runtime): allow setting `key` attr on nested Stencil components #5164

alicewriteswrongs · 2023-12-12T20:05:57Z

This makes it possible to set a key attribute on a nested Stencil component without messing up how hydration works. I noticed that this was not working correctly when working on #5143.

What is the current behavior?

There's a regression test which will reproduce the issue if run in the context of main. In short, if you have two components like so:

    @Component({ tag: 'cmp-a' })
    class CmpA {
      render() {
        return (
          <Host key="test">
            <cmp-b key="my-test-key">light-dom</cmp-b>
          </Host>
        );
      }
    }
    @Component({ tag: 'cmp-b' })
    class CmpB {
      render() {
        return (
          <Host>
            <slot key="key1"></slot>
            <footer key="key2"></footer>
          </Host>
        );
      }
    }

You'll get rendering issues where comments that need to be present for slot relocation and whatnot to work aren't appearing. Not good!

What is the new behavior?

This ensures that we only start to check whether vnode.$key$ matches between vnodes after the first render. This fixes a situation where on the first render the .$key$ property of the old root vnode would always be null, leading the comparison to result in always re-rendering the component.

Does this introduce a breaking change?

Yes
No

Testing

I've run this in Framework (the unit tests) and haven't seen any issues, and I've also checked in out in an example hydrate app I created the other day.

Other information

github-actions · 2023-12-12T20:07:19Z

`--strictNullChecks` error report

Typechecking with --strictNullChecks resulted in 1300 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/mock-doc/serialize-node.ts	36
src/dev-server/server-process.ts	32
src/compiler/output-targets/dist-lazy/generate-lazy-module.ts	22
src/compiler/prerender/prerender-main.ts	22
src/testing/puppeteer/puppeteer-element.ts	22
src/runtime/client-hydrate.ts	20
src/screenshot/connector-base.ts	19
src/runtime/vdom/vdom-render.ts	18
src/compiler/config/test/validate-paths.spec.ts	16
src/dev-server/request-handler.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/compiler/transpile/transpile-module.ts	14
src/runtime/vdom/vdom-annotations.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/connected-callback.ts	13
src/runtime/set-value.ts	13

Our most common errors

Typescript Error Code	Count
TS2345	376
TS2322	373
TS18048	286
TS18047	102
TS2722	37
TS2532	30
TS2531	23
TS2454	14
TS2352	12
TS2790	10
TS2769	8
TS2538	8
TS2344	6
TS2416	6
TS2493	3
TS2488	2
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 14 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	269	normalize
src/utils/index.ts	7	escapeRegExpSpecialCharacters
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	115	Env
src/compiler/app-core/app-data.ts	117	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

alicewriteswrongs

one note

alicewriteswrongs · 2023-12-12T20:24:08Z

src/runtime/test/hydrate-no-encapsulation.spec.tsx

@@ -166,6 +166,69 @@ describe('hydrate no encapsulation', () => {
    `);
  });

+  it('nested text slot with key', async () => {


this test is a reproduction of the issue I was seeing, if you wanted to see what happens you could check out this branch locally and either run the test without rebuilding or

git checkout origin/main -- src/runtime/vdom/vdom-render.ts npm run build npx jest --clearCache npx --node-options=--experimental-vm-modules jest --coverage=false -- hydrate-no-encapsulation

which will run this test without the fix so you can see what happens

I ran this locally, adding what I found for posterity:

● hydrate no encapsulation › nested text slot with key expect(received).toBe(expected) // Object.is equality - Expected - 3 + Received + 1 <cmp-a class="hydrated">  <cmp-b class="hydrated"> -  -  -  +  light-dom <footer></footer> </cmp-b> </cmp-a>

Yup that's what I expect to see 👍

rwaskiewicz

LGTM - added a few non-blocking ocmments

rwaskiewicz · 2023-12-13T15:11:05Z

src/runtime/test/hydrate-no-encapsulation.spec.tsx

+        );
+      }
+    }
+    // @ts-ignore


For my own knowledge, why do we need this @ts-ignore? If we need it, can we add a justification/reason why we need it in the comment for future us?

We don't! I copy-pasted an existing test which has this (every test in this file does) and just assumed it was necessary. However, it's not! That's for two reasons:

we don't type-check the spec.tsx files anyway (they're not included in tsconfig.include) so removing these doesn't cause any new errors

it appears that additionally whatever errors these were added to suppress aren't present, since if I add src/**/*.tsx to include in tsconfig.json and then start removing these @ts-ignore comments I don't see any new errors

So I'm going to go ahead and just remove them all from the file

rwaskiewicz · 2023-12-13T15:11:09Z

src/runtime/test/hydrate-no-encapsulation.spec.tsx

+      </cmp-a>
+    `);
+
+    // @ts-ignore


For my own knowledge, why do we need this @ts-ignore? If we need it, can we add a justification/reason why we need it in the comment for future us?

rwaskiewicz · 2023-12-13T15:14:18Z

src/runtime/test/hydrate-no-encapsulation.spec.tsx

@@ -166,6 +166,69 @@ describe('hydrate no encapsulation', () => {
    `);
  });

+  it('nested text slot with key', async () => {


I ran this locally, adding what I found for posterity:

● hydrate no encapsulation › nested text slot with key expect(received).toBe(expected) // Object.is equality - Expected - 3 + Received + 1 <cmp-a class="hydrated">  <cmp-b class="hydrated"> -  -  -  +  light-dom <footer></footer> </cmp-b> </cmp-a>

christian-bromann

Aside from what @rwaskiewicz already pointed out, LGTM 👍

This makes it possible to set a key attribute on a nested Stencil component without messing up how hydration works. This fixes a bug which was noticed while working on #5143.

alicewriteswrongs marked this pull request as ready for review December 12, 2023 20:21

alicewriteswrongs requested a review from a team as a code owner December 12, 2023 20:21

alicewriteswrongs requested review from christian-bromann and rwaskiewicz December 12, 2023 20:21

alicewriteswrongs commented Dec 12, 2023

View reviewed changes

rwaskiewicz approved these changes Dec 13, 2023

View reviewed changes

christian-bromann approved these changes Dec 13, 2023

View reviewed changes

alicewriteswrongs force-pushed the ap/enable-stencil-component-key branch from e614583 to 414be47 Compare December 13, 2023 18:23

alicewriteswrongs requested a review from rwaskiewicz December 13, 2023 18:25

rwaskiewicz approved these changes Dec 13, 2023

View reviewed changes

alicewriteswrongs force-pushed the ap/enable-stencil-component-key branch from 414be47 to 6cd5893 Compare December 13, 2023 18:28

alicewriteswrongs enabled auto-merge December 13, 2023 18:29

fix(runtime): allow setting key attr on nested Stencil components

a92ffe2

This makes it possible to set a key attribute on a nested Stencil component without messing up how hydration works. This fixes a bug which was noticed while working on #5143.

alicewriteswrongs force-pushed the ap/enable-stencil-component-key branch from 6cd5893 to a92ffe2 Compare December 13, 2023 18:29

alicewriteswrongs added this pull request to the merge queue Dec 13, 2023

Merged via the queue into main with commit f6903a8 Dec 13, 2023
120 checks passed

alicewriteswrongs deleted the ap/enable-stencil-component-key branch December 13, 2023 18:46

rwaskiewicz added the Bug: Validated This PR or Issue is verified to be a bug within Stencil label Dec 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(runtime): allow setting `key` attr on nested Stencil components #5164

fix(runtime): allow setting `key` attr on nested Stencil components #5164

alicewriteswrongs commented Dec 12, 2023 •

edited

Loading

github-actions bot commented Dec 12, 2023 •

edited

Loading

alicewriteswrongs left a comment

alicewriteswrongs Dec 12, 2023

rwaskiewicz Dec 13, 2023

alicewriteswrongs Dec 13, 2023

rwaskiewicz left a comment

rwaskiewicz Dec 13, 2023

alicewriteswrongs Dec 13, 2023

rwaskiewicz Dec 13, 2023

rwaskiewicz Dec 13, 2023

christian-bromann left a comment

fix(runtime): allow setting key attr on nested Stencil components #5164

fix(runtime): allow setting key attr on nested Stencil components #5164

Conversation

alicewriteswrongs commented Dec 12, 2023 • edited Loading

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Testing

Other information

github-actions bot commented Dec 12, 2023 • edited Loading

--strictNullChecks error report

reports and statistics

Unused exports report

alicewriteswrongs left a comment

Choose a reason for hiding this comment

alicewriteswrongs Dec 12, 2023

Choose a reason for hiding this comment

rwaskiewicz Dec 13, 2023

Choose a reason for hiding this comment

alicewriteswrongs Dec 13, 2023

Choose a reason for hiding this comment

rwaskiewicz left a comment

Choose a reason for hiding this comment

rwaskiewicz Dec 13, 2023

Choose a reason for hiding this comment

alicewriteswrongs Dec 13, 2023

Choose a reason for hiding this comment

rwaskiewicz Dec 13, 2023

Choose a reason for hiding this comment

rwaskiewicz Dec 13, 2023

Choose a reason for hiding this comment

christian-bromann left a comment

Choose a reason for hiding this comment

fix(runtime): allow setting `key` attr on nested Stencil components #5164

fix(runtime): allow setting `key` attr on nested Stencil components #5164

alicewriteswrongs commented Dec 12, 2023 •

edited

Loading

github-actions bot commented Dec 12, 2023 •

edited

Loading

`--strictNullChecks` error report