From e689e87ee63d9ac440f34c999a30bebf6635e6af Mon Sep 17 00:00:00 2001 From: tim_yatsenko Date: Fri, 15 Jan 2016 19:59:14 +0300 Subject: [PATCH 1/7] +introduce jade-loader configurating from webpack config --- index.js | 27 ++++++++++++++++++++++++--- package.json | 3 ++- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 9304aea..3bf7205 100644 --- a/index.js +++ b/index.js @@ -3,6 +3,7 @@ Author Scott Beck @bline */ +var _ = require('lodash') var loaderUtils = require("loader-utils"); var Path = require('path'); @@ -12,16 +13,19 @@ module.exports = function(source) { var query = loaderUtils.parseQuery(this.query); var dirname = Path.dirname(this.resourcePath); - - var tmpl = jade.compileClientWithDependenciesTracked(source, { + var jadeOptions = _.defaults({ filename: this.resourcePath, self: query.self, pretty: query.pretty, - locals: query, + }, getLoaderConfig(this), { compileDebug: true, externalRuntime: false }); + jadeOptions.locals = _.assign(jadeOptions.locals, query); + + var tmpl = jade.compileClientWithDependenciesTracked(source, jadeOptions); + tmpl.dependencies.forEach(function(dep) { this.addDependency(dep); }.bind(this)); @@ -66,3 +70,20 @@ function toString(key, value) { if (!(value instanceof RegExp)) return value; return value.toString(); } + +/** + * Check the loader query and webpack config for loader options. If an option is defined in both places, + * the loader query takes precedence. + * + * @param {Loader} loaderContext + * @returns {Object} + */ +function getLoaderConfig(loaderContext) { + var query = utils.parseQuery(loaderContext.query); + var configKey = query.config || 'jadeLoader'; + var config = loaderContext.options[configKey] || {}; + + delete query.config; + + return assign({}, config, query); +} diff --git a/package.json b/package.json index c65a22e..5b9cc5f 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "description": "jade to html loader module for webpack", "dependencies": { "enhanced-require": "^0.5.0-beta6", - "loader-utils": "0.2.x" + "loader-utils": "0.2.x", + "lodash": "^4.0.0" }, "peerDependencies": { "jade": "^1.7.0" From d443a3139b53ef9431b77e8e98d8afe64ddc1460 Mon Sep 17 00:00:00 2001 From: tim_yatsenko Date: Fri, 15 Jan 2016 20:24:43 +0300 Subject: [PATCH 2/7] *fix undefined variables and unnecessary config merge --- index.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/index.js b/index.js index 3bf7205..de3e255 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,7 @@ /* - 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"); @@ -17,7 +17,7 @@ module.exports = function(source) { filename: this.resourcePath, self: query.self, pretty: query.pretty, - }, getLoaderConfig(this), { + }, getLoaderConfig(this, query), { compileDebug: true, externalRuntime: false }); @@ -78,12 +78,11 @@ function toString(key, value) { * @param {Loader} loaderContext * @returns {Object} */ -function getLoaderConfig(loaderContext) { - var query = utils.parseQuery(loaderContext.query); +function getLoaderConfig(loaderContext, query) { var configKey = query.config || 'jadeLoader'; var config = loaderContext.options[configKey] || {}; delete query.config; - return assign({}, config, query); + return config; } From 2a9537c9bd5a15df8b2fc35aae1d9961b51d6543 Mon Sep 17 00:00:00 2001 From: tim_yatsenko Date: Fri, 15 Jan 2016 22:19:54 +0300 Subject: [PATCH 3/7] fix passing locals to template --- index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index de3e255..008f611 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ Author Scott Beck @bline */ -var _ = require('lodash') +var _ = require('lodash'); var loaderUtils = require("loader-utils"); var Path = require('path'); @@ -18,11 +18,10 @@ module.exports = function(source) { self: query.self, pretty: query.pretty, }, getLoaderConfig(this, query), { - compileDebug: true, externalRuntime: false }); - jadeOptions.locals = _.assign(jadeOptions.locals, query); + var jadeLocals = _.assign(jadeOptions.locals, query); var tmpl = jade.compileClientWithDependenciesTracked(source, jadeOptions); @@ -59,7 +58,7 @@ module.exports = function(source) { this.addDependency && this.addDependency(file); } - return mod(query.locals || query); + return mod(jadeLocals); } function resolve(path) { @@ -76,6 +75,7 @@ function toString(key, value) { * the loader query takes precedence. * * @param {Loader} loaderContext + * @param {object} query * @returns {Object} */ function getLoaderConfig(loaderContext, query) { From be7c1396361423a19c40a095105c027e52f5c578 Mon Sep 17 00:00:00 2001 From: tim_yatsenko Date: Mon, 25 Jan 2016 20:12:27 +0300 Subject: [PATCH 4/7] +update readme +update version --- README.md | 108 +++++++++++++++++++++++++++++++++++++++++++++++---- package.json | 2 +- 2 files changed, 101 insertions(+), 9 deletions(-) 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/package.json b/package.json index 5b9cc5f..e529dbe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jade-html-loader", - "version": "0.0.2", + "version": "0.0.3", "author": { "name": "Scott Beck (@bline)" }, From 80e90449c04647386f4dab8e7098fc7521e56f4d Mon Sep 17 00:00:00 2001 From: Timofey_Yatsenko Date: Wed, 19 Jul 2017 18:46:51 +0200 Subject: [PATCH 5/7] compatibility with webpack 2 --- index.js | 94 +++++++++++++++++++--------------------------------- package.json | 2 +- 2 files changed, 36 insertions(+), 60 deletions(-) diff --git a/index.js b/index.js index 008f611..1bcde10 100644 --- a/index.js +++ b/index.js @@ -8,81 +8,57 @@ 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({ - filename: this.resourcePath, - self: query.self, - pretty: query.pretty, - }, getLoaderConfig(this, query), { - externalRuntime: false - }); + var jadeOptions = _.defaults(options, { + filename: this.resourcePath, + externalRuntime: false + }); - var jadeLocals = _.assign(jadeOptions.locals, query); + var tmpl = jade.compileClientWithDependenciesTracked(source, jadeOptions); - 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(jadeLocals); -} + 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(); -} - -/** - * Check the loader query and webpack config for loader options. If an option is defined in both places, - * the loader query takes precedence. - * - * @param {Loader} loaderContext - * @param {object} query - * @returns {Object} - */ -function getLoaderConfig(loaderContext, query) { - var configKey = query.config || 'jadeLoader'; - var config = loaderContext.options[configKey] || {}; - - delete query.config; - - return config; + if (!(value instanceof RegExp)) return value; + return value.toString(); } diff --git a/package.json b/package.json index e529dbe..383049a 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "description": "jade to html loader module for webpack", "dependencies": { "enhanced-require": "^0.5.0-beta6", - "loader-utils": "0.2.x", + "loader-utils": "^0.2.17", "lodash": "^4.0.0" }, "peerDependencies": { From 5b23d9d8741aa734eb93c931e3bcaf97436b35bb Mon Sep 17 00:00:00 2001 From: Timofey_Yatsenko Date: Wed, 19 Jul 2017 18:48:57 +0200 Subject: [PATCH 6/7] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 383049a..4795d83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jade-html-loader", - "version": "0.0.3", + "version": "0.0.4", "author": { "name": "Scott Beck (@bline)" }, From 901cb9c0c57114d28a903736b79d34b0fdc64b5d Mon Sep 17 00:00:00 2001 From: Timofey_Yatsenko Date: Wed, 19 Jul 2017 18:52:44 +0200 Subject: [PATCH 7/7] update loader utils --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4795d83..ade1398 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "description": "jade to html loader module for webpack", "dependencies": { "enhanced-require": "^0.5.0-beta6", - "loader-utils": "^0.2.17", + "loader-utils": "^1.1.0", "lodash": "^4.0.0" }, "peerDependencies": {