feat: add option to enable/disable HMR (`options.hmr`) by drawyan · Pull Request #264 · webpack/style-loader

drawyan · 2017-09-08T21:49:33Z

Issues

Fixes HMR code block should not be output for distribution, should accept an option #263

edited by @michael-ciniawsky (Formatting && Issues)

jsf-clabot · 2017-09-08T21:49:35Z

All committers have signed the CLA.

michael-ciniawsky · 2017-09-08T23:33:12Z

    "convertToAbsoluteUrls": {
      "type": "boolean"
+    },
+    "disableHMR": {


disableHMR => hmr || hot (with default true)

michael-ciniawsky · 2017-09-08T23:37:47Z

 |**`insertInto`**|`{String}`|`<head>`|Inserts `<style></style>` into the given position|
 |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
 |**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
+|**`disableHMR`**|`{Boolean}`|`false`|Avoids outputting the unnecessary Hot Module Replacement code block, good for non local development distribution|


|**`hmr || hot`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/distribution)|

Add it as the first item in the options table please (above base)

michael-ciniawsky · 2017-09-08T23:38:14Z

 }
 ```

+### `disableHMR`


disableHMR => hmr || hot

michael-ciniawsky · 2017-09-08T23:39:47Z


+### `disableHMR`
+
+When bundling for non development environment distribution, turn this option on to avoid outputting unnecessary Hot Module Replacement code block.


Reword this sentence please

michael-ciniawsky · 2017-09-08T23:45:20Z

@drawyan Please also add a test for this

drawyan · 2017-09-11T19:12:29Z

@michael-ciniawsky New patch set updated, sorry for the delay of the weekend. Many thanks for the review!

drawyan · 2017-09-11T19:13:42Z

Sorry, accidentally closed it.

alexander-akait · 2017-09-12T12:44:23Z


 	validateOptions(require('./options.json'), options, 'Style Loader')

+	options.hot = typeof options.hmr === 'undefined' ? options.hot : options.hmr;


Can we use only one option? Example, i think hmr is better, because hot property is part of hmr (and can be misleading).

michael-ciniawsky · 2017-09-12T01:28:52Z


+	options.hot = typeof options.hmr === 'undefined' ? options.hot : options.hmr;
+
+	var hmrBlock = [


hmrBlock => hmr

michael-ciniawsky · 2017-09-12T01:30:53Z

 |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
 |**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|

+### `hmr || hot`


😛 || (OR) :D. Let's proceed with hot

michael-ciniawsky · 2017-09-12T13:46:28Z

Or hmr (just saw the review from @evilbottnawi) depending on majority, but in any case just one property please :)

drawyan · 2017-09-12T13:59:37Z

OK, I'll go with hmr

michael-ciniawsky

@drawyan Thx

alexander-akait

Good! Some remarks.

alexander-akait · 2017-09-12T14:11:08Z

-		"	// When the module is disposed, remove the <style> tags",
-		"	module.hot.dispose(function() { update(); });",
-		"}"
+		options.hmr ? hmr : ""


To avoid breaking changes set by default to true

Ohh 😲 good catch. Yep it must be true by default

This is already handled by the options.json's default value

Also my unit test covers the default case by not having any values for this option and it won't break because the ajv handles the default value from options.json correctly.

options.hmr = options.hmr || true (L19+) it shouldn't be mandatory to set this in webpack.config.js and it would be a breaking change aswell then. And please remove the default: true in case it causes a ValidationError for

{ loader: 'style-loader', options: {} }, { loader: 'style-loader', options: { other: option } }

Done and updated.

alexander-akait · 2017-09-12T14:12:46Z

+### `hmr`
+
+Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
+This could be used for non local development and distribution.


I think better to use production, distribution is misleading. distribution can be source and minified

alexander-akait · 2017-09-12T14:21:35Z


 	validateOptions(require('./options.json'), options, 'Style Loader')

+	var hmr = [


Let's return the name hmrBlock. hmr is option, hmrBlock is code block for hmr.

The Block doesn't add any semantic meaning, it's already indicated by {Array}

@michael-ciniawsky hmrCode or hmrSource?

Why not just hmr as there isn't anything to distinguish from (atm). Only options.hmr (The Options) && hmr (The Code), The fact that it's a block ({Array} Type) and it is Source Code is already fulfilled 😛 , it just needs a name. hmrCode is also fine, but it's not really needed imho

@michael-ciniawsky I think better using different variable names, even if they are stored in different places, it makes the reading easier not to be misleading, also when using destructuring it helps to avoid accidentally overriding the variable

I'll just leave as is for now

if, agreed. Still const { code } = hmr with hmr as the 'container/wrapper' then ;)

hmm, hmr being a wrapper seems overkill here, but I do agree that it shouldn't be hmr to differentiate from the option's key, and this is why I put hmrBlock to indicate it's a code block. But as @michael-ciniawsky pointed out block being a bit confusing, I would say hmrCode is my pick. Updated.

alexander-akait

@drawyan
Sorry, we forget about this lines:
https://github.com/webpack-contrib/style-loader/blob/97508ecbf735b103ea263fec9cddab929906f0aa/url.js#L25
https://github.com/webpack-contrib/style-loader/blob/4b6b70d98ae41332f02a74bca9ad5feb29a16b75/useable.js#L37
https://github.com/webpack-contrib/style-loader/blob/4b6b70d98ae41332f02a74bca9ad5feb29a16b75/lib/addStyleUrl.js#L33
And tests

michael-ciniawsky · 2017-09-12T16:15:44Z

 	var options = loaderUtils.getOptions(this) || {};

 	validateOptions(require('./options.json'), options, 'Style Loader')
+	options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;


Please use short-circuit here (options.hmr = options.hmr || true)

and space (\n) [L18]

I don't understand how options.hmr = options.hmr || true is going to work. We'll never be able to set this flag to false, right?

drawyan · 2017-09-12T19:14:07Z

@evilebottnawi I've updated other files, but not sure how to test them.

alexander-akait

Looks good, maybe we can use mock for testing this?

drawyan · 2017-09-13T15:23:06Z

@evilebottnawi Mocked and updated, please review again. Thanks!

alexander-akait

Great! Thanks!

drawyan · 2017-09-13T21:34:45Z

When will this be merged and released? My project is actually dependent on this. Thanks!

alexander-akait · 2017-09-14T08:14:39Z

@drawyan I near future we release new version, thank you!

RSNara · 2017-12-01T19:41:46Z

This is really awesome! Thanks so much for this feature. :)

drawyan mentioned this pull request Sep 8, 2017

HMR code block should not be output for distribution, should accept an option #263

Closed

michael-ciniawsky suggested changes Sep 8, 2017

View reviewed changes

michael-ciniawsky added priority: 5 (nice to have) pr_action: Rework semver: Minor severity: 4 (inconvenient) status: Pending type: Feature labels Sep 8, 2017

michael-ciniawsky added this to the 0.19.0 milestone Sep 8, 2017

michael-ciniawsky self-assigned this Sep 8, 2017

michael-ciniawsky changed the title ~~feat: introduce disableHMR option to avoid outputting unnecessary H…~~ feat: add option to enable/disable HMR (options.hmr) Sep 8, 2017

michael-ciniawsky added the flag: Needs Tests label Sep 8, 2017

drawyan force-pushed the master branch 2 times, most recently from a7013ca to 6d494cf Compare September 11, 2017 19:06

drawyan closed this Sep 11, 2017

drawyan reopened this Sep 11, 2017

alexander-akait requested changes Sep 12, 2017

View reviewed changes

michael-ciniawsky suggested changes Sep 12, 2017

View reviewed changes

michael-ciniawsky removed the flag: Needs Tests label Sep 12, 2017

drawyan force-pushed the master branch 2 times, most recently from 1d94470 to 2a07baa Compare September 12, 2017 14:09

michael-ciniawsky approved these changes Sep 12, 2017

View reviewed changes

alexander-akait requested changes Sep 12, 2017

View reviewed changes

drawyan force-pushed the master branch from 2a07baa to 192d9af Compare September 12, 2017 14:52

alexander-akait requested changes Sep 12, 2017

View reviewed changes

michael-ciniawsky reviewed Sep 12, 2017

View reviewed changes

drawyan force-pushed the master branch from 9c77cfe to 5e72144 Compare September 12, 2017 19:04

alexander-akait reviewed Sep 13, 2017

View reviewed changes

michael-ciniawsky added flag: Needs Tests pr_action: Review and removed pr_action: Rework labels Sep 13, 2017

drawyan force-pushed the master branch from 5e72144 to efbe8fe Compare September 13, 2017 15:22

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

cea8cdf

drawyan force-pushed the master branch from efbe8fe to cea8cdf Compare September 13, 2017 15:26

alexander-akait approved these changes Sep 13, 2017

View reviewed changes

michael-ciniawsky approved these changes Sep 13, 2017

View reviewed changes

michael-ciniawsky added pr_action: Merge ready status: Approved and removed flag: Needs Tests pr_action: Review status: Pending priority: 5 (nice to have) severity: 4 (inconvenient) labels Sep 13, 2017

sokra approved these changes Sep 14, 2017

View reviewed changes

alexander-akait merged commit 378e906 into webpack:master Sep 14, 2017

michael-ciniawsky removed the pr_action: Merge ready label Sep 14, 2017

mAAdhaTTah mentioned this pull request Oct 3, 2017

Disable hmr in style-loader intraxia/wp-gistpen#110

Closed

michael-ciniawsky removed this from the 0.20.0 milestone Nov 11, 2017

renovate Bot mentioned this pull request Mar 22, 2018

Update style-loader to ^0.21.0 sbardian/DebtTrackerAPI#30

Merged


		### `disableHMR`

		When bundling for non development environment distribution, turn this option on to avoid outputting unnecessary Hot Module Replacement code block.


		validateOptions(require('./options.json'), options, 'Style Loader')

		options.hot = typeof options.hmr === 'undefined' ? options.hot : options.hmr;


		options.hot = typeof options.hmr === 'undefined' ? options.hot : options.hmr;

		var hmrBlock = [


		validateOptions(require('./options.json'), options, 'Style Loader')

		var hmr = [

Uh oh!

Conversation

drawyan commented Sep 8, 2017 • edited by michael-ciniawsky Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issues

Uh oh!

jsf-clabot commented Sep 8, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky commented Sep 8, 2017

Uh oh!

drawyan commented Sep 11, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

drawyan commented Sep 11, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky commented Sep 12, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

drawyan commented Sep 12, 2017

Uh oh!

michael-ciniawsky left a comment

Choose a reason for hiding this comment

Uh oh!

alexander-akait left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexander-akait Sep 12, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky Sep 12, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

drawyan commented Sep 8, 2017 •

edited by michael-ciniawsky

Loading

jsf-clabot commented Sep 8, 2017 •

edited

Loading

drawyan commented Sep 11, 2017 •

edited

Loading

michael-ciniawsky commented Sep 12, 2017 •

edited

Loading

alexander-akait Sep 12, 2017 •

edited

Loading

michael-ciniawsky Sep 12, 2017 •

edited

Loading

michael-ciniawsky Sep 12, 2017 •

edited

Loading

alexander-akait left a comment •

edited

Loading

michael-ciniawsky Sep 12, 2017 •

edited

Loading