Merge pull request #847 from bbugh/fix-empty-class-binding

Fix "Cannot read property 'split' of undefined" error on empty class binding

dist/alpine-ie11.js

@@ -6540,7 +6540,7 @@
       } else {
         var _originalClasses = el.__x_original_classes || [];
 
-        var newClasses = convertClassStringToArray(value);
+        var newClasses = value ? convertClassStringToArray(value) : [];
         el.setAttribute('class', arrayUnique(_originalClasses.concat(newClasses)).join(' '));
       }
     } else {

dist/alpine.js

@@ -692,7 +692,7 @@
         });
       } else {
         const originalClasses = el.__x_original_classes || [];
-        const newClasses = convertClassStringToArray(value);
+        const newClasses = value ? convertClassStringToArray(value) : [];
         el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '));
       }
     } else {

src/directives/bind.js

@@ -62,7 +62,7 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             })
         } else {
             const originalClasses = el.__x_original_classes || []
-            const newClasses = convertClassStringToArray(value)
+            const newClasses = value ? convertClassStringToArray(value) : []
             el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '))
         }
     } else {

test/bind.spec.js

@@ -484,6 +484,24 @@ test('extra whitespace in class binding string syntax is ignored', async () => {
     expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
 })
 
+test('undefined class binding resolves to empty string', async () => {
+    jest.spyOn(window, 'setTimeout').mockImplementation((callback,time) => {
+        callback()
+    });
+
+    document.body.innerHTML = `
+        <div x-data="{ errorClass: (hasError) => { if (hasError) { return 'red' } } }">
+            <span id="error" x-bind:class="errorClass(true)">should be red</span>
+            <span id="empty" x-bind:class="errorClass(false)">should be empty</span>
+        </div>
+    `
+
+    await expect(Alpine.start()).resolves.toBeUndefined()
+
+    expect(document.querySelector('#error').classList.value).toEqual('red')
+    expect(document.querySelector('#empty').classList.value).toEqual('')
+})
+
 test('.camel modifier correctly sets name of attribute', async () => {
     document.body.innerHTML = `
         <div x-data>