fix require images, update tests, docs

README.md

@@ -197,6 +197,38 @@ module.exports = {
 };
 ```
 
+Dynamic attributes won't be afected by this behaviour by default.
+
+```html
+<!-- Ignore "root" argument if attribute contains a template expression -->
+<img src="/img/{{doge}}.png" class="doge-img">
+```
+
+In order to append the root directory you'll need to specify the `parseDynamicRoutes` argument.
+
+```javascript
+module.exports = {
+    //...
+
+    module: {
+        loaders: [
+            {
+                test: /\.html$/,
+                loader: "underscore-template-loader",
+                query: {
+                    root: "myapp",
+                    parseDynamicRoutes: true
+                }
+            }
+        ]
+    }
+};
+```
+
+```html
+<!-- Attribute now translates to "myapp/img/{{doge}}.png" -->
+<img src="/img/cat-<%- currentCat.url %>.png" class="doge-img">
+```
 
 <br>
 ###Macros

index.js

@@ -26,7 +26,8 @@ module.exports = function(content) {
     // Default arguments
     var root,
         parseMacros = true,
-        attributes = ['img:src'];
+        attributes = ['img:src'],
+        parseDynamicRoutes = false;
 
     // Parse arguments
     var query = this.query instanceof Object ? this.query : loaderUtils.parseQuery(this.query);
@@ -47,6 +48,11 @@ module.exports = function(content) {
             var filenameRelative = path.relative(query.prependFilenameComment, this.resource);
             content = '\n<!-- ' + filenameRelative + '  -->\n' + content;
         }
+
+        // Check if dynamic routes must be parsed
+        if (query.parseDynamicRoutes !== undefined) {
+            parseDynamicRoutes = !!query.parseDynamicRoutes;
+        }
     }
 
     // Include additional macros
@@ -68,7 +74,7 @@ module.exports = function(content) {
     // Parse attributes
     attributesContext = attributeParser(content, function (tag, attr) {
         return attributes.indexOf(tag + ':' + attr) !== -1;
-    }, 'ATTRIBUTE', root);
+    }, 'ATTRIBUTE', root, parseDynamicRoutes);
     content = attributesContext.replaceMatches(content);
 
     // Compile template

lib/attributeParser.js

@@ -111,7 +111,7 @@ AttributeContext.prototype.resolveAttributes = function(content) {
 
         // Make resource available through file-loader
         var fallbackLoader = require.resolve('../file-loader.js') + '?url=' + encodeURIComponent(url);
-        return "' + require(" + JSON.stringify(fallbackLoader + '!' + loaderUtils.urlToRequest(url, self.root)) + ") + '";
+        return "\" + require(" + JSON.stringify(fallbackLoader + '!' + loaderUtils.urlToRequest(url, self.root)) + ") + \"";
     });
 };
 

lib/macroParser.js

@@ -1,6 +1,8 @@
 var Parser = require("fastparse");
 
-// Macro class
+/**
+ * MACRO CLASS
+ */
 var Macro = function(name, index, length) {
     this.name = name;
     this.start = index;
@@ -18,16 +20,22 @@ Macro.prototype.getArguments = function() {
     return args;
 };
 
-// MacroContext class
+/**
+ * MACROCONTEXT CLASS
+ */
 var MacroContext = function(isMacroAvailable, usid) {
     this.currentDirective = null;
     this.matches = [];
     this.isMacroAvailable = isMacroAvailable;
     this.usid = usid;
+    this.data = {};
+
+    // The ident method builds a unique string expression that replaces an macro.
+    // This value is replaced again for the expected expression once the template
+    // has been transformed to a function
     this.ident = function() {
         return "____" + usid + Math.random() + "____";
     };
-    this.data = {};
 };
 
 MacroContext.prototype.replaceMatches = function(content) {

lib/macros.js

@@ -12,13 +12,15 @@ var strRepeat = function(str, times) {
 
 // Default macros
 module.exports = {
+    // Includes a child template using the same context
     require: function(resourcePath) {
         // Since Handlebars v4, an extra argument called "container" is passed to the helper wrapper.
         // In order to keep compatibility, we remove the first argument from the list if we detect that more than 6 arguments are available.
         // See issue #9 for details.
         return "require(" + JSON.stringify(loaderUtils.urlToRequest(resourcePath)) + ").apply(null, Array.prototype.slice.call(arguments, arguments.length > 6))";
     },
 
+    // Includes the contents of a given resource
     include: function(resourcePath) {
         return "require(" + JSON.stringify(loaderUtils.urlToRequest(resourcePath)) + ")";
     },

test/lib/loadOutput.js

@@ -2,7 +2,9 @@ var fs = require('fs');
 var path = require('path');
 
 function loadOutput(outputPath) {
-    return fs.readFileSync(path.join(path.dirname(__dirname), 'templates/output', outputPath)).toString();
+    return fs.readFileSync(path.join(path.dirname(__dirname), 'templates/output', outputPath))
+      .toString()
+      .replace(/%%LOADER%%/g, require.resolve('../../file-loader.js'));
 }
 
 module.exports = loadOutput;

test/loaderTest.js

@@ -94,11 +94,22 @@ describe('loader', function () {
     it('should leave dynamic attribute unaltered', function (done) {
         testTemplate(loader, 'dynamic-attribute.html', {
             query: {
-                root: '/bar'
             }
         }, function (output) {
             assert.equal(removeFirstline(output), loadOutput('dynamic-attribute.txt'));
             done();
         });
     });
+
+    it('should modify dynamic attributes', function (done) {
+        testTemplate(loader, 'dynamic-attribute-with-parseDynamicRoutes.html', {
+            query: {
+                root: '/bar',
+                parseDynamicRoutes: true
+            }
+        }, function (output) {
+            assert.equal(removeFirstline(output), loadOutput('dynamic-attribute-with-parseDynamicRoutes.txt'));
+            done();
+        });
+    });
 });

test/templates/dynamic-attribute-with-parseDynamicRoutes.html

@@ -0,0 +1,2 @@
+<img src="images/{{imgFile}}" alt="{{imgDescription}}">
+<img src="/bar/images/{{imgFile}}">

test/templates/dynamic-attribute-with-root.html

@@ -0,0 +1,2 @@
+<img src="images/{{imgFile}}" alt="{{imgDescription}}">
+<img src="/images/{{imgFile}}">

test/templates/output/absolute-image-with-root.txt

@@ -1,3 +1,3 @@
 module.exports = (Handlebars['default'] || Handlebars).template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-    return "<img src=\"" + require("/bar/asdf.png") + "\">\n";
+    return "<img src=\"" + require("%%LOADER%%?url=%2Fasdf.png!/bar/asdf.png") + "\">\n";
 },"useData":true});

test/templates/output/custom-attributes.txt

@@ -1,3 +1,3 @@
 module.exports = (Handlebars['default'] || Handlebars).template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-    return "<link rel=\"stylesheet\" href=\"" + require("./style.css") + "\">\n<img src=\"" + require("./test.png") + "\">\n";
+    return "<link rel=\"stylesheet\" href=\"" + require("%%LOADER%%?url=style.css!./style.css") + "\">\n<img src=\"" + require("%%LOADER%%?url=test.png!./test.png") + "\">\n";
 },"useData":true});

test/templates/output/dynamic-attribute-with-parseDynamicRoutes.txt

@@ -0,0 +1,11 @@
+module.exports = (Handlebars['default'] || Handlebars).template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "<img src=\"images/"
+    + alias3(((helper = (helper = helpers.imgFile || (depth0 != null ? depth0.imgFile : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"imgFile","hash":{},"data":data}) : helper)))
+    + "\" alt=\""
+    + alias3(((helper = (helper = helpers.imgDescription || (depth0 != null ? depth0.imgDescription : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"imgDescription","hash":{},"data":data}) : helper)))
+    + "\">\n<img src=\"/bar/images/"
+    + alias3(((helper = (helper = helpers.imgFile || (depth0 != null ? depth0.imgFile : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"imgFile","hash":{},"data":data}) : helper)))
+    + "\">";
+},"useData":true});

test/templates/output/image.txt

@@ -1,3 +1,3 @@
 module.exports = (Handlebars['default'] || Handlebars).template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-    return "<img src=\"" + require("./nyan.png") + "\">\n";
+    return "<img src=\"" + require("%%LOADER%%?url=nyan.png!./nyan.png") + "\">\n";
 },"useData":true});