feat: add option to enable/disable HMR (options.hmr) (#264)

README.md

@@ -134,6 +134,7 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
+|**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
 |**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
 |**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
 |**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
@@ -142,6 +143,21 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
 |**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
 
+### `hmr`
+
+Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
+This could be used for non local development and production.
+
+**webpack.config.js**
+```js
+{
+ loader: 'style-loader'
+ options: {
+ hmr: false
+ }
+}
+```
+
 ### `base`
 
 This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s. `base` allows you to prevent either the *app*'s css (or *DllPlugin2*'s css) from overwriting *DllPlugin1*'s css by specifying a css module id base which is greater than the range used by *DllPlugin1* e.g.:

index.js

@@ -17,6 +17,24 @@ module.exports.pitch = function (request) {
 
  validateOptions(require('./options.json'), options, 'Style Loader')
 
+ options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
+ var hmrCode = [
+ "// Hot Module Replacement",
+ "if(module.hot) {",
+ " // When the styles change, update the <style> tags",
+ " if(!content.locals) {",
+ " module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
+ " var newContent = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
+ " if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
+ " update(newContent);",
+ " });",
+ " }",
+ " // When the module is disposed, remove the <style> tags",
+ " module.hot.dispose(function() { update(); });",
+ "}"
+ ].join("\n");
+
  return [
  "// style-loader: Adds some css to the DOM by adding a <style> tag",
  "",
@@ -31,18 +49,6 @@ module.exports.pitch = function (request) {
  "// add the styles to the DOM",
  "var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyles.js")) + ")(content, options);",
  "if(content.locals) module.exports = content.locals;",
- "// Hot Module Replacement",
- "if(module.hot) {",
- " // When the styles change, update the <style> tags",
- " if(!content.locals) {",
- " module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
- " var newContent = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
- " if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
- " update(newContent);",
- " });",
- " }",
- " // When the module is disposed, remove the <style> tags",
- " module.hot.dispose(function() { update(); });",
- "}"
+ options.hmr ? hmrCode : ""
  ].join("\n");
 };

lib/addStyleUrl.js

