dom-mutator - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

dist/dom-mutator.cjs.development.js

@@ -139,2 +139,29 @@ 'use strict';
 
+var raf = false;
+
+function setValues() {
+  raf = false;
+  elements.forEach(function (attrs, el) {
+    Object.keys(attrs).forEach(function (attr) {
+      var elAttr = attrs[attr];
+
+      if (elAttr.dirty) {
+        elAttr.dirty = false;
+        setValue(el, attr, elAttr.lastValue); // No more mutations for the element, remove the observer
+
+        if (!elAttr.mutations.length) {
+          deleteElementAttributeRecord(el, attr);
+        }
+      }
+    });
+  });
+}
+
+function queueDOMUpdates() {
+  if (!raf) {
+    raf = true;
+    requestAnimationFrame(setValues);
+  }
+}
+
 function applyMutations(el, attr) {
@@ -153,4 +180,5 @@ var elAttr = getElementAttributeRecord(el, attr);
   if (val !== currentVal) {
+    elAttr.dirty = true;
     elAttr.lastValue = val;
-    setValue(el, attr, val);
+    queueDOMUpdates();
   }
@@ -208,7 +236,3 @@ }
 
-  applyMutations(el, attr); // No more mutations for the element, remove the observer
-
-  if (!elAttr.mutations.length) {
-    deleteElementAttributeRecord(el, attr);
-  }
+  applyMutations(el, attr);
 }
@@ -215,0 +239,0 @@

