dompteuse - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

example/package.json

@@ -13,5 +13,5 @@ {
     "typescript": "1.8.7",
-    "dompteuse": "0.2.0",
+    "dompteuse": "0.2.1",
     "snabbdom": "0.4.2",
-    "most": "0.19.5",
+    "most": "0.19.6",
     "abyssa": "7.2.7",
@@ -18,0 +18,0 @@ "immupdate": "0.2.0",

lib/events.js

@@ -15,17 +15,32 @@ 'use strict';
 function Events(componentDestruction) {
+  var _this = this;
+
   this.componentDestruction = componentDestruction;
-  componentDestruction.observe(this._destroy);
+  componentDestruction.observe(function () {
+    return _this._destroy();
+  });
 };
 
 Events.prototype.listen = function (selector, evt) {
+  var _this2 = this;
+
   this.eventSubs = this.eventSubs || [];
 
   var stream = _most2.default.create(function (add) {
-    return sub.streamAdd = add;
+    var sub = {
+      selector: selector,
+      evt: evt,
+      isCustom: evt._isCustom,
+      streamAdd: add
+    };
+
+    _this2.eventSubs.push(sub);
+    subscribe(sub, _this2.el);
+
+    return function dispose() {
+      this.eventSubs.splice(this.eventSubs.indexOf(sub), 1);
+      unsubscribe(sub, this.el);
+    };
   }).until(this.componentDestruction);
 
-  var sub = { selector: selector, evt: evt, isCustom: evt._isCustom };
-  this.eventSubs.push(sub);
-  if (this.el) subscribe(sub, this.el);
-
   return stream;
@@ -58,3 +73,3 @@ };
 Events.prototype._destroy = function () {
-  var _this = this;
+  var _this3 = this;
 
@@ -64,11 +79,4 @@ if (!this.eventSubs) return;
   this.eventSubs.forEach(function (sub) {
-    if (sub.isCustom) return;
-    var evt = sub.evt;
-    var _sub$listener = sub.listener;
-    var fn = _sub$listener.fn;
-    var useCapture = _sub$listener.useCapture;
-
-    _this.el.removeEventListener(evt, fn, useCapture);
+    return unsubscribe(sub, _this3.el);
   });
-
   this.eventSubs = null;
@@ -88,3 +96,3 @@ };
 function subscribe(sub, el) {
-  if (sub.isCustom) return;
+  if (!el || sub.isCustom) return;
 
@@ -99,2 +107,13 @@ var listener = function listener(evt) {
 
+function unsubscribe(sub, el) {
+  if (!el || sub.isCustom) return;
+
+  var evt = sub.evt;
+  var _sub$listener = sub.listener;
+  var fn = _sub$listener.fn;
+  var useCapture = _sub$listener.useCapture;
+
+  this.el.removeEventListener(evt, fn, useCapture);
+}
+
 var proto = Element.prototype;
@@ -101,0 +120,0 @@ var nativeMatches = proto.matches || proto.matchesSelector || proto.webkitMatchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector;

lib/globalStream.js

@@ -58,3 +58,3 @@ 'use strict';
       } finally {
-        if (log) console.log('%cNew PushStream state:', 'color: blue', newState);
+        if (log) console.log('%cNew GlobalStream state:', 'color: blue', newState);
 
@@ -61,0 +61,0 @@ dispatching = false;

package.json

 {
   "name": "dompteuse",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "lib/dompteuse",
@@ -22,3 +22,2 @@ "typings": "lib/dompteuse.d.ts",
     "snabbdom": "0.4.2",
-    "most": "0.19.5",
     "typescript": "1.8.7",
@@ -25,0 +24,0 @@ "babel-cli": "6.4.5",

README.md

@@ -147,3 +147,7 @@ # dompteuse
 
-You typically want to keep very transient state as local as possible so that it remains encapsulated in a component and do not leak up (ex: Whether a select dropdown is opened, a component has focus, which grid row is highlighted, basically any state that resets if the user navigate away then come back)
+You typically want to keep very transient state as local as possible so that it remains encapsulated in a component and do not leak up such as:  
+* Whether a select dropdown is opened
+* The component has focus
+* Which grid row is highlighted
+* Basically any state that resets if the user navigate away then come back
 
@@ -150,0 +154,0 @@ Additionally, keeping state that is only useful to one screen should be kept inside the top-most component of that screen and no higher.

src/events.js

@@ -8,3 +8,3 @@ import most from 'most';
   this.componentDestruction = componentDestruction;
-  componentDestruction.observe(this._destroy);
+  componentDestruction.observe(() => this._destroy());
 };
@@ -15,9 +15,20 @@
 
-  const stream = most.create(add => sub.streamAdd = add)
-    .until(this.componentDestruction);
+  const stream = most.create(add => {
+    const sub = {
+      selector,
+      evt,
+      isCustom: evt._isCustom,
+      streamAdd: add
+    };
 
-  const sub = { selector, evt, isCustom: evt._isCustom };
-  this.eventSubs.push(sub);
-  if (this.el) subscribe(sub, this.el);
+    this.eventSubs.push(sub);
+    subscribe(sub, this.el);
 
+    return function dispose() {
+      this.eventSubs.splice(this.eventSubs.indexOf(sub), 1);
+      unsubscribe(sub, this.el);
+    }
+  })
+  .until(this.componentDestruction);
+
   return stream;
@@ -51,8 +62,3 @@ };
 
-  this.eventSubs.forEach(sub => {
-    if (sub.isCustom) return;
-    const { evt, listener: { fn, useCapture }} = sub;
-    this.el.removeEventListener(evt, fn, useCapture);
-  });
-
+  this.eventSubs.forEach(sub => unsubscribe(sub, this.el));
   this.eventSubs = null;
@@ -73,3 +79,3 @@ };
 function subscribe(sub, el) {
-  if (sub.isCustom) return;
+  if (!el || sub.isCustom) return;
 
@@ -85,3 +91,10 @@ const listener = evt => {
 
+function unsubscribe(sub, el) {
+  if (!el || sub.isCustom) return;
 
+  const { evt, listener: { fn, useCapture }} = sub;
+  this.el.removeEventListener(evt, fn, useCapture);
+}
+
+
 const proto = Element.prototype;
@@ -88,0 +101,0 @@ const nativeMatches = proto.matches

src/globalStream.js

@@ -45,3 +45,3 @@ /* Opt-in, convenience construct used to update a global stream imperatively and in a type safe fashion */
         if (log)
-          console.log(`%cNew PushStream state:`, 'color: blue', newState);
+          console.log(`%cNew GlobalStream state:`, 'color: blue', newState);
 
@@ -48,0 +48,0 @@ dispatching = false;

No alert changes

Improved metrics

Total package byte prevSize

1348087

increased by1.33%

Dev dependency count

5

decreased by-16.67%

Lines of code

14168

increased by1.61%

Number of lines in readme file

303

increased by1.34%

No dependency changes