perf: improve logoSize performance (#10488)

* perf: improve logoSize performance

* Fix test

lib/logos.spec.js

@@ -41,11 +41,11 @@ describe('Logo helpers', function () {
     )
     // use simple icon with auto logo size
     given({ name: 'amd', size: 'auto' }).expect(
-      'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZXNtb2tlIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCA1LjcyNTk5OTk5OTk5OTk5OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QU1EPC90aXRsZT48cGF0aCBkPSJNMTguMzI0IDBMMTkuODgzIDEuNTZIMjIuNDM5VjQuMTE3TDI0IDUuNjc3VjBaTTIgMC4zODNMMCA1LjM0M0gxLjMwOUwxLjY3OSA0LjM2MUgzLjlMNC4zMDggNS4zNDNINS42NDZMMy40MzIgMC4zODNaTTYuMjA5IDAuMzgzVjUuMzM4SDcuNDQ3VjIuMjQ2TDguNzg1IDMuODA4SDguOTczTDEwLjMxMSAyLjI1MlY1LjM0M0gxMS41NDlWMC4zODNIMTAuNDdMOC44NzggMi4yMjhMNy4yODcgMC4zODNaTTEyLjQ5MiAwLjM4M1Y1LjM0M0gxNC41NDlDMTYuNTI4IDUuMzQzIDE3LjQyOSA0LjI5NyAxNy40MjkgMi44NzFDMTcuNDI5IDEuNTExIDE2LjQ5MiAwLjM4MyAxNC42ODIgMC4zODNaTTEzLjcyOSAxLjI5M0gxNC41MjFDMTUuNjkxIDEuMjkzIDE2LjE1MSAyLjAwNCAxNi4xNTEgMi44NjNDMTYuMTUxIDMuNTkxIDE1Ljc3OSA0LjQzNSAxNC41MzUgNC40MzVIMTMuNzI5Wk0yLjc0NCAxLjU2NkwzLjUzNSAzLjQ5OEgyLjAwOFpNMTkuODgxIDEuODczTDE4LjI3NyAzLjQ3NlY1LjcyNkgyMC41MjNMMjIuMTI3IDQuMTE5SDE5Ljg4MVoiLz48L3N2Zz4=',
+      'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZXNtb2tlIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCA1LjcyNTk5OTk5OTk5OTk5OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QU1EPC90aXRsZT48cGF0aCBkPSJNMTguMzI0IDBsMS41NTkgMS41NmgyLjU1NnYyLjU1N0wyNCA1LjY3N1Ywek0yIDAuMzgyOTk5OTk5OTk5OTk5MWwtMiA0Ljk2aDEuMzA5bDAuMzctMC45ODJIMy45bDAuNDA4IDAuOTgyaDEuMzM4TDMuNDMyIDAuMzgyOTk5OTk5OTk5OTk5MXogbTQuMjA5IDB2NC45NTVoMS4yMzh2LTMuMDkybDEuMzM4IDEuNTYyaDAuMTg4bDEuMzM4LTEuNTU2djMuMDkxaDEuMjM4VjAuMzgyOTk5OTk5OTk5OTk5MUgxMC40N2wtMS41OTIgMS44NDVMNy4yODcgMC4zODI5OTk5OTk5OTk5OTkxeiBtNi4yODMgMHY0Ljk2aDIuMDU3YzEuOTc5IDAgMi44OC0xLjA0NiAyLjg4LTIuNDcyIDAtMS4zNi0wLjkzNy0yLjQ4OC0yLjc0Ny0yLjQ4OHogbTEuMjM3IDAuOTFoMC43OTJjMS4xNyAwIDEuNjMgMC43MTEgMS42MyAxLjU3IDAgMC43MjgtMC4zNzIgMS41NzItMS42MTYgMS41NzJoLTAuODA2eiBtLTEwLjk4NSAwLjI3M2wwLjc5MSAxLjkzMkgyLjAwOHogbTE3LjEzNyAwLjMwN2wtMS42MDQgMS42MDN2Mi4yNWgyLjI0NmwxLjYwNC0xLjYwN2gtMi4yNDZ6Ii8+PC9zdmc+',
     )
     // use simple icon with color & auto logo size
     given({ name: 'amd', color: 'white', size: 'auto' }).expect(
-      'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgNS43MjU5OTk5OTk5OTk5OTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkFNRDwvdGl0bGU+PHBhdGggZD0iTTE4LjMyNCAwTDE5Ljg4MyAxLjU2SDIyLjQzOVY0LjExN0wyNCA1LjY3N1YwWk0yIDAuMzgzTDAgNS4zNDNIMS4zMDlMMS42NzkgNC4zNjFIMy45TDQuMzA4IDUuMzQzSDUuNjQ2TDMuNDMyIDAuMzgzWk02LjIwOSAwLjM4M1Y1LjMzOEg3LjQ0N1YyLjI0Nkw4Ljc4NSAzLjgwOEg4Ljk3M0wxMC4zMTEgMi4yNTJWNS4zNDNIMTEuNTQ5VjAuMzgzSDEwLjQ3TDguODc4IDIuMjI4TDcuMjg3IDAuMzgzWk0xMi40OTIgMC4zODNWNS4zNDNIMTQuNTQ5QzE2LjUyOCA1LjM0MyAxNy40MjkgNC4yOTcgMTcuNDI5IDIuODcxQzE3LjQyOSAxLjUxMSAxNi40OTIgMC4zODMgMTQuNjgyIDAuMzgzWk0xMy43MjkgMS4yOTNIMTQuNTIxQzE1LjY5MSAxLjI5MyAxNi4xNTEgMi4wMDQgMTYuMTUxIDIuODYzQzE2LjE1MSAzLjU5MSAxNS43NzkgNC40MzUgMTQuNTM1IDQuNDM1SDEzLjcyOVpNMi43NDQgMS41NjZMMy41MzUgMy40OThIMi4wMDhaTTE5Ljg4MSAxLjg3M0wxOC4yNzcgMy40NzZWNS43MjZIMjAuNTIzTDIyLjEyNyA0LjExOUgxOS44ODFaIi8+PC9zdmc+',
+      'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgNS43MjU5OTk5OTk5OTk5OTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkFNRDwvdGl0bGU+PHBhdGggZD0iTTE4LjMyNCAwbDEuNTU5IDEuNTZoMi41NTZ2Mi41NTdMMjQgNS42NzdWMHpNMiAwLjM4Mjk5OTk5OTk5OTk5OTFsLTIgNC45NmgxLjMwOWwwLjM3LTAuOTgySDMuOWwwLjQwOCAwLjk4MmgxLjMzOEwzLjQzMiAwLjM4Mjk5OTk5OTk5OTk5OTF6IG00LjIwOSAwdjQuOTU1aDEuMjM4di0zLjA5MmwxLjMzOCAxLjU2MmgwLjE4OGwxLjMzOC0xLjU1NnYzLjA5MWgxLjIzOFYwLjM4Mjk5OTk5OTk5OTk5OTFIMTAuNDdsLTEuNTkyIDEuODQ1TDcuMjg3IDAuMzgyOTk5OTk5OTk5OTk5MXogbTYuMjgzIDB2NC45NmgyLjA1N2MxLjk3OSAwIDIuODgtMS4wNDYgMi44OC0yLjQ3MiAwLTEuMzYtMC45MzctMi40ODgtMi43NDctMi40ODh6IG0xLjIzNyAwLjkxaDAuNzkyYzEuMTcgMCAxLjYzIDAuNzExIDEuNjMgMS41NyAwIDAuNzI4LTAuMzcyIDEuNTcyLTEuNjE2IDEuNTcyaC0wLjgwNnogbS0xMC45ODUgMC4yNzNsMC43OTEgMS45MzJIMi4wMDh6IG0xNy4xMzcgMC4zMDdsLTEuNjA0IDEuNjAzdjIuMjVoMi4yNDZsMS42MDQtMS42MDdoLTIuMjQ2eiIvPjwvc3ZnPg==',
     )
 
     it('preserves color if light logo on dark background', function () {

lib/svg-helpers.js

@@ -1,4 +1,5 @@
-import SVGPathCommander from 'svg-path-commander'
+import { svgPathBbox } from 'svg-path-bbox'
+import svgpath from 'svgpath'
 import loadSimpleIcons from './load-simple-icons.js'
 
 const simpleIcons = loadSimpleIcons()
@@ -14,24 +15,13 @@ function getIconSize(iconKey) {
     return undefined
   }
 
-  const {
+  const [x0, y0, x1, y1] = svgPathBbox(simpleIcons[iconKey].path)
-    width,
+  return { width: x1 - x0, height: y1 - y0 }
-    height,
-    x: x0,
-    y: y0,
-    x2: x1,
-    y2: y1,
-  } = SVGPathCommander.getPathBBox(simpleIcons[iconKey].path)
-
-  return { width, height, x0, y0, x1, y1 }
 }
 
 function resetIconPosition(path) {
-  const { x: offsetX, y: offsetY } = SVGPathCommander.getPathBBox(path)
+  const [offsetX, offsetY] = svgPathBbox(path)
-  const pathReset = new SVGPathCommander(path)
+  const pathReset = svgpath(path).translate(-offsetX, -offsetY).toString()
-    .transform({ translate: [-offsetX, -offsetY] })
-    .toString()
-
   return pathReset
 }
 

package-lock.json

@@ -53,7 +53,8 @@
         "semver": "~7.6.3",
         "simple-icons": "13.7.0",
         "smol-toml": "1.3.0",
-        "svg-path-commander": "^2.0.10",
+        "svg-path-bbox": "^2.0.0",
+        "svgpath": "^2.6.0",
         "webextension-store-meta": "^1.2.3",
         "xpath": "~0.0.34"
       },
@@ -5578,11 +5579,6 @@
         "node": ">=14.16"
       }
     },
