Merge pull request #98 from choojs/proxynode

Adds half of fix for nanocomponent #65

index.js

@@ -4,6 +4,10 @@ var morph = require('./lib/morph')
 var TEXT_NODE = 3
 // var DEBUG = false
 
+function isProxy (node) {
+  return node && node.dataset && node.dataset.proxy !== undefined
+}
+
 module.exports = nanomorph
 
 // Morph one tree into another tree
@@ -133,7 +137,11 @@ function updateChildren (newNode, oldNode) {
 
       // Insert the node at the index if we couldn't morph or find a matching node
       } else {
-        oldNode.insertBefore(newChild, oldChild)
+        if (isProxy(newChild) && !newChild.isSameNode(oldChild) && newChild.realNode) {
+          oldNode.insertBefore(newChild.realNode, oldChild)
+        } else {
+          oldNode.insertBefore(newChild, oldChild)
+        }
         offset++
       }
     }

package.json

@@ -7,6 +7,7 @@
     "deps": "dependency-check . && dependency-check . --extra --no-dev -i nanoassert",
     "test": "standard && npm run deps && browserify test/index.js | tape-run",
     "test:fast": "browserify test/diff.js | tape-run",
+    "test:proxy": "browserify test/proxy.js | tape-run",
     "start": "bankai start --debug test/diff.js"
   },
   "repository": "yoshuawuyts/nanomorph",
@@ -27,13 +28,13 @@
     "assert": "nanoassert"
   },
   "devDependencies": {
-    "bankai": "^7.6.2",
-    "bel": "^5.1.1",
-    "browserify": "^14.1.0",
+    "bankai": "^9.8.0",
+    "bel": "^5.1.7",
+    "browserify": "^16.1.0",
     "dependency-check": "^2.5.1",
     "math-random-seed": "^1.0.0",
     "standard": "^10.0.3",
-    "tape": "^4.6.0",
-    "tape-run": "^3.0.0"
+    "tape": "^4.9.0",
+    "tape-run": "^3.0.4"
   }
 }

test/proxy.js

@@ -0,0 +1,19 @@
+var test = require('tape')
+var html = require('bel')
+var nanomorph = require('../')
+
+// FIXME: Need a way to test this... any ideas?
+test('do not leak proxy nodes', t => {
+  var a = html`<ul><li><div><span id="a">leaky?</span></div></li></ul>`
+  var b = html`<ul><li><span id="a">leaky?</span></li></ul>`
+  var realNode = html`<span id="a">leaky?</span>`
+  var proxyA = html`<div id="a" data-proxy=''></div>`
+  proxyA.realNode = realNode
+  proxyA.isSameNode = function (el) {
+    return el === realNode
+  }
+  var actual = nanomorph(a, b)
+  console.log('ACTUAL', actual)
+  t.ok(actual, actual.outerHTML)
+  t.end()
+})