as-custom-element - npm Package Compare versions

Comparing version 0.3.7 to 0.4.0

cjs/index.js

 'use strict';
-const asCE = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@webreflection/as-custom-element'));
+const QSAO = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('qsa-observer'));
 
-module.exports = asCE(document, () => {}, ['*']);
+const attributes = new WeakMap;
+const lifecycle = new WeakMap;
+
+const attributeChanged = (records, mo) => {
+  for (let i = 0, {length} = records; i < length; i++) {
+    const {target, attributeName, oldValue} = records[i];
+    const newValue = target.getAttribute(attributeName);
+    attributes.get(mo).call(target, attributeName, oldValue, newValue);
+  }
+};
+
+const set = element => {
+  const sets = {c: new Set, d: new Set};
+  lifecycle.set(element, sets);
+  return sets;
+};
+
+const {flush} = QSAO({
+  query: ['*'],
+  handle(element, connected) {
+    if (lifecycle.has(element))
+      lifecycle.get(element)[connected ? 'c' : 'd'].forEach(call, element);
+  }
+});
+
+module.exports = (
+  element,
+  {
+    connectedCallback,
+    disconnectedCallback,
+    observedAttributes,
+    attributeChangedCallback
+  }
+) => {
+  flush();
+  const {c, d} = lifecycle.get(element) || set(element);
+  if (observedAttributes) {
+    const mo = new MutationObserver(attributeChanged);
+    mo.observe(element, {
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: observedAttributes.map(attributeName => {
+        if (element.hasAttribute(attributeName))
+          attributeChangedCallback.call(
+            element,
+            attributeName,
+            null,
+            element.getAttribute(attributeName)
+          );
+        return attributeName;
+      })
+    });
+    attributes.set(mo, attributeChangedCallback);
+
+  }
+  if (disconnectedCallback)
+    d.add(disconnectedCallback);
+  if (connectedCallback) {
+    c.add(connectedCallback);
+    if (!(
+      element.ownerDocument.compareDocumentPosition(element) &
+      element.DOCUMENT_POSITION_DISCONNECTED
+    ))
+      connectedCallback.call(element);
+  }
+  return element;
+};
+
+function call(back) {
+  back.call(this);
+}

es.js

