Merge pull request #81 from soenkekluth/master

replace rust with lodash && remove libxmljs
shakyShane · Aug 5, 2016 · ae2eb20 · ae2eb20
2 parents b76806b + dfa0240
commit ae2eb20
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 94 deletions.
diff --git a/_makeDocs.js b/_makeDocs.js
@@ -2,8 +2,8 @@ var fs           = require("fs");
 var cp           = require("child_process");
 var doc          = "./doc/yuidoc.json";
 var marked       = require("marked");
-var dust         = require("dustjs-linkedin");
-dust.optimizers.format = function(ctx, node) { return node; };
+// var dust         = require("dustjs-linkedin");
+// dust.optimizers.format = function(ctx, node) { return node; };
 
 var mdTemp            = fs.readFileSync("./tmpl/readme.txt", "utf-8");
 var readme            = fs.readFileSync("./README.md", "utf-8");
@@ -48,4 +48,4 @@ cp.spawn('gulp', ['docs'], {stdio: 'inherit'}).on('close', function () {
 
         fs.writeFileSync("./README.md", newReadme);
     });
-});
+});
diff --git a/example-stream.js b/example-stream.js
@@ -12,9 +12,14 @@ var config = {
     mode: "sprite"
 };
 
+console.info('creating svg sprite from ' + paths.svgSrc);
+
+
 fs.src("test/fixtures/basic/*.svg")
     .pipe(svgSprites(config))
     .pipe(fs.dest(paths.svgDest))
     .pipe(filter("**/*.svg"))
     .pipe(svg2png())
     .pipe(fs.dest(paths.svgDest));
+
+console.info('files are saved to ' + paths.svgDest);
diff --git a/index.js b/index.js
@@ -2,19 +2,11 @@ var SpriteData = require("svg-sprite-data");
 var through2   = require("through2");
 var gutil      = require("gulp-util");
 var File       = gutil.File;
-var dust       = require("dustjs-linkedin");
 var fs         = require("fs");
 var Q          = require("q");
 var _          = require("lodash");
 var path       = require("path");
 
-/**
- * Make Dust templates retain whitespace
- * @param ctx
- * @param node
- * @returns {*}
- */
-dust.optimizers.format = function(ctx, node) { return node; };
 
 var PLUGIN_NAME = "gulp-svg-sprites";
 
@@ -350,20 +342,25 @@ function makeFile(template, fileName, stream, data) {
 
     var deferred = Q.defer();
     var id = _.uniqueId();
+    var out = "";
+
+    try{
+      var compiled = _.template(template);
+      out = compiled(data);
+    }catch(e){
+      deferred.reject(e);
+      return deferred.promise;
+    }
 
-    dust.compileFn(template, id, false);
-
-    dust.render(id, data, function (err, out) {
 
-        stream.push(new File({
-            cwd:  "./",
-            base: "./",
-            path: fileName,
-            contents: new Buffer(out)
-        }));
+    stream.push(new File({
+        cwd:  "./",
+        base: "./",
+        path: fileName,
+        contents: new Buffer(out)
+    }));
 
-        deferred.resolve(out);
-    });
+    deferred.resolve(out);
 
     return deferred.promise;
 }
