element-notifier - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

cjs/index.js

@@ -5,2 +5,6 @@ 'use strict';
 
+function add(node) {
+  this.observe(node, {subtree: TRUE, childList: TRUE});
+}
+
 /**
@@ -31,3 +35,3 @@ * Start observing a generic document or root element.
         if (!pass)
-          loop((node.shadowRoot || node)[QSA]('*'), added, removed, connected, TRUE);
+          loop(node[QSA]('*'), added, removed, connected, TRUE);
       }
@@ -50,3 +54,4 @@ }
 
-  observer.observe(root || document, {subtree: TRUE, childList: TRUE});
+  observer.add = add;
+  observer.add(root || document);
 
@@ -53,0 +58,0 @@ return observer;

es.js

@@ -1,1 +0,1 @@
-self.elementNotifier=function(e){"use strict";const t=!0,o=!1,n="querySelectorAll";return e.notify=(e,r,d)=>{const s=(o,r,d,l,c)=>{for(let i=0,{length:a}=o;i<a;i++){const a=o[i];(c||n in a)&&(l?r.has(a)||(r.add(a),d.delete(a),e(a,l)):d.has(a)||(d.add(a),r.delete(a),e(a,l)),c||s((a.shadowRoot||a)[n]("*"),r,d,l,t))}},l=new(d||MutationObserver)((e=>{for(let n=new Set,r=new Set,d=0,{length:l}=e;d<l;d++){const{addedNodes:l,removedNodes:c}=e[d];s(c,n,r,o,o),s(l,n,r,t,o)}}));return l.observe(r||document,{subtree:t,childList:t}),l},e}({});
+self.elementNotifier=function(e){"use strict";const t=!0,n=!1,d="querySelectorAll";function o(e){this.observe(e,{subtree:t,childList:t})}return e.notify=(e,r,s)=>{const i=(n,o,r,s,l)=>{for(let c=0,{length:a}=n;c<a;c++){const a=n[c];(l||d in a)&&(s?o.has(a)||(o.add(a),r.delete(a),e(a,s)):r.has(a)||(r.add(a),o.delete(a),e(a,s)),l||i(a[d]("*"),o,r,s,t))}},l=new(s||MutationObserver)((e=>{for(let d=new Set,o=new Set,r=0,{length:s}=e;r<s;r++){const{addedNodes:s,removedNodes:l}=e[r];i(l,d,o,n,n),i(s,d,o,t,n)}}));return l.add=o,l.add(r||document),l},e}({});

esm/index.js

 const TRUE = true, FALSE = false;
 const QSA = 'querySelectorAll';
 
+function add(node) {
+  this.observe(node, {subtree: TRUE, childList: TRUE});
+}
+
 /**
@@ -29,3 +33,3 @@ * Start observing a generic document or root element.
         if (!pass)
-          loop((node.shadowRoot || node)[QSA]('*'), added, removed, connected, TRUE);
+          loop(node[QSA]('*'), added, removed, connected, TRUE);
       }
@@ -48,5 +52,6 @@ }
 
-  observer.observe(root || document, {subtree: TRUE, childList: TRUE});
+  observer.add = add;
+  observer.add(root || document);
 
   return observer;
 };

index.js

@@ -7,2 +7,9 @@ self.elementNotifier = (function (exports) {
   var QSA = 'querySelectorAll';
+
+  function add(node) {
+    this.observe(node, {
+      subtree: TRUE,
+      childList: TRUE
+    });
+  }
   /**
@@ -16,2 +23,3 @@ * Start observing a generic document or root element.
 
+
   var notify = function notify(callback, root, MO) {
@@ -35,3 +43,3 @@ var loop = function loop(nodes, added, removed, connected, pass) {
 
-          if (!pass) loop((node.shadowRoot || node)[QSA]('*'), added, removed, connected, TRUE);
+          if (!pass) loop(node[QSA]('*'), added, removed, connected, TRUE);
         }
@@ -50,6 +58,4 @@ }
     });
-    observer.observe(root || document, {
-      subtree: TRUE,
-      childList: TRUE
-    });
+    observer.add = add;
+    observer.add(root || document);
     return observer;
@@ -56,0 +62,0 @@ };

min.js

@@ -1,1 +0,1 @@
-self.elementNotifier=function(e){"use strict";var t=!0,r=!1,n="querySelectorAll";return e.notify=function(e,o,d){var a=function r(o,d,a,i,s){for(var u=0,l=o.length;u<l;u++){var f=o[u];(s||n in f)&&(i?d.has(f)||(d.add(f),a.delete(f),e(f,i)):a.has(f)||(a.add(f),d.delete(f),e(f,i)),s||r((f.shadowRoot||f)[n]("*"),d,a,i,t))}},i=new(d||MutationObserver)((function(e){for(var n=new Set,o=new Set,d=0,i=e.length;d<i;d++){var s=e[d],u=s.addedNodes,l=s.removedNodes;a(l,n,o,r,r),a(u,n,o,t,r)}}));return i.observe(o||document,{subtree:t,childList:t}),i},e}({});
+self.elementNotifier=function(e){"use strict";var t=!0,n=!1,r="querySelectorAll";function d(e){this.observe(e,{subtree:t,childList:t})}return e.notify=function(e,o,a){var i=function n(d,o,a,i,s){for(var u=0,f=d.length;u<f;u++){var l=d[u];(s||r in l)&&(i?o.has(l)||(o.add(l),a.delete(l),e(l,i)):a.has(l)||(a.add(l),o.delete(l),e(l,i)),s||n(l[r]("*"),o,a,i,t))}},s=new(a||MutationObserver)((function(e){for(var r=new Set,d=new Set,o=0,a=e.length;o<a;o++){var s=e[o],u=s.addedNodes,f=s.removedNodes;i(f,r,d,n,n),i(u,r,d,t,n)}}));return s.add=d,s.add(o||document),s},e}({});

package.json

 {
   "name": "element-notifier",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A MutationObserver dis/connected helper",
@@ -5,0 +5,0 @@ "main": "./cjs/index.js",

README.md

@@ -8,10 +8,20 @@ # element-notifier
 
-const observer = notify((element, connected) => {
-  if (connected)
-    console.log(element, 'has been connected');
-  else
-    console.log(element, 'has been disconnected');
-});
+const observer = notify(
+  // callback that receives any connected/disconnected element
+  (element, connected) => {
+    if (connected)
+      console.log(element, 'has been connected');
+    else
+      console.log(element, 'has been disconnected');
+  },
+
+  // optional arguments
+  document,         // the root element to observe
+  MutationObserver  // a MutationObserver (non DOM envs)
+);
 ```
 
+The `observer` is a regular *MutationObserver* instance with an extra `.add(node)` method to observe mutations within fragments too (example: *shadowRoot* nodes).
+
+
 ### Why?
@@ -25,2 +35,23 @@
 
-This helper does just this: it passes to the callback every element that has been added, or removed, from the document, including nodes within opened shadow roots.
+This helper does just this: it passes to the callback every element that has been added, or removed, from the document.
+
+
+### About ShadowDOM
+
+While the observer could crawl nodes within a `shadowRoot`, in case it's opened, if nodes are removed from it nothing is notified due *MutationObserver* limitations.
+
+If observing nodes appended or removed from any `shadowRoot` is desired, or at least any *open* one, it is necessary to somehow pollute the `Element.prototype` in a similar way:
+
+```js
+const {attachShadow} = Element.prototype;
+Element.prototype.attachShadow = function (init) {
+  const shadowRoot = attachShadow.call(this, init);
+  if (init.mode === 'open')
+    observer.add(shadowRoot);
+  return shadowRoot;
+};
+```
+
+It is not responsibility of this module to augment the environment so it's up to this module consumers decide if doing so is needed or desired.
+
+Please note that `connected` might mislead in case the *shadowRoot* is not live yet, as the *MutationObserver* in fragments doesn't care about their owner state.

No alert changes

Improved metrics

Total package byte prevSize

10411

increased by15.79%

Lines of code

159

increased by8.16%

Number of lines in readme file

56

increased by124%

No dependency changes