bug #1828 [LiveComponent] Tokenize classes on all allowed whitespaces (aleho)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[LiveComponent] Tokenize classes on all allowed whitespaces

| 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.`.

Commits
-------

ca47377 [LiveComponent] Tokenize classes on all allowed whitespaces

Author: kbond

src/LiveComponent/assets/dist/live_controller.js

@@ -1822,17 +1822,8 @@ class ExternalMutationTracker {
     }
     handleClassAttributeMutation(mutation, elementChanges) {
         const element = mutation.target;
-        const previousValue = mutation.oldValue;
-        const previousValues = previousValue ? previousValue.split(' ') : [];
-        previousValues.forEach((value, index) => {
-            const trimmedValue = value.trim();
-            if (trimmedValue !== '') {
-                previousValues[index] = trimmedValue;
-            }
-            else {
-                previousValues.splice(index, 1);
-            }
-        });
+        const previousValue = mutation.oldValue || '';
+        const previousValues = previousValue.match(/(\S+)/gu) || [];
         const newValues = [].slice.call(element.classList);
         const addedValues = newValues.filter((value) => !previousValues.includes(value));
         const removedValues = previousValues.filter((value) => !newValues.includes(value));

src/LiveComponent/assets/src/Rendering/ExternalMutationTracker.ts

@@ -189,16 +189,8 @@ export default class {
     private handleClassAttributeMutation(mutation: MutationRecord, elementChanges: ElementChanges) {
         const element = mutation.target as Element;
 
-        const previousValue = mutation.oldValue;
-        const previousValues = previousValue ? previousValue.split(' ') : [];
-        previousValues.forEach((value, index) => {
-            const trimmedValue = value.trim();
-            if (trimmedValue !== '') {
-                previousValues[index] = trimmedValue;
-            } else {
-                previousValues.splice(index, 1);
-            }
-        });
+        const previousValue = mutation.oldValue || '';
+        const previousValues: string[] = previousValue.match(/(\S+)/gu) || [];
 
         const newValues: string[] = [].slice.call(element.classList);
         const addedValues = newValues.filter((value) => !previousValues.includes(value));

src/LiveComponent/assets/test/Rendering/ExternalMutationTracker.test.ts

@@ -114,7 +114,7 @@ describe('ExternalMutationTracker', () => {
         element.classList.remove('second-class');
         element.classList.add('second-class');
         // add new (with some whitespace to be sneaky)
-        element.setAttribute('class', ` ${element.getAttribute('class')} new-class `)
+        element.setAttribute('class', ` ${element.getAttribute('class')} \n    new-class `)
         // remove
         element.classList.remove('first-class');
         // add then remove
@@ -135,6 +135,34 @@ describe('ExternalMutationTracker', () => {
         expect(changes.getRemovedClasses()).toEqual(['first-class']);
     });
 
+    it('can track class changes with whitespaces', async () => {
+        const { element, tracker } = createTracker(`
+            <div 
+                class="
+                    first-class
+                    second-class
+                    third-class
+                "
+            >Text inside!</div>
+        `)
+
+        element.classList.remove('second-class');
+        element.classList.add('new-class');
+        await shortTimeout();
+
+        const changes = tracker.getChangedElement(element);
+        if (!changes) {
+            throw new Error('Expected changes to be present');
+        }
+        expect(changes.getChangedStyles()).toHaveLength(0);
+        expect(changes.getRemovedStyles()).toHaveLength(0);
+        expect(changes.getChangedAttributes()).toHaveLength(0);
+        expect(changes.getRemovedAttributes()).toHaveLength(0);
+
+        expect(changes.getAddedClasses()).toEqual(['new-class']);
+        expect(changes.getRemovedClasses()).toEqual(['second-class']);
+    });
+
     it('can track added element', async () => {
         const { element, tracker } = createTracker(`
             <div>