added: support for the 'parseDynamicRoutes' argument

Author: emaphp

README.md

@@ -6,7 +6,7 @@ An Underscore.js and Lodash template loader for Webpack
 ### Changelog
 
 <br>
- * 0.7.1: FIX: Check if attribute contains a template expression before replacing it.
+ * 0.7.2: Support for the `parseDynamicRoutes` argument (deactivated by default).
 
 ### Installation
 
@@ -229,6 +229,39 @@ 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/cat-<%- currentCat.url %>.png" class="cat-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/cat-<%- currentCat.url %>.png" -->
+<img src="/img/cat-<%- currentCat.url %>.png" class="cat-img">
+```
+
 ### Macros
 
 Macros allow additional features like including templates or inserting custom text in compiled templates.

index.js

@@ -21,7 +21,8 @@ module.exports = function(content) {
         parseMacros = true,
         engine = false,
         withImports = false,
-        attributes = ['img:src'];
+        attributes = ['img:src'],
+        parseDynamicRoutes = false;
 
     // Parse arguments
     var query = this.query instanceof Object ? this.query : loaderUtils.parseQuery(this.query);
@@ -66,6 +67,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
@@ -84,7 +90,7 @@ module.exports = function(content) {
     // Parse attributes
     var 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

@@ -37,7 +37,7 @@ var isTemplate = function (content) {
 };
 
 // AttributeContext class
-var AttributeContext = function (isRelevantTagAttr, usid, root) {
+var AttributeContext = function (isRelevantTagAttr, usid, root, parseDynamicRoutes) {
     this.currentDirective = null;
     this.matches = [];
     this.isRelevantTagAttr = isRelevantTagAttr;
@@ -47,6 +47,7 @@ var AttributeContext = function (isRelevantTagAttr, usid, root) {
     };
     this.data = {};
     this.root = root;
+    this.parseDynamicRoutes = parseDynamicRoutes;
 };
 
 AttributeContext.prototype.replaceMatches = function(content) {
@@ -56,8 +57,10 @@ AttributeContext.prototype.replaceMatches = function(content) {
 
     this.matches.forEach(function (match) {
         if (isTemplate(match.value)) {
-            // Replate template if a "root" option has been defined
-            if (pathIsAbsolute(match.value) && self.root != undefined) {
+            // Replace attribute value
+            // This is used if it contains a template expression and both the "root" and "parseDynamicRoutes"
+            // were defined
+            if (pathIsAbsolute(match.value) && self.root !== undefined) {
                 var x = content.pop();
                 content.push(x.substr(match.start + match.length));
                 content.push(match.expression);
@@ -126,7 +129,7 @@ var processMatch = function (match, strUntilValue, name, value, index) {
 
     // Try and set "root" directory when a dynamic attribute is found
     if (isTemplate(value)) {
-        if (pathIsAbsolute(value) && self.root != undefined) {
+        if (pathIsAbsolute(value) && self.root !== undefined && self.parseDynamicRoutes) {
             // Generate new value for replacement
             expression = loaderUtils.urlToRequest(value, self.root);
         }
@@ -164,7 +167,7 @@ var specs = {
 
 var parser = new Parser(specs);
 
-module.exports = function parse(html, isRelevantTagAttr, usid, root) {
-    var context = new AttributeContext(isRelevantTagAttr, usid, root);
+module.exports = function parse(html, isRelevantTagAttr, usid, root, parseDynamicRoutes) {
+    var context = new AttributeContext(isRelevantTagAttr, usid, root, parseDynamicRoutes);
     return parser.parse('outside', html, context);
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "underscore-template-loader",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "An Underscore and Lodash template loader for Webpack",
   "main": "index.js",
   "homepage": "https://github.com/emaphp/underscore-template-loader",

test/loaderTest.js

@@ -155,6 +155,18 @@ describe('loader', function () {
             done();
         });
     });
+
+    it('should parse dynamic attributes with parseDynamicRoutes', function (done) {
+        testTemplate(loader, 'dynamic-attribute-with-parseDynamicRoutes.html', {
+            query: {
+                root: 'myapp',
+                parseDynamicRoutes: true
+            }
+        }, function (output) {
+            assert.equal(output, loadOutput('dynamic-attribute-with-parseDynamicRoutes.txt'));
+            done();
+        });
+    });
 
     // FIXME: Changing the underscore tags changes it globally
     it('should allow custom underscore tags', function (done) {

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

@@ -0,0 +1,2 @@
+<img src="img/cat-<%- currentCat.url %>.png" class="cat-img">
+<img src="/img/dog-<%- currentDog.url %>.png" class="dog-img">

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

@@ -0,0 +1,11 @@
+module.exports = function(obj){
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
+with(obj||{}){
+__p+='<img src="img/cat-'+
+((__t=( currentCat.url ))==null?'':_.escape(__t))+
+'.png" class="cat-img">\n<img src="myapp/img/dog-'+
+((__t=( currentDog.url ))==null?'':_.escape(__t))+
+'.png" class="dog-img">\n';
+}
+return __p;
+};

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

@@ -3,7 +3,7 @@ var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments
 with(obj||{}){
 __p+='<img src="img/cat-'+
 ((__t=( currentCat.url ))==null?'':_.escape(__t))+
-'.png" class="cat-img">\n<img src="/bar/img/dog-'+
+'.png" class="cat-img">\n<img src="/img/dog-'+
 ((__t=( currentDog.url ))==null?'':_.escape(__t))+
 '.png" class="dog-img">\n';
 }