dom-mutator - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

dist/dom-mutator.cjs.development.js

@@ -400,6 +400,53 @@ 'use strict';
 
+function declarative(_ref) {
+  var selector = _ref.selector,
+      action = _ref.action,
+      value = _ref.value,
+      attr = _ref.attribute;
+
+  if (attr === 'html') {
+    if (action === 'append') {
+      return html(selector, function (val) {
+        return val + value;
+      });
+    } else if (action === 'set') {
+      return html(selector, function () {
+        return value;
+      });
+    }
+  } else if (attr === 'class') {
+    if (action === 'append') {
+      return classes(selector, function (val) {
+        return val.add(value);
+      });
+    } else if (action === 'remove') {
+      return classes(selector, function (val) {
+        return val["delete"](value);
+      });
+    } else if (action === 'set') {
+      return classes(selector, function (val) {
+        val.clear();
+        val.add(value);
+      });
+    }
+  } else {
+    if (action === 'append') {
+      return attribute(selector, attr, function (val) {
+        return val + value;
+      });
+    } else if (action === 'set') {
+      return attribute(selector, attr, function () {
+        return value;
+      });
+    }
+  }
+
+  return nullController;
+}
+
 var index = {
   html: html,
   classes: classes,
-  attribute: attribute
+  attribute: attribute,
+  declarative: declarative
 };
