Repository: svg-sprite/svg-sprite (js)

Issue:
Include filesize in generated example page
Would be useful to know the file size of each svg (after processing) that is contained within the generated symbol file.

One option could be to include the filesize in the accompanying HTML example

Pull request:
Added filesize to example page
closes #235 

Patch:
diff --git a/docs/templating.md b/docs/templating.md
index 3c9ef7e..4f94c4f 100644
--- a/docs/templating.md
+++ b/docs/templating.md
@@ -124,6 +124,8 @@ For each sprite generation process, a data object is constructed that is passed
                 },
                 // Shape SVG (inline embeddable version)
                 svg: '<svg> ... </svg>',
+                // file size, pretty formated. Check the note below.
+                fileSize: '1 Kb'
             }
         ],
         // Current date (RFC-1123)
@@ -132,6 +134,8 @@ For each sprite generation process, a data object is constructed that is passed
 }
 ```
 
+**NOTE!**  `fileSize` property of each shape is null unless the `example` [config is passed](api.md#compilation-example)
+
 
 ### Builtin templating functions
 
diff --git a/lib/svg-sprite/layouter.js b/lib/svg-sprite/layouter.js
index a00edcd..c225e71 100644
--- a/lib/svg-sprite/layouter.js
+++ b/lib/svg-sprite/layouter.js
@@ -10,6 +10,7 @@
  */
 
 const merge = require('lodash.merge');
+const pretty = require('prettysize');
 
 const defaultConfig = {
     css: {
@@ -118,7 +119,8 @@ module.exports = class SVGSpriteLayouter {
                     outer: height
                 },
                 first: index === 0,
-                last: index === lastShapeIndex
+                last: index === lastShapeIndex,
+                fileSize: this.config.example ? pretty(shape.source.contents.length) : null
             });
         });
 
diff --git a/tmpl/css/sprite.html b/tmpl/css/sprite.html
index 0213a3d..f66566b 100644
--- a/tmpl/css/sprite.html
+++ b/tmpl/css/sprite.html
@@ -143,7 +143,7 @@ appropriately sized elements.
                     <div class="icon-box">
                         <i class="{{#selector.shape}}{{#last}}{{#classname}}{{raw}}{{/classname}}{{/last}}{{/selector.shape}}">{{name}}</i>
                     </div>
-                    <h2>{{name}}</h2>
+                    <h2>{{name}}, {{ fileSize }}</h2>
                 </li>
 {{/shapes}}
             </ul>
diff --git a/tmpl/defs/sprite.html b/tmpl/defs/sprite.html
index 86b2aef..a8271ae 100644
--- a/tmpl/defs/sprite.html
+++ b/tmpl/defs/sprite.html
@@ -162,7 +162,7 @@ embedded above. They may be styled via CSS.
                             <use xlink:href="#{{name}}"></use>
                         </svg>
                     </div>
-                    <h2>{{name}}</h2>
+                    <h2>{{name}}, {{ fileSize }}</h2>
                 </li>
 {{/shapes}}         </ul>
 
@@ -189,7 +189,7 @@ SVG sprite. They may be styled via CSS.
                             <use xlink:href="{{{example}}}#{{name}}"></use>
                         </shapes>
                     </div>
-                    <h2>{{name}}</h2>
+                    <h2>{{name}}, {{ fileSize }}</h2>
                 </li>
 {{/shapes}}         </ul>{{/inline}}
 
diff --git a/tmpl/stack/sprite.html b/tmpl/stack/sprite.html
index af31542..f6195b7 100644
--- a/tmpl/stack/sprite.html
+++ b/tmpl/stack/sprite.html
@@ -138,7 +138,7 @@ selector is used to show the very shape that is referenced by the fragment ident
                     <div class="icon-box">
                         <img src="{{{example}}}#{{name}}" class="{{#selector.dimensions}}{{#last}}{{#classname}}{{raw}}{{/classname}}{{/last}}{{/selector.dimensions}}" alt="{{name}}">
                     </div>
-                    <h2>{{name}}</h2>
+                    <h2>{{name}}, {{ fileSize }}</h2>
                 </li>
 {{/shapes}}         </ul>
 
diff --git a/tmpl/symbol/sprite.html b/tmpl/symbol/sprite.html
index c747d72..77617e4 100644
--- a/tmpl/symbol/sprite.html
+++ b/tmpl/symbol/sprite.html
@@ -161,7 +161,7 @@ embedded above. They may be styled via CSS.
                             <use xlink:href="#{{name}}"></use>
                         </svg>
                     </div>
-                    <h2>{{name}}</h2>
+                    <h2>{{name}}, {{ fileSize }}</h2>
                 </li>
 {{/shapes}}         </ul>
 
diff --git a/tmpl/view/sprite.html b/tmpl/view/sprite.html
index e39fe1c..60b3694 100644
--- a/tmpl/view/sprite.html
+++ b/tmpl/view/sprite.html
@@ -162,7 +162,7 @@ appropriately sized elements.
                     <div class="icon-box">
                         <i class="{{#selector.shape}}{{#last}}{{#classname}}{{raw}}{{/classname}}{{/last}}{{/selector.shape}}">{{name}}</i>
                     </div>
-                    <h2>{{name}}</h2>
+                    <h2>{{name}}, {{ fileSize }}</h2>
                 </li>
 {{/shapes}}         </ul>
 


Test patch:
diff --git a/test/svg-sprite/layouter.test.js b/test/svg-sprite/layouter.test.js
index 58f5c5f..8eb0f8d 100644
--- a/test/svg-sprite/layouter.test.js
+++ b/test/svg-sprite/layouter.test.js
@@ -223,6 +223,32 @@ describe('testing constructor', () => {
         });
     });
 
+    it('should fill up shapes with file sizes if config.example is true', () => {
+        expect.hasAssertions();
+
+        const TEST_SHAPE = {
+            id: 'master',
+            base: 'base',
+            master: { id: 'master' },
+            getDimensions: jest.fn().mockReturnValueOnce({}),
+            config: { spacing: { padding: {} } },
+            source: {
+                contents: 'test'
+            }
+        };
+
+        spriter._shapes = [
+            TEST_SHAPE
+        ];
+        const layouter = new SVGSpriteLayouter(spriter, {
+            example: true
+        });
+
+        expect(layouter._commonData.shapes[0]).toStrictEqual(expect.objectContaining({
+            fileSize: '4 Bytes'
+        }));
+    });
+
     it('should fill up shapes accordingly to spriter shapes ' +
         'with proper data and proper width/height calculation', () => {
         expect.hasAssertions();
@@ -351,7 +377,8 @@ describe('testing constructor', () => {
                 outer: 100
             },
             first: true,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[1]).toStrictEqual({
             name: TEST_SECOND.id,
@@ -366,7 +393,8 @@ describe('testing constructor', () => {
                 outer: 100
             },
             first: false,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[2]).toStrictEqual({
             name: TEST_THIRD.id,
@@ -381,7 +409,8 @@ describe('testing constructor', () => {
                 outer: 100
             },
             first: false,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[3]).toStrictEqual({
             name: TEST_FOURTH.id,
@@ -396,7 +425,8 @@ describe('testing constructor', () => {
                 outer: 200
             },
             first: false,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[3]).toStrictEqual({
             name: TEST_FOURTH.id,
@@ -411,7 +441,8 @@ describe('testing constructor', () => {
                 outer: 200
             },
             first: false,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[4]).toStrictEqual({
             name: TEST_FIFTH.id,
@@ -426,7 +457,8 @@ describe('testing constructor', () => {
                 outer: 200
             },
             first: false,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[5]).toStrictEqual({
             name: TEST_SIXTH.id,
@@ -441,7 +473,8 @@ describe('testing constructor', () => {
                 outer: 200
             },
             first: false,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[6]).toStrictEqual({
             name: TEST_SEVENTH.id,
@@ -456,7 +489,8 @@ describe('testing constructor', () => {
                 outer: 300
             },
             first: false,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[7]).toStrictEqual({
             name: TEST_EIGHT.id,
@@ -471,7 +505,8 @@ describe('testing constructor', () => {
                 outer: 300
             },
             first: false,
-            last: false
+            last: false,
+            fileSize: null
         });
         expect(layouter._commonData.shapes[8]).toStrictEqual({
             name: TEST_NINTH.id,
@@ -486,7 +521,8 @@ describe('testing constructor', () => {
                 outer: 300
             },
             first: false,
-            last: true
+            last: true,
+            fileSize: null
         });
     });
 });