-    "node_modules/@thednp/dommatrix": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@thednp/dommatrix/-/dommatrix-2.0.7.tgz",
-      "integrity": "sha512-d5p07ZYa1Z6opXIGwKpBVvzxQity43T0kVnDXMbZNsMzaOrJGKtemRJA8Puj2GtvWQ5+JiNPkiwBWSk6plLVtA=="
-    },
     "node_modules/@tokenizer/token": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz",
@@ -28169,16 +28165,19 @@
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
       "dev": true
     },
-    "node_modules/svg-path-commander": {
+    "node_modules/svg-path-bbox": {
-      "version": "2.0.10",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/svg-path-commander/-/svg-path-commander-2.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/svg-path-bbox/-/svg-path-bbox-2.0.0.tgz",
-      "integrity": "sha512-DGYaXpW6cD0ML3Qj/Md/2al4p44wm/THVQMd2wL5w5LlbFWM/iU8BMvWjUDRzJXe8tpQG3LVsuEQftzdjQE+Vg==",
+      "integrity": "sha512-DP/dcKuwjfJ2GXiM1RsIKcWv+aGazBXTYPuAH9pWYZVm5+pZ6ho70BeLB0inqUGDCCHDmcUlQ2OcLlGuwhmkKQ==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@thednp/dommatrix": "^2.0.7"
+        "svgpath": "^2.6.0"
+      },
+      "bin": {
+        "svg-path-bbox": "src/cli.js"
       },
       "engines": {
-        "node": ">=16",
+        "node": ">=6.17.1"
-        "pnpm": ">=8.6.0"
       }
     },
     "node_modules/svgo": {
@@ -28215,6 +28214,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/svgpath": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/svgpath/-/svgpath-2.6.0.tgz",
+      "integrity": "sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/fontello/svg2ttf?sponsor=1"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",

package.json

@@ -65,7 +65,8 @@
     "semver": "~7.6.3",
     "simple-icons": "13.7.0",
     "smol-toml": "1.3.0",
-    "svg-path-commander": "^2.0.10",
+    "svg-path-bbox": "^2.0.0",
+    "svgpath": "^2.6.0",
     "webextension-store-meta": "^1.2.3",
     "xpath": "~0.0.34"
   },