Merge pull request #554 from HugoDF/class-parsing

Extract convertClassStringToArray util

src/component.js

@@ -1,4 +1,4 @@
-import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce } from './utils'
+import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, convertClassStringToArray } from './utils'
 import { handleForDirective } from './directives/for'
 import { handleAttributeBindingDirective } from './directives/bind'
 import { handleTextDirective } from './directives/text'
@@ -163,7 +163,7 @@ export default class Component {
         // To support class attribute merging, we have to know what the element's
         // original class attribute looked like for reference.
         if (el.hasAttribute('class') && getXAttrs(el, this).length > 0) {
-            el.__x_original_classes = el.getAttribute('class').split(' ')
+            el.__x_original_classes = convertClassStringToArray(el.getAttribute('class'))
         }
 
         this.registerListeners(el, extraVars)

src/directives/bind.js

@@ -1,4 +1,4 @@
-import { arrayUnique, isBooleanAttr } from '../utils'
+import { arrayUnique, isBooleanAttr, convertClassStringToArray } from '../utils'
 
 export function handleAttributeBindingDirective(component, el, attrName, expression, extraVars, attrType) {
     var value = component.evaluateReturnExpression(el, expression, extraVars)
@@ -52,14 +52,14 @@ export function handleAttributeBindingDirective(component, el, attrName, express
 
             keysSortedByBooleanValue.forEach(classNames => {
                 if (value[classNames]) {
-                    classNames.split(' ').filter(Boolean).forEach(className => el.classList.add(className))
+                    convertClassStringToArray(classNames).forEach(className => el.classList.add(className))
                 } else {
-                    classNames.split(' ').filter(Boolean).forEach(className => el.classList.remove(className))
+                    convertClassStringToArray(classNames).forEach(className => el.classList.remove(className))
                 }
             })
         } else {
             const originalClasses = el.__x_original_classes || []
-            const newClasses = value.split(' ').filter(Boolean)
+            const newClasses = convertClassStringToArray(value)
             el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '))
         }
     } else {

src/utils.js

@@ -157,6 +157,10 @@ export function replaceAtAndColonWithStandardSyntax(name) {
     return name
 }
 
+export function convertClassStringToArray(classList, filterFn = Boolean) {
+    return classList.split(' ').filter(filterFn)
+}
+
 export function transitionIn(el, show, component, forceSkip = false) {
     if (forceSkip) return show()
 
@@ -340,20 +344,17 @@ export function transitionClassesIn(el, component, directives, showCallback) {
             : expression
     }
 
-    const enter = ensureStringExpression((directives.find(i => i.value === 'enter') || { expression: '' }).expression)
-        .split(' ').filter(i => i !== '')
-    const enterStart = ensureStringExpression((directives.find(i => i.value === 'enter-start') || { expression: '' }).expression)
-        .split(' ').filter(i => i !== '')
-    const enterEnd = ensureStringExpression((directives.find(i => i.value === 'enter-end') || { expression: '' }).expression)
-        .split(' ').filter(i => i !== '')
+    const enter = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter') || { expression: '' }).expression))
+    const enterStart = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter-start') || { expression: '' }).expression))
+    const enterEnd = convertClassStringToArray(ensureStringExpression((directives.find(i => i.value === 'enter-end') || { expression: '' }).expression))
 
     transitionClasses(el, enter, enterStart, enterEnd, showCallback, () => {})
 }
 
 export function transitionClassesOut(el, component, directives, hideCallback) {
-    const leave = (directives.find(i => i.value === 'leave') || { expression: '' }).expression.split(' ').filter(i => i !== '')
-    const leaveStart = (directives.find(i => i.value === 'leave-start') || { expression: '' }).expression.split(' ').filter(i => i !== '')
-    const leaveEnd = (directives.find(i => i.value === 'leave-end') || { expression: '' }).expression.split(' ').filter(i => i !== '')
+    const leave = convertClassStringToArray((directives.find(i => i.value === 'leave') || { expression: '' }).expression)
+    const leaveStart = convertClassStringToArray((directives.find(i => i.value === 'leave-start') || { expression: '' }).expression)
+    const leaveEnd = convertClassStringToArray((directives.find(i => i.value === 'leave-end') || { expression: '' }).expression)
 
     transitionClasses(el, leave, leaveStart, leaveEnd, () => {}, hideCallback)
 }