@@ -406,0 +453,0 @@

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

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=/^[a-zA-Z:_][a-zA-Z0-9:_.-]*$/,e={revert:function(){}},n=new Map,r=new Set;function u(t){var e=n.get(t);return e||n.set(t,e={el:t,attributes:{}}),e}function i(t,e,n,r,u){var i=n(t),a={isDirty:!1,originalValue:i,virtualValue:i,mutations:[],el:t,observer:new MutationObserver((function(){var e=n(t);e!==a.virtualValue&&(a.originalValue=e,u(a))})),runMutations:u,setValue:r,getCurrentValue:n};return a.observer.observe(t,function(t){return"html"===t?{childList:!0,subtree:!0,attributes:!0,characterData:!0}:{childList:!1,subtree:!1,attributes:!0,attributeFilter:[t]}}(e)),a}function a(t){var e=t.originalValue;return t.mutations.forEach((function(t){return e=t.mutate(e)})),e}function s(t,e){var n=e.getCurrentValue(e.el);e.virtualValue=t,t!==n&&(e.isDirty=!0,V||(V=!0,requestAnimationFrame(k)))}function o(t){var e;s((e=a(t),v||(v=document.createElement("div")),v.innerHTML=e,v.innerHTML),t)}function l(t){var e=function(t,e){return e.mutations.forEach((function(e){return e.mutate(t)})),t}(new Set(t.originalValue.split(/\s+/).filter(Boolean)),t);s(Array.from(e).filter(Boolean).join(" "),t)}function c(t){s(a(t),t)}var f=function(t){return t.innerHTML},m=function(t,e){return t.innerHTML=e};function d(t){var e=u(t);return e.html||(e.html=i(t,"html",f,m,o)),e.html}var v,b=function(t,e){return e?t.className=e:t.removeAttribute("class")},h=function(t){return t.className};function p(t){var e=u(t);return e.classes||(e.classes=i(t,"class",h,b,l)),e.classes}function M(t,e){var n=u(t);return n.attributes[e]||(n.attributes[e]=i(t,e,(function(t){return t.getAttribute(e)||""}),(function(t,n){return n?t.setAttribute(e,n):t.removeAttribute(e)}),c)),n.attributes[e]}function y(t,e,r){if(r.isDirty){r.isDirty=!1;var u=r.virtualValue;r.mutations.length||function(t,e){var r,u,i=n.get(t);if(i)if("html"===e)null==(r=i.html)||null==(u=r.observer)||u.disconnect(),delete i.html;else if("class"===e){var a,s;null==(a=i.classes)||null==(s=a.observer)||s.disconnect(),delete i.classes}else{var o,l,c;null==(o=i.attributes)||null==(l=o[e])||null==(c=l.observer)||c.disconnect(),delete i.attributes[e]}}(t,e),r.setValue(t,u)}}var w,V=!1;function g(t,e){t.html&&y(e,"html",t.html),t.classes&&y(e,"class",t.classes),Object.keys(t.attributes).forEach((function(n){y(e,n,t.attributes[n])}))}function k(){V=!1,n.forEach(g)}function A(t,e){if(t.elements.delete(e),"html"===t.kind){var n=d(e),r=n.mutations.indexOf(t);-1!==r&&n.mutations.splice(r,1),n.runMutations(n)}else if("class"===t.kind){var u=p(e),i=u.mutations.indexOf(t);-1!==i&&u.mutations.splice(i,1),u.runMutations(u)}else if("attribute"===t.kind){var a=M(e,t.attribute),s=a.mutations.indexOf(t);-1!==s&&a.mutations.splice(s,1),a.runMutations(a)}}function E(t){var e=new Set(t.elements),n=new Set;document.body.querySelectorAll(t.selector).forEach((function(r){n.add(r),e.has(r)||function(t,e){if(t.elements.add(e),"html"===t.kind){var n=d(e);n.mutations.push(t),n.runMutations(n)}else if("class"===t.kind){var r=p(e);r.mutations.push(t),r.runMutations(r)}else if("attribute"===t.kind){var u=M(e,t.attribute);u.mutations.push(t),u.runMutations(u)}}(t,r)})),e.forEach((function(e){n.has(e)||A(t,e)}))}function S(){r.forEach(E)}function O(){"undefined"!=typeof document&&(w||(w=new MutationObserver((function(){S()}))),S(),w.observe(document.body,{childList:!0,subtree:!0,attributes:!1,characterData:!1}))}function x(t){return"undefined"==typeof document?e:(r.add(t),E(t),{revert:function(){var e;e=t,new Set(e.elements).forEach((function(t){A(e,t)})),e.elements.clear(),r.delete(e)}})}O();var L={html:function(t,e){return x({kind:"html",elements:new Set,mutate:e,selector:t})},classes:function(t,e){return x({kind:"class",elements:new Set,mutate:e,selector:t})},attribute:function(n,r,u){return t.test(r)?x("class"===r||"className"===r?{kind:"class",elements:new Set,mutate:function(t){var e=u(Array.from(t).join(" "));t.clear(),e.split(/\s+/g).filter(Boolean).forEach((function(e){t.add(e)}))},selector:n}:{kind:"attribute",attribute:r,elements:new Set,mutate:u,selector:n}):e}};exports.connectGlobalObserver=O,exports.default=L,exports.disconnectGlobalObserver=function(){w&&w.disconnect()};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=/^[a-zA-Z:_][a-zA-Z0-9:_.-]*$/,e={revert:function(){}},n=new Map,r=new Set;function u(t){var e=n.get(t);return e||n.set(t,e={el:t,attributes:{}}),e}function i(t,e,n,r,u){var i=n(t),a={isDirty:!1,originalValue:i,virtualValue:i,mutations:[],el:t,observer:new MutationObserver((function(){var e=n(t);e!==a.virtualValue&&(a.originalValue=e,u(a))})),runMutations:u,setValue:r,getCurrentValue:n};return a.observer.observe(t,function(t){return"html"===t?{childList:!0,subtree:!0,attributes:!0,characterData:!0}:{childList:!1,subtree:!1,attributes:!0,attributeFilter:[t]}}(e)),a}function a(t){var e=t.originalValue;return t.mutations.forEach((function(t){return e=t.mutate(e)})),e}function s(t,e){var n=e.getCurrentValue(e.el);e.virtualValue=t,t!==n&&(e.isDirty=!0,V||(V=!0,requestAnimationFrame(k)))}function o(t){s(function(t){return v||(v=document.createElement("div")),v.innerHTML=t,v.innerHTML}(a(t)),t)}function l(t){var e=function(t,e){return e.mutations.forEach((function(e){return e.mutate(t)})),t}(new Set(t.originalValue.split(/\s+/).filter(Boolean)),t);s(Array.from(e).filter(Boolean).join(" "),t)}function c(t){s(a(t),t)}var f=function(t){return t.innerHTML},m=function(t,e){return t.innerHTML=e};function d(t){var e=u(t);return e.html||(e.html=i(t,"html",f,m,o)),e.html}var v,b=function(t,e){return e?t.className=e:t.removeAttribute("class")},h=function(t){return t.className};function p(t){var e=u(t);return e.classes||(e.classes=i(t,"class",h,b,l)),e.classes}function M(t,e){var n=u(t);return n.attributes[e]||(n.attributes[e]=i(t,e,(function(t){return t.getAttribute(e)||""}),(function(t,n){return n?t.setAttribute(e,n):t.removeAttribute(e)}),c)),n.attributes[e]}function y(t,e,r){if(r.isDirty){r.isDirty=!1;var u=r.virtualValue;r.mutations.length||function(t,e){var r,u,i=n.get(t);if(i)if("html"===e)null==(r=i.html)||null==(u=r.observer)||u.disconnect(),delete i.html;else if("class"===e){var a,s;null==(a=i.classes)||null==(s=a.observer)||s.disconnect(),delete i.classes}else{var o,l,c;null==(o=i.attributes)||null==(l=o[e])||null==(c=l.observer)||c.disconnect(),delete i.attributes[e]}}(t,e),r.setValue(t,u)}}var w,V=!1;function g(t,e){t.html&&y(e,"html",t.html),t.classes&&y(e,"class",t.classes),Object.keys(t.attributes).forEach((function(n){y(e,n,t.attributes[n])}))}function k(){V=!1,n.forEach(g)}function A(t,e){if(t.elements.delete(e),"html"===t.kind){var n=d(e),r=n.mutations.indexOf(t);-1!==r&&n.mutations.splice(r,1),n.runMutations(n)}else if("class"===t.kind){var u=p(e),i=u.mutations.indexOf(t);-1!==i&&u.mutations.splice(i,1),u.runMutations(u)}else if("attribute"===t.kind){var a=M(e,t.attribute),s=a.mutations.indexOf(t);-1!==s&&a.mutations.splice(s,1),a.runMutations(a)}}function E(t){var e=new Set(t.elements),n=new Set;document.body.querySelectorAll(t.selector).forEach((function(r){n.add(r),e.has(r)||function(t,e){if(t.elements.add(e),"html"===t.kind){var n=d(e);n.mutations.push(t),n.runMutations(n)}else if("class"===t.kind){var r=p(e);r.mutations.push(t),r.runMutations(r)}else if("attribute"===t.kind){var u=M(e,t.attribute);u.mutations.push(t),u.runMutations(u)}}(t,r)})),e.forEach((function(e){n.has(e)||A(t,e)}))}function S(){r.forEach(E)}function O(){"undefined"!=typeof document&&(w||(w=new MutationObserver((function(){S()}))),S(),w.observe(document.body,{childList:!0,subtree:!0,attributes:!1,characterData:!1}))}function x(t){return"undefined"==typeof document?e:(r.add(t),E(t),{revert:function(){var e;e=t,new Set(e.elements).forEach((function(t){A(e,t)})),e.elements.clear(),r.delete(e)}})}function L(t,e){return x({kind:"html",elements:new Set,mutate:e,selector:t})}function D(t,e){return x({kind:"class",elements:new Set,mutate:e,selector:t})}function j(n,r,u){return t.test(r)?x("class"===r||"className"===r?{kind:"class",elements:new Set,mutate:function(t){var e=u(Array.from(t).join(" "));t.clear(),e.split(/\s+/g).filter(Boolean).forEach((function(e){t.add(e)}))},selector:n}:{kind:"attribute",attribute:r,elements:new Set,mutate:u,selector:n}):e}O();var H={html:L,classes:D,attribute:j,declarative:function(t){var n=t.selector,r=t.action,u=t.value,i=t.attribute;if("html"===i){if("append"===r)return L(n,(function(t){return t+u}));if("set"===r)return L(n,(function(){return u}))}else if("class"===i){if("append"===r)return D(n,(function(t){return t.add(u)}));if("remove"===r)return D(n,(function(t){return t.delete(u)}));if("set"===r)return D(n,(function(t){t.clear(),t.add(u)}))}else{if("append"===r)return j(n,i,(function(t){return t+u}));if("set"===r)return j(n,i,(function(){return u}))}return e}};exports.connectGlobalObserver=O,exports.default=H,exports.disconnectGlobalObserver=function(){w&&w.disconnect()};
 //# sourceMappingURL=dom-mutator.cjs.production.min.js.map

