diff --git a/README.md b/README.md index 70696ce..fd40269 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index 9304aea..1bcde10 100644 --- a/index.js +++ b/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(); } diff --git a/package.json b/package.json index c65a22e..ade1398 100644 --- a/package.json +++ b/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"