@@ -402,13 +399,15 @@ module.exports = function (config) {
         var stream = this;
 
         spriter.compile(config, function (err, svg) {
-            var onDoneTransformData = function (data) {
-                config.afterTransform(data, config, onDoneAfterTransformData);
-            };
             var onDoneAfterTransformData = function (data) {
                 writeFiles(stream, config, svg.svg, data, cb.bind(null, null));
             };
 
+            var onDoneTransformData = function (data) {
+                config.afterTransform(data, config, onDoneAfterTransformData);
+            };
+
+
             if (config.asyncTransforms) {
                 config.transformData(svg.data, config, onDoneTransformData);
             } else {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gulp-svg-sprites",
   "description": "Create SVG sprites with PNG fallbacks",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "homepage": "",
   "repository": {
     "type": "git",
@@ -17,42 +17,41 @@
     }
   ],
   "scripts": {
-    "test": "gulp lint && mocha --recursive test/specs"
+    "test": "gulp lint && mocha --recursive test/specs",
+    "example": "node example-stream.js"
   },
   "main": "index.js",
   "engines": {
     "node": ">= 0.10.0"
   },
   "dependencies": {
-    "dust": "^0.3.0",
-    "dustjs-linkedin": "^2.4.0",
-    "gulp-util": "^3.0.0",
-    "libxmljs": "^0.14.1",
-    "lodash": "^2.4.1",
-    "q": "^1.0.1",
-    "svg-sprite-data": "^2.0.0",
-    "svgo": "^0.5.0",
-    "through2": "^0.4.1",
-    "vinyl": "^0.2.3"
+    "gulp-util": "3.0.7",
+    "lodash": "4.14.1",
+    "q": "1.4.1",
+    "svg-sprite-data": "3.0.0",
+    "svgo": "0.6.6",
+    "through2": "2.0.1",
+    "vinyl": "1.2.0"
   },
   "keywords": [
     "svg",
     "sprites",
     "gulpplugin"
   ],
   "devDependencies": {
-    "chai": "~1.9.0",
-    "gulp": "^3.8.6",
-    "gulp-clean": "^0.3.1",
-    "gulp-contribs": "0.0.2",
-    "gulp-filter": "^0.5.0",
-    "gulp-jshint": "~1.4.0",
-    "gulp-svg2png": "^0.3.0",
-    "gulp-yuidoc": "^0.1.2",
-    "img-compare": "^1.2.0",
-    "marked": "^0.3.2",
-    "mocha": "~1.18.0",
-    "sinon": "~1.8.2",
-    "vinyl-fs": "^0.1.4"
+    "chai": "3.5.0",
+    "gulp": "3.9.1",
+    "gulp-clean": "0.3.2",
+    "gulp-contribs": "0.0.3",
+    "gulp-filter": "4.0.0",
+    "gulp-jshint": "2.0.1",
+    "gulp-svg2png": "2.0.0",
+    "gulp-yuidoc": "0.1.2",
+    "img-compare": "1.2.0",
+    "jshint": "^2.9.1",
+    "marked": "0.3.6",
+    "mocha": "3.0.1",
+    "sinon": "1.17.5",
+    "vinyl-fs": "2.4.3"
   }
 }
diff --git a/tmpl/preview-symbol.html b/tmpl/preview-symbol.html
@@ -8,7 +8,7 @@
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
     <meta http-equiv="pragma" content="no-cache"/>
     <title>Icon kit preview | gulp-svg-sprites</title>
-    <link href="{config.cssFile}" rel="stylesheet" type="text/css" media="all"/>
+    <link href="<%= config.cssFile %>" rel="stylesheet" type="text/css" media="all"/>
     <style type="text/css">@CHARSET "UTF-8";
     * {
         box-sizing: border-box;
@@ -174,23 +174,24 @@ <h4>Usage:</h4>
 </header>
 <section>
     <ul class="icon-boxes">
-        {#svg}
-        <li title="{name}">
-            <div class="icon-box" id="icon-box-{name}">
-                <svg class="{common} {name}">
-                    <use xlink:href="#{name}" />
+        <% _.forEach(svg, function(svgItem) {  %>
+
+        <li title="<%= svgItem.name %>">
+            <div class="icon-box" id="icon-box-<%= svgItem.name %>">
+                <svg class="<%= common %> <%= svgItem.name %>">
+                    <use xlink:href="#<%= svgItem.name %>" />
                 </svg>
             </div>
-            <h2>{name}</h2>
-            <button onclick="showPopover('snippet-{name}')">Show Snippet</button>
+            <h2><%= svgItem.name %></h2>
+            <button onclick="showPopover('snippet-<%= svgItem.name %>')">Show Snippet</button>
             <br/>
-            <button onclick="invertBackground('icon-box-{name}')">Invert Background</button>
-            <div class="snippet-popover" id="snippet-{name}">
-                <pre><code>&lt;svg class=&quot;{common} {name}&quot;&gt;&lt;use xlink:href=&quot;#{name}&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
+            <button onclick="invertBackground('icon-box-<%= svgItem.name %>')">Invert Background</button>
+            <div class="snippet-popover" id="snippet-<%= svgItem.name %>">
+                <pre><code>&lt;svg class=&quot;<%= common %> <%= svgItem.name %>&quot;&gt;&lt;use xlink:href=&quot;#<%= svgItem.name %>&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                 <button onclick="hidePopover()">Close</button>
             </div>
         </li>
-        {/svg}
+        <% });  %>
     </ul>
 </section>
 <footer>
@@ -212,4 +213,4 @@ <h2>{name}</h2>
     }
 </script>
 </body>
-</html>
+</html>
diff --git a/tmpl/preview.html b/tmpl/preview.html
@@ -8,7 +8,7 @@
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
     <meta http-equiv="pragma" content="no-cache"/>
     <title>Icon kit preview | gulp-svg-sprites</title>
-    <link href="{config.cssFile}" rel="stylesheet" type="text/css" media="all"/>
+    <link href="<%= config.cssFile %>" rel="stylesheet" type="text/css" media="all"/>
     <style type="text/css">@CHARSET "UTF-8";
     * {
         box-sizing: border-box;
@@ -157,13 +157,13 @@
     <h1 id="logo">Gulp SVG Sprites</h1>
     <h4>Files Generated:</h4>
     <ol>
-        <li><a href="{config.cssFile}">{config.cssFile}</a></li>
-        <li><a href="{config.svg.sprite}">{config.svg.sprite}</a></li>
+        <li><a href="<%= config.cssFile %>"><%= config.cssFile %></a></li>
+        <li><a href="<%= config.svg.sprite %>"><%= config.svg.sprite %></a></li>
     </ol>
     <h4>Usage:</h4>
     <ol>
         <li>
-            Include the <a href="{config.cssFile}">CSS file</a> into your project.
+            Include the <a href="<%= config.cssFile %>">CSS file</a> into your project.
         </li>
         <li>
             Paste one of the snippets anywhere into your website.
@@ -173,23 +173,28 @@ <h4>Usage:</h4>
 <section>
     <nav><button onclick="toggleMode()">Toggle PNG/SVG</button> (showing <span id="mode-view">SVG</span>)<br><br><input type="range" onchange="setSize(this.value)" min="2" max="14"></nav>
     <ul class="icon-boxes">
-        {#svg}
-        {#normal}
-        <li title="{name}">
-            <div class="icon-box" id="icon-box-{name}">
-                <div class="{common} {name}"></div>
+
+
+
+      <% _.forEach(svg, function(svgItem) {  %>
+
+        <li title="<%= svgItem.name %>">
+            <div class="icon-box" id="icon-box-<%= svgItem.name %>">
+                <div class="<%= common %> <%= svgItem.name %>"></div>
             </div>
-            <h2>{name}</h2>
-            <button onclick="showPopover('snippet-{name}')">Show Snippet</button>
+            <h2><%= svgItem.name %></h2>
+            <button onclick="showPopover('snippet-<%= svgItem.name %>')">Show Snippet</button>
             <br/>
-            <button onclick="invertBackground('icon-box-{name}')">Invert Background</button>
-            <div class="snippet-popover" id="snippet-{name}">
-                <pre><code>&lt;span class=&quot;{common} {name}&quot;&gt;&lt;/span&gt;</code></pre>
+            <button onclick="invertBackground('icon-box-<%= svgItem.name %>')">Invert Background</button>
+            <div class="snippet-popover" id="snippet-<%= svgItem.name %>">
+                <pre><code>&lt;span class=&quot;<%= common %> <%= svgItem.name %>&quot;&gt;&lt;/span&gt;</code></pre>
                 <button onclick="hidePopover()">Close</button>
             </div>
         </li>
-        {/normal}
-        {/svg}
+
+
+      <% });  %>
+
     </ul>
 </section>
 <footer>
@@ -227,4 +232,4 @@ <h2>{name}</h2>
     }
 </script>
 </body>
-</html>
+</html>
diff --git a/tmpl/sprite.css b/tmpl/sprite.css
@@ -1,23 +1,29 @@
-{#common}.{common} {
-    font-size: {baseSize}px;
+.<%=common %> {
+    font-size: <%= baseSize %>px;
 }
 
-.{common}:before {
+.<%=common %>:before {
     content:' ';
     vertical-align:middle;
     display: inline-block;
-    background-image: url("{svgPath}");
+    background-image: url("<%=svgPath%>");
     background-repeat: no-repeat;
-    background-size: {relWidth}em {relHeight}em;
+    background-size: <%= relWidth %>em <%= relHeight %>em;
 }
 
-.no-svg .{common}:before {
-    background-image: url("{pngPath}");
-}{/common}
-{#svg}
-{#common}.{common}{/common}.{name}:before {
-    background-position: {relPositionX}em {relPositionY}em;
-    width: {relWidth}em;
-    height: {relHeight}em;
+.no-svg .<%=common %>:before {
+    background-image: url("<%=pngPath%>");
 }
-{/svg}
+
+<% _.forEach(svg, function(svgItem) { %>
+
+  .<%=common %>.<%=svgItem.name%>:before {
+      background-position: <%= svgItem.relPositionX %>em <%= svgItem.relPositionY %>em;
+      width: <%= svgItem.relWidth %>em;
+      height: <%= svgItem.relHeight %>em;
+  }
+
+
+<% }); %>
+
+