dist/dom-mutator.esm.js

@@ -396,6 +396,53 @@ var validAttributeName = /^[a-zA-Z:_][a-zA-Z0-9:_.-]*$/;
 
+function declarative(_ref) {
+  var selector = _ref.selector,
+      action = _ref.action,
+      value = _ref.value,
+      attr = _ref.attribute;
+
+  if (attr === 'html') {
+    if (action === 'append') {
+      return html(selector, function (val) {
+        return val + value;
+      });
+    } else if (action === 'set') {
+      return html(selector, function () {
+        return value;
+      });
+    }
+  } else if (attr === 'class') {
+    if (action === 'append') {
+      return classes(selector, function (val) {
+        return val.add(value);
+      });
+    } else if (action === 'remove') {
+      return classes(selector, function (val) {
+        return val["delete"](value);
+      });
+    } else if (action === 'set') {
+      return classes(selector, function (val) {
+        val.clear();
+        val.add(value);
+      });
+    }
+  } else {
+    if (action === 'append') {
+      return attribute(selector, attr, function (val) {
+        return val + value;
+      });
+    } else if (action === 'set') {
+      return attribute(selector, attr, function () {
+        return value;
+      });
+    }
+  }
+
+  return nullController;
+}
+
 var index = {
   html: html,
   classes: classes,
-  attribute: attribute
+  attribute: attribute,
+  declarative: declarative
 };
