Passing locals via webpack.config.js

README.md

@@ -1,24 +1,116 @@
 # jade html loader for webpack
+Unlike the [webpack/jade-loader](https://github.com/webpack/jade-loader) it allows you to get HTML string back instead of a function reference.
 
 ## Usage
 
+[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
+
 ``` javascript
 var html = require("jade-html!./file.jade");
-// => returns file.jade content as html
+// returns file.jade content as html string
 ```
 
-Allows you to get HTML back instead of a function reference. I found this
-useful for templates which render server side.
+### Apply via webpack config
+
+It's recommended to adjust your `webpack.config` so `jade-html` is applied automatically on all files ending on `.jade`:
+
+``` javascript
+module.exports = {
+  ...
+  module: {
+    loaders: [
+      {
+        test: /\.jade$/,
+        loaders: [jade-html]
+      }
+    ]
+  }
+};
+```
+
+Then you only need to write: `require("./file.jade")`.
+
+## Jade compiler options and template locals
+
+You can pass options to jade by defining a `jadeLoader`-property on your `webpack.config.js`.
+See jade [API documentation](http://jade-lang.com/api/) for all available options.
+
+All properties from webpack config will be passed to jade compiler function.
+
+
+``` javascript
+module.exports = {
+  ...
+  module: {
+    loaders: [
+     {
+       test: /\.jade$/,
+       loaders: [jade-html]
+     }
+    ]
+  }
+  jadeLoader: {
+     locals: {
+       foo: 'bar',
+     },
+     pretty: true,
+     debug: false,
+     cache: true,
+     basedir: sourcePath
+  }
+};
+```
 
-Possible options are (all passed to jade.compile()):
+Passing your options as [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters) is also supported,
+but can get confusing if you need to set a lot of options.
+
+If you need to define two different loader configs, you can also change the config's property name via `jade-html?config=otherJadeLoaderConfig`:
+
+``` javascript
+module.exports = {
+  ...
+  module: {
+    loaders: [
+      {
+        test: /\.scss$/,
+        loaders: ["jade-html?config=otherJadeLoaderConfig"]
+      }
+    ]
+  }
+  otherJadeLoaderConfig: {
+    ...
+  }
+};
+```
+
+### Locals
+As you can see above we can pass locals via `webpack.config.js`:
+
+``` javascript
+module.exports = {
+  ...
+    jadeLoader: {
+     locals: {
+       foo: 'bar',
+       anyExpression: require('someModule')
+     },
+    }
+};
+```
+
+Also you can pass locals via query string:
+
+``` javascript
+require('template.jade?foo=bar')
+```
 
-* self   - set the context
+All params will be passed to template.
 
-* pretty - boolean, output pretty html or not
+## require() in templates
 
-* locals - set locals
+You can use `require()` in jade templates to utilize webpack functionality.
 
-Don't forget to polyfill `require` if you want to use it in node.
+Don't forget to polyfill `require()` if you want to use it.
 See [enhanced-require](https://github.com/webpack/enhanced-require) documentation.
 
 ## License

index.js

@@ -1,68 +1,64 @@
 /*
-	MIT License http://www.opensource.org/licenses/mit-license.php
-	Author Scott Beck @bline
-*/
+ MIT License http://www.opensource.org/licenses/mit-license.php
+ Author Scott Beck @bline
+ */
 
+var _ = require('lodash');
 var loaderUtils = require("loader-utils");
 var Path = require('path');
 
 module.exports = function(source) {
-	this.cacheable && this.cacheable(true);
-	var jade = require("jade");
-	var query = loaderUtils.parseQuery(this.query);
+    var jade = require("jade");
+    var options = loaderUtils.getOptions(this);
 
-	var dirname = Path.dirname(this.resourcePath);
+    var jadeOptions = _.defaults(options, {
+        filename: this.resourcePath,
+        externalRuntime: false
+    });
 
-	var tmpl = jade.compileClientWithDependenciesTracked(source, {
-		filename: this.resourcePath,
-		self: query.self,
-		pretty: query.pretty,
-		locals: query,
-		compileDebug: true,
-		externalRuntime: false
-	});
+    var tmpl = jade.compileClientWithDependenciesTracked(source, jadeOptions);
 
-	tmpl.dependencies.forEach(function(dep) {
-		this.addDependency(dep);
-	}.bind(this));
+    tmpl.dependencies.forEach(function(dep) {
+        this.addDependency(dep);
+    }.bind(this));
 
-	var opts = this.options;
+    var opts = this.options;
 
-	var loaders = opts.module ? opts.module.loaders : opts.resolve.loaders;
+    var loaders = opts.module ? opts.module.loaders : opts.resolve.loaders;
 
-	var mopts = Object.keys(opts).reduce(function(acc, key) {
-		acc[key] = opts[key];
-		return acc;
-	}, {});
+    var mopts = Object.keys(opts).reduce(function(acc, key) {
+        acc[key] = opts[key];
+        return acc;
+    }, {});
 
-	mopts.recursive = true;
-	mopts.resolve = {
-		loaders: loaders,
-		extensions: opts.resolve.extensions,
-		modulesDirectories: (opts.resolve.modulesDirectories || []).concat(opts.resolve.fallback || [])
-	};
+    mopts.recursive = true;
+    mopts.resolve = {
+        loaders: loaders,
+        extensions: opts.resolve.extensions,
+        modulesDirectories: (opts.resolve.modulesDirectories || []).concat(opts.resolve.fallback || [])
+    };
 
-	var er = 'var jade = require(' + resolve('jade/runtime') + ');\nrequire = require(' + resolve('enhanced-require') + ')(module, require(' + resolve('./json2regexp') + ')(' +
-				JSON.stringify(mopts, toString) + '));\n';
+    var er = 'var jade = require(' + resolve('jade/runtime') + ');\nrequire = require(' + resolve('enhanced-require') + ')(module, require(' + resolve('./json2regexp') + ')(' +
+        JSON.stringify(mopts, toString) + '));\n';
 
-	var moduleBody = er + tmpl.body + '\n\nmodule.exports = template;\ntemplate.__require = require';
+    var moduleBody = er + tmpl.body + '\n\nmodule.exports = template;\ntemplate.__require = require';
 
-	var mod = this.exec(moduleBody, this.resource);
+    var mod = this.exec(moduleBody, this.resource);
 
-	var _require = mod.__require;
+    var _require = mod.__require;
 
-	for (var file in _require.contentCache) {
-		this.addDependency && this.addDependency(file);
-	}
+    for (var file in _require.contentCache) {
+        this.addDependency && this.addDependency(file);
+    }
 
-	return mod(query.locals || query);
-}
+    return mod(jadeOptions.locals);
+};
 
 function resolve(path) {
-	return JSON.stringify(require.resolve(path));
+    return JSON.stringify(require.resolve(path));
 }
 
 function toString(key, value) {
-	if (!(value instanceof RegExp)) return value;
-	return value.toString();
+    if (!(value instanceof RegExp)) return value;
+    return value.toString();
 }

package.json

@@ -1,13 +1,14 @@
 {
   "name": "jade-html-loader",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "author": {
     "name": "Scott Beck (@bline)"
   },
   "description": "jade to html loader module for webpack",
   "dependencies": {
     "enhanced-require": "^0.5.0-beta6",
-    "loader-utils": "0.2.x"
+    "loader-utils": "^1.1.0",
+    "lodash": "^4.0.0"
   },
   "peerDependencies": {
     "jade": "^1.7.0"