minimize, attrs from query, tests, readme

sokra · sokra · commit f2ab94102490 · 2014-01-27T13:40:07.000+01:00
fixes #1 #2 #3 #4
diff --git a/README.md b/README.md
@@ -1,5 +1,45 @@
 # html loader for webpack
 
+Exports HTML as string. HTML is minimized when the compiler demands.
+
+By default every local `<img src="image.png">` is required (`require("./image.png")`). You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`).
+
+## Examples
+
+With this configuration:
+
+``` javascript
+{
+	module: { loaders: [
+		{ test: "\.jpg$", loader: "file-loader" },
+		{ test: "\.png$", loader: "url-loader?mimetype=image/png" }
+	]},
+	output: {
+		publicPath: "http://cdn.example.com/[hash]/"
+	}
+}
+```
+
+``` html
+<!-- fileA.html -->
+<img  src="image.jpg"  data-src2x="image2x.png" >
+```
+
+``` javascript
+require("html!./fileA.html");
+// => '<img  src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg"  data-src2x="image2x.png" >'
+
+require("html?attrs=img:data-src2c!./file.html");
+// => '<img  src="image.png"  data-src2x="data:image/png;base64,..." >'
+
+require("html?attrs=img:src img:data-src2c!./file.html");
+require("html?attrs[]=img:src&attrs[]=img:data-src2c!./file.html");
+// => '<img  src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg"  data-src2x="data:image/png;base64,..." >'
+
+/// minimized
+// => '<img src=http://cdn.example.com/49e...ba9f/a9f...92ca.jpg data-src2x=data:image/png;base64,...>'
+```
+
 ## License
 
 MIT (http://www.opensource.org/licenses/mit-license.php)
diff --git a/index.js b/index.js
@@ -14,12 +14,26 @@ function randomIdent() {
 
 module.exports = function(content) {
 	this.cacheable && this.cacheable();
-	var links = attrParse(content);
+	var query = loaderUtils.parseQuery(this.query);
+	var attributes = ["img:src"];
+	if(query.attrs !== undefined) {
+		if(typeof query.attrs === "string")
+			attributes = query.attrs.split(" ");
+		else if(Array.isArray(query.attrs))
+			attributes = query.attrs;
+		else if(query.attrs === false)
+			attributes = [];
+		else
+			throw new Error("Invalid value to query parameter attrs");
+	}
+	var links = attrParse(content, function(tag, attr) {
+		return attributes.indexOf(tag + ":" + attr) >= 0;
+	});
 	links.reverse();
 	var data = {};
 	content = [content];
 	links.forEach(function(link) {
-		if(/^data:|^(https?:)?\/\//.test(link.value)) return;
+		if(/^data:|^(https?:)?\/\/|^[\{\}\[\]#*;,'§\$%&\(=?`´\^°<>]/.test(link.value)) return;
 		do {
 			var ident = randomIdent();
 		} while(data[ident]);
@@ -30,7 +44,20 @@ module.exports = function(content) {
 		content.push(x.substr(0, link.start));
 	});
 	content.reverse();
