[LiveComponent] Tokenize classes on all allowed whitespaces

symfony · Jun 26, 2024 · ca47377 · ca47377
1 parent fed00e2
commit ca47377
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/src/LiveComponent/assets/dist/live_controller.js b/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));

diff --git a/src/LiveComponent/assets/src/Rendering/ExternalMutationTracker.ts b/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));

diff --git a/src/LiveComponent/assets/test/Rendering/ExternalMutationTracker.test.ts b/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>