Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime): slotted content order with sibling elements #4994

Merged
merged 9 commits into from
Oct 27, 2023

Conversation

tanner-reits
Copy link
Contributor

What is the current behavior?

It is possible for slot content that gets relocated to a nested component to appear in the wrong order with the nested component's other non-slotted elements. This was due to logic we had for keeping relocated content in the correct order within a slot executing when it shouldn't and changing our relocation node.

Fixes: #2997

What is the new behavior?

  • The culprit code has been wrapped in a check to only execute in certain situations that make sense (i.e. when the slot has other relocated elements)
  • Documented the code responsible for determining where to insert the relocated node for posterity
  • Cleaned up some of the code to make things more readable

Does this introduce a breaking change?

  • Yes
  • No

Testing

All existing unit and e2e tests continue to pass. Added an e2e test for the reproduction case from the linked issue

Other information

This is only available with the experimentalSlotFixes extra config flag is active

@github-actions
Copy link
Contributor

github-actions bot commented Oct 26, 2023

--strictNullChecks error report

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

That's 2 fewer than on main! 🎉🎉🎉

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/build/build-stats.ts 27
src/compiler/output-targets/dist-lazy/generate-lazy-module.ts 25
src/compiler/style/test/optimize-css.spec.ts 23
src/testing/puppeteer/puppeteer-element.ts 23
src/compiler/prerender/prerender-main.ts 22
src/runtime/client-hydrate.ts 19
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/build/build-finish.ts 13
src/compiler/prerender/prerender-queue.ts 13
Our most common errors
Typescript Error Code Count
TS2345 418
TS2322 395
TS18048 310
TS18047 101
TS2722 38
TS2532 34
TS2531 23
TS2454 14
TS2352 13
TS2769 10
TS2790 10
TS2538 8
TS2344 5
TS2416 4
TS2493 3
TS18046 2
TS2684 1
TS2488 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 232 resolve
src/utils/index.ts 246 normalize
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 62 satisfies
src/compiler/types/validate-primary-package-output-target.ts 62 Record
src/testing/puppeteer/puppeteer-declarations.ts 485 WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts 7 writeFetchSuccessSync

@tanner-reits
Copy link
Contributor Author

Tried to break this down by commit to help with the noise of some cleanup and documentation stuff. Changes to actual logic are in 67c340a & 33de030

@tanner-reits tanner-reits marked this pull request as ready for review October 26, 2023 15:27
@tanner-reits tanner-reits requested a review from a team as a code owner October 26, 2023 15:27
@tanner-reits tanner-reits requested review from rwaskiewicz and alicewriteswrongs and removed request for a team October 26, 2023 15:27
Copy link
Contributor

@alicewriteswrongs alicewriteswrongs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

two questions!

Copy link
Contributor

@rwaskiewicz rwaskiewicz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one non-blocking question

//
// If there is no node immediately following the slot reference node, then we will just
// end up appending the node as the last child of the parent.
let insertBeforeNode = slotRefNode.nextSibling as d.RenderNode | null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this type assertion? I'm not sure what purpose it's serving here ATM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw #4994 (comment) after I approved this, but I'm not sure I understand (but also, my brain is actively turning to goo)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to cast it since we may reassign this value later and the types won't match. nextSibling is of type ChildNode | null | undefined, but in the while loop we reassign a node that could be RenderNode | null | undefined. I tried to update our RenderNode interface to type nextSibling and previousSibling as RenderNode | null, but that broke types in some other places, so didn't wanna fight with that right now.

@tanner-reits tanner-reits linked an issue Oct 27, 2023 that may be closed by this pull request
Base automatically changed from treits/fix/slot-name-forwarding to main October 27, 2023 14:37
@tanner-reits tanner-reits force-pushed the treits/fix/slot-element-order branch from 2acf4f3 to 71d7516 Compare October 27, 2023 18:32
@tanner-reits tanner-reits added this pull request to the merge queue Oct 27, 2023
Merged via the queue into main with commit 740c1e4 Oct 27, 2023
@tanner-reits tanner-reits deleted the treits/fix/slot-element-order branch October 27, 2023 18:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Nested slots mis-ordered when not using Shadow DOM
3 participants