Skip to content

docs(guides): fix HMR Gotcha section snippet (#1463) #1464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 1, 2017
Merged

docs(guides): fix HMR Gotcha section snippet (#1463) #1464

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
956ad19
docs(guides): fix HMR Gotcha section snippet (#1463)
maheshpec Jul 30, 2017
4131dd8
Merge branch 'master' into hmr-gotcha-snippet-fix
maheshpec Jul 30, 2017
762c244
docs(guides): Remove chunk and reorganize snippet in HMR module
maheshpec Jul 31, 2017
a1ab1c9
docs(guides): minor tweaks to hot-module-replacement guide
skipjack Jul 31, 2017
91babdb
docs(guides): minor spacing fix
skipjack Jul 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions content/guides/hot-module-replacement.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ W> __HMR__ is not intended for use in production, meaning it should only be used

## Enabling HMR

This feature is great for productivity. All we need to do is update our [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration, and use webpack's built in HMR plugin.
This feature is great for productivity. All we need to do is update our [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration, and use webpack's built in HMR plugin. We'll also remove the entry point for `print.js` as it will now be consumed by the `index.js` module.

__webpack.config.js__

Expand All @@ -39,8 +39,9 @@ __webpack.config.js__

module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
- app: './src/index.js',
- print: './src/print.js'
+ app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
Expand Down Expand Up @@ -72,13 +73,6 @@ __index.js__
import _ from 'lodash';
import printMe from './print.js';

+ if (module.hot) {
+ module.hot.accept('./print.js', function() {
+ console.log('Accepting the updated printMe module!');
+ printMe();
+ })
+ }

function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
Expand All @@ -94,6 +88,13 @@ __index.js__
}

document.body.appendChild(component());
+
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's just this extra plus sign left

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that's ok, it's just indicating that a new line was added in between the last line of the script and new content. That's how we've done it in the other guides as well.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah or maybe you meant there's two plus signs? That's actually just a looking at a diff within a diff issue 😆 (there's really only one in the document).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a little confusing to view these diffs :)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah like some kind diff inception lol

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh I did mean that the new line was added, but if that's how it has been done on the other guides is fine 👍

+ if (module.hot) {
+ module.hot.accept('./print.js', function() {
+ console.log('Accepting the updated printMe module!');
+ printMe();
+ })
+ }
```

Start changing the `console.log` statement in `print.js`, and you should see the following output in the browser console.
Expand Down Expand Up @@ -131,24 +132,12 @@ This is happening because the button's `onclick` event handler is still bound to

To make this work with HMR we need to update that binding to the new `printMe` function using `module.hot.accept`:

__print.js__
__index.js__

``` diff
import _ from 'lodash';
import printMe from './print.js';

if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
- printMe();
+ document.body.removeChild(element);
+ element = component(); // Re-render the "component" to update the click handler
+ document.body.appendChild(element);
})
}

let element = component();

function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
Expand All @@ -163,7 +152,19 @@ __print.js__
return element;
}

document.body.appendChild(element);
- document.body.appendChild(component());
+ let element = component(); // Store the element to re-render on print.js changes
+ document.body.appendChild(element);

if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
- printMe();
+ document.body.removeChild(element);
+ element = component(); // Re-render the "component" to update the click handler
+ document.body.appendChild(element);
})
}
```

This is just one example, but there are many others that can easily trip people up. Luckily, there are a lot of loaders out there (some of which are mentioned below) that will make hot module replacement much easier.
Expand All @@ -173,7 +174,7 @@ This is just one example, but there are many others that can easily trip people

Hot Module Replacement with CSS is actually fairly straightforward with the help of the `style-loader`. This loader uses `module.hot.accept` behind the scenes to patch `<style>` tags when CSS dependencies are updated.

First let's install both loaders with the following command:
First let's install both loaders with the following command:

```bash
npm install --save-dev style-loader css-loader
Expand All @@ -190,8 +191,7 @@ __webpack.config.js__

module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
Expand Down Expand Up @@ -250,17 +250,6 @@ __index.js__
import printMe from './print.js';
+ import './styles.css';

if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
document.body.removeChild(element);
element = component(); // Re-render the "component" to update the click handler
document.body.appendChild(element);
})
}

let element = component();

function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
Expand All @@ -275,7 +264,18 @@ __index.js__
return element;
}

let element = component();
document.body.appendChild(element);

if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
document.body.removeChild(element);
element = component(); // Re-render the "component" to update the click handler
document.body.appendChild(element);
})
}

```

Change the style on `body` to `background: red;` and you should immediately see the page's background color change without a full refresh.
Expand Down