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

feat: add data-lwc-host-mutated during SSR #4358

Merged
merged 6 commits into from
Jul 9, 2024

Conversation

nolanlawson
Copy link
Collaborator

@nolanlawson nolanlawson commented Jul 3, 2024

Details

Detects when an SSR'd component mutates its own host element (e.g. adding/removing classes/attributes) during its connectedCallback, adding a data-lwc-host-mutated attribute. This attribute is read during hydration time, and validation for the element's classes/attrs is skipped entirely, the same as if the component had explicitly set static validationOptOut = true.

The goal is to make it easier for component authors to ignore small hydration errors caused by mutating their hosts during connectedCallback.

Does this pull request introduce a breaking change?

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

Does this pull request introduce an observable change?

  • 🔬 Yes, it does include an observable change.

Kinda? But this is for SSR, which is not officially supported yet, and this removes restrictions rather than adding them.

GUS work item

  • W-15308607
  • W-15308601

@nolanlawson nolanlawson requested a review from a team as a code owner July 3, 2024 23:12

export default class Child extends LightningElement {
@api foo;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Removes a warning, because I wanted to test that there are no warnings.

@nolanlawson nolanlawson requested a review from divmain July 3, 2024 23:18
packages/@lwc/engine-server/src/utils/mutation-tracking.ts Outdated Show resolved Hide resolved
packages/@lwc/engine-server/src/utils/mutation-tracking.ts Outdated Show resolved Hide resolved
Comment on lines +4 to +7
yolo = 'woot';

connectedCallback() {
this.setAttribute('data-mutatis', 'mutandis');
Copy link
Contributor

Choose a reason for hiding this comment

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

So intellectual!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

🤓

import { LightningElement } from 'lwc';

export default class Child extends LightningElement {
yolo = 'woot';
Copy link
Contributor

Choose a reason for hiding this comment

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

So ... not.

Copy link
Contributor

@divmain divmain left a comment

Choose a reason for hiding this comment

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

Nolan and I went over the PR 1:1 on a video call. LGTM.

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