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(ssr): fix rendering of class attribute #4805

Merged
merged 7 commits into from
Nov 12, 2024
Merged

Conversation

nolanlawson
Copy link
Collaborator

Details

Fixes a couple tests for rendering the class attribute. We weren't correctly handling the scope token in a number of places, including:

  1. When the parent has a scope token but the child doesn't (and vice versa)
  2. When they both do
  3. When the class contains spaces, tabs, etc.
  4. How the scope token interacts with the above

I also added some more tests to handle more edge cases.

Before: 154 passed out of 199
After: 158 passed out of 203

(Two of the newly-added tests are failing due to #4802.)

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.

@nolanlawson nolanlawson requested a review from a team as a code owner November 7, 2024 23:38
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 get the intention behind writing renderAttrs twice, but I figured we can just write it once using string concatenation and then share the impl for both yield and no-yield flavor. No-yield is probably going away soon anyway.

}
throw new Error(`Unimplemented child attr IR node type: ${value.type}`);
})
.filter(Boolean) as EsProperty[];
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
.filter(Boolean) as EsProperty[];
.filter(<T>(v: T): v is NonNullable<T> => v)

I thiiink this works?

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 think this is actually less clear than the previous version. It's a shame TS doesn't understand .filter(Boolean).

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
.filter(Boolean) as EsProperty[];
.filter(v => v is EsProperty => Boolean(v));

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Didn't work. I'm not going to fight TypeScript on this one

'attribute-class/with-scoped-styles/dynamic/index.js',
'attribute-class/with-scoped-styles/static/index.js',
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We need to implement template class binding: salesforce/lwc-rfcs#87

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@nolanlawson nolanlawson merged commit bf231db into master Nov 12, 2024
11 checks passed
@nolanlawson nolanlawson deleted the nolan/class-attr-fix branch November 12, 2024 20:27
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