Skip to content

fix: mismatched scoped / light slots / data#5131

Merged
jhefferman-sfdc merged 3 commits intomasterfrom
jhefferman/mismatched-scoped-slots-fix
Jan 13, 2025
Merged

fix: mismatched scoped / light slots / data#5131
jhefferman-sfdc merged 3 commits intomasterfrom
jhefferman/mismatched-scoped-slots-fix

Conversation

@jhefferman-sfdc
Copy link
Contributor

Details

Does this pull request introduce a breaking change?

  • 😮‍💨 No, it does not introduce a breaking change.

Does this pull request introduce an observable change?

  • 🤞 No, it does not introduce an observable change.

GUS work item

W-17555947

@jhefferman-sfdc jhefferman-sfdc requested a review from a team as a code owner January 13, 2025 15:05
const slotName = ${/* slotName */ is.expression};
const lightGenerators = lightSlottedContent?.[slotName ?? ""];
const scopedGenerators = scopedSlottedContent?.[slotName ?? ""];
const mismatchedSlots = (isScopedSlot && lightGenerators) || (!isScopedSlot && scopedGenerators);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For mismatched slot case an error is logged in v1 / client (we don't throw). Error is logged non-production only. There was no precedence in v2 for this so do we need to do anything? Throwing would be too much, it needs to recover.

Copy link
Contributor

Choose a reason for hiding this comment

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

Logged errors are essentially meaningless, so I don't think we need to do anything here. It would be nice to have error logging somewhere in v2, but also not a big deal, since presumably folks can see the same logged error in their browser DevTools.

(As an aside, it should probably be a console.warn too! #3692)

Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const mismatchedSlots = (isScopedSlot && lightGenerators) || (!isScopedSlot && scopedGenerators);
const mismatchedSlots = isScopedSlot ? lightGenerators : scopedGenerators;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, that is more elegant

@jhefferman-sfdc jhefferman-sfdc changed the title fix: mismatched (un)scoped slot data / slots fix: mismatched scoped / light slots / data Jan 13, 2025
Copy link
Contributor

@nolanlawson nolanlawson left a comment

Choose a reason for hiding this comment

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

This looks reasonable to me, and it's definitely a huge improvement. (4 tests fixed!) I'm a little concerned though that I don't understand why these fixes worked. Figuring out exactly why engine-dom/engine-server behave the way they do and then adding thorough comments would be super helpful.

const slotName = ${/* slotName */ is.expression};
const lightGenerators = lightSlottedContent?.[slotName ?? ""];
const scopedGenerators = scopedSlottedContent?.[slotName ?? ""];
const mismatchedSlots = (isScopedSlot && lightGenerators) || (!isScopedSlot && scopedGenerators);
Copy link
Contributor

Choose a reason for hiding this comment

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

Logged errors are essentially meaningless, so I don't think we need to do anything here. It would be nice to have error logging somewhere in v2, but also not a big deal, since presumably folks can see the same logged error in their browser DevTools.

(As an aside, it should probably be a console.warn too! #3692)

if (isScopedSlot && i < generators.length - 1) {
yield '<!---->';
yield '<!---->';
}
Copy link
Contributor

Choose a reason for hiding this comment

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

This is really bizarre behavior! I wonder what explains it.

Copy link
Contributor

@nolanlawson nolanlawson Jan 13, 2025

Choose a reason for hiding this comment

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

Oh wait I think I see – it's because of the double bookend? So the double bookend logic for the start/end is handled elsewhere?

It might be good to add a comment explaining this!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep exactly. Added a note to explain that!

const slotName = ${/* slotName */ is.expression};
const lightGenerators = lightSlottedContent?.[slotName ?? ""];
const scopedGenerators = scopedSlottedContent?.[slotName ?? ""];
const mismatchedSlots = (isScopedSlot && lightGenerators) || (!isScopedSlot && scopedGenerators);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const mismatchedSlots = (isScopedSlot && lightGenerators) || (!isScopedSlot && scopedGenerators);
const mismatchedSlots = isScopedSlot ? lightGenerators : scopedGenerators;

}
} else {
// If there were mismatched slots, do not fallback to the default
} else if (!mismatchedSlots) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd love to understand why mismatched slots have any impact here.

Copy link
Contributor Author

@jhefferman-sfdc jhefferman-sfdc Jan 13, 2025

Choose a reason for hiding this comment

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

Added a comment here to explain: This is required for parity with engine-core which resets children to an empty array when there are children (mismatched or not). Because the child nodes are reset, the default slotted content is not rendered in the mismatched slot case. See here. I'm guessing this is a sort-of-bug but fixing it would mean a v1/client behavior change and I don't think it's worth it....

@jhefferman-sfdc
Copy link
Contributor Author

This looks reasonable to me, and it's definitely a huge improvement. (4 tests fixed!) I'm a little concerned though that I don't understand why these fixes worked. Figuring out exactly why engine-dom/engine-server behave the way they do and then adding thorough comments would be super helpful.

Thank you for reviewing! I added some additional clarification comments and made the ternary simplification for the mismatchedSlot condition.

@jhefferman-sfdc jhefferman-sfdc merged commit 2b678bb into master Jan 13, 2025
8 checks passed
@jhefferman-sfdc jhefferman-sfdc deleted the jhefferman/mismatched-scoped-slots-fix branch January 13, 2025 21:46
Comment on lines +49 to +50
yield '<!---->';
yield '<!---->';
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
yield '<!---->';
yield '<!---->';
yield '<!----><!---->';

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.

3 participants