fixes

vigour-io · Dec 23, 2016 · 091e046 · 091e046
1 parent 1ee4f35
commit 091e046
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 36 deletions.
diff --git a/lib/property/class.js b/lib/property/class.js
@@ -1,12 +1,11 @@
 import parent from '../render/dom/parent'
 import { get$ } from '../get'
-import { get } from 'brisky-struct'
+import { get, getKeys } from 'brisky-struct'
 
 const injectable = {}
 
 export default injectable
 
-// optmize with this
 // const getStyletron = t => t.styletron !== void 0
 //   ? t.styletron
 //   : t.inherits && getStyletron(t.inherits)
@@ -30,8 +29,8 @@ injectable.props = {
         } else if (typeof val === 'object') {
           val = ''
         }
-        const keys = t.keys()
-        setClassName(keys && keys.length ? parseStore(val, store) : val, node)
+        if (getKeys(t)) val = parseStore(val, store)
+        setClassName(val, node)
       },
       state (t, s, type, subs, tree, id, pid, store) {
         const node = parent(tree, pid)
@@ -43,8 +42,8 @@ injectable.props = {
           } else if (typeof val === 'object') {
             val = ''
           }
-          const keys = t.keys()
-          setClassName(keys && t.keys().length ? parseStore(val, store) : val, node)
+          if (getKeys(t)) val = parseStore(val, store)
+          setClassName(val, node)
         }
       }
     }
@@ -69,19 +68,27 @@ const parseStore = (val, store) => {
 }
 
 const setClassName = (val, node) => {
+  const tron = node.getAttribute('data-styletron')
   if (val) {
-    // this makes it a lot slower ofcourse...
-    const tron = node.getAttribute('data-styletron')
+    if (tron) val = val + tron
+    node.className = val
+  } else if ('className' in node) {
     if (tron) {
-      node.className = val + tron
+      node.className = tron
     } else {
-      node.className = val
+      node.removeAttribute('class')
     }
-  } else if ('className' in node) {
-    node.removeAttribute('class')
   }
 }
 
+// const setClassName = (val, node) => {
+//   if (val) {
+//     node.className = val
+//   } else if ('className' in node) {
+//     node.removeAttribute('class')
+//   }
+// }
+
 const parseKey = (t, pid) => {
   if (pid[0] === 'c') {
     for (let i = pid.length - 1; i >= 0; i--) {

diff --git a/lib/property/style/index.js b/lib/property/style/index.js
@@ -1,8 +1,8 @@
 import parent from '../../render/dom/parent'
 import ua from 'vigour-ua/navigator'
-import transform from './transform'
 import { property } from '../../render/static'
 import styletron from './styletron'
+import transform from './transform'
 
 const style = {
   type: 'property',

diff --git a/test/any/sort.js b/test/any/sort.js
@@ -1,10 +1,11 @@
-const { render } = require('../../')
+const { render, clearStyletron } = require('../../')
 const test = require('tape')
 const parse = require('parse-element')
 const strip = require('strip-formatting')
 const { create: s } = require('brisky-struct')
 
 test('any - sort', t => {
+  clearStyletron()
   const app = {
     types: {
       special: {
@@ -127,7 +128,31 @@ test('any - sort', t => {
     document.body.appendChild(elem)
   }
 
-  const result = strip(`<div><div style="border-top: 1px solid rgb(51, 51, 51); padding: 50px; text-align: center;"><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(80, 100, 100); transform: scale(1.2);">71</div><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(60, 100, 100); transform: scale(0.8);">31</div><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(40, 100, 100); transform: scale(0.7);">21</div></div><div style="border-top: 1px solid rgb(51, 51, 51); padding: 50px; text-align: center;"><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(80, 100, 100); transform: scale(1.2);">71</div><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(60, 100, 100); transform: scale(0.8);">31</div><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(40, 100, 100); transform: scale(0.7);">21</div></div><div style="border-top: 1px solid rgb(51, 51, 51); padding: 50px; text-align: center;"><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(80, 100, 100); transform: scale(1.2);">71</div></div><div><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); color: rgb(238, 238, 238); opacity: 1;">1</div></div><div style="border-top: 1px solid rgb(51, 51, 51); padding: 50px; text-align: center;"><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(20, 100, 100); transform: scale(0.6);">11</div><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(80, 100, 100); transform: scale(1.2);">71</div><div style="font-size: 40px; text-align: center; padding: 5px; background: rgb(51, 51, 51); opacity: 1; display: inline-block; border-radius: 50%; margin: 15px; width: 50px; height: 50px; transition: transform 0.5s; color: rgb(100, 100, 100); transform: scale(0.6);">11</div></div></div>`)
+  const result = strip(`
+    <div>
+     <div class=" a b c">
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(80, 100, 100); transform: scale(1.2);">71</div>
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(60, 100, 100); transform: scale(0.8);">31</div>
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(40, 100, 100); transform: scale(0.7);">21</div>
+     </div>
+     <div class=" a b c">
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(80, 100, 100); transform: scale(1.2);">71</div>
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(60, 100, 100); transform: scale(0.8);">31</div>
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(40, 100, 100); transform: scale(0.7);">21</div>
+     </div>
+     <div class=" a b c">
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(80, 100, 100); transform: scale(1.2);">71</div>
+     </div>
+     <div>
+        <div class=" d c e f q g">1</div>
+     </div>
+     <div class=" a b c">
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(20, 100, 100); transform: scale(0.6);">11</div>
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(80, 100, 100); transform: scale(1.2);">71</div>
+        <div class=" d c e f g h i j k l m n m o p" style="color: rgb(100, 100, 100); transform: scale(0.6);">11</div>
+     </div>
+  </div>
+`)
 
   state.james.once(1, () => {
     setTimeout(() => {

diff --git a/test/index.js b/test/index.js
@@ -4,44 +4,44 @@ if (typeof window === 'undefined') {
 
 // require('./sync') // not for now
 
-// require('./fragment')
+require('./fragment')
 
-// require('./order')
+require('./order')
 
-// require('./text')
+require('./text')
 
-// require('./parent')
+require('./parent')
 
-// require('./html')
+require('./html')
 
-// require('./clone')
+require('./clone')
 
-// require('./reference')
+require('./reference')
 
-// require('./property')
+require('./property')
 
-// require('./attr')
+require('./attr')
 
-// require('./group')
+require('./group')
 
-// require('./subscribe') // object subs and resubscribe -- object travel
+require('./subscribe') // object subs and resubscribe -- object travel
 
-// require('./test')
+require('./test')
 
-// require('./class')
+require('./class')
 
-// require('./context')
+require('./context')
 
-// require('./render')
+require('./render')
 
-// require('./remove')
+require('./remove')
 
-// require('./widget')
+require('./widget')
 
-// require('./switch')
+require('./switch')
 
-// require('./events')
-
-// require('./any')
+require('./events')
 
 require('./style')
+
+require('./any')