on-load - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

index.js

 /* global MutationObserver */
 var document = require('global/document')
 var window = require('global/window')
-var watch = []
+var watch = Object.create(null)
 var KEY_ID = 'onloadid' + (new Date() % 9e6).toString(36)
@@ -11,14 +11,10 @@ var KEY_ATTR = 'data-' + KEY_ID
   var observer = new MutationObserver(function (mutations) {
+    if (watch.length < 1) return
     for (var i = 0; i < mutations.length; i++) {
-      eachMutation(mutations[i].removedNodes, function (index) {
-        if (watch[index][2]) {
-          watch[index][2]()
-          // TODO: Do we need clean up here?
-        }
-      })
-      eachMutation(mutations[i].addedNodes, function (index) {
-        if (watch[index][1]) {
-          watch[index][1]()
-        }
-      })
+      if (mutations[i].attributeName === KEY_ATTR) {
+        eachAttr(mutations[i], turnon, turnoff)
+        continue
+      }
+      eachMutation(mutations[i].removedNodes, turnoff)
+      eachMutation(mutations[i].addedNodes, turnon)
     }
@@ -28,3 +24,6 @@ })
     childList: true,
-    subtree: true
+    subtree: true,
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: [KEY_ATTR]
   })
@@ -36,16 +35,43 @@ }
   off = off || function () {}
-  el.setAttribute(KEY_ATTR, INDEX)
-  watch.push([INDEX.toString(), on, off])
+  el.setAttribute(KEY_ATTR, 'o' + INDEX)
+  watch['o' + INDEX] = [on, off, 0]
   INDEX += 1
 }
 
+function turnon (index) {
+  if (watch[index][0] && watch[index][2] === 0) {
+    watch[index][0]()
+    watch[index][2] = 1
+  }
+}
+
+function turnoff (index) {
+  if (watch[index][1] && watch[index][2] === 1) {
+    watch[index][1]()
+    watch[index][2] = 0
+  }
+}
+
+function eachAttr (mutation, on, off) {
+  var newValue = mutation.target.getAttribute(KEY_ATTR)
+  Object.keys(watch).forEach(function (k) {
+    if (mutation.oldValue === k) {
+      off(k)
+    }
+    if (newValue === k) {
+      on(k)
+    }
+  })
+}
+
 function eachMutation (nodes, fn) {
-  if (watch.length < 1) return
+  var keys = Object.keys(watch)
   for (var i = 0; i < nodes.length; i++) {
     if (nodes[i] && nodes[i].getAttribute && nodes[i].getAttribute(KEY_ATTR)) {
-      for (var j = 0; j < watch.length; j++) {
-        if (watch[j][0] === nodes[i].getAttribute(KEY_ATTR)) {
-          fn(j)
+      var onloadid = nodes[i].getAttribute(KEY_ATTR)
+      keys.forEach(function (k) {
+        if (onloadid === k) {
+          fn(k)
         }
-      }
+      })
     }
@@ -52,0 +78,0 @@ if (nodes[i].childNodes.length > 0) {

package.json

 {
   "name": "on-load",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "On load/unload events for DOM elements using a MutationObserver",
@@ -19,3 +19,4 @@ "main": "index.js",
     "onload",
-    "unload"
+    "unload",
+    "yo-yo"
   ],
@@ -34,8 +35,8 @@ "author": "Kyle Robinson Young <[e-mail]> (http://dontkry.com)",
     "electron-prebuilt": "^0.36.9",
-    "standard": "^6.0.7",
-    "tape": "^4.5.0",
+    "standard": "^7.1.2",
+    "tape": "^4.6.0",
     "testron": "^1.2.0",
-    "wzrd": "^1.3.1",
+    "wzrd": "^1.4.0",
     "yo-yo": "^1.2.1"
   }
 }

test.js

@@ -80,3 +80,3 @@ var onload = require('./')
     function () {
-      t.deepEqual(state, ['off', 'on'], 'turn off/on')
+      t.deepEqual(state, ['on'], 'turn on')
     }
@@ -121,3 +121,2 @@ ], function () {
       t.deepEqual(state, ['on'], 'turn on')
-
       state = []
@@ -145,3 +144,3 @@ root = yo.update(root, app(yo`<div class="page">
     function () {
-      t.deepEqual(state, [], 'do nothing')
+      t.deepEqual(state, ['off', 'on', 'off', 'on'], 'both turn off/on')
       state = []
@@ -154,3 +153,3 @@ root = yo.update(root, app(yo`<div class="page">
     function () {
-      t.deepEqual(state, ['off'], 'turn 1 off')
+      t.deepEqual(state, ['off', 'on', 'off'], 'turn off/on and other off')
       state = []
@@ -177,2 +176,39 @@ root = yo.update(root, app(yo`Loading...`))
 
+test('same node, different onloadid', function (t) {
+  t.plan(4)
+  function page1 () {
+    var el = yo`<div><h1>Page 1</h1></div>`
+    onload(el, function () {
+      t.ok(true, 'called onload page1')
+    }, function () {
+      t.ok(true, 'called onunload page1')
+    })
+    return el
+  }
+  function page2 () {
+    var el = yo`<div><h1>Page 2</h1></div>`
+    onload(el, function () {
+      t.ok(true, 'called onload page2')
+    }, function () {
+      t.ok(true, 'called onunload page2')
+    })
+    return el
+  }
+  var root = yo`<div>Loading...</div>`
+  document.body.appendChild(root)
+  runops([
+    function () {
+      root = yo.update(root, page1())
+    },
+    function () {
+      root = yo.update(root, page2())
+    },
+    function () {
+      document.body.removeChild(root)
+    }
+  ], function () {
+    t.end()
+  })
+})
+
 function runops (ops, done) {
@@ -185,3 +221,3 @@ function loop () {
     } else {
-      done()
+      if (done) done()
     }
@@ -188,0 +224,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

9133

increased by18.78%

Lines of code

281

increased by26.58%

No dependency changes