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

[LiveComponent] Tokenize classes on all allowed whitespaces #1828

Open
wants to merge 4 commits into
base: 2.x
Choose a base branch
from

Conversation

aleho
Copy link

@aleho aleho commented May 6, 2024

Q A
Bug fix? yes
New feature? no
Issues Fix #1819
License MIT

The class attribute can be tokenized by any white space as defined by the HTML spec.

When a class attribute contains whitespaces other than a space change tracking fails and invalid classes are applied resulting in Uncaught (in promise) DOMException: DOMTokenList.remove: The empty string is not a valid token..

@carsonbot carsonbot added Bug Bug Fix LiveComponent Status: Needs Review Needs to be reviewed labels May 6, 2024
@aleho
Copy link
Author

aleho commented May 6, 2024

I don't understand why .splice() was used instead of a new array. Can't be for performance reasons, or can it?

@aleho
Copy link
Author

aleho commented May 6, 2024

Also, forgot to mention: I'd consider a regex to tokenize the string a more elegant solution.

Any objections against that?

@smnandre
Copy link
Collaborator

smnandre commented May 8, 2024

Could you rebuild the packages ? (that's the origin of the CI failures)

(yarn run build from the repository root i think)

@aleho
Copy link
Author

aleho commented May 8, 2024

Of course! Didn't find anything in the docs and wasn't sure whether that's something that actually has to be done in the PR or will be done on release.

@smnandre
Copy link
Collaborator

smnandre commented May 8, 2024

Yep this would need some CONTRIB file.. i'll open an issue :)

@smnandre
Copy link
Collaborator

smnandre commented May 8, 2024

#1836 :)

@smnandre
Copy link
Collaborator

smnandre commented May 8, 2024

Do you think you could add a quick test, to prevent any future regression ? 😊

@aleho
Copy link
Author

aleho commented May 13, 2024

I would like to but I didn't see any browser tests in LiveComponents.

Could you point me in the right direction where actual browser integration is tested for live_controller.js?

@aleho aleho force-pushed the 2.x branch 3 times, most recently from 292f19d to 268b2df Compare May 13, 2024 13:04
@aleho
Copy link
Author

aleho commented May 13, 2024

Never mind. I figured LiveComponent doesn't have any browser tests yet and tried to add them.

This PR got bigger than expected, please let me know if anything's missing.

@aleho aleho force-pushed the 2.x branch 2 times, most recently from 93353e1 to a290b51 Compare May 13, 2024 13:27
@smnandre
Copy link
Collaborator

wow indeed :) I'll look in the week as soon as i can ! Thank you for the efforts :)

@aleho
Copy link
Author

aleho commented May 29, 2024

@smnandre Any news? Did you have time to have a quick look at it?

@smnandre
Copy link
Collaborator

smnandre commented Jun 4, 2024

Hello @aleho ! Sorry i've been crazy busy those last weeks...

Thank you very much for this!

I'm not sure we need right now a full panther stack with panther :| (really not sure there, but could this test be done like the others ?)

I'll let @kbond (that is his domain much more than mine to be honest) and @WebMamba check and give their opinion :))

My personal impresion: we should maybe try to make the suggested changes in a smaller PR, and address the "panther tests" in a distinct one ? 🤷

@aleho
Copy link
Author

aleho commented Jun 4, 2024

Hello @aleho ! Sorry i've been crazy busy those last weeks...

No worries, we all know how it is.

I'm not sure we need right now a full panther stack with panther :| (really not sure there, but could this test be done like the others ?)

There are already Panther tests for Turbo, which this PR is somewhat based on. The reason I think there's no other way to "reliably" test this is that it has to be run in a JS engine in a browser to break. Being the author of this PR I might be biased though. ;)

My personal impresion: we should maybe try to make the suggested changes in a smaller PR, and address the "panther tests" in a distinct one ? 🤷

I can do that. On the other hand, the bigger part of this PR will only affect the tests / GitHub actions, so it's not going to have a lot of impact even if it breaks (and, as I said, Panther is already used anyway). Moreover this bug fix would not have a valid test case if it is split until the other part is merged as well.

The class attribute can be tokenized by any white space as defined by
the HTML spec. A class string containing new lines was not correctly
cleaned / trimmed, resulting in incorrectly detected class changes and a
browser error if empty classes or classes with newlines were applied.

Fixes symfony#1819
@aleho
Copy link
Author

aleho commented Jun 11, 2024

This could have been a nice fix for 2.18, just saying 😉.

I'm still fine with either solution! Please just tell me how you'd like to move forward, but, please, don't let this sit for another month and then another for a release. 😭

@smnandre
Copy link
Collaborator

We've all been crazy busy around here these last weeks... it's an open source project you know, and we have limited time after work, family and stuff..

And believe me when i say we would all love to have more time 😄

I just poked other regulars to come review this / give you feedback ... so that will be soon i think :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[LiveComponent] Morph error trying to apply invalid classes
3 participants