@@ -1,1 +0,1 @@
-self.asCustomElement=function(e){"use strict";function t(e){e.call(this)}var a=((e,a,r)=>{const l=new WeakMap,n=new WeakMap,{filter:c}=[],o=(e,t)=>{for(let a=0,{length:r}=e;a<r;a++){const{target:r,attributeName:l,oldValue:c}=e[a],o=r.getAttribute(l);n.get(t).call(r,l,c,o)}},s=e=>"querySelectorAll"in e,u=e=>{if(r.length)for(let t=0,{length:a}=e;t<a;t++){const{addedNodes:a,removedNodes:r}=e[t];d(c.call(a,s),"c",new Set),d(c.call(r,s),"d",new Set)}},d=(e,n,c)=>{for(let o=0,{length:s}=e;o<s;o++){const s=e[o];c.has(s)||(c.add(s),l.has(s)?l.get(s)[n].forEach(t,s):"c"===n&&a(s),d(s.querySelectorAll(r),n,c))}},i=new MutationObserver(u);return i.observe(e,{childList:!0,subtree:!0}),(e,{connectedCallback:t,disconnectedCallback:a,observedAttributes:r,attributeChangedCallback:c})=>{u(i.takeRecords());const{c:s,d:d}=l.get(e)||(e=>{const t={c:new Set,d:new Set};return l.set(e,t),t})(e);if(r){const t=new MutationObserver(o);t.observe(e,{attributes:!0,attributeOldValue:!0,attributeFilter:r.map(t=>(e.hasAttribute(t)&&c.call(e,t,null,e.getAttribute(t)),t))}),n.set(t,c)}return a&&d.add(a),t&&(s.add(t),e.ownerDocument.compareDocumentPosition(e)&e.DOCUMENT_POSITION_DISCONNECTED||t.call(e)),e}})(document,()=>{},["*"]);return e.default=a,e}({}).default;
+self.asCustomElement=function(e){"use strict";const t=e=>"querySelectorAll"in e,{filter:l}=[];const r=new WeakMap,a=new WeakMap,n=(e,t)=>{for(let l=0,{length:a}=e;l<a;l++){const{target:a,attributeName:n,oldValue:c}=e[l],o=a.getAttribute(n);r.get(t).call(a,n,c,o)}},{flush:c}=(e=>{const r=r=>{const{query:n}=e;if(n.length)for(let e=0,{length:c}=r;e<c;e++)a(l.call(r[e].addedNodes,t),!0,n),a(l.call(r[e].removedNodes,t),!1,n)},a=(t,l,r,c=new Set)=>{for(let o,s=0,{length:u}=t;s<u;s++)if(!c.has(o=t[s])){c.add(o);for(let t=n(o),a=0,{length:c}=r;a<c;a++)t.call(o,r[a])&&e.handle(o,l,r[a],a);a(o.querySelectorAll(r),l,r,c)}},n=e=>e.matches||e.webkitMatchesSelector||e.msMatchesSelector,c=(t,l=!0)=>{a(t,l,e.query)},o=new MutationObserver(r),s=e.root||document,{query:u}=e;return o.observe(s,{childList:!0,subtree:!0}),u.length&&c(s.querySelectorAll(u)),{flush:()=>{r(o.takeRecords())},observer:o,parse:c}})({query:["*"],handle(e,t){a.has(e)&&a.get(e)[t?"c":"d"].forEach(o,e)}});function o(e){e.call(this)}return e.default=(e,{connectedCallback:t,disconnectedCallback:l,observedAttributes:o,attributeChangedCallback:s})=>{c();const{c:u,d:d}=a.get(e)||(e=>{const t={c:new Set,d:new Set};return a.set(e,t),t})(e);if(o){const t=new MutationObserver(n);t.observe(e,{attributes:!0,attributeOldValue:!0,attributeFilter:o.map(t=>(e.hasAttribute(t)&&s.call(e,t,null,e.getAttribute(t)),t))}),r.set(t,s)}return l&&d.add(l),t&&(u.add(t),e.ownerDocument.compareDocumentPosition(e)&e.DOCUMENT_POSITION_DISCONNECTED||t.call(e)),e},e}({}).default;

esm/index.js

@@ -1,3 +0,73 @@
-import asCE from '@webreflection/as-custom-element';
+import QSAO from 'qsa-observer';
 
-export default asCE(document, () => {}, ['*']);
+const attributes = new WeakMap;
+const lifecycle = new WeakMap;
+
+const attributeChanged = (records, mo) => {
+  for (let i = 0, {length} = records; i < length; i++) {
+    const {target, attributeName, oldValue} = records[i];
+    const newValue = target.getAttribute(attributeName);
+    attributes.get(mo).call(target, attributeName, oldValue, newValue);
+  }
+};
+
+const set = element => {
+  const sets = {c: new Set, d: new Set};
+  lifecycle.set(element, sets);
+  return sets;
+};
+
+const {flush} = QSAO({
+  query: ['*'],
+  handle(element, connected) {
+    if (lifecycle.has(element))
+      lifecycle.get(element)[connected ? 'c' : 'd'].forEach(call, element);
+  }
+});
+
+export default (
+  element,
+  {
+    connectedCallback,
+    disconnectedCallback,
+    observedAttributes,
+    attributeChangedCallback
+  }
+) => {
+  flush();
+  const {c, d} = lifecycle.get(element) || set(element);
+  if (observedAttributes) {
+    const mo = new MutationObserver(attributeChanged);
+    mo.observe(element, {
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: observedAttributes.map(attributeName => {
+        if (element.hasAttribute(attributeName))
+          attributeChangedCallback.call(
+            element,
+            attributeName,
+            null,
+            element.getAttribute(attributeName)
+          );
+        return attributeName;
+      })
+    });
+    attributes.set(mo, attributeChangedCallback);
+
+  }
+  if (disconnectedCallback)
+    d.add(disconnectedCallback);
+  if (connectedCallback) {
+    c.add(connectedCallback);
+    if (!(
+      element.ownerDocument.compareDocumentPosition(element) &
+      element.DOCUMENT_POSITION_DISCONNECTED
+    ))
+      connectedCallback.call(element);
+  }
+  return element;
+};
+
+function call(back) {
+  back.call(this);
+}

