Few improvements

+ Add support for namespaced attrs - convert to camelcase as react
expects
+ Fix some issues where svgo options can throw some error by not
optimizing and striping unwanted elements in svg

Author: boopathi

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 npm-debug.log
 lib
+*.svg.react.js

package.json

@@ -6,11 +6,10 @@
   "scripts": {
     "build": "babel src --out-dir lib --copy-files",
     "clean": "rm -rf lib",
-    "lint": "eslint src/ test/ example/*.js --ignore-pattern example/*.react.js",
-    "test": "tape -r babel-register test/loader.js | faucet",
+    "lint": "eslint src/ test/ example/*.js --ignore-pattern '*.react.js'",
+    "test": "tape -r babel-register test/index.js | faucet",
     "watch": "babel src --out-dir lib --copy-files --watch",
-    "preversion": "npm run clean && npm run lint && npm run test",
-    "version": "npm run build",
+    "preversion": "npm run clean && npm run lint && npm run build && npm run test",
     "postversion": "git push && git push --tags"
   },
   "repository": {
@@ -40,6 +39,7 @@
     "babel-preset-react": "~6.5.0",
     "js-yaml": "~3.5.5",
     "loader-utils": "~0.2.13",
+    "lodash.isplainobject": "^4.0.4",
     "svgo": "~0.6.3",
     "yargs": "~3.18.0"
   },

src/camelize.js

@@ -0,0 +1,7 @@
+export function hyphenToCamel(name) {
+  return name.replace(/-([a-z])/g, g => g[1].toUpperCase());
+}
+
+export function namespaceToCamel(namespace, name) {
+  return namespace + name.charAt(0).toUpperCase() + name.slice(1);
+}

src/cli.js

@@ -91,7 +91,9 @@ argv._.map(file => {
       svgo: svgoOpts
     });
   } catch(e) {
+    /* eslint-disable no-console */
     console.error('The options passed are not serializable.');
+    /* eslint-enable */
     process.exit(1);
   }
   let loaderContext = {
@@ -101,7 +103,7 @@ argv._.map(file => {
     async() {
       return function(err, result) {
         /* eslint-disable no-console */
-        if (err) return console.error("ERROR ERROR ERROR \n", file, err.stack);
+        if (err) return console.error("ERROR ERROR ERROR", file, err.stack);
         if (argv['0']) console.log(result);
         /* eslint-enable */
         else fs.writeFileSync(makeFilename(file), result);

src/hyphen-to-camel.js

@@ -2,12 +2,16 @@ import Svgo from 'svgo';
 import {transform as babelTransform} from 'babel-core';
 import loaderUtils from 'loader-utils';
 
+import {validateAndFix} from './svgo';
 import plugin from './plugin';
 
 function optimize (opts) {
+  validateAndFix(opts);
   const svgo = new Svgo(opts);
   return function (content) {
-    return new Promise(r => svgo.optimize(content, ({data}) => r(data)));
+    return new Promise((resolve, reject) =>
+      svgo.optimize(content, ({error, data}) => error ? reject(error) : resolve(data))
+    );
   };
 }
 
@@ -40,6 +44,7 @@ export default function (content) {
 
   Promise.resolve(String(content))
     .then(optimize(query.svgo))
+    // .then(r => (console.log(r), r))
     .then(transform({
       es5: query.es5
     }))

src/loader.js

@@ -1,16 +1,22 @@
 import cssToObj from './css-to-obj';
-import hyphenToCamel from './hyphen-to-camel';
+import {hyphenToCamel, namespaceToCamel} from './camelize';
 
 export default function (babel) {
   const t = babel.types;
 
   // converts
-  // <svg stroke-width="5">
+  // <svg stroke-width="5" xmlns:xlink="asdf">
   // to
-  // <svg strokeWidth="5">
-  const hyphenToCamelVisitor = {
+  // <svg strokeWidth="5" xmlnsXlink="asdf">
+  const camelizeVisitor = {
     JSXAttribute(path) {
-      path.node.name.name = hyphenToCamel(path.node.name.name);
+      if (t.isJSXNamespacedName(path.node.name)) {
+        path.node.name = t.jSXIdentifier(
+          namespaceToCamel(path.node.name.namespace.name, path.node.name.name.name)
+        );
+      } else if (t.isJSXIdentifier(path.node.name)) {
+        path.node.name.name = hyphenToCamel(path.node.name.name);
+      }
     }
   };
 
@@ -20,7 +26,7 @@ export default function (babel) {
   // <tag style={{textAlign: 'center', width: '50px'}}>
   const styleAttrVisitor = {
     JSXAttribute(path) {
-      if (path.node.name.name === 'style') {
+      if (t.isJSXIdentifier(path.node.name) && path.node.name.name === 'style') {
         let csso = cssToObj(path.node.value.value);
         let properties = Object.keys(csso).map(prop => t.objectProperty(
           t.identifier(hyphenToCamel(prop)),
@@ -73,9 +79,9 @@ export default function (babel) {
   const svgVisitor = {
     JSXOpeningElement(path) {
       if (t.isJSXIdentifier(path.node.name) && path.node.name.name.toLowerCase() === 'svg') {
+        path.traverse(camelizeVisitor);
         path.traverse(attrVisitor);
         path.traverse(styleAttrVisitor);
-        path.traverse(hyphenToCamelVisitor);
 
         // add spread props
         path.node.attributes.push(
@@ -88,8 +94,8 @@ export default function (babel) {
         );
       } else {
         // don't ignore style attr transformations for other nodes
+        path.traverse(camelizeVisitor);
         path.traverse(styleAttrVisitor);
-        path.traverse(hyphenToCamelVisitor);
       }
     }
   };

src/plugin.js

@@ -0,0 +1,50 @@
+// validates svgo opts
+// to contain minimal set of plugins that will strip some stuff
+// for the babylon JSX parser to work
+import isPlainObject from 'lodash.isplainobject';
+
+export const essentialPlugins = ['removeDoctype', 'removeComments']
+
+export function isEssentialPlugin(p) {
+  return essentialPlugins.indexOf(p) !== -1;
+}
+
+export function validateAndFix(opts) {
+
+  if (!isPlainObject(opts)) return;
+
+  if (opts.full) {
+    if (typeof opts.plugins === 'undefined' ||
+      (Array.isArray(opts.plugins) && opts.plugins.length === 0)) {
+      opts.plugins = [...essentialPlugins];
+      return;
+    }
+  }
+
+  // opts.full is false, plugins can be empty
+  if (typeof opts.plugins === 'undefined') return;
+  if (Array.isArray(opts.plugins) && opts.plugins.length === 0) return;
+
+  // track whether its defined in opts.plugins
+  let state = essentialPlugins.reduce((p, c) => Object.assign(p, {[c]: false}), {});
+
+  opts.plugins.map(p => {
+    if (typeof p === 'string' && isEssentialPlugin(p)) {
+      state[p] = true;
+    } else if (typeof p === 'object') {
+      Object.keys(p).forEach(k => {
+        if (isEssentialPlugin(k)) {
+          // make it essential
+          if (!p[k]) p[k] = true;
+          // and update state
+          state[k] = true;
+        }
+      });
+    }
+  });
+
+  Object.keys(state)
+    .filter(key => !state[key])
+    .forEach(key => opts.plugins.push(key));
+
+}

src/svgo.js

@@ -0,0 +1,98 @@
+import test from 'tape';
+import {execFile} from 'child_process';
+import path from 'path';
+
+Error.stackTraceLimit = Infinity;
+
+function exec (...args) {
+  return new Promise((resolve, reject) => {
+    execFile('node', [path.join(__dirname, '..', 'lib', 'cli.js'), '-0'].concat(args), {
+      cwd: path.join(__dirname, 'resources')
+    }, function(err, stdout, stderr) {
+      if (err) {
+        /* eslint-disable no-console */
+        console.error(stderr);
+        /* eslint-enable */
+        return reject(err);
+      }
+      resolve(stdout);
+    });
+  });
+}
+
+function occurence(content) {
+  let occ = {};
+  occ.import = content.match(/import\sReact/g);
+  occ.export = content.match(/export\sdefault/g);
+  occ.import = occ.import ? occ.import.length : 0;
+  occ.export = occ.export ? occ.export.length : 0;
+  return occ;
+}
+
+function testOccurence(t, content, n) {
+  let o = occurence(content);
+  t.equal(o.import, n);
+  t.equal(o.export, n);
+}
+
+test('accept single argument', function(t) {
+  exec('dummy.svg')
+    .then(r => {
+      testOccurence(t, r, 1);
+      t.end();
+    })
+    .catch(t.end);
+});
+
+test('accept multiple arguments', function(t) {
+  exec('dummy.svg', 'dummy2.svg')
+    .then(r => {
+      testOccurence(t, r, 2);
+      t.end();
+    })
+    .catch(t.end);
+});
+
+test('es5 output', function (t) {
+  exec('dummy.svg', '--es5')
+    .then(r => {
+      testOccurence(t, r, 0);
+      t.end();
+    })
+    .catch(t.end);
+});
+
+test('pass options to svgo', function(t) {
+  Promise.all([
+    exec('dummy.svg'),
+    exec('dummy.svg', '--svgo.js2svg.pretty'),
+    exec('dummy2.svg', '--svgo.floatPrecision', '1'),
+    exec('dummy2.svg', '--svgo.floatPrecision', '8')
+  ]).then(r => {
+    t.notEqual(r[0], r[1]);
+    t.notEqual(r[2], r[3]);
+    t.end();
+  }).catch(t.end);
+});
+
+test('plugins options in svgo', function(t) {
+  Promise.all([
+    exec('dummy.svg'),
+    exec('dummy.svg', '--svgo.full')
+  ]).then(r => {
+    t.notEqual(r[0], r[1]);
+    t.end();
+  }).catch(t.end);
+});
+
+test('accepts yaml/json/js input', function(t) {
+  Promise.all([
+    exec('dummy.svg', '--svgo', 'config.yaml'),
+    exec('dummy.svg', '--svgo', 'config.json'),
+    exec('dummy.svg', '--svgo', 'config.js')
+  ]).then(r => {
+    t.equal(r[0], r[1]);
+    t.equal(r[1], r[2]);
+    t.end();
+  }).catch(t.end);
+});

test/cli.js

@@ -0,0 +1,29 @@
+import test from 'tape';
+import cssToObj from '../src/css-to-obj';
+
+test('no entry check', function(t) {
+  let css = '';
+  let o = cssToObj(css);
+  t.equal(Object.keys(o).length, 0);
+  t.end();
+});
+
+test('single entry check', function(t) {
+  let css = 'text-align: center';
+  let o = cssToObj(css);
+  t.equal(o['text-align'], 'center');
+  t.equal(Object.keys(o).length, 1);
+  t.end();
+});
+
+test('multiple entries check', function(t) {
+  let url = 'https://example.com/image.svg';
+  let css = `width: 50px; height: 50px; text-align: center; background:url(${url})`;
+  let o = cssToObj(css);
+  t.equal(Object.keys(o).length, 4);
+  t.equal(o.width, '50px');
+  t.equal(o.height, '50px');
+  t.equal(o['text-align'], 'center');
+  t.equal(o.background, `url(${url})`);
+  t.end();
+});