removeViewBox and convertShapeToPath types and visitor (#1537)

- added types to convertShapeToPath
- refactored removeViewBox with visitor plugin api and got rid from one
  closestByName usage

plugins/convertShapeToPath.js

@@ -1,5 +1,9 @@
 'use strict';
 
+/**
+ * @typedef {import('../lib/types').PathDataItem} PathDataItem
+ */
+
 const { stringifyPathData } = require('../lib/path.js');
 const { detachNodeFromParent } = require('../lib/xast.js');
 
@@ -18,9 +22,14 @@ const regNumber = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g;
  * @see https://www.w3.org/TR/SVG11/shapes.html
  *
  * @author Lev Solntsev
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   convertArcs?: boolean,
+ *   floatPrecision?: number
+ * }>}
  */
 exports.fn = (root, params) => {
-  const { convertArcs = false, floatPrecision: precision = null } = params;
+  const { convertArcs = false, floatPrecision: precision } = params;
 
   return {
     element: {
@@ -41,6 +50,9 @@ exports.fn = (root, params) => {
           // cleanupNumericValues when 'px' units has already been removed.
           // TODO: Calculate sizes from % and non-px units if possible.
           if (Number.isNaN(x - y + width - height)) return;
+          /**
+           * @type {Array<PathDataItem>}
+           */
           const pathData = [
             { command: 'M', args: [x, y] },
             { command: 'H', args: [x + width] },
@@ -63,6 +75,9 @@ exports.fn = (root, params) => {
           const x2 = Number(node.attributes.x2 || '0');
           const y2 = Number(node.attributes.y2 || '0');
           if (Number.isNaN(x1 - y1 + x2 - y2)) return;
+          /**
+           * @type {Array<PathDataItem>}
+           */
           const pathData = [
             { command: 'M', args: [x1, y1] },
             { command: 'L', args: [x2, y2] },
@@ -87,6 +102,9 @@ exports.fn = (root, params) => {
             detachNodeFromParent(node, parentNode);
             return;
           }
+          /**
+           * @type {Array<PathDataItem>}
+           */
           const pathData = [];
           for (let i = 0; i < coords.length; i += 2) {
             pathData.push({
@@ -110,6 +128,9 @@ exports.fn = (root, params) => {
           if (Number.isNaN(cx - cy + r)) {
             return;
           }
+          /**
+           * @type {Array<PathDataItem>}
+           */
           const pathData = [
             { command: 'M', args: [cx, cy - r] },
             { command: 'A', args: [r, r, 0, 1, 0, cx, cy + r] },
@@ -132,6 +153,9 @@ exports.fn = (root, params) => {
           if (Number.isNaN(ecx - ecy + rx - ry)) {
             return;
           }
+          /**
+           * @type {Array<PathDataItem>}
+           */
           const pathData = [
             { command: 'M', args: [ecx, ecy - ry] },
             { command: 'A', args: [rx, ry, 0, 1, 0, ecx, ecy + ry] },

plugins/removeViewBox.js

@@ -1,13 +1,8 @@
 'use strict';
 
-const { closestByName } = require('../lib/xast.js');
+exports.type = 'visitor';
-
 exports.name = 'removeViewBox';
-
-exports.type = 'perItem';
-
 exports.active = true;
-
 exports.description = 'removes viewBox attribute when possible';
 
 const viewBoxElems = ['svg', 'pattern', 'symbol'];
@@ -22,33 +17,35 @@ const viewBoxElems = ['svg', 'pattern', 'symbol'];
  *             ⬇
  * <svg width="100" height="50">
  *
- * @param {Object} item current iteration item
- * @return {Boolean} if false, item will be filtered out
- *
  * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<void>}
  */
-exports.fn = function (item) {
+exports.fn = () => {
-  if (
+  return {
-    item.type === 'element' &&
+    element: {
-    viewBoxElems.includes(item.name) &&
+      enter: (node, parentNode) => {
-    item.attributes.viewBox != null &&
+        if (
-    item.attributes.width != null &&
+          viewBoxElems.includes(node.name) &&
-    item.attributes.height != null
+          node.attributes.viewBox != null &&
-  ) {
+          node.attributes.width != null &&
-    // TODO remove width/height for such case instead
+          node.attributes.height != null
-    if (item.name === 'svg' && closestByName(item.parentNode, 'svg')) {
+        ) {
-      return;
+          // TODO remove width/height for such case instead
-    }
+          if (node.name === 'svg' && parentNode.type !== 'root') {
-
+            return;
-    const nums = item.attributes.viewBox.split(/[ ,]+/g);
+          }
-
+          const nums = node.attributes.viewBox.split(/[ ,]+/g);
-    if (
+          if (
-      nums[0] === '0' &&
+            nums[0] === '0' &&
-      nums[1] === '0' &&
+            nums[1] === '0' &&
-      item.attributes.width.replace(/px$/, '') === nums[2] && // could use parseFloat too
+            node.attributes.width.replace(/px$/, '') === nums[2] && // could use parseFloat too
-      item.attributes.height.replace(/px$/, '') === nums[3]
+            node.attributes.height.replace(/px$/, '') === nums[3]
-    ) {
+          ) {
-      delete item.attributes.viewBox;
+            delete node.attributes.viewBox;
-    }
+          }
-  }
+        }
+      },
+    },
+  };
 };

tsconfig.json

@@ -21,7 +21,6 @@
     "plugins/collapseGroups.js",
     "plugins/convertColors.js",
     "plugins/convertPathData.js",
-    "plugins/convertShapeToPath.js",
     "plugins/convertStyleToAttrs.js",
     "plugins/convertTransform.js",
     "plugins/mergeStyles.js",
@@ -38,7 +37,6 @@
     "plugins/removeUnusedNS.js",
     "plugins/removeUselessDefs.js",
     "plugins/removeUselessStrokeAndFill.js",
-    "plugins/removeViewBox.js",
     "plugins/removeXMLNS.js",
     "plugins/reusePaths.js",
     "plugins/sortDefsChildren.js",