index.js

 self.asCustomElement = (function (exports) {
   'use strict';
 
-  var asCE = (function (root, upgrade, query) {
-    var wm = new WeakMap();
-    var ao = new WeakMap();
-    var filter = [].filter;
+  var elements = function elements(element) {
+    return 'querySelectorAll' in element;
+  };
 
-    var attributeChanged = function attributeChanged(records, mo) {
-      for (var i = 0, length = records.length; i < length; i++) {
-        var _records$i = records[i],
-            target = _records$i.target,
-            attributeName = _records$i.attributeName,
-            oldValue = _records$i.oldValue;
-        var newValue = target.getAttribute(attributeName);
-        ao.get(mo).call(target, attributeName, oldValue, newValue);
-      }
-    };
+  var filter = [].filter;
+  var QSAO = (function (options) {
+    var callback = function callback(records) {
+      var query = options.query;
 
-    var elements = function elements(target) {
-      return 'querySelectorAll' in target;
-    };
-
-    var mainLoop = function mainLoop(records) {
       if (query.length) {
         for (var i = 0, length = records.length; i < length; i++) {
-          var _records$i2 = records[i],
-              addedNodes = _records$i2.addedNodes,
-              removedNodes = _records$i2.removedNodes;
-          parse(filter.call(addedNodes, elements), 'c', new Set());
-          parse(filter.call(removedNodes, elements), 'd', new Set());
+          loop(filter.call(records[i].addedNodes, elements), true, query);
+          loop(filter.call(records[i].removedNodes, elements), false, query);
         }
@@ -36,10 +21,18 @@ }
 
-    var parse = function parse(nodes, key, parsed) {
-      for (var i = 0, length = nodes.length; i < length; i++) {
-        var target = nodes[i];
+    var flush = function flush() {
+      callback(observer.takeRecords());
+    };
 
-        if (!parsed.has(target)) {
-          parsed.add(target);
-          if (wm.has(target)) wm.get(target)[key].forEach(call, target);else if (key === 'c') upgrade(target);
-          parse(target.querySelectorAll(query), key, parsed);
+    var loop = function loop(elements, connected, query) {
+      var set = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new Set();
+
+      for (var element, i = 0, length = elements.length; i < length; i++) {
+        if (!set.has(element = elements[i])) {
+          set.add(element);
+
+          for (var m = matches(element), _i = 0, _length = query.length; _i < _length; _i++) {
+            if (m.call(element, query[_i])) options.handle(element, connected, query[_i], _i);
+          }
+
+          loop(element.querySelectorAll(query), connected, query, set);
         }
@@ -49,49 +42,89 @@ }
 
-    var set = function set(target) {
-      var sets = {
-        c: new Set(),
-        d: new Set()
-      };
-      wm.set(target, sets);
-      return sets;
+    var matches = function matches(element) {
+      return element.matches || element.webkitMatchesSelector || element.msMatchesSelector;
     };
 
-    var sdo = new MutationObserver(mainLoop);
-    sdo.observe(root, {
+    var parse = function parse(elements) {
+      var connected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      loop(elements, connected, options.query);
+    };
+
+    var observer = new MutationObserver(callback);
+    var root = options.root || document;
+    var query = options.query;
+    observer.observe(root, {
       childList: true,
       subtree: true
     });
-    return function (target, _ref) {
-      var connectedCallback = _ref.connectedCallback,
-          disconnectedCallback = _ref.disconnectedCallback,
-          observedAttributes = _ref.observedAttributes,
-          attributeChangedCallback = _ref.attributeChangedCallback;
-      mainLoop(sdo.takeRecords());
+    if (query.length) parse(root.querySelectorAll(query));
+    return {
+      flush: flush,
+      observer: observer,
+      parse: parse
+    };
+  });
 
-      var _ref2 = wm.get(target) || set(target),
-          c = _ref2.c,
-          d = _ref2.d;
+  var attributes = new WeakMap();
+  var lifecycle = new WeakMap();
 
-      if (observedAttributes) {
-        var mo = new MutationObserver(attributeChanged);
-        mo.observe(target, {
-          attributes: true,
-          attributeOldValue: true,
-          attributeFilter: observedAttributes.map(function (attributeName) {
-            if (target.hasAttribute(attributeName)) attributeChangedCallback.call(target, attributeName, null, target.getAttribute(attributeName));
-            return attributeName;
-          })
-        });
-        ao.set(mo, attributeChangedCallback);
-      }
+  var attributeChanged = function attributeChanged(records, mo) {
+    for (var i = 0, length = records.length; i < length; i++) {
+      var _records$i = records[i],
+          target = _records$i.target,
+          attributeName = _records$i.attributeName,
+          oldValue = _records$i.oldValue;
+      var newValue = target.getAttribute(attributeName);
+      attributes.get(mo).call(target, attributeName, oldValue, newValue);
+    }
+  };
 
-      if (disconnectedCallback) d.add(disconnectedCallback);
+  var set = function set(element) {
+    var sets = {
+      c: new Set(),
+      d: new Set()
+    };
+    lifecycle.set(element, sets);
+    return sets;
+  };
 
-      if (connectedCallback) {
-        c.add(connectedCallback);
-        if (!(target.ownerDocument.compareDocumentPosition(target) & target.DOCUMENT_POSITION_DISCONNECTED)) connectedCallback.call(target);
-      }
+  var _QSAO = QSAO({
+    query: ['*'],
+    handle: function handle(element, connected) {
+      if (lifecycle.has(element)) lifecycle.get(element)[connected ? 'c' : 'd'].forEach(call, element);
+    }
+  }),
+      flush = _QSAO.flush;
 
-      return target;
-    };
+  var index = (function (element, _ref) {
+    var connectedCallback = _ref.connectedCallback,
+        disconnectedCallback = _ref.disconnectedCallback,
+        observedAttributes = _ref.observedAttributes,
+        attributeChangedCallback = _ref.attributeChangedCallback;
+    flush();
+
+    var _ref2 = lifecycle.get(element) || set(element),
+        c = _ref2.c,
+        d = _ref2.d;
+
+    if (observedAttributes) {
+      var mo = new MutationObserver(attributeChanged);
+      mo.observe(element, {
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: observedAttributes.map(function (attributeName) {
+          if (element.hasAttribute(attributeName)) attributeChangedCallback.call(element, attributeName, null, element.getAttribute(attributeName));
+          return attributeName;
+        })
+      });
+      attributes.set(mo, attributeChangedCallback);
+    }
+
+    if (disconnectedCallback) d.add(disconnectedCallback);
+
+    if (connectedCallback) {
+      c.add(connectedCallback);
+      if (!(element.ownerDocument.compareDocumentPosition(element) & element.DOCUMENT_POSITION_DISCONNECTED)) connectedCallback.call(element);
+    }
+
+    return element;
   });
@@ -103,4 +136,2 @@
 
-  var index = asCE(document, function () {}, ['*']);
-
   exports.default = index;
@@ -107,0 +138,0 @@

min.js

@@ -1,1 +0,1 @@
-self.asCustomElement=function(e){"use strict";function t(e){e.call(this)}var r,a,n,l,u,c,o,i,d,s,f,b=(r=document,a=function(){},n=["*"],l=new WeakMap,u=new WeakMap,c=[].filter,o=function(e,t){for(var r=0,a=e.length;r<a;r++){var n=e[r],l=n.target,c=n.attributeName,o=n.oldValue,i=l.getAttribute(c);u.get(t).call(l,c,o,i)}},i=function(e){return"querySelectorAll"in e},d=function(e){if(n.length)for(var t=0,r=e.length;t<r;t++){var a=e[t],l=a.addedNodes,u=a.removedNodes;s(c.call(l,i),"c",new Set),s(c.call(u,i),"d",new Set)}},s=function e(r,u,c){for(var o=0,i=r.length;o<i;o++){var d=r[o];c.has(d)||(c.add(d),l.has(d)?l.get(d)[u].forEach(t,d):"c"===u&&a(d),e(d.querySelectorAll(n),u,c))}},(f=new MutationObserver(d)).observe(r,{childList:!0,subtree:!0}),function(e,t){var r=t.connectedCallback,a=t.disconnectedCallback,n=t.observedAttributes,c=t.attributeChangedCallback;d(f.takeRecords());var i=l.get(e)||function(e){var t={c:new Set,d:new Set};return l.set(e,t),t}(e),s=i.c,b=i.d;if(n){var v=new MutationObserver(o);v.observe(e,{attributes:!0,attributeOldValue:!0,attributeFilter:n.map((function(t){return e.hasAttribute(t)&&c.call(e,t,null,e.getAttribute(t)),t}))}),u.set(v,c)}return a&&b.add(a),r&&(s.add(r),e.ownerDocument.compareDocumentPosition(e)&e.DOCUMENT_POSITION_DISCONNECTED||r.call(e)),e});return e.default=b,e}({}).default;
+self.asCustomElement=function(e){"use strict";var t,r,n,a,l,u,o,c,i=function(e){return"querySelectorAll"in e},s=[].filter,d=new WeakMap,f=new WeakMap,h=function(e,t){for(var r=0,n=e.length;r<n;r++){var a=e[r],l=a.target,u=a.attributeName,o=a.oldValue,c=l.getAttribute(u);d.get(t).call(l,u,o,c)}},v=(t={query:["*"],handle:function(e,t){f.has(e)&&f.get(e)[t?"c":"d"].forEach(b,e)}},r=function(e){var r=t.query;if(r.length)for(var a=0,l=e.length;a<l;a++)n(s.call(e[a].addedNodes,i),!0,r),n(s.call(e[a].removedNodes,i),!1,r)},n=function e(r,n,l){for(var u,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:new Set,c=0,i=r.length;c<i;c++)if(!o.has(u=r[c])){o.add(u);for(var s=a(u),d=0,f=l.length;d<f;d++)s.call(u,l[d])&&t.handle(u,n,l[d],d);e(u.querySelectorAll(l),n,l,o)}},a=function(e){return e.matches||e.webkitMatchesSelector||e.msMatchesSelector},l=function(e){var r=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];n(e,r,t.query)},u=new MutationObserver(r),o=t.root||document,c=t.query,u.observe(o,{childList:!0,subtree:!0}),c.length&&l(o.querySelectorAll(c)),{flush:function(){r(u.takeRecords())},observer:u,parse:l}).flush;function b(e){e.call(this)}return e.default=function(e,t){var r=t.connectedCallback,n=t.disconnectedCallback,a=t.observedAttributes,l=t.attributeChangedCallback;v();var u=f.get(e)||function(e){var t={c:new Set,d:new Set};return f.set(e,t),t}(e),o=u.c,c=u.d;if(a){var i=new MutationObserver(h);i.observe(e,{attributes:!0,attributeOldValue:!0,attributeFilter:a.map((function(t){return e.hasAttribute(t)&&l.call(e,t,null,e.getAttribute(t)),t}))}),d.set(i,l)}return n&&c.add(n),r&&(o.add(r),e.ownerDocument.compareDocumentPosition(e)&e.DOCUMENT_POSITION_DISCONNECTED||r.call(e)),e},e}({}).default;

package.json

 {
   "name": "as-custom-element",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "description": "Setup any element as if it was a Custom Element",
@@ -24,3 +24,3 @@ "main": "./cjs/index.js",
   "devDependencies": {
-    "@babel/core": "^7.10.5",
+    "@babel/core": "^7.11.0",
     "@babel/preset-env": "^7.10.4",
@@ -52,4 +52,4 @@ "@rollup/plugin-babel": "^5.1.0",
   "dependencies": {
-    "@webreflection/as-custom-element": "^0.1.9"
+    "qsa-observer": "^0.1.0"
   }
 }

README.md

@@ -5,3 +5,3 @@ # As Custom Element
 
-Compatible with [modern browsers](https://webreflection.github.io/as-custom-element/test/), as well as [IE11](https://webreflection.github.io/as-custom-element/test/ie/), and no polyfills are needed, for a total minified size of *~0.6K*.
+Compatible with [modern browsers](https://webreflection.github.io/as-custom-element/test/), as well as [IE11](https://webreflection.github.io/as-custom-element/test/ie/), and no polyfills are needed, for a minified size less than *0.8K*.
 
@@ -8,0 +8,0 @@ ```js

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14562

increased by51.25%

Lines of code

252

increased by154.55%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedqsa-observer@^0.1.0

• + Addedqsa-observer@0.1.1(transitive)

• - Removed@webreflection/as-custom-element@^0.1.9

• - Removed@webreflection/as-custom-element@0.1.9(transitive)