@@ -18,6 +18,8 @@ module.exports = function addStyleUrl (url, options) {
 
  options.attrs = typeof options.attrs === "object" ? options.attrs : {};
 
+ options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
  var link = document.createElement("link");
 
  link.rel = "stylesheet";
@@ -30,7 +32,7 @@ module.exports = function addStyleUrl (url, options) {
 
  head.appendChild(link);
 
- if (module.hot) {
+ if (options.hmr && module.hot) {
  return function(url) {
  if(typeof url === "string") {
  link.href = url;
@@ -39,4 +41,4 @@ module.exports = function addStyleUrl (url, options) {
  }
  };
  }
-}
+}

options.json

@@ -2,6 +2,9 @@
 {
  "type": "object",
  "properties": {
+ "hmr": {
+ "type": "boolean"
+ },
  "base": {
  "type": "number"
  },

package.json

@@ -24,6 +24,7 @@
  "jsdom": "^9.12.0",
  "memory-fs": "^0.4.1",
  "mocha": "^3.4.2",
+ "sinon": "^2.4.1",
  "standard-version": "^4.0.0",
  "webpack": "^2.6.1"
  },

test/basicTest.js

@@ -5,7 +5,8 @@ describe("basic tests", function() {
  var path = require("path");
 
  var utils = require("./utils"),
- runCompilerTest = utils.runCompilerTest;
+ runCompilerTest = utils.runCompilerTest,
+ runSourceTest = utils.runSourceTest;
 
  var fs;
 
@@ -60,6 +61,18 @@ describe("basic tests", function() {
  }
  };
 
+ var setupWebpackConfig = function() {
+ fs = utils.setup(webpackConfig, jsdomHtml);
+
+ // Create a tiny file system. rootDir is used because loaders are referring to absolute paths.
+ fs.mkdirpSync(rootDir);
+ fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
+ fs.writeFileSync(rootDir + "style.css", requiredCss);
+ fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
+ fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
+ fs.writeFileSync(rootDir + "localComposing.css", localComposingCss);
+ };
+
  beforeEach(function() {
  // Reset all style-loader options
  for (var member in styleLoaderOptions) {
@@ -70,15 +83,7 @@ describe("basic tests", function() {
  cssRule[member] = defaultCssRule[member];
  }
 
- fs = utils.setup(webpackConfig, jsdomHtml);
-
- // Create a tiny file system. rootDir is used because loaders are refering to absolute paths.
- fs.mkdirpSync(rootDir);
- fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
- fs.writeFileSync(rootDir + "style.css", requiredCss);
- fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
- fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
- fs.writeFileSync(rootDir + "localComposing.css", localComposingCss);
+ setupWebpackConfig();
  }); // before each
 
  it("insert at bottom", function(done) {
@@ -405,6 +410,25 @@ describe("basic tests", function() {
 
  runCompilerTest(expected, done);
  });
+ });
+
+ describe("hmr option", function() {
+
+ it("should output HMR code block by default", function(done) {
+ runSourceTest(/Hot Module Replacement/g, null, done);
+ });
+
+ it("should output HMR code block when options.hmr is true", function(done) {
+ styleLoaderOptions.hmr = true;
+ setupWebpackConfig();
+ runSourceTest(/Hot Module Replacement/g, null, done);
+ });
+
+ it("should not output HMR code block when options.hmr is false", function(done) {
+ styleLoaderOptions.hmr = false;
+ setupWebpackConfig();
+ runSourceTest(null, /Hot Module Replacement/g, done);
+ });
 
  });
 

test/urlTest.js

@@ -0,0 +1,37 @@
+// Node v4 requires "use strict" to allow block scoped let & const
+"use strict";
+
+var assert = require("assert");
+var sinon = require('sinon');
+var loaderUtils = require('loader-utils');
+
+var url = require("../url");
+
+describe("url tests", function () {
+ var sandbox = sinon.sandbox.create();
+ var getOptions;
+
+ beforeEach(() => {
+ // Mock loaderUtils to override options
+ getOptions = sandbox.stub(loaderUtils, 'getOptions');
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should output HMR code by default", function () {
+ assert.equal(/Hot Module Replacement/g.test(url.pitch()), true);
+ });
+
+ it("should NOT output HMR code when options.hmr is false", function () {
+ getOptions.returns({hmr: false});
+ assert.equal(/Hot Module Replacement/g.test(url.pitch()), false);
+ });
+
+ it("should output HMR code when options.hmr is true", function () {
+ getOptions.returns({hmr: true});
+ assert.equal(/Hot Module Replacement/g.test(url.pitch()), true);
+ });
+
+});

test/useableTest.js

@@ -0,0 +1,37 @@
+// Node v4 requires "use strict" to allow block scoped let & const
+"use strict";
+
+var assert = require("assert");
+var sinon = require('sinon');
+var loaderUtils = require('loader-utils');
+
+var useable = require("../useable");
+
+describe("useable tests", function () {
+ var sandbox = sinon.sandbox.create();
+ var getOptions;
+
+ beforeEach(() => {
+ // Mock loaderUtils to override options
+ getOptions = sandbox.stub(loaderUtils, 'getOptions');
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should output HMR code by default", function () {
+ assert.equal(/Hot Module Replacement/g.test(useable.pitch()), true);
+ });
+
+ it("should NOT output HMR code when options.hmr is false", function () {
+ getOptions.returns({hmr: false});
+ assert.equal(/Hot Module Replacement/g.test(useable.pitch()), false);
+ });
+
+ it("should output HMR code when options.hmr is true", function () {
+ getOptions.returns({hmr: true});
+ assert.equal(/Hot Module Replacement/g.test(useable.pitch()), true);
+ });
+
+});

test/utils.js

@@ -72,7 +72,7 @@ module.exports = {
  virtualConsole: jsdom.createVirtualConsole().sendTo(console),
  done: function(err, window) {
  if (typeof actual === 'function') {
- assert.equal(actual.apply(window), expected); 
+ assert.equal(actual.apply(window), expected);
  } else {
  assert.equal(window.document.querySelector(selector).innerHTML.trim(), expected);
  }
@@ -83,5 +83,30 @@ module.exports = {
  }
  });
  });
+ },
+
+ /*
+ * Runs the test against Webpack compiled source code.
+ * @param {regex} regexToMatch - regex to match the source code
+ * @param {regex} regexToNotMatch - regex to NOT match the source code
+ * @param {function} done - Async callback from Mocha.
+ */
+ runSourceTest: function(regexToMatch, regexToNotMatch, done) {
+ compiler.run(function(err, stats) {
+ if (stats.compilation.errors.length) {
+ throw new Error(stats.compilation.errors);
+ }
+
+ const bundleJs = stats.compilation.assets["bundle.js"].source();
+ if (regexToMatch) {
+ assert.equal(regexToMatch.test(bundleJs), true);
+ }
+
+ if (regexToNotMatch) {
+ assert.equal(regexToNotMatch.test(bundleJs), false);
+ }
+
+ done();
+ });
  }
 };

url.js

@@ -16,11 +16,9 @@ module.exports.pitch = function (request) {
 
  validateOptions(require('./options.json'), options, 'Style Loader (URL)');
 
- return [
- "// style-loader: Adds some reference to a css file to the DOM by adding a <link> tag",
- "var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyleUrl.js")) + ")(",
- "\trequire(" + loaderUtils.stringifyRequest(this, "!!" + request) + ")",
- ", " + JSON.stringify(options) + ");",
+ options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
+ var hmrCode = [
  "// Hot Module Replacement",
  "if(module.hot) {",
  "\tmodule.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
@@ -29,4 +27,12 @@ module.exports.pitch = function (request) {
  "\tmodule.hot.dispose(function() { update(); });",
  "}"
  ].join("\n");
+
+ return [
+ "// style-loader: Adds some reference to a css file to the DOM by adding a <link> tag",
+ "var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyleUrl.js")) + ")(",
+ "\trequire(" + loaderUtils.stringifyRequest(this, "!!" + request) + ")",
+ ", " + JSON.stringify(options) + ");",
+ options.hmr ? hmrCode : ""
+ ].join("\n");
 };

useable.js

@@ -16,24 +16,10 @@ module.exports.pitch = function (request) {
 
  validateOptions(require('./options.json'), options, 'Style Loader (Useable)');
 
- return [
- "var refs = 0;",
- "var dispose;",
- "var content = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
- "if(typeof content === 'string') content = [[module.id, content, '']];",
- "if(content.locals) exports.locals = content.locals;",
- "exports.use = exports.ref = function() {",
- " if(!(refs++)) {",
- " dispose = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyles.js")) + ")(content, " + JSON.stringify(options) + ");",
- " }",
- " return exports;",
- "};",
- "exports.unuse = exports.unref = function() {",
- " if(refs > 0 && !(--refs)) {",
- " dispose();",
- " dispose = null;",
- " }",
- "};",
+ options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
+
+ var hmrCode = [
+ "// Hot Module Replacement",
  "if(module.hot) {",
  " var lastRefs = module.hot.data && module.hot.data.refs || 0;",
  " if(lastRefs) {",
@@ -53,4 +39,25 @@ module.exports.pitch = function (request) {
  " });",
  "}"
  ].join("\n");
+
+ return [
+ "var refs = 0;",
+ "var dispose;",
+ "var content = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
+ "if(typeof content === 'string') content = [[module.id, content, '']];",
+ "if(content.locals) exports.locals = content.locals;",
+ "exports.use = exports.ref = function() {",
+ " if(!(refs++)) {",
+ " dispose = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyles.js")) + ")(content, " + JSON.stringify(options) + ");",
+ " }",
+ " return exports;",
+ "};",
+ "exports.unuse = exports.unref = function() {",
+ " if(refs > 0 && !(--refs)) {",
+ " dispose();",
+ " dispose = null;",
+ " }",
+ "};",
+ options.hmr ? hmrCode : ""
+ ].join("\n");
 };