Migrate to svgo 2

Ref #33
svg · Mar 4, 2021 · 0e1dfb5 · 0e1dfb5
1 parent b5b9144
commit 0e1dfb5
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 516 deletions.
diff --git a/README.md b/README.md
@@ -3,42 +3,60 @@
 ## Install
 
 ```
-$ npm install svgo svgo-loader --save-dev
+$ npm install svgo-loader --save-dev
 ```
 
 ... or with Yarn
 
 ```
-$ yarn add svgo svgo-loader -D
+$ yarn add svgo-loader -D
 ```
 
-DON'T FORGET TO INSTALL / UPDATE THE `svgo` PACKAGE after you update `svg-loader` (see [#20](https://github.com/rpominov/svgo-loader/issues/20))
-
 ## Usage
 
-[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
+[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/#using-loaders)
+
+```js
+module.exports = {
+  ...,
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'file-loader'
+          },
+          {
+            loader: 'svgo-loader',
+          }
+        ]
+      }
+    ]
+  }
+}
+```
 
-Svgo-loader just passes config to the [svgo](https://github.com/svg/svgo) library.
+By default svgo-loader uses config from `svgo.config.js` similar to svgo cli.
+See [how to configure svgo](https://github.com/svg/svgo#configuration).
 
-### Put the SVGO config into loader's `options`
+Specify configFile option to load custom config module:
 
-``` javascript
+```js
 module.exports = {
   ...,
   module: {
     rules: [
       {
         test: /\.svg$/,
         use: [
-          {loader: 'file-loader'},
+          {
+            loader: 'file-loader'
+          },
           {
             loader: 'svgo-loader',
             options: {
-              plugins: [
-                {removeTitle: true},
-                {convertColors: {shorthex: false}},
-                {convertPathData: false}
-              ]
+              configFile: './scripts/svgo.config.js'
             }
           }
         ]
@@ -48,21 +66,23 @@ module.exports = {
 }
 ```
 
-### Or use an external config like you would with SVGO CLI
+or to disable loading config:
 
-``` javascript
+```js
 module.exports = {
   ...,
   module: {
     rules: [
       {
         test: /\.svg$/,
         use: [
-          {loader: 'file-loader'},
+          {
+            loader: 'file-loader'
+          },
           {
             loader: 'svgo-loader',
             options: {
-              externalConfig: "svgo-config.yml"
+              configFile: false
             }
           }
         ]
@@ -72,14 +92,36 @@ module.exports = {
 }
 ```
 
-In `svgo-config.yml`:
+You can also specify options which override loaded from config
 
-```yml
-plugins:
-  - removeTitle: true
-  - convertPathData: false
-  - convertColors:
-      shorthex: false
+```js
+module.exports = {
+  ...,
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'file-loader'
+          },
+          {
+            loader: 'svgo-loader',
+            options: {
+              multipass: true,
+              js2svg: {
+                indent: 2,
+                pretty: true,
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
 ```
 
-You can use `YML` or `JSON` files as external configs.
+## License and Copyright
+
+This software is released under the terms of the [MIT license](https://github.com/rpominov/svgo-loader/blob/master/LICENSE).
diff --git a/example/basic/webpack.config.js b/example/basic/webpack.config.js
@@ -11,16 +11,11 @@ module.exports = {
       {
         test: /\.svg$/,
         use: [
-          {loader: 'file-loader'},
+          {
+            loader: 'file-loader'
+          },
           {
             loader: '../../index.js',
-            options: {
-              plugins: [
-                {removeTitle: true},
-                {convertColors: {shorthex: false}},
-                {convertPathData: false}
-              ]
-            }
           }
         ]
       }

diff --git a/example/external-config/svgo-config.yml b/example/external-config/svgo-config.yml
diff --git a/example/external-config/svgo.config.js b/example/external-config/svgo.config.js
@@ -0,0 +1,19 @@
+const { extendDefaultPlugins } = require('svgo');
+module.exports = {
+  plugins: extendDefaultPlugins([
+    {
+      name: 'removeTitle',
+      active: false
+    },
+    {
+      name: 'convertPathData',
+      active: false
+    },
+    {
+      name: 'convertColors',
+      params: {
+        shorthex: false
+      }
+    }
+  ])
+};
diff --git a/example/external-config/webpack.config.js b/example/external-config/webpack.config.js
@@ -11,12 +11,11 @@ module.exports = {
       {
         test: /\.svg$/,
         use: [
-          {loader: "file-loader"},
+          {
+            loader: "file-loader"
+          },
           {
             loader: "../../index.js",
-            options: {
-              externalConfig: "svgo-config.yml"
-            }
           }
         ]
       }

diff --git a/example/svgo-error/webpack.config.js b/example/svgo-error/webpack.config.js
@@ -11,16 +11,11 @@ module.exports = {
       {
         test: /\.svg$/,
         use: [
-          {loader: 'file-loader'},
+          {
+            loader: 'file-loader'
+          },
           {
             loader: '../../index.js',
-            options: {
-              plugins: [
-                {removeTitle: true},
-                {convertColors: {shorthex: false}},
-                {convertPathData: false}
-              ]
-            }
           }
         ]
       }

diff --git a/index.js b/index.js
@@ -1,50 +1,24 @@
-var Svgo = require('svgo');
-var loaderUtils = require('loader-utils');
-var yaml = require('js-yaml');
-var fs = require('fs');
-var path = require('path');
+const { optimize, loadConfig } = require('svgo');
+const loaderUtils = require('loader-utils');
 
-module.exports = function(source) {
-  this.cacheable(true);
-  var callback = this.async();
-
-  var config = loaderUtils.getOptions(this) || {};
-
-  // Ported from:
-  // https://github.com/svg/svgo/blob/174c37208017e5909d5f7db2e8faba49663a945a/lib/svgo/coa.js#L175-L192
-  if (typeof config.externalConfig === 'string') {
-    var configPath = config.externalConfig;
-    var configText;
-    try {
-      configText = fs.readFileSync(path.resolve(configPath), 'utf8');
-      config = JSON.parse(configText);
-    } catch (err) {
-      if (err.code === 'ENOENT') {
-        callback(new Error("Couldn't find file with external svgo config '" + configPath + "'."));
-        return;
-      } else if (err.code === 'EISDIR') {
-        callback(new Error("Directory '" + configPath + "' is not a config file."));
-        return;
-      }
-      config = yaml.safeLoad(configText);
-      if (!config || Array.isArray(config)) {
-        callback(new Error("Invalid external svgo config file '" + configPath + "'."));
-        return;
-      }
-    }
+async function loader(source) {
+  const { configFile, ...options } = loaderUtils.getOptions(this) || {};
+  let config;
+  if (typeof configFile === 'string') {
+    config = await loadConfig(configFile, this.context);
+  } else if (configFile !== false) {
+    config = await loadConfig(null, this.context);
+  }
+  const result = optimize(source, { path: this.resourcePath, ...config, ...options });
+  if (result.error) {
+    throw Error(result.error);
   }
+  return result.data;
+}
 
-  var svgo = new Svgo({ ...config });
-  svgo.optimize(source, { path: this.resourcePath })
-  .then(function(result) {
-    callback(null, result.data);
-    return;
-  }, function(error) {
-    if (error instanceof Error) {
-      callback(error);
-      return;
-    }
-    callback(new Error(error));
-    return;
-  });
+module.exports = function (source) {
+  const callback = this.async();
+  loader.call(this, source)
+    .then(result => callback(null, result))
+    .catch(error => callback(error));
 };