@@ -402,0 +449,0 @@

dist/index.d.ts

@@ -6,2 +6,12 @@ export declare function disconnectGlobalObserver(): void;
 declare function attribute(selector: string, attribute: string, mutate: (value: string) => string): MutationController;
+declare function declarative({ selector, action, value, attribute: attr, }: DeclarativeMutation): MutationController;
+export declare type MutationController = {
+    revert: () => void;
+};
+export declare type DeclarativeMutation = {
+    selector: string;
+    attribute: string;
+    action: 'append' | 'set' | 'remove';
+    value: string;
+};
 declare const _default: {
@@ -11,3 +21,4 @@ html: typeof html;
     attribute: typeof attribute;
+    declarative: typeof declarative;
 };
 export default _default;

dist/types.d.ts

@@ -42,4 +42,1 @@ interface HTMLMutationRecord {
 }
-declare type MutationController = {
-    revert: () => void;
-};

package.json

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

README.md

@@ -70,2 +70,17 @@ # DOM Mutator
 
+### Declarative Mutations
+
+If you don't need the full flexibility required by callback functions or you need to serialize the list of mutations in JSON, you can use the `declarative` method:
+
+```ts
+mutate.declarative({
+  selector: "h1",
+  action: "set",
+  attribute: "html",
+  value: "hello world"
+});
+```
+
+There are 3 supported "actions": `append`, `set`, and `remove`.  The `remove` action can only be used with the `class` attribute.
+
 ## How it Works
@@ -72,0 +87,0 @@

src/index.ts

@@ -406,2 +406,46 @@ const validAttributeName = /^[a-zA-Z:_][a-zA-Z0-9:_.-]*$/;
 
+function declarative({
+  selector,
+  action,
+  value,
+  attribute: attr,
+}: DeclarativeMutation): MutationController {
+  if (attr === 'html') {
+    if (action === 'append') {
+      return html(selector, val => val + value);
+    } else if (action === 'set') {
+      return html(selector, () => value);
+    }
+  } else if (attr === 'class') {
+    if (action === 'append') {
+      return classes(selector, val => val.add(value));
+    } else if (action === 'remove') {
+      return classes(selector, val => val.delete(value));
+    } else if (action === 'set') {
+      return classes(selector, val => {
+        val.clear();
+        val.add(value);
+      });
+    }
+  } else {
+    if (action === 'append') {
+      return attribute(selector, attr, val => val + value);
+    } else if (action === 'set') {
+      return attribute(selector, attr, () => value);
+    }
+  }
+  return nullController;
+}
+
+export type MutationController = {
+  revert: () => void;
+};
+
+export type DeclarativeMutation = {
+  selector: string;
+  attribute: string;
+  action: 'append' | 'set' | 'remove';
+  value: string;
+};
+
 export default {
@@ -411,2 +455,3 @@ html,
   attribute,
+  declarative,
 };

src/types.ts

@@ -45,4 +45,1 @@ interface HTMLMutationRecord {
 }
-type MutationController = {
-  revert: () => void;
-};

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

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

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

Improved metrics

Total package byte prevSize

116780

increased by10.5%

Lines of code

1297

increased by11.81%

Number of lines in readme file

124

increased by13.76%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes