feat: warnTags and warnTagAttrs

Author: nonmanifold

README.md

@@ -31,6 +31,12 @@ warning: this won't work unless you specify `removeTags: true`
 
 default: `removingTags: ['title', 'desc', 'defs', 'style']`
 
+#### `warnTags: [...string]`
+
+warns about tags, ex: ['title', 'desc', 'defs', 'style']
+
+default: `warnTags: []`
+
 #### `removeSVGTagAttrs: boolean`
 
 Removes `width` and `height` attributes from `<svg />`.
@@ -43,6 +49,11 @@ Removes attributes from inside the `<svg />`.
 
 default: `removingTagAttrs: []`
 
+#### `warnTagAttrs: [...string]`
+
+Warns to console about attributes from inside the `<svg />`.
+
+default: `warnTagAttrs: []`
 #### `classPrefix: boolean || string`
 
 Adds a prefix to class names to avoid collision across svg files.

config.js

@@ -10,4 +10,6 @@ module.exports = {
     removingTagAttrs: [],
     classPrefix: false,
     idPrefix: false,
+    warnTags: [],
+    warnTagAttrs: []
 };

index.js

@@ -16,7 +16,7 @@ var regexSequences = [
     // SVG XML -> HTML5
     [/\<([A-Za-z]+)([^\>]*)\/\>/g, "<$1$2></$1>"], // convert self-closing XML SVG nodes to explicitly closed HTML5 SVG nodes
     [/\s+/g, " "],                                 // replace whitespace sequences with a single space
-    [/\> \</g, "><"],                              // remove whitespace between tags
+    [/\> \</g, "><"]                               // remove whitespace between tags
 ];
 
 function getExtractedSVG(svgStr, query) {

karma.conf.js

@@ -6,28 +6,28 @@ var webpackConf = {
         loaders: [
             {
                 test: /\.json$/,
-                loaders: ['json'],
-            },
+                loaders: ['json']
+            }
         ]
     },
     entry: [
         './index.js'
     ],
     resolve: {
         extensions: ["", ".js", ".jsx"],
-    },
+    }
 };
 
 module.exports = function(config) {
     var conf = {
         basePath: '.',
         frameworks: ['mocha'],
         files: [
-            './tests/**/*.js',
+            './tests/**/*.js'
         ],
         exclude: [],
         preprocessors: {
-            './tests/**/*.js': ['webpack'],
+            './tests/**/*.js': ['webpack']
         },
         reporters: ['spec'],
         port: 9876,
@@ -39,7 +39,7 @@ module.exports = function(config) {
             'karma-spec-reporter',
             'karma-mocha',
             'karma-chrome-launcher',
-            'karma-webpack',
+            'karma-webpack'
         ],
         webpack: webpackConf,
         autoWatch: true,

lib/conditions.js

@@ -26,11 +26,18 @@ function createHasNoAttributes(attributes) {
     }
 }
 
+function createHasAttributes(attributes) {
+    return function hasAttributes(attributeToken) {
+        return attributes.indexOf(attributeToken[0]) > -1;
+    }
+}
+
 module.exports = {
     isSVGToken: isSVGToken,
     isStyleToken: isStyleToken,
     isFilledObject: isFilledObject,
     hasNoWidthHeight: hasNoWidthHeight,
     createHasNoAttributes: createHasNoAttributes,
+    createHasAttributes: createHasAttributes,
     isStartTag: isStartTag
 };

lib/transformer.js

@@ -20,11 +20,30 @@ function createRemoveTagAttrs(removingTagAttrs) {
         return tag;
     };
 }
-
+function createWarnTagAttrs(warnTagAttrs) {
+    warnTagAttrs = warnTagAttrs || [];
+    var hasNoAttributes = conditions.createHasAttributes(warnTagAttrs);
+    return function warnTagAttrs(tag) {
+        if (conditions.isStartTag(tag)) {
+            var attrs=tag.attributes.filter(hasNoAttributes);
+            if(attrs.length > 0) {
+                var attrList=[];
+                for(var i=0;i<attrs.length;i++){
+                    var attr=attrs[i];
+                    attrList.push(attr[0]);
+                }
+                console.warn('svg-inline-loader: tag ' + tag.tagName + ' has forbidden attrs: ' + attrList.join(', '));
+            }
+        }
+        return tag;
+    };
+}
 function isRemovingTag(removingTags, tag) {
     return removingTags.indexOf(tag.tagName) > -1;
 }