-	return "module.exports = " + JSON.stringify(content.join("")).replace(/xxxHTMLLINKxxx[0-9\.]+xxx/g, function(match) {
+	content = content.join("");
+	if(this.minimize) {
+		content = htmlMinifier.minify(content, {
+			removeComment: true,
+			collapseWhitespace: true,
+			collapseBooleanAttributes: true,
+			removeAttributeQuotes: true,
+			removeRedundantAttributes: true,
+			useShortDoctype: true,
+			removeEmptyAttributes: true,
+			removeOptionalTags: true
+		})
+	}
+	return "module.exports = " + JSON.stringify(content).replace(/xxxHTMLLINKxxx[0-9\.]+xxx/g, function(match) {
 		if(!data[match]) return match;
 		return '" + require(' + JSON.stringify(urlToRequire(data[match])) + ') + "';
 	}) + ";";
diff --git a/lib/attributesParser.js b/lib/attributesParser.js
@@ -4,16 +4,6 @@
 */
 var Parser = require("./fastparse");
 
-var RELEVANT_TAG_ATTRS = [
-	"img src",
-	"link href",
-	"script src",
-];
-
-function isRelevantTagAttr(tag, attr) {
-	return RELEVANT_TAG_ATTRS.indexOf(tag + " " + attr) >= 0;
-}
-
 var parser = new Parser({
 	outside: {
 		"<!--.*?-->": true,
@@ -30,16 +20,16 @@ var parser = new Parser({
 		"\\s+": true, // eat up whitespace
 		">": "outside", // end of attributes
 		"(([a-zA-Z\\-]+)\\s*=\\s*\")([^\"]*)\"": function(match, strUntilValue, name, value, index) {
-			if(!isRelevantTagAttr(this.currentTag, name)) return;
-			this.links.push({
+			if(!this.isRelevantTagAttr(this.currentTag, name)) return;
+			this.results.push({
 				start: index + strUntilValue.length,
 				length: value.length,
 				value: value
 			});
 		},
 		"(([a-zA-Z\\-]+)\\s*=\\s*)([^\\s>]+)": function(match, strUntilValue, name, value, index) {
-			if(!isRelevantTagAttr(this.currentTag, name)) return;
-			this.links.push({
+			if(!this.isRelevantTagAttr(this.currentTag, name)) return;
+			this.results.push({
 				start: index + strUntilValue.length,
 				length: value.length,
 				value: value
@@ -51,9 +41,10 @@ var parser = new Parser({
 });
 
 
-module.exports = function parse(html) {
+module.exports = function parse(html, isRelevantTagAttr) {
 	return parser.parse("outside", html, {
 		currentTag: null,
-		links: []
-	}).links;
+		results: [],
+		isRelevantTagAttr: isRelevantTagAttr
+	}).results;
 };
diff --git a/test/loaderTest.js b/test/loaderTest.js
@@ -4,8 +4,41 @@ var loader = require("../");
 
 describe("loader", function() {
 	it("should convert to requires", function() {
-		loader.call({}, 'Text <img src="image.png"><script src="~bootstrap"> Text').should.be.eql(
-			'module.exports = "Text <img src=\\"" + require("./image.png") + "\\"><script src=\\"" + require("bootstrap") + "\\"> Text";'
+		loader.call({}, 'Text <img src="image.png"><img src="~bootstrap-img"> Text').should.be.eql(
+			'module.exports = "Text <img src=\\"" + require("./image.png") + "\\"><img src=\\"" + require("bootstrap-img") + "\\"> Text";'
+		);
+	});
+	it("should accept attrs from query", function() {
+		loader.call({
+			query: "?attrs=script:src"
+		}, 'Text <script src="script.js"><img src="image.png">').should.be.eql(
+			'module.exports = "Text <script src=\\"" + require("./script.js") + "\\"><img src=\\"image.png\\">";'
+		);
+	});
+	it("should accept attrs from query (space separated)", function() {
+		loader.call({
+			query: "?attrs=script:src img:src"
+		}, 'Text <script src="script.js"><img src="image.png">').should.be.eql(
+			'module.exports = "Text <script src=\\"" + require("./script.js") + "\\"><img src=\\"" + require("./image.png") + "\\">";'
+		);
+	});
+	it("should accept attrs from query (multiple)", function() {
+		loader.call({
+			query: "?attrs[]=script:src&attrs[]=img:src"
+		}, 'Text <script src="script.js"><img src="image.png">').should.be.eql(
+			'module.exports = "Text <script src=\\"" + require("./script.js") + "\\"><img src=\\"" + require("./image.png") + "\\">";'
+		);
+	});
+	it("should not make bad things with templates", function() {
+		loader.call({}, '<h3>#{number} {customer}</h3>\n<p>   {title}   </p>').should.be.eql(
+			'module.exports = "<h3>#{number} {customer}</h3>\\n<p>   {title}   </p>";'
+		);
+	});
+	it("should minimize", function() {
+		loader.call({
+			minimize: true
+		}, '<h3>#{number} {customer}</h3>\n<p>   {title}   </p>\n\t<img src="image.png" />').should.be.eql(
+			'module.exports = "<h3>#{number} {customer}</h3><p>{title}</p><img src=" + require("./image.png") + ">";'
 		);
 	});
 });
diff --git a/test/parserTest.js b/test/parserTest.js
@@ -4,7 +4,11 @@ var attrParse = require("../lib/attributesParser");
 
 function test(name, html, result) {
 	it("should parse " + name, function() {
-		attrParse(html).map(function(match) { return match.value }).should.be.eql(result);
+		attrParse(html, function(tag, attr) {
+			if(tag === "img" && attr === "src") return true;
+			if(tag === "link" && attr === "href") return true;
+			return false;
+		}).map(function(match) { return match.value }).should.be.eql(result);
 	});
 }
 
@@ -20,14 +24,14 @@ describe("parser", function() {
 	test("comment2", '<!--<!--<img src="image.png">-->', []);
 	test("comment3", '<!--><img src="image.png">-->', []);
 	test("comment4", '<!----><img src="image.png">-->', ["image.png"]);
-	test("tags", '<img src="image.png"><script src="script.js"></script><link type="stylesheet" href="style.css">', ["image.png", "script.js", "style.css"]);
+	test("tags", '<img src="image.png"><script src="script.js"></script><link type="stylesheet" href="style.css">', ["image.png", "style.css"]);
 	test("cdata", '<![CDATA[<img src="image.png">]]><img src="image2.png">', ["image2.png"]);
 	test("doctype", '<!doctype html><img src="image.png">', ["image.png"]);
 });
 
 describe("locations", function() {
 	it("should report correct locations", function() {
-		attrParse('<img  src= "image.png">').should.be.eql([{
+		attrParse('<img  src= "image.png">', function() { return true }).should.be.eql([{
 			start: 12,
 			length: 9,
 			value: "image.png"
