Convert cleanupListOfValues and cleanupNumericValues to visitor (#1521)

SLightly refactored

plugins/cleanupListOfValues.js

@@ -3,20 +3,10 @@
 const { removeLeadingZero } = require('../lib/svgo/tools.js');
 
 exports.name = 'cleanupListOfValues';
-
+exports.type = 'visitor';
-exports.type = 'perItem';
-
 exports.active = false;
-
 exports.description = 'rounds list of values to the fixed precision';
 
-exports.params = {
-  floatPrecision: 3,
-  leadingZero: true,
-  defaultPx: true,
-  convertToPx: true,
-};
-
 const regNumericValues = /^([-+]?\d*\.?\d+([eE][-+]?\d+)?)(px|pt|pc|mm|cm|m|in|ft|em|ex|%)?$/;
 const regSeparator = /\s+,?\s*|,\s*/;
 const absoluteLengths = {
@@ -42,88 +32,48 @@ const absoluteLengths = {
  * <polygon points="208.251 77.131 223.069 ... "/>
  *
  *
- * @param {Object} item current iteration item
- * @param {Object} params plugin params
- * @return {Boolean} if false, item will be filtered out
- *
  * @author kiyopikko
  */
-exports.fn = function (item, params) {
+exports.fn = (root, params) => {
-  if (item.type !== 'element') {
+  const {
-    return;
+    floatPrecision = 3,
-  }
+    leadingZero = true,
+    defaultPx = true,
+    convertToPx = true,
+  } = params;
 
-  if (item.attributes.points != null) {
+  const roundValues = (lists) => {
-    item.attributes.points = roundValues(item.attributes.points);
+    const roundedList = [];
-  }
 
-  if (item.attributes['enable-background'] != null) {
+    for (const elem of lists.split(regSeparator)) {
-    item.attributes['enable-background'] = roundValues(
+      const match = elem.match(regNumericValues);
-      item.attributes['enable-background']
+      const matchNew = elem.match(/new/);
-    );
-  }
-
-  if (item.attributes.viewBox != null) {
-    item.attributes.viewBox = roundValues(item.attributes.viewBox);
-  }
-
-  if (item.attributes['stroke-dasharray'] != null) {
-    item.attributes['stroke-dasharray'] = roundValues(
-      item.attributes['stroke-dasharray']
-    );
-  }
-
-  if (item.attributes.dx != null) {
-    item.attributes.dx = roundValues(item.attributes.dx);
-  }
-
-  if (item.attributes.dy != null) {
-    item.attributes.dy = roundValues(item.attributes.dy);
-  }
-
-  if (item.attributes.x != null) {
-    item.attributes.x = roundValues(item.attributes.x);
-  }
-
-  if (item.attributes.y != null) {
-    item.attributes.y = roundValues(item.attributes.y);
-  }
-
-  function roundValues(lists) {
-    var num,
-      units,
-      match,
-      matchNew,
-      listsArr = lists.split(regSeparator),
-      roundedList = [];
-
-    for (const elem of listsArr) {
-      match = elem.match(regNumericValues);
-      matchNew = elem.match(/new/);
 
       // if attribute value matches regNumericValues
       if (match) {
         // round it to the fixed precision
-        (num = +(+match[1]).toFixed(params.floatPrecision)),
+        let num = Number(Number(match[1]).toFixed(floatPrecision));
-          (units = match[3] || '');
+        let units = match[3] || '';
 
         // convert absolute values to pixels
-        if (params.convertToPx && units && units in absoluteLengths) {
+        if (convertToPx && units && units in absoluteLengths) {
-          var pxNum = +(absoluteLengths[units] * match[1]).toFixed(
+          const pxNum = Number(
-            params.floatPrecision
+            (absoluteLengths[units] * match[1]).toFixed(floatPrecision)
           );
 
-          if (String(pxNum).length < match[0].length)
+          if (pxNum.toString().length < match[0].length) {
-            (num = pxNum), (units = 'px');
+            num = pxNum;
+            units = 'px';
+          }
         }
 
         // and remove leading zero
-        if (params.leadingZero) {
+        if (leadingZero) {
           num = removeLeadingZero(num);
         }
 
         // remove default 'px' units
-        if (params.defaultPx && units === 'px') {
+        if (defaultPx && units === 'px') {
           units = '';
         }
 
@@ -138,5 +88,47 @@ exports.fn = function (item, params) {
     }
 
     return roundedList.join(' ');
+  };
+
+  return {
+    element: {
+      enter: (node) => {
+        if (node.attributes.points != null) {
+          node.attributes.points = roundValues(node.attributes.points);
         }
+
+        if (node.attributes['enable-background'] != null) {
+          node.attributes['enable-background'] = roundValues(
+            node.attributes['enable-background']
+          );
+        }
+
+        if (node.attributes.viewBox != null) {
+          node.attributes.viewBox = roundValues(node.attributes.viewBox);
+        }
+
+        if (node.attributes['stroke-dasharray'] != null) {
+          node.attributes['stroke-dasharray'] = roundValues(
+            node.attributes['stroke-dasharray']
+          );
+        }
+
+        if (node.attributes.dx != null) {
+          node.attributes.dx = roundValues(node.attributes.dx);
+        }
+
+        if (node.attributes.dy != null) {
+          node.attributes.dy = roundValues(node.attributes.dy);
+        }
+
+        if (node.attributes.x != null) {
+          node.attributes.x = roundValues(node.attributes.x);
+        }
+
+        if (node.attributes.y != null) {
+          node.attributes.y = roundValues(node.attributes.y);
+        }
+      },
+    },
+  };
 };

plugins/cleanupNumericValues.js

@@ -1,94 +1,91 @@
 'use strict';
 
+const { removeLeadingZero } = require('../lib/svgo/tools');
+
 exports.name = 'cleanupNumericValues';
-
+exports.type = 'visitor';
-exports.type = 'perItem';
-
 exports.active = true;
-
 exports.description =
   'rounds numeric values to the fixed precision, removes default ‘px’ units';
 
-exports.params = {
+const regNumericValues = /^([-+]?\d*\.?\d+([eE][-+]?\d+)?)(px|pt|pc|mm|cm|m|in|ft|em|ex|%)?$/;
-  floatPrecision: 3,
+const absoluteLengths = {
-  leadingZero: true,
-  defaultPx: true,
-  convertToPx: true,
-};
-
-var regNumericValues = /^([-+]?\d*\.?\d+([eE][-+]?\d+)?)(px|pt|pc|mm|cm|m|in|ft|em|ex|%)?$/,
-  removeLeadingZero = require('../lib/svgo/tools').removeLeadingZero,
-  absoluteLengths = {
   // relative to px
   cm: 96 / 2.54,
   mm: 96 / 25.4,
   in: 96,
   pt: 4 / 3,
   pc: 16,
-  };
+};
 
 /**
  * Round numeric values to the fixed precision,
  * remove default 'px' units.
  *
- * @param {Object} item current iteration item
- * @param {Object} params plugin params
- * @return {Boolean} if false, item will be filtered out
- *
  * @author Kir Belevich
  */
-exports.fn = function (item, params) {
+exports.fn = (root, params) => {
-  if (item.type === 'element') {
+  const {
-    var floatPrecision = params.floatPrecision;
+    floatPrecision = 3,
+    leadingZero = true,
+    defaultPx = true,
+    convertToPx = true,
+  } = params;
 
-    if (item.attributes.viewBox != null) {
+  return {
-      var nums = item.attributes.viewBox.split(/\s,?\s*|,\s*/g);
+    element: {
-      item.attributes.viewBox = nums
+      enter: (node) => {
-        .map(function (value) {
+        if (node.attributes.viewBox != null) {
-          var num = +value;
+          const nums = node.attributes.viewBox.split(/\s,?\s*|,\s*/g);
-          return isNaN(num) ? value : +num.toFixed(floatPrecision);
+          node.attributes.viewBox = nums
+            .map((value) => {
+              const num = Number(value);
+              return Number.isNaN(num)
+                ? value
+                : Number(num.toFixed(floatPrecision));
             })
             .join(' ');
         }
 
-    for (const [name, value] of Object.entries(item.attributes)) {
+        for (const [name, value] of Object.entries(node.attributes)) {
           // The `version` attribute is a text string and cannot be rounded
           if (name === 'version') {
             continue;
           }
 
-      var match = value.match(regNumericValues);
+          const match = value.match(regNumericValues);
 
           // if attribute value matches regNumericValues
           if (match) {
             // round it to the fixed precision
-        var num = +(+match[1]).toFixed(floatPrecision),
+            let num = Number(Number(match[1]).toFixed(floatPrecision));
-          units = match[3] || '';
+            let units = match[3] || '';
 
             // convert absolute values to pixels
-        if (params.convertToPx && units && units in absoluteLengths) {
+            if (convertToPx && units && units in absoluteLengths) {
-          var pxNum = +(absoluteLengths[units] * match[1]).toFixed(
+              const pxNum = Number(
-            floatPrecision
+                (absoluteLengths[units] * match[1]).toFixed(floatPrecision)
               );
-
+              if (pxNum.toString().length < match[0].length) {
-          if (String(pxNum).length < match[0].length) {
                 num = pxNum;
                 units = 'px';
               }
             }
 
             // and remove leading zero
-        if (params.leadingZero) {
+            if (leadingZero) {
               num = removeLeadingZero(num);
             }
 
             // remove default 'px' units
-        if (params.defaultPx && units === 'px') {
+            if (defaultPx && units === 'px') {
               units = '';
             }
 
-        item.attributes[name] = num + units;
+            node.attributes[name] = num + units;
-      }
           }
         }
+      },
+    },
+  };
 };