Add support for SVGO v3

.github/workflows/test.yml

@@ -0,0 +1,20 @@
+name: Build
+
+on: [push, pull_request]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [14.x, 16.x]
+
+        steps:
+            - uses: actions/checkout@v3
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+            - run: yarn
+            - run: yarn test

.npmignore

@@ -36,3 +36,4 @@ tsconfig.json
 tslint.json
 yarn.lock
 
+test

README.md

@@ -30,7 +30,9 @@ In order to use this plugin correctly, you SVGs should have their `width` and `h
 
 ## Usage
 
-**This plugin should be used with SVGO v2 and above.**
+**v2.x.x of this plugin should be used with SVGO v3 and above.**
+
+**v1.x.x of this plugin should be used with SVGO v2.**
 
 1. Create a `svgo.config.js` file following the [official configuration guide](https://github.com/svg/svgo#configuration)
 2. Use the option to specify a custom plugin.

index.js

@@ -20,21 +20,20 @@ exports.description = 'Adds viewBox attribute based on width and height';
  * @author Atanas Atanasov
  */
 exports.fn = function (item) {
+	if (item.type !== 'root') {
+		return item;
+	}
+
 	const {
 		name,
-		type,
-		attributes: { width, height, viewBox }
-	} = item;
+		attributes,
+		attributes: { width, height }
+	} = item.children[0];
 
 	if (
-		name === 'svg' &&
-		type === 'element' &&
-		width != null &&
-		height != null &&
-		viewBox == null &&
-		Number.isNaN(Number(width)) === false &&
-		Number.isNaN(Number(height)) === false
+		(name === 'svg' && !!width && !!height && !attributes.viewBox) ||
+		(Number.isNaN(Number(width)) === false && Number.isNaN(Number(height)) === false)
 	) {
-		item.attributes.viewBox = `0 0 ${Number(width)} ${Number(height)}`;
+		item.children[0].attributes.viewBox = `0 0 ${Number(width)} ${Number(height)}`;
 	}
 };

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svgo-add-viewbox",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"description": "SVGO plugin which adds 'viewBox' attribute based on 'width' and 'height' attributes",
 	"keywords": [
 		"viewBox",
@@ -21,7 +21,14 @@
 		"type": "git",
 		"url": "github:scriptex/svgo-add-viewbox"
 	},
-	"scripts": {},
+	"scripts": {
+		"svg": "svgo -f ./test/input -o ./test/output --config ./test/svgo.config.js",
+		"test": "yarn svg && tape test/index.js"
+	},
 	"dependencies": {},
-	"devDependencies": {}
+	"devDependencies": {
+		"svg-parser": "2.0.4",
+		"svgo": "3.0.0",
+		"tape": "5.6.1"
+	}
 }

test/index.js

@@ -0,0 +1,20 @@
+const { resolve } = require('path');
+const { existsSync, readFileSync } = require('fs');
+
+const tape = require('tape');
+const { parse } = require('svg-parser');
+
+tape('Has viewBox attribute', async t => {
+	const file = resolve(__dirname, 'output', 'test.svg');
+	const svg = readFileSync(file, 'utf-8');
+	const parsed = parse(svg);
+
+	const fileExists = existsSync(resolve(__dirname, file));
+
+	// @ts-ignore
+	const hasViewBox = !!parsed.children[0].properties.viewBox;
+
+	t.ok(fileExists, 'File exists');
+	t.ok(hasViewBox, 'Has viewBox attribute');
+	t.end();
+});

test/svgo.config.js

@@ -0,0 +1,21 @@
+const addViewBox = require('..');
+
+module.exports = {
+	plugins: [
+		{
+			name: 'preset-default',
+			params: {
+				overrides: {
+					removeViewBox: false
+				}
+			}
+		},
+		{
+			fn: addViewBox.fn,
+			name: 'addViewBox',
+			type: addViewBox.type,
+			active: addViewBox.active,
+			description: addViewBox.description
+		}
+	]
+};