dist/dom-mutator.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n={},r=new Map,a=1,u=/^([a-zA-Z:_][a-zA-Z0-9:_.-]*)\s*=\s*"([^"]*)"/;function i(e,t){var n=r.get(e);if(n||r.set(e,n={}),!n[t]){var a={externalValue:s(e,t),lastValue:"",observer:new MutationObserver((function(){var n=s(e,t);n!==a.lastValue&&(a.externalValue=n,l(e,t))})),mutations:[]};n[t]=a,a.observer.observe(e,function(e){return"html"===e?{childList:!0,subtree:!0,attributes:!0,characterData:!0}:{childList:!1,subtree:!1,attributes:!0,attributeFilter:[e]}}(t))}return n[t]}function s(e,t){return"html"===t?e.innerHTML:"className"===t?e.className:e.getAttribute(t)||""}function l(e,t){var r=i(e,t),a=r.externalValue;r.mutations.forEach((function(e){var t=n[e];t&&(a=function(e,t){if("addClass"===e.type){var n=t.split(" ");return e.value.split(" ").forEach((function(e){n.includes(e)||n.push(e)})),n.filter(Boolean).join(" ")}if("removeClass"===e.type){var r=t.split(" "),a=e.value.split(" ");return r.filter((function(e){return!a.includes(e)})).join(" ")}if("setHTML"===e.type)return e.value;if("appendHTML"===e.type)return t+e.value;if("setAttribute"===e.type){var i=u.exec(e.value);return(null==i?void 0:i[2])||""}return t}(t,a))}));var l=s(e,t);a!==l&&(r.lastValue=a,function(e,t,n){"html"===t?e.innerHTML=n:"className"===t?n?e.className=n:e.removeAttribute("class"):n?e.setAttribute(t,n):e.removeAttribute(t)}(e,t,a))}function o(e,t){if(["addClass","removeClass"].includes(e))return"className";if(["appendHTML","setHTML"].includes(e))return"html";if("setAttribute"===e){var n=u.exec(t);if(null!=n&&n[1]){var r=n[1];return"class"===r||"classname"===r?"className":r}}return""}function c(e,t){var a=n[e];if(a){a.elements.delete(t);var u=o(a.type,a.value),s=i(t,u),c=s.mutations.indexOf(e);-1!==c&&s.mutations.splice(c,1),l(t,u),s.mutations.length||function(e,t){var n=r.get(e);n&&(n[t]&&n[t].observer.disconnect(),delete n[t])}(t,u)}}function f(e){var t=n[e];if(t){var r=new Set(t.elements),a=new Set;document.body.querySelectorAll(t.selector).forEach((function(t){a.add(t),r.has(t)||function(e,t){var r=n[e];if(r){r.elements.add(t);var a=o(r.type,r.value);i(t,a).mutations.push(e),l(t,a)}}(e,t)})),r.forEach((function(t){a.has(t)||c(e,t)}))}}function v(){Object.keys(n).forEach((function(e){f(e)}))}function d(){"undefined"!=typeof document&&(t||(t=new MutationObserver((function(){v()}))),v(),t.observe(document.body,{childList:!0,subtree:!0,attributes:!1,characterData:!1}))}d(),exports.connectGlobalObserver=d,exports.default=function(t,r,u){if("undefined"==typeof document)return function(){};if(!o(r,u))return function(){};var i=function(t,r,u){var i;"appendHTML"!==r&&"setHTML"!==r||(i=u,e||(e=document.createElement("div")),e.innerHTML=i,u=e.innerHTML);var s=""+a++;return n[s]={selector:t,type:r,value:u,elements:new Set},f(s),s}(t,r,u);return function(){!function(e){var t=n[e];t&&(new Set(t.elements).forEach((function(t){c(e,t)})),n[e].elements.clear(),delete n[e])}(i)}},exports.disconnectGlobalObserver=function(){t&&t.disconnect()};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t={},n=new Map,r=1,a=/^([a-zA-Z:_][a-zA-Z0-9:_.-]*)\s*=\s*"([^"]*)"/;function u(e,t){var r=n.get(e);if(r||n.set(e,r={}),!r[t]){var a={externalValue:i(e,t),lastValue:"",observer:new MutationObserver((function(){var n=i(e,t);n!==a.lastValue&&(a.externalValue=n,l(e,t))})),mutations:[]};r[t]=a,a.observer.observe(e,function(e){return"html"===e?{childList:!0,subtree:!0,attributes:!0,characterData:!0}:{childList:!1,subtree:!1,attributes:!0,attributeFilter:[e]}}(t))}return r[t]}function i(e,t){return"html"===t?e.innerHTML:"className"===t?e.className:e.getAttribute(t)||""}var s,o=!1;function c(){o=!1,n.forEach((function(e,t){Object.keys(e).forEach((function(r){var a=e[r];a.dirty&&(a.dirty=!1,function(e,t,n){"html"===t?e.innerHTML=n:"className"===t?n?e.className=n:e.removeAttribute("class"):n?e.setAttribute(t,n):e.removeAttribute(t)}(t,r,a.lastValue),a.mutations.length||function(e,t){var r=n.get(e);r&&(r[t]&&r[t].observer.disconnect(),delete r[t])}(t,r))}))}))}function l(e,n){var r=u(e,n),s=r.externalValue;r.mutations.forEach((function(e){var n=t[e];n&&(s=function(e,t){if("addClass"===e.type){var n=t.split(" ");return e.value.split(" ").forEach((function(e){n.includes(e)||n.push(e)})),n.filter(Boolean).join(" ")}if("removeClass"===e.type){var r=t.split(" "),u=e.value.split(" ");return r.filter((function(e){return!u.includes(e)})).join(" ")}if("setHTML"===e.type)return e.value;if("appendHTML"===e.type)return t+e.value;if("setAttribute"===e.type){var i=a.exec(e.value);return(null==i?void 0:i[2])||""}return t}(n,s))}));var l=i(e,n);s!==l&&(r.dirty=!0,r.lastValue=s,o||(o=!0,requestAnimationFrame(c)))}function f(e,t){if(["addClass","removeClass"].includes(e))return"className";if(["appendHTML","setHTML"].includes(e))return"html";if("setAttribute"===e){var n=a.exec(t);if(null!=n&&n[1]){var r=n[1];return"class"===r||"classname"===r?"className":r}}return""}function v(e,n){var r=t[e];if(r){r.elements.delete(n);var a=f(r.type,r.value),i=u(n,a),s=i.mutations.indexOf(e);-1!==s&&i.mutations.splice(s,1),l(n,a)}}function d(e){var n=t[e];if(n){var r=new Set(n.elements),a=new Set;document.body.querySelectorAll(n.selector).forEach((function(n){a.add(n),r.has(n)||function(e,n){var r=t[e];if(r){r.elements.add(n);var a=f(r.type,r.value);u(n,a).mutations.push(e),l(n,a)}}(e,n)})),r.forEach((function(t){a.has(t)||v(e,t)}))}}function m(){Object.keys(t).forEach((function(e){d(e)}))}function b(){"undefined"!=typeof document&&(s||(s=new MutationObserver((function(){m()}))),m(),s.observe(document.body,{childList:!0,subtree:!0,attributes:!1,characterData:!1}))}b(),exports.connectGlobalObserver=b,exports.default=function(n,a,u){if("undefined"==typeof document)return function(){};if(!f(a,u))return function(){};var i=function(n,a,u){var i;"appendHTML"!==a&&"setHTML"!==a||(i=u,e||(e=document.createElement("div")),e.innerHTML=i,u=e.innerHTML);var s=""+r++;return t[s]={selector:n,type:a,value:u,elements:new Set},d(s),s}(n,a,u);return function(){!function(e){var n=t[e];n&&(new Set(n.elements).forEach((function(t){v(e,t)})),t[e].elements.clear(),delete t[e])}(i)}},exports.disconnectGlobalObserver=function(){s&&s.disconnect()};
 //# sourceMappingURL=dom-mutator.cjs.production.min.js.map

dist/dom-mutator.esm.js

@@ -135,2 +135,29 @@ var mutations = {};
 
+var raf = false;
+
+function setValues() {
+  raf = false;
+  elements.forEach(function (attrs, el) {
+    Object.keys(attrs).forEach(function (attr) {
+      var elAttr = attrs[attr];
+
+      if (elAttr.dirty) {
+        elAttr.dirty = false;
+        setValue(el, attr, elAttr.lastValue); // No more mutations for the element, remove the observer
+
+        if (!elAttr.mutations.length) {
+          deleteElementAttributeRecord(el, attr);
+        }
+      }
+    });
+  });
+}
+
+function queueDOMUpdates() {
+  if (!raf) {
+    raf = true;
+    requestAnimationFrame(setValues);
+  }
+}
+
 function applyMutations(el, attr) {
@@ -149,4 +176,5 @@ var elAttr = getElementAttributeRecord(el, attr);
   if (val !== currentVal) {
+    elAttr.dirty = true;
     elAttr.lastValue = val;
-    setValue(el, attr, val);
+    queueDOMUpdates();
   }
@@ -204,7 +232,3 @@ }
 
-  applyMutations(el, attr); // No more mutations for the element, remove the observer
-
-  if (!elAttr.mutations.length) {
-    deleteElementAttributeRecord(el, attr);
-  }
+  applyMutations(el, attr);
 }
@@ -211,0 +235,0 @@

package.json

 {
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

src/index.ts

@@ -18,2 +18,3 @@ export type MutationType =
   lastValue: string;
+  dirty?: boolean;
   observer: MutationObserver;
@@ -152,2 +153,27 @@ mutations: string[];
 
+let raf = false;
+function setValues() {
+  raf = false;
+  elements.forEach((attrs, el) => {
+    Object.keys(attrs).forEach(attr => {
+      const elAttr = attrs[attr];
+      if (elAttr.dirty) {
+        elAttr.dirty = false;
+        setValue(el, attr, elAttr.lastValue);
+
+        // No more mutations for the element, remove the observer
+        if (!elAttr.mutations.length) {
+          deleteElementAttributeRecord(el, attr);
+        }
+      }
+    });
+  });
+}
+function queueDOMUpdates() {
+  if (!raf) {
+    raf = true;
+    requestAnimationFrame(setValues);
+  }
+}
+
 function applyMutations(el: Element, attr: string) {
@@ -165,4 +191,5 @@ const elAttr = getElementAttributeRecord(el, attr);
   if (val !== currentVal) {
+    elAttr.dirty = true;
     elAttr.lastValue = val;
-    setValue(el, attr, val);
+    queueDOMUpdates();
   }
@@ -215,7 +242,2 @@ }
   applyMutations(el, attr);
-
-  // No more mutations for the element, remove the observer
-  if (!elAttr.mutations.length) {
-    deleteElementAttributeRecord(el, attr);
-  }
 }
@@ -222,0 +244,0 @@

No alert changes

Improved metrics

Total package byte prevSize

85004

increased by5.62%

Lines of code

912

increased by7.29%

No dependency changes