Name interpolation. EsLint updated.

Author: Vladimir Panimaskin

.idea/jsLinters/eslint.xml

@@ -41,6 +41,12 @@ and additional options object as second:
 new SVGSpriteExtractPlugin(outputFilename, options = {});
 ```
 
+`outputFilename` can contain \[hash] placeholder:
+
+```js
+new SVGSpriteExtractPlugin('my.svg.bundle.[hash].js');
+```
+
 ### .extract(loaders = [])
 
 This method returns a configured loader string for this plugin.
@@ -55,6 +61,12 @@ plugin.extract('svgo!other!etc');
 plugin.extract(['svgo', 'other', 'etc']);
 ```
 
+## Options
+
+* idTemplate - default: \[name] - sprite id. You can use all built-in webpack placeholders here.
+Slashes and backslashes will be replaced with a dash. Other symbols unallowed in HTML identifiers will be removed.
+* context - default: '.' - root path from which \[path] placeholders in ids will be resolved
+
 ## Loader
 
 The built-in loader processes SVG content. It expects each required file has `<svg>` root tag.

README.md

@@ -1,6 +1,51 @@
+'use strict';
+
 require('babel-register');
-var Webpack = require('webpack');
-var config = require('./webpack.config').default;
 
-new Webpack(config, function() {
-});
+const Webpack = require('webpack');
+const config = require('./webpack.config').default;
+
+const WEBPACK_STATS = {
+	assets: true,
+	children: true,
+	chunkModules: true,
+	chunks: true,
+	colors: true,
+	errorDetails: true,
+	errors: true,
+	hash: true,
+	modules: true,
+	publicPath: true,
+	reasons: true,
+	source: false,
+	timings: false,
+	version: true,
+	warnings: true
+};
+
+const compiler = new Webpack(config, (error, stats) => {
+	if (error) {
+		printError(error);
+	} else {
+		const jsonStats = stats.toJson();
+		if (jsonStats.errors.length > 0) {
+			printError(jsonStats.errors);
+		} else {
+			console.log(stats.toString(WEBPACK_STATS));
+		}
+	}
+});
+
+/**
+ * @param {Array|Object} e
+ */
+function printError(e) {
+	const errors = Array.isArray(e) ? e : [e];
+	errors.forEach(error => {
+		console.error();
+		console.error(error.stack || error);
+		console.error();
+	});
+
+	process.exit(1);
+}

example/build.js

@@ -1,5 +1,5 @@
 import iconClearId from './icons/icon-clear.svg';
-import iconEditId from  './icons/icon-edit.svg';
+import iconEditId from './icons/icon-edit.svg';
 import iconBoughtSold from './icons/icon-bought-sold.svg';
 
 console.assert(iconEditId === 'icon-edit', 'Invalid id for "icon-edit.svg"');

example/main.js

@@ -1,7 +1,10 @@
 import path from 'path';
 import SVGSpriteExtractPlugin from '../index';
 
-const plugin = new SVGSpriteExtractPlugin('svg.bundle.js');
+const plugin = new SVGSpriteExtractPlugin('svg.bundle.[hash].js', {
+	idTemplate: '[path][name].[hash].[ext]',
+	context: path.resolve(__dirname)
+});
 
 export default {
 	context: path.resolve(__dirname),

example/webpack.config.js

@@ -1 +1 @@
-export {default as default} from './src/plugin';
+export {default} from './src/plugin';

index.js

@@ -4,7 +4,7 @@
   "description": "Webpack plugin for extracting SVG and creating sprites",
   "main": "./index.js",
   "scripts": {
-    "eslint": "eslint --config ./node_modules/eslint-config-dx/.eslintrc --ext .js ./src",
+    "eslint": "eslint --config ./node_modules/dx-lint/.eslintrc --ext .js ./src",
     "test": "node ./example/build.js"
   },
   "repository": {
@@ -30,8 +30,9 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-register": "^6.9.0",
-    "eslint": "^1.10.1",
-    "eslint-config-dx": "github:devex-web-frontend/eslint-config-dx",
+    "dx-lint": "github:devex-web-frontend/dx-lint#0.2.0",
+    "eslint-plugin-babel": "~3.3.0",
+    "eslint": "~2.13.1",
     "webpack": "^1.13.1"
   }
 }

package.json

@@ -1,4 +1,3 @@
-import path from 'path';
 import cheerio from 'cheerio';
 import loaderUtils from 'loader-utils';
 
