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.

Sign up for GitHub

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: only remove slot children in synthetic shadow #2843

Merged
merged 2 commits into from
May 25, 2022
Merged

fix: only remove slot children in synthetic shadow #2843

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8cfee1c
fix: only remove slot children in synthetic shadow
nolanlawson May 19, 2022
42c37c5
fix: use case block
nolanlawson May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/@lwc/engine-core/src/framework/rendering.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,9 @@ function unmount(vnode: VNode, parent: ParentNode, doRemove: boolean = false) {
removeNode(elm!, parent);
}

const removeChildren = sel === 'slot'; // slot content is removed to trigger slotchange event when removing slot
// Slot content is removed to trigger slotchange event when removing slot.
// Only required for synthetic shadow.
const removeChildren = sel === 'slot' && vnode.owner.shadowMode === ShadowMode.Synthetic;
switch (type) {
case VNodeType.Element:
unmountVNodes(vnode.children, elm as ParentNode, removeChildren);
Copy link
Member

Choose a reason for hiding this comment

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

The boolean comparison will certainly be faster than the string comparison. It would be preferable to do the boolean check first.

I would also move the removeChildren check in the VNodeType.Element case since slots can only be elements.

Suggested change
const removeChildren = sel === 'slot' && vnode.owner.shadowMode === ShadowMode.Synthetic;
switch (type) {
case VNodeType.Element:
unmountVNodes(vnode.children, elm as ParentNode, removeChildren);
const removeChildren = sel === 'slot' && vnode.owner.shadowMode === ShadowMode.Synthetic;
switch (type) {
case VNodeType.Element:
const removeChildren = vnode.owner.shadowMode === ShadowMode.Synthetic && sel === 'slot';
unmountVNodes(vnode.children, elm as ParentNode, removeChildren);

Copy link
Contributor

Choose a reason for hiding this comment

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

We have a lint rule: no-case-declarations that prevents us from doing that.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I assumed that the property lookup (vnode.owner.shadowMode) would be more expensive than a string comparison. I have no idea what the perf difference is, but it's probably a micro-optimization either way.

As Sattar said, yeah, we have to keep the removeChildren where it is unfortunately.

Copy link
Member

Choose a reason for hiding this comment

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

We have a lint rule: no-case-declarations that prevents us from doing that.

Aren't rules made to be broken? 🤣

More seriously, this ESLint rule prevents declaration in switch to avoid re-declaration. By default, variables are declared at the switch level and not at the case level (detail). The way to work around this is to create a new block scope for cases with variable declarations.

switch (type) {
  case VNodeType.Element: {
    const removeChildren = vnode.owner.shadowMode === ShadowMode.Synthetic && sel === 'slot';
  },
  // [...]
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Added a case block.

Expand Down