Proof of concept: simple hot reloading

[gaearon]

Couldn't resist. Integrated with our error handling. (So errors cause refresh on next save.)

• This would need a Babel transform, for now I just hardcoded what it would do
• Only works if you have DevTools installed/enabled
• This is annoying Updating app.js causes webpack dev server to report error and then reload the page #1880
• Editing after initial error should refresh
• Editing after compile error should still be hot
• Chrome sourcemaps don't update Hot reloading doesn't update Chrome sourcemaps #2407
• TESTS
• "Click to source" breaks in overlay because after first edit, path looks like ./packages/react-scripts/template/src/Logo.js?989a:5. Need to figure out where that ?989a comes from, it doesn't make sense (all edits after the first one get that name in Sources pane). Even changing devtoolFallbackModuleFilenameTemplate to repeat devtoolModuleFilenameTemplate didn't help: webpack still tries to give different source names to the same file on first reload.

I only want to enable this for files that export a single functional component defined with JSX.
The goal is not to be comprehensive but to always work well, and create trust.

[Timer]

Details

Per request, I made the babel plugin. I've never made one before so I dunno if I did things wrong, but it works. 🤷‍♀️

You might need to wipe your babel caches (echo y | ./node_modules/.bin/lerna clean && npm install); they don't play well with hot reloading.
I had to add a safety check in there (typeof data.acceptNext === 'function') which prevents the caches from causing runtime errors when funky things happen.

Turning off cacheDirectory fixes the glitches. Maybe it'll work better with cache-loader.

Here's what I mean by the caches act weird, notice it not swapping back to an older component after save / hard refreshing next:

Works as desired with cacheDirectory off:

[gaearon]

This is simpler to do with "templates".

[Timer]

Code has been updated to use babel-template and now highlights nodes that are reloaded.

[marcofugaro]

That looks nice! Did you have more time to work on it?

[Timer]

@marcofugaro we're currently waiting on some browser bugs to be fixed.

[rvion]

we're currently waiting on some browser bugs to be fixed.

still waiting ?

[bestwestern]

Could someone please explain how to get HMR (even though it may still be a bit buggy)

[ro-savage]

Hopefully @aslushnikov will be able to updated on the source map bug in Chrome DevTools. Once thats fixed it should be ready to merge.

[aslushnikov]

@ro-savage: the fix for crbug.com/438251 has landed and will be available on tomorrow's Canary.

[gaearon]

This is amazing, thank you @aslushnikov!

We should start getting this up to date.

[onpaws]

Curious, is this working now?
What needs to happen to close #2407?

Happy to help if someone can please point me in the right direction.

[mnemanja]

Hi @gaearon, any news regarding the hot reloading integration progress?

[gaearon]

There are things with higher priority that are currently being worked on and are blockers for v2.
This one is not a blocker. I think it'll get in this year though.

[eddiemonge]

@gaearon this still on track for this year?

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[gausie]

Please bot do not stale 🙏🤖

[ahmad2smile]

Fingers crossed 🤞

[lstkz]

This is the most annoying to me "Editing after compile error should still be hot".
Related to #6694

[gaearon]

Ok so I have something you can try.

https://twitter.com/dan_abramov/status/1139876172903395329

https://twitter.com/dan_abramov/status/1139699841204809729 (But use 0.0.5 rather than 0.0.3)

[mrmckeb]

Closing in favour of #5958.