Merge pull request #75 from choojs/issue-65

Store realNode reference on proxy node
choojs · Mar 3, 2018 · 0e02a3a · 0e02a3a
2 parents 5f779a4 + 104953b
commit 0e02a3a
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/index.js b/index.js
@@ -105,6 +105,7 @@ Nanocomponent.prototype._createProxy = function () {
   proxy.isSameNode = function (el) {
     return (el && el.dataset.nanocomponent === self._ncID)
   }
+  proxy.realNode = this.element
   return proxy
 }
 

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "test:deps": "dependency-check .",
     "test:node": "NODE_ENV=test node test/node.js | tap-format-spec",
     "test:browser": "browserify test/browser/index.js | tape-run | tap-format-spec",
+    "test:proxy": "browserify test/browser/proxy-leak.js | tape-run | tap-format-spec",
     "test:lint": "standard *.js",
     "start": "bankai start example"
   },
@@ -42,7 +43,7 @@
   "dependencies": {
     "global": "^4.3.1",
     "nanoassert": "^1.1.0",
-    "nanomorph": "^5.1.2",
+    "nanomorph": "^6.0.0-beta1",
     "nanotiming": "^7.2.0",
     "on-load": "^3.3.4"
   },

diff --git a/test/browser/proxy-leak.js b/test/browser/proxy-leak.js
@@ -0,0 +1,63 @@
+var test = require('tape')
+var morph = require('nanomorph')
+var Nanocomponent = require('../../')
+var html = require('bel')
+
+function isProxy (node) {
+  return node.dataset.proxy !== undefined
+}
+
+class Component extends Nanocomponent {
+  createElement () {
+    return html`<div>I'm a component</div>`
+  }
+
+  update () {
+    return false
+  }
+}
+
+function makeID () {
+  return 'testid-' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1)
+}
+
+function createTestElement () {
+  var testRoot = document.createElement('div')
+  testRoot.id = makeID()
+  document.body.appendChild(testRoot)
+  return testRoot
+}
+
+test('should not leak proxy nodes', t => {
+  var testRoot = createTestElement()
+  var component = new Component()
+  var view = viewA()
+  var newView
+
+  function viewA () {
+    return html`
+      <body>
+        <a href="/">beep</a>
+        <a href="/boop">boop</a>
+        <div>
+          ${component.render()}
+        </div>
+      </body>
+    `
+  }
+
+  function viewB () {
+    return html`
+      <body>
+        <a href="/">beep</a>
+        <a href="/boop">boop</a>
+        ${component.render()}
+      </body>
+    `
+  }
+
+  testRoot.appendChild(view)
+  newView = morph(view, viewB())
+  t.notOk(isProxy(newView.children[2]), 'proxy node has not been leaked')
+  t.end()
+})