grunt-svgstore - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

Gruntfile.js

@@ -77,2 +77,11 @@ /*
         }
+      },
+
+      includedemo: {
+	options:{
+	  includedemo : true
+	},
+	files: {
+	  'tmp/includedemo.svg': ['test/fixtures/*']
+	}
       }
@@ -79,0 +88,0 @@ },

package.json

 {
   "name": "grunt-svgstore",
   "description": "Merge SVGs from a folder.",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "homepage": "https://github.com/FWeinb/grunt-svgstore",
@@ -30,14 +30,15 @@ "author": {
   "devDependencies": {
-    "grunt": "~0.4.2",
-    "grunt-contrib-clean": "~0.4.0",
-    "grunt-contrib-jshint": "~0.6.0",
-    "grunt-contrib-nodeunit": "~0.2.0"
+    "grunt": "~0.4.5",
+    "grunt-contrib-clean": "~0.5.0",
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-nodeunit": "~0.4.0"
   },
   "dependencies": {
-    "cheerio": "^0.13.1",
     "chalk": "^0.4.0",
-    "js-beautify": "^1.4.2"
+    "cheerio": "^0.16.0",
+    "js-beautify": "^1.5.1",
+    "multiline": "^0.3.4"
   },
   "peerDependencies": {
-    "grunt": "~0.4.2"
+    "grunt": "~0.4.5"
   },
@@ -44,0 +45,0 @@ "keywords": [

README.md

@@ -56,3 +56,3 @@ # grunt-svgstore [![NPM version](https://badge.fury.io/js/grunt-svgstore.svg)](http://badge.fury.io/js/grunt-svgstore) [![Build Status](https://travis-ci.org/FWeinb/grunt-svgstore.svg?branch=master)](https://travis-ci.org/FWeinb/grunt-svgstore)
 
-An object that is used to genreate attributes for the resulting `svg` file.
+An object that is used to generate attributes for the resulting `svg` file.
 ```js
@@ -70,4 +70,4 @@ {
 
-#### options.formatting
-Type: `Object` or `false`
+#### options.formatting (since 0.0.4)
+Type: `Object` or `boolean`
 Default value: `false`
@@ -89,2 +89,8 @@
 
+#### options.includedemo (since 0.1.0)
+Type: `boolean`
+Default value: `false`
+
+This will include a demo HTML (named like `destName + -demo.html`) from where you can copy your `<use>` blocks.
+
 ### Usage Examples
@@ -95,3 +101,3 @@
 ```html
-<!-- Inlcude dest.svg -->
+<!-- Include dest.svg -->
 
@@ -120,6 +126,6 @@ [...]
 ## Release History
-
+  * 0.1.0 Always add `xmlns` namspace. Added the `includedemo` option. Fixed Issues [#20](https://github.com/FWeinb/grunt-svgstore/issues/20), [#19](https://github.com/FWeinb/grunt-svgstore/issues/19), [#18](https://github.com/FWeinb/grunt-svgstore/issues/18)
   * 0.0.4 Fixed issue with referencing ids with `url()` (fix [#12](https://github.com/FWeinb/grunt-svgstore/issues/12))
   * 0.0.3 Added `options.formatting` to format svg via [js-beautify](https://github.com/einars/js-beautify)
-  * 0.0.2 Fixed npm dependencys
+  * 0.0.2 Fixed npm dependencies
   * 0.0.1 Inital release

tasks/svgstore.js

@@ -13,2 +13,3 @@ /*
   var crypto   = require('crypto'),
+      multiline= require('multiline'),
       path     = require('path'),
@@ -34,10 +35,16 @@
       prefix : '',
-      svg : { },
-      formatting : false
+      svg : {
+	'xmlns' : "http://www.w3.org/2000/svg"
+      },
+      formatting : false,
+      includedemo : false
     });
 
-    this.files.forEach(function(f) {
+    this.files.forEach(function(file) {
+
       var $resultDocument = cheerio.load('<svg><defs></defs></svg>'),
           $resultSvg  = $resultDocument('svg'),
-          $resultDefs = $resultDocument('defs').first();
+	  $resultDefs = $resultDocument('defs').first(),
+	  iconNameViewBoxArray = []; // Used to store information of all icons that are added
+				     // { name : '', attribute : { 'data-viewBox' : ''}}
 
@@ -49,3 +56,3 @@ // Merge in SVG attributes
 
-      f.src.filter(function(filepath) {
+      file.src.filter(function(filepath) {
         if (!grunt.file.exists(filepath)) {
@@ -58,5 +65,6 @@ grunt.log.warn('File "' + filepath + '" not found.');
       }).map(function(filepath){
-        var contentStr = grunt.file.read(filepath),
+	var filename  = path.basename(filepath, '.svg'),
+	    contentStr = grunt.file.read(filepath),
             uniqueId   = md5(contentStr),
-            $          = cheerio.load(contentStr, { ignoreWhitespace: true, xmlMode: true });
+	    $          = cheerio.load(contentStr, {normalizeWhitespace : true, xmlMode: true});
 
@@ -78,4 +86,6 @@ // Map to store references from id to uniqueId + id;
         $('*').each(function(){
-          for ( var attr in this[0].attribs){
-            var value = this[0].attribs[attr];
+	  var $elem = $(this);
+	  var attrs = $elem.attr();
+	  Object.keys(attrs).forEach(function(key){
+	    var value = attrs[key];
             var match;
@@ -89,8 +99,7 @@ while ( ( match = urlPattern.exec(value)) !== null){
             }
-            this[0].attribs[attr] = value;
-          }
+	    $elem.attr(key, value);
+	  });
         });
 
-        var filename  = path.basename(filepath, '.svg'),
-            $svg      = $('svg'),
+	var $svg      = $('svg'),
             $children = $svg.children();
@@ -111,21 +120,74 @@
 
+	var graphicId = options.prefix + filename;
         // Add ID to the first Element
-        $res('*').first().attr('id', options.prefix + filename);
+	$res('*').first().attr('id', graphicId);
 
         // Append to resulting SVG
-        $resultDefs.append( $res.html() );
+	$resultDefs.append( $res.xml() );
 
+	// Add icon to the demo.html array
+	if ( options.includedemo ) {
+	  iconNameViewBoxArray.push({
+	    name : graphicId,
+	    attributes : {
+	      'viewBox' : $svg.attr('viewBox')
+	    }
+	  });
+	}
+
       });
 
-      var result = options.formatting ? beautify($resultDocument.html(), options.formatting) : $resultDocument.html();
+      var result = options.formatting ? beautify($resultDocument.xml(), options.formatting) : $resultDocument.xml();
+      var destName = path.basename(file.dest, '.svg');
 
-      grunt.file.write(f.dest, result);
+      grunt.file.write(file.dest, result);
 
-      grunt.log.writeln('File ' + chalk.cyan(f.dest) + ' created.');
+      grunt.log.writeln('File ' + chalk.cyan(file.dest) + ' created.');
 
+      if ( options.includedemo ) {
+
+	$resultSvg.attr('style', 'display:none');
+
+	var demoHTML = multiline.stripIndent(function(){/*
+	      <!doctype html>
+	      <html>
+		  <head>
+		    <style>
+			svg{
+			    width:50px;
+			    height:50px;
+			    fill:black !important;
+			}
+		    </style>
+		  <head>
+		  <body>
+		    {{svg}}
+		    {{useBlock}}
+		  </body>
+	      </html>
+	*/});
+
+	var useBlock = '';
+	iconNameViewBoxArray.forEach(function(item){
+	  var attrStr = '';
+
+	  Object.keys(item.attributes).forEach(function(key){
+	    attrStr += ' ' +key+'="'+item.attributes[key]+'"';
+	  });
+
+	  useBlock += '\t\t<svg'+attrStr+'>\n\t\t\t<use xlink:href="#'+ item.name +'"></use>\n\t\t</svg>\n';
+	});
+
+	demoHTML = demoHTML.replace('{{svg}}', $resultDocument.xml());
+	demoHTML = demoHTML.replace('{{useBlock}}', useBlock);
+
+	var demoPath = path.resolve(path.dirname(file.dest),  destName + '-demo.html' );
+	grunt.file.write(demoPath, demoHTML);
+	grunt.log.writeln('Demo file ' + chalk.cyan(demoPath) + ' created.');
+      }
+
     });
 