@@ -37,12 +36,15 @@ function getNormalizedContent($svg) {
  * @returns {*} Cheerio object for <symbol>.
  */
 function createSymbol(content, id) {
-	let $ = cheerio.load(content, {xmlMode: true});
-	let $svg = $('svg');
-	let viewBox = $svg.attr('viewBox');
-	let $symbol = $('<symbol></symbol>');
+	const $ = cheerio.load(content, {
+		xmlMode: true
+	});
 
-	let $content = getNormalizedContent($svg);
+	const $svg = $('svg');
+	const viewBox = $svg.attr('viewBox');
+	const $symbol = $('<symbol></symbol>');
+
+	const $content = getNormalizedContent($svg);
 
 	$symbol.attr('id', id);
 	$symbol.attr('viewBox', viewBox);
@@ -61,6 +63,14 @@ function processSvg(content, id) {
 	return cheerio.html(createSymbol(content, id));
 }
 
+/**
+ * @param {String} id
+ * @returns {String} escaped id
+ */
+function escapeId(id) {
+	return id.replace(/[\/\\]/g, '-').replace(/[^\w:\.\-]/g, '');
+}
+
 /**
  * Loader for webpack.
  * It takes SVG file content and returns a module, exporting the id of this sprite.
@@ -72,14 +82,17 @@ module.exports = function(content) {
 	//noinspection JSUnresolvedVariable,JSUnresolvedFunction
 	this.cacheable && this.cacheable();
 
-	let result;
 	//noinspection JSUnresolvedVariable
-	let spriteId = path.basename(this.resourcePath, '.svg');
-	let query = loaderUtils.parseQuery(this.query);
+	const query = loaderUtils.parseQuery(this.query);
+	const {context = '.'} = query;
+	const cacheSVG = this[query.svgCacheNamespace][query.svgCacheFuncName];
 
-	result = processSvg(content, spriteId);
+	const spriteId = escapeId(loaderUtils.interpolateName(this, query.idTemplate, {
+		content,
+		context
+	}));
 
-	let cacheSVG = this[query.svgCacheNamespace][query.svgCacheFuncName];
+	const result = processSvg(content, spriteId);
 	cacheSVG(result);
 
 	return `module.exports = ${JSON.stringify(spriteId)};`;

src/loader.js

@@ -1,20 +1,27 @@
+import loaderUtils from 'loader-utils';
 import SvgSprite from './svg-sprite';
 
 /**
  * @typedef {Object} SVGSpriteExtractPluginOptions
  * @property {string} [svgCacheNamespace]
- * @property {string} [svgCacheFuncPrefix]
  * @property {string} [svgCacheFuncName]
+ * @property {string} [idTemplate]
+ * @property {string} [context]
  */
 
 /**
  * @type {SVGSpriteExtractPluginOptions}
  */
 const DEFAULT_OPTIONS = {
 	svgCacheNamespace: 'cacheSvg',
-	svgCacheFuncPrefix: 'cacheSvg_'
+	idTemplate: '[name]'
 };
 
+/**
+ * @type {string}
+ */
+const SVG_CACHE_FUNC_PREFIX = 'cacheSvg_';
+
 /**
  * @type {number}
  */
@@ -53,7 +60,7 @@ class SVGSpriteExtractPlugin {
 		this._filename = filename;
 
 		this._options = Object.assign({}, DEFAULT_OPTIONS, options);
-		this._options.svgCacheFuncName = this._options.svgCacheFuncPrefix + this._id;
+		this._options.svgCacheFuncName = SVG_CACHE_FUNC_PREFIX + this._id;
 	}
 
 	/**
@@ -62,26 +69,26 @@ class SVGSpriteExtractPlugin {
 	 * @returns {string} loader string
 	 */
 	extract(loader = []) {
-		let {svgCacheNamespace, svgCacheFuncName} = this._options;
+		let beforeLoaders = loader;
 
-		if (typeof loader === 'string') {
-			loader = loader.split('!');
+		if (typeof beforeLoaders === 'string') {
+			beforeLoaders = beforeLoaders.split('!');
 		}
 
 		return [
-			require.resolve('./loader') + '?' + JSON.stringify({svgCacheNamespace, svgCacheFuncName})
-		].concat(loader).join('!');
+			`${require.resolve('./loader')}?${JSON.stringify(this._options)}`
+		].concat(beforeLoaders).join('!');
 	}
 
 	/**
 	 * Entry point to this plugin for webpack.
 	 * @param {Object} compiler
 	 */
 	apply(compiler) {
-		let {svgCacheNamespace, svgCacheFuncName} = this._options;
+		const {svgCacheNamespace, svgCacheFuncName} = this._options;
 
-		let sprite = new SvgSprite();
-		let cacheFunc = svgContent => sprite.append(svgContent);
+		const sprite = new SvgSprite();
+		const cacheFunc = svgContent => sprite.append(svgContent);
 
 		compiler.plugin('compilation', compilation => {
 			compilation.plugin('normal-module-loader', (loaderContext, module) => {
@@ -91,7 +98,12 @@ class SVGSpriteExtractPlugin {
 		});
 
 		compiler.plugin('emit', (compilation, callback) => {
-			compilation.assets[this._filename] = sprite.render();
+			const compiledSprite = sprite.render();
+			const filename = loaderUtils.interpolateName({}, this._filename, {
+				content: compiledSprite.source()
+			});
+
+			compilation.assets[filename] = compiledSprite;
 			callback();
 		});
 	}

src/plugin.js

@@ -4,7 +4,7 @@ import util from 'util';
 /**
  * @type {string}
  */
-const SCRIPT_HEADER = `(function() {`;
+const SCRIPT_HEADER = '(function() {';
 
 /**
  * @type {string}
@@ -61,8 +61,8 @@ class SvgSprite {
 	 * @returns {ConcatSource} an object suitable for compilation.assets collection.
 	 */
 	render() {
-		let source = new ConcatSource();
-		let elements = this._elements.slice();
+		const source = new ConcatSource();
+		const elements = this._elements.slice();
 
 		source.add(SCRIPT_HEADER);
 		source.add(util.format(SPRITE_CONTENT_TEMPLATE, JSON.stringify(elements.join(''))));