-
+function isWarningTag(warningTags, tag) {
+    return warningTags.indexOf(tag.tagName) > -1;
+}
 // FIXME: Due to limtation of parser, we need to implement our
 // very own little state machine to express tree structure
 
@@ -46,6 +65,16 @@ function createRemoveTags(removingTags) {
     };
 }
 
+function createWarnTags(warningTags) {
+    warningTags = warningTags || [];
+
+    return function warnTags(tag) {
+        if (conditions.isStartTag(tag) && isWarningTag(warningTags, tag)) {
+            console.warn('svg-inline-loader: forbidden tag ' + tag.tagName);
+        }
+        return tag;
+    };
+}
 function getAttributeIndex (tag, attr) {
     if( tag.attributes !== undefined && tag.attributes.length > 0 ) {
         for(var i = 0; i < tag.attributes.length; i++) {
@@ -142,7 +171,9 @@ function runTransform(tokens, configOverride) {
     if (config.classPrefix         !== false) transformations.push(createClassPrefix(config.classPrefix));
     if (config.idPrefix            !== false) transformations.push(createIdPrefix(config.idPrefix));
     if (config.removeSVGTagAttrs   === true)  transformations.push(removeSVGTagAttrs);
+    if (config.warnTags.length          > 0)  transformations.push(createWarnTags(config.warnTags));
     if (config.removeTags          === true)  transformations.push(createRemoveTags(config.removingTags));
+    if (config.warnTagAttrs.length      > 0)  transformations.push(createWarnTagAttrs(config.warnTagAttrs));
     if (config.removingTagAttrs.length  > 0)  transformations.push(createRemoveTagAttrs(config.removingTagAttrs));
 
     transformations.forEach(function (transformation) {

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "chai": "^3.0.0",
+    "chai-spies": "^0.7.1",
     "json-loader": "^0.5.4",
     "karma": "^1.0.0",
     "karma-chrome-launcher": "^1.0.1",

tests/svg-inline-loader.test.js

@@ -2,7 +2,12 @@ var simpleHTMLTokenizer = require('simple-html-tokenizer');
 var tokenize = simpleHTMLTokenizer.tokenize;
 
 var SVGInlineLoader = require('../index');
-var assert = require('chai').assert;
+var chai = require('chai');
+var assert = chai.assert;
+var expect = chai.expect;
+var spies = require('chai-spies');
+chai.use(spies);
+var createSpy = chai.spy;
 var _ = require('lodash');
 
 var svgWithRect = require('raw!./fixtures/xml-rect.svg');
@@ -117,5 +122,34 @@ describe('getExtractedSVG()', function(){
             }
         });
     });
+    it('should be able to warn about tagsAttrs to be removed listed in `warnTagAttrs` option via console.log', function () {
+        var svg = require('raw!./fixtures/with-ids.svg');
+        var tobeWarned = ['id'];
+        var oldConsoleWarn = console.warn;
+        var warnings=[];
+        console.warn=createSpy(function (str) {
+            warnings.push(str);
+        });
+        var processedSVG = SVGInlineLoader.getExtractedSVG(svg, { warnTagAttrs: tobeWarned });
+        var reTokenizedSVG = tokenize(processedSVG);
+        expect(console.warn).to.have.been.called.with('svg-inline-loader: tag path has forbidden attrs: id');
+        console.warn = oldConsoleWarn; // reset console back
+    });
 
+    it('should be able to specify tags to be warned about by `warnTags` option', function () {
+        var svg = require('raw!./fixtures/removing-tags.svg');
+        var tobeWarnedAbout = ['title', 'desc', 'defs', 'style', 'image'];
+        var oldConsoleWarn = console.warn;
+        var warnings=[];
+        console.warn=createSpy(function (str) {
+            warnings.push(str);
+        });
+        var processedStyleInsertedSVG = SVGInlineLoader.getExtractedSVG(svg, { warnTags: tobeWarnedAbout });
+        var reTokenizedStyleInsertedSVG = tokenize(processedStyleInsertedSVG);
+
+        expect(console.warn).to.have.been.called();
+        expect(console.warn).to.have.been.called.min(3);
+        expect(console.warn).to.have.been.called.with('svg-inline-loader: forbidden tag style');
+        console.warn = oldConsoleWarn; // reset console back
+    });
 });