-
   });
 
 };

test/svgstore_test.js

@@ -35,3 +35,3 @@ 'use strict';
     var actual = grunt.file.read('tmp/default_options.svg');
-    var expected = grunt.file.read('test/expected/default_options');
+    var expected = grunt.file.read('test/expected/default_options.svg');
     test.equal(actual, expected, 'default options should work');
@@ -47,3 +47,3 @@
     var actual = grunt.file.read('tmp/prefix.svg');
-    var expected = grunt.file.read('test/expected/prefix');
+    var expected = grunt.file.read('test/expected/prefix.svg');
     test.equal(actual, expected, 'should add `prefix` to each id');
@@ -58,3 +58,3 @@
     var actual = grunt.file.read('tmp/svg_attr.svg');
-    var expected = grunt.file.read('test/expected/svg_attr');
+    var expected = grunt.file.read('test/expected/svg_attr.svg');
     test.equal(actual, expected, 'should add svg attributes');
@@ -69,3 +69,3 @@
     var actual = grunt.file.read('tmp/formatting.svg');
-    var expected = grunt.file.read('test/expected/formatting');
+    var expected = grunt.file.read('test/expected/formatting.svg');
     test.equal(actual, expected, 'should add formatting');
@@ -80,7 +80,17 @@
     var actual = grunt.file.read('tmp/withurlref.svg');
-    var expected = grunt.file.read('test/expected/withurlref');
+    var expected = grunt.file.read('test/expected/withurlref.svg');
     test.equal(actual, expected, 'should keep links between id and url() intact');
 
     test.done();
+  },
+
+  with_include_demo : function(test){
+    test.expect(1);
+
+    var actual = grunt.file.read('tmp/includedemo-demo.html');
+    var expected = grunt.file.read('test/expected/includedemo-demo.html');
+    test.equal(actual, expected, 'should have created a valid demo html');
+
+    test.done();
   }
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80408

increased by69.64%

Number of package files

29

increased by7.41%

Lines of code

311

increased by27.98%

Number of lines in readme file

127

increased by4.96%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedmultiline@^0.3.4

• + Addedcheerio@0.16.0(transitive)

• + Addeddom-serializer@0.2.2(transitive)

• + Addeddomelementtype@2.3.0(transitive)

• + Addeddomutils@1.5.1(transitive)

• + Addedentities@1.0.01.1.22.2.0(transitive)

• + Addedhtmlparser2@3.7.3(transitive)

• + Addedmultiline@0.3.4(transitive)

• + Addedstrip-indent@0.1.3(transitive)

• - Removedcheerio@0.13.1(transitive)

• - Removeddomutils@1.3.0(transitive)

• - Removedentities@0.5.0(transitive)

• - Removedhtmlparser2@3.4.0(transitive)

• - Removedunderscore@1.5.2(transitive)

• Updatedcheerio@^0.16.0

• Updatedjs-beautify@^1.5.1