fix browser rendering

choojs · May 19, 2017 · f3dc5f6 · f3dc5f6
1 parent 049ca61
commit f3dc5f6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 27 deletions.
diff --git a/index.js b/index.js
@@ -115,7 +115,8 @@ function belCreateElement (tag, props, children) {
 
   function appendChild (childs) {
     if (!Array.isArray(childs)) return
-    for (var i = 0; i < childs.length; i++) {
+    var hadText = false
+    for (var i = 0, len = childs.length; i < len; i++) {
       var node = childs[i]
       if (Array.isArray(node)) {
         appendChild(node)
@@ -130,27 +131,34 @@ function belCreateElement (tag, props, children) {
         node = node.toString()
       }
 
+      var lastChild = el.childNodes[el.childNodes.length - 1]
       if (typeof node === 'string') {
-        // - if empty space, skip
-        // - if last node was a text node
-        //   - if current node is a newline, push a space
-        //   - else push the node value
-        // - else create a text node with the new text
-        if (/^[\r\s]+$/.test(node)) {
-          continue
-        } else if (el.lastChild && el.lastChild.nodeName === '#text') {
-          if (/^[\n]+$/.test(node)) {
-            el.lastChild.nodeValue += ' '
-          } else {
-            el.lastChild.nodeValue += node
-          }
-          continue
+        hadText = true
+        if (lastChild && lastChild.nodeName === '#text') {
+          lastChild.nodeValue += node
         } else {
           node = document.createTextNode(node)
+          el.appendChild(node)
+          lastChild = node
+        }
+        if (i === len - 1) {
+          hadText = false
+          console.log(Object.keys(lastChild.prototype))
+          var value = lastChild.nodeValue
+            .replace(/^\n[\s]+/, '')
+            .replace(/\n[\s]+$/, '')
+          if (value) lastChild.nodeValue = value
+          else el.removeChild(lastChild)
+        }
+      } else if (node && node.nodeType) {
+        if (hadText) {
+          hadText = false
+          var val = lastChild.nodeValue
+            .replace(/^\n[\s]+/, '')
+            .replace(/\n[\s]+$/, '')
+          if (val) lastChild.nodeValue = val
+          else el.removeChild(lastChild)
         }
-      }
-
-      if (node && node.nodeType) {
         el.appendChild(node)
       }
     }

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "wzrd test/index.js:bundle.js",
-    "test": "standard && node test/server.js && browserify test/index.js | testron",
+    "test": "standard && node test/server.js && browserify test/index.js | tape-run",
     "bench": "wzrd bench/index.js:bundle.js"
   },
   "repository": {
@@ -30,7 +30,8 @@
   "dependencies": {
     "global": "^4.3.0",
     "hyperx": "^2.3.0",
-    "on-load": "^3.2.0"
+    "on-load": "^3.2.0",
+    "tape-run": "^3.0.0"
   },
   "devDependencies": {
     "browser-process-hrtime": "^0.1.2",
@@ -39,7 +40,6 @@
     "morphdom": "^2.1.1",
     "standard": "^9.0.2",
     "tape": "^4.6.0",
-    "testron": "^1.2.0",
     "wzrd": "^1.4.0"
   }
 }
diff --git a/test/api.js b/test/api.js
@@ -3,18 +3,26 @@ var bel = require('../')
 
 test('creates an element', function (t) {
   t.plan(3)
-  var button = bel`<button onclick=${function () {
-    onselected('success')
-  }}>click me</button>`
-  var result = bel`<ul>
-    <li>${button}</li>
-  </ul>`
+  var button = bel`
+    <button onclick=${function () { onselected('success') }}>
+      click me
+    </button>
+  `
+
+  var result = bel`
+    <ul>
+      <li>${button}</li>
+    </ul>
+  `
+
   function onselected (result) {
     t.equal(result, 'success')
     t.end()
   }
+
   t.equal(result.tagName, 'UL')
   t.equal(result.querySelector('button').textContent, 'click me')
+
   button.click()
 })