@webreflection/custom-elements-builtin - npm Package Compare versions

Comparing version 0.1.27 to 0.2.0

cjs/index.js

@@ -19,3 +19,3 @@ 'use strict';
 
-const {defineProperty, keys, getOwnPropertyNames, setPrototypeOf} = Object;
+const {defineProperty, getOwnPropertyNames, setPrototypeOf} = Object;
 
@@ -124,11 +124,7 @@ const shadowRoots = new WeakMap;
 if (attachShadow)
-  defineProperty(Element.prototype, 'attachShadow', {
-    configurable: true,
-    value() {
-      const root = attachShadow.apply(this, arguments);
-      const {parse} = qsaObserver({query, root, handle});
-      shadowRoots.set(this, {root, parse});
-      return root;
-    }
-  });
+  Element.prototype.attachShadow = function (init) {
+    const root = attachShadow.call(this, init);
+    shadowRoots.set(this, root);
+    return root;
+  };
 
@@ -176,4 +172,4 @@ defineProperty(customElements, 'get', {
 function parseShadow(element) {
-  const {parse, root} = shadowRoots.get(element);
+  const root = shadowRoots.get(element);
   parse(root.querySelectorAll(this), element.isConnected);
 }

es.js

@@ -1,1 +0,1 @@
-!function(){"use strict";const{keys:e}=Object,{document:t,MutationObserver:r,Set:l,WeakMap:n}=self,o=e=>"querySelectorAll"in e,{filter:s}=[];var a=e=>{const a=new n,c=t=>{const{query:r}=e;if(r.length)for(let e=0,{length:l}=t;e<l;e++)u(s.call(t[e].addedNodes,o),!0,r),u(s.call(t[e].removedNodes,o),!1,r)},u=(t,r,n,o=new l)=>{for(let s,c,h=0,{length:d}=t;h<d;h++)if(!o.has(c=t[h])){if(o.add(c),r)for(let t,o=i(c),u=0,{length:h}=n;u<h;u++)o.call(c,t=n[u])&&(a.has(c)||a.set(c,new l),s=a.get(c),s.has(t)||(s.add(t),e.handle(c,r,t)));else a.has(c)&&(s=a.get(c),a.delete(c),s.forEach((t=>{e.handle(c,r,t)})));u(f(c),r,n,o)}},i=e=>e.matches||e.webkitMatchesSelector||e.msMatchesSelector,h=(t,r=!0)=>{u(t,r,e.query)},f=e=>p.length?e.querySelectorAll(p):p,d=new r(c),g=e.root||t,{query:p}=e;return d.observe(g,{childList:!0,subtree:!0}),h(f(g)),{drop:e=>{for(let t=0,{length:r}=e;t<r;t++)a.delete(e[t])},flush:()=>{c(d.takeRecords())},observer:d,parse:h}};const{customElements:c,document:u,Element:i,MutationObserver:h,Object:f,Promise:d,Map:g,Set:p,WeakMap:b,Reflect:y}=self,{attachShadow:w}=i.prototype,{createElement:m}=u,{define:v,get:q}=c,{construct:S}=y||{construct(e){return e.call(this)}},{defineProperty:A,keys:E,getOwnPropertyNames:k,setPrototypeOf:M}=f,O=new b,N=new p,P=new g,$=new g,C=new g,V=new g,j=[],L=[],R=e=>V.get(e)||q.call(c,e),T=(t,r,l)=>{const n=C.get(l);if(r&&!n.isPrototypeOf(t)){const r=(t=>{const r=e(t),l=[],{length:n}=r;for(let e=0;e<n;e++)l[e]=t[r[e]],delete t[r[e]];return()=>{for(let e=0;e<n;e++)t[r[e]]=l[e]}})(t);F=M(t,n);try{new n.constructor}finally{F=null,r()}}const o=(r?"":"dis")+"connectedCallback";o in n&&t[o]()},{parse:W}=a({query:L,handle:T}),{parse:_}=a({query:j,handle(e,t){O.has(e)&&(t?N.add(e):N.delete(e),L.length&&H.call(L,e))}}),x=e=>{if(!$.has(e)){let t,r=new d((e=>{t=e}));$.set(e,{$:r,_:t})}return $.get(e).$},D=((e,t)=>{const r=e=>{for(let t=0,{length:r}=e;t<r;t++)l(e[t])},l=({target:e,attributeName:t,oldValue:r})=>{e.attributeChangedCallback(t,r,e.getAttribute(t))};return(n,o)=>{const{observedAttributes:s}=n.constructor;return s&&e(o).then((()=>{new t(r).observe(n,{attributes:!0,attributeOldValue:!0,attributeFilter:s});for(let e=0,{length:t}=s;e<t;e++)n.hasAttribute(s[e])&&l({target:n,attributeName:s[e],oldValue:null})})),n}})(x,h);let F=null;function H(e){const{parse:t,root:r}=O.get(e);t(r.querySelectorAll(this),e.isConnected)}k(self).filter((e=>/^HTML/.test(e))).forEach((e=>{const t=self[e];function r(){const{constructor:e}=this;if(!P.has(e))throw new TypeError("Illegal constructor");const{is:r,tag:l}=P.get(e);if(r){if(F)return D(F,r);const t=m.call(u,l);return t.setAttribute("is",r),D(M(t,e.prototype),r)}return S.call(this,t,[],e)}M(r,t),A(r.prototype=t.prototype,"constructor",{value:r}),A(self,e,{value:r})})),A(u,"createElement",{configurable:!0,value(e,t){const r=t&&t.is;if(r){const t=V.get(r);if(t&&P.get(t).tag===e)return new t}const l=m.call(u,e);return r&&l.setAttribute("is",r),l}}),w&&A(i.prototype,"attachShadow",{configurable:!0,value(){const e=w.apply(this,arguments),{parse:t}=a({query:L,root:e,handle:T});return O.set(this,{root:e,parse:t}),e}}),A(c,"get",{configurable:!0,value:R}),A(c,"whenDefined",{configurable:!0,value:x}),A(c,"define",{configurable:!0,value(e,t,r){if(R(e))throw new Error(`'${e}' has already been defined as a custom element`);let l;const n=r&&r.extends;P.set(t,n?{is:e,tag:n}:{is:"",tag:e}),n?(l=`${n}[is="${e}"]`,C.set(l,t.prototype),V.set(e,t),L.push(l)):(v.apply(c,arguments),j.push(l=e)),x(e).then((()=>{n?(W(u.querySelectorAll(l)),N.forEach(H,[l])):_(u.querySelectorAll(l))})),$.get(e)._(t)}})}();
+!function(){"use strict";const{keys:e}=Object,t=!0,r=!1,n="querySelectorAll";function l(e){this.observe(e,{subtree:t,childList:t})}const o="querySelectorAll",{document:s,Element:a,MutationObserver:c,Set:u,WeakMap:i}=self,d=e=>o in e,{filter:h}=[];var f=e=>{const f=new i,g=(t,r)=>{let n;if(r)for(let l,o=(e=>e.matches||e.webkitMatchesSelector||e.msMatchesSelector)(t),s=0,{length:a}=b;s<a;s++)o.call(t,l=b[s])&&(f.has(t)||f.set(t,new u),n=f.get(t),n.has(l)||(n.add(l),e.handle(t,r,l)));else f.has(t)&&(n=f.get(t),f.delete(t),n.forEach((n=>{e.handle(t,r,n)})))},p=(e,t=!0)=>{for(let r=0,{length:n}=e;r<n;r++)g(e[r],t)},{query:b}=e,w=e.root||s,y=((e,o,s)=>{const a=(r,l,o,s,c)=>{for(let u=0,{length:i}=r;u<i;u++){const i=r[u];(c||n in i)&&(s?l.has(i)||(l.add(i),o.delete(i),e(i,s)):o.has(i)||(o.add(i),l.delete(i),e(i,s)),c||a(i[n]("*"),l,o,s,t))}},c=new(s||MutationObserver)((e=>{for(let n=new Set,l=new Set,o=0,{length:s}=e;o<s;o++){const{addedNodes:s,removedNodes:c}=e[o];a(c,n,l,r,r),a(s,n,l,t,r)}}));return c.add=l,c.add(o||document),c})(g,w,c),{attachShadow:m}=a.prototype;return m&&(a.prototype.attachShadow=function(e){const t=m.call(this,e);return y.add(t),t}),b.length&&p(w[o](b)),{drop:e=>{for(let t=0,{length:r}=e;t<r;t++)f.delete(e[t])},flush:()=>{const e=y.takeRecords();for(let t=0,{length:r}=e;t<r;t++)p(h.call(e[t].removedNodes,d),!1),p(h.call(e[t].addedNodes,d),!0)},observer:y,parse:p}};const{customElements:g,document:p,Element:b,MutationObserver:w,Object:y,Promise:m,Map:v,Set:S,WeakMap:A,Reflect:E}=self,{attachShadow:M}=b.prototype,{createElement:O}=p,{define:q,get:k}=g,{construct:N}=E||{construct(e){return e.call(this)}},{defineProperty:P,getOwnPropertyNames:$,setPrototypeOf:C}=y,V=new A,j=new S,L=new v,R=new v,T=new v,W=new v,_=[],x=[],D=e=>W.get(e)||k.call(g,e),{parse:F}=f({query:x,handle:(t,r,n)=>{const l=T.get(n);if(r&&!l.isPrototypeOf(t)){const r=(t=>{const r=e(t),n=[],{length:l}=r;for(let e=0;e<l;e++)n[e]=t[r[e]],delete t[r[e]];return()=>{for(let e=0;e<l;e++)t[r[e]]=n[e]}})(t);B=C(t,l);try{new l.constructor}finally{B=null,r()}}const o=(r?"":"dis")+"connectedCallback";o in l&&t[o]()}}),{parse:H}=f({query:_,handle(e,t){V.has(e)&&(t?j.add(e):j.delete(e),x.length&&G.call(x,e))}}),I=e=>{if(!R.has(e)){let t,r=new m((e=>{t=e}));R.set(e,{$:r,_:t})}return R.get(e).$},z=((e,t)=>{const r=e=>{for(let t=0,{length:r}=e;t<r;t++)n(e[t])},n=({target:e,attributeName:t,oldValue:r})=>{e.attributeChangedCallback(t,r,e.getAttribute(t))};return(l,o)=>{const{observedAttributes:s}=l.constructor;return s&&e(o).then((()=>{new t(r).observe(l,{attributes:!0,attributeOldValue:!0,attributeFilter:s});for(let e=0,{length:t}=s;e<t;e++)l.hasAttribute(s[e])&&n({target:l,attributeName:s[e],oldValue:null})})),l}})(I,w);let B=null;function G(e){const t=V.get(e);F(t.querySelectorAll(this),e.isConnected)}$(self).filter((e=>/^HTML/.test(e))).forEach((e=>{const t=self[e];function r(){const{constructor:e}=this;if(!L.has(e))throw new TypeError("Illegal constructor");const{is:r,tag:n}=L.get(e);if(r){if(B)return z(B,r);const t=O.call(p,n);return t.setAttribute("is",r),z(C(t,e.prototype),r)}return N.call(this,t,[],e)}C(r,t),P(r.prototype=t.prototype,"constructor",{value:r}),P(self,e,{value:r})})),P(p,"createElement",{configurable:!0,value(e,t){const r=t&&t.is;if(r){const t=W.get(r);if(t&&L.get(t).tag===e)return new t}const n=O.call(p,e);return r&&n.setAttribute("is",r),n}}),M&&(b.prototype.attachShadow=function(e){const t=M.call(this,e);return V.set(this,t),t}),P(g,"get",{configurable:!0,value:D}),P(g,"whenDefined",{configurable:!0,value:I}),P(g,"define",{configurable:!0,value(e,t,r){if(D(e))throw new Error(`'${e}' has already been defined as a custom element`);let n;const l=r&&r.extends;L.set(t,l?{is:e,tag:l}:{is:"",tag:e}),l?(n=`${l}[is="${e}"]`,T.set(n,t.prototype),W.set(e,t),x.push(n)):(q.apply(g,arguments),_.push(n=e)),I(e).then((()=>{l?(F(p.querySelectorAll(n)),j.forEach(G,[n])):H(p.querySelectorAll(n))})),R.get(e)._(t)}})}();

esm/index.js

@@ -18,3 +18,3 @@ import attributesObserver from '@webreflection/custom-elements-attributes';
 
-const {defineProperty, keys, getOwnPropertyNames, setPrototypeOf} = Object;
+const {defineProperty, getOwnPropertyNames, setPrototypeOf} = Object;
 
@@ -123,11 +123,7 @@ const shadowRoots = new WeakMap;
 if (attachShadow)
-  defineProperty(Element.prototype, 'attachShadow', {
-    configurable: true,
-    value() {
-      const root = attachShadow.apply(this, arguments);
-      const {parse} = qsaObserver({query, root, handle});
-      shadowRoots.set(this, {root, parse});
-      return root;
-    }
-  });
+  Element.prototype.attachShadow = function (init) {
+    const root = attachShadow.call(this, init);
+    shadowRoots.set(this, root);
+    return root;
+  };
 
@@ -175,4 +171,4 @@ defineProperty(customElements, 'get', {
 function parseShadow(element) {
-  const {parse, root} = shadowRoots.get(element);
+  const root = shadowRoots.get(element);
   parse(root.querySelectorAll(this), element.isConnected);
 }

index.js

@@ -54,18 +54,67 @@ (function () {
 
-  const {document, MutationObserver, Set, WeakMap} = self;
+  const TRUE = true, FALSE = false;
+  const QSA$1 = 'querySelectorAll';
 
-  const elements = element => 'querySelectorAll' in element;
-  const {filter} = [];
+  function add(node) {
+    this.observe(node, {subtree: TRUE, childList: TRUE});
+  }
 
-  var qsaObserver = options => {
-    const live = new WeakMap;
-    const callback = records => {
-      const {query} = options;
-      if (query.length) {
-        for (let i = 0, {length} = records; i < length; i++) {
-          loop(filter.call(records[i].addedNodes, elements), true, query);
-          loop(filter.call(records[i].removedNodes, elements), false, query);
+  /**
+   * Start observing a generic document or root element.
+   * @param {Function} callback triggered per each dis/connected node
+   * @param {Element?} root by default, the global document to observe
+   * @param {Function?} MO by default, the global MutationObserver
+   * @returns {MutationObserver}
+   */
+  const notify = (callback, root, MO) => {
+    const loop = (nodes, added, removed, connected, pass) => {
+      for (let i = 0, {length} = nodes; i < length; i++) {
+        const node = nodes[i];
+        if (pass || (QSA$1 in node)) {
+          if (connected) {
+            if (!added.has(node)) {
+              added.add(node);
+              removed.delete(node);
+              callback(node, connected);
+            }
+          }
+          else if (!removed.has(node)) {
+            removed.add(node);
+            added.delete(node);
+            callback(node, connected);
+          }
+          if (!pass)
+            loop(node[QSA$1]('*'), added, removed, connected, TRUE);
         }
       }
     };
+
+    const observer = new (MO || MutationObserver)(records => {
+      for (let
+        added = new Set,
+        removed = new Set,
+        i = 0, {length} = records;
+        i < length; i++
+      ) {
+        const {addedNodes, removedNodes} = records[i];
+        loop(removedNodes, added, removed, FALSE, FALSE);
+        loop(addedNodes, added, removed, TRUE, FALSE);
+      }
+    });
+
+    observer.add = add;
+    observer.add(root || document);
+
+    return observer;
+  };
+
+  const QSA = 'querySelectorAll';
+
+  const {document: document$2, Element: Element$1, MutationObserver: MutationObserver$2, Set: Set$2, WeakMap: WeakMap$1} = self;
+
+  const elements = element => QSA in element;
+  const {filter} = [];
+
+  var qsaObserver = options => {
+    const live = new WeakMap$1;
     const drop = elements => {
@@ -76,50 +125,52 @@ for (let i = 0, {length} = elements; i < length; i++)
     const flush = () => {
-      callback(observer.takeRecords());
+      const records = observer.takeRecords();
+      for (let i = 0, {length} = records; i < length; i++) {
+        parse(filter.call(records[i].removedNodes, elements), false);
+        parse(filter.call(records[i].addedNodes, elements), true);
+      }
     };
-    const loop = (elements, connected, query, set = new Set) => {
-      for (let selectors, element, i = 0, {length} = elements; i < length; i++) {
-        // guard against repeated elements within nested querySelectorAll results
-        if (!set.has(element = elements[i])) {
-          set.add(element);
-          if (connected) {
-            for (let q, m = matches(element), i = 0, {length} = query; i < length; i++) {
-              if (m.call(element, q = query[i])) {
-                if (!live.has(element))
-                  live.set(element, new Set);
-                selectors = live.get(element);
-                // guard against selectors that were handled already
-                if (!selectors.has(q)) {
-                  selectors.add(q);
-                  options.handle(element, connected, q);
-                }
-              }
-            }
-          }
-          // guard against elements that never became live
-          else if (live.has(element)) {
+    const matches = element => (
+      element.matches ||
+      element.webkitMatchesSelector ||
+      element.msMatchesSelector
+    );
+    const notifier = (element, connected) => {
+      let selectors;
+      if (connected) {
+        for (let q, m = matches(element), i = 0, {length} = query; i < length; i++) {
+          if (m.call(element, q = query[i])) {
+            if (!live.has(element))
+              live.set(element, new Set$2);
             selectors = live.get(element);
-            live.delete(element);
-            selectors.forEach(q => {
+            if (!selectors.has(q)) {
+              selectors.add(q);
               options.handle(element, connected, q);
-            });
+            }
           }
-          loop(querySelectorAll(element), connected, query, set);
         }
       }
+      else if (live.has(element)) {
+        selectors = live.get(element);
+        live.delete(element);
+        selectors.forEach(q => {
+          options.handle(element, connected, q);
+        });
+      }
     };
-    const matches = element => (
-      element.matches ||
-      element.webkitMatchesSelector ||
-      element.msMatchesSelector
-    );
     const parse = (elements, connected = true) => {
-      loop(elements, connected, options.query);
+      for (let i = 0, {length} = elements; i < length; i++)
+        notifier(elements[i], connected);
     };
-    const querySelectorAll = root => query.length ?
-                              root.querySelectorAll(query) : query;
-    const observer = new MutationObserver(callback);
-    const root = options.root || document;
     const {query} = options;
-    observer.observe(root, {childList: true, subtree: true});
-    parse(querySelectorAll(root));
+    const root = options.root || document$2;
+    const observer = notify(notifier, root, MutationObserver$2);
+    const {attachShadow} = Element$1.prototype;
+    if (attachShadow)
+      Element$1.prototype.attachShadow = function (init) {
+        const shadowRoot = attachShadow.call(this, init);
+        observer.add(shadowRoot);
+        return shadowRoot;
+      };
+    if (query.length)
+      parse(root[QSA](query));
     return {drop, flush, observer, parse};
@@ -130,4 +181,4 @@ };
     customElements, document: document$1,
-    Element, MutationObserver: MutationObserver$1, Object: Object$1, Promise,
-    Map, Set: Set$1, WeakMap: WeakMap$1, Reflect
+    Element, MutationObserver: MutationObserver$1, Object: Object$1, Promise: Promise$1,
+    Map, Set: Set$1, WeakMap, Reflect
   } = self;
@@ -142,5 +193,5 @@
 
-  const {defineProperty, keys: keys$1, getOwnPropertyNames, setPrototypeOf} = Object$1;
+  const {defineProperty, getOwnPropertyNames, setPrototypeOf} = Object$1;
 
-  const shadowRoots = new WeakMap$1;
+  const shadowRoots = new WeakMap;
   const shadows = new Set$1;
@@ -192,3 +243,3 @@
     if (!defined.has(name)) {
-      let _, $ = new Promise($ => { _ = $; });
+      let _, $ = new Promise$1($ => { _ = $; });
       defined.set(name, {$, _});
@@ -248,11 +299,7 @@ }
   if (attachShadow)
-    defineProperty(Element.prototype, 'attachShadow', {
-      configurable: true,
-      value() {
-        const root = attachShadow.apply(this, arguments);
-        const {parse} = qsaObserver({query, root, handle});
-        shadowRoots.set(this, {root, parse});
-        return root;
-      }
-    });
+    Element.prototype.attachShadow = function (init) {
+      const root = attachShadow.call(this, init);
+      shadowRoots.set(this, root);
+      return root;
+    };
 
@@ -300,3 +347,3 @@ defineProperty(customElements, 'get', {
   function parseShadow(element) {
-    const {parse, root} = shadowRoots.get(element);
+    const root = shadowRoots.get(element);
     parse(root.querySelectorAll(this), element.isConnected);
@@ -303,0 +350,0 @@ }

package.json

 {
   "name": "@webreflection/custom-elements-builtin",
-  "version": "0.1.27",
+  "version": "0.2.0",
   "description": "A better custom-elements-builtin polyfill, Safari only",
@@ -22,5 +22,5 @@ "main": "./cjs/index.js",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
     "ascjs": "^5.0.1",
-    "rollup": "^2.39.0",
+    "rollup": "^2.47.0",
     "rollup-plugin-terser": "^7.0.2"
@@ -38,3 +38,3 @@ },
     "@webreflection/custom-elements-upgrade": "^0.1.0",
-    "qsa-observer": "^1.1.6"
+    "qsa-observer": "^2.0.2"
   },
@@ -41,0 +41,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

27340

increased by4.45%

Lines of code

627

increased by5.73%

Dependency changes

• + Addedelement-notifier@0.2.0(transitive)

• + Addedqsa-observer@2.0.2(transitive)

• - Removedqsa-observer@1.1.6(transitive)

• Updatedqsa-observer@^2.0.2