Skip to content
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.

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

Proof of concept: simple hot reloading #2304

Open
wants to merge 19 commits into
base: master
from

Conversation

Projects
None yet
@gaearon
Copy link
Member

gaearon commented May 21, 2017

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 #1880
  • Editing after initial error should refresh
  • Editing after compile error should still be hot
  • Chrome sourcemaps don't update #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

This comment has been minimized.

Copy link
Collaborator

Timer commented May 23, 2017

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:

function decorateFunctionName(t, name) {
return t.TryStatement(
t.BlockStatement([
t.ExpressionStatement(

This comment has been minimized.

Copy link
@gaearon

gaearon May 23, 2017

Author Member

This is simpler to do with "templates".

@Timer

This comment has been minimized.

Copy link
Collaborator

Timer commented May 23, 2017

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

@marcofugaro

This comment has been minimized.

Copy link
Contributor

marcofugaro commented Jul 14, 2017

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

@Timer

This comment has been minimized.

Copy link
Collaborator

Timer commented Jul 14, 2017

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

@Timer Timer referenced this pull request Jul 20, 2017

Open

Hot reload doesn't work #50

@rvion

This comment has been minimized.

Copy link

rvion commented Aug 13, 2017

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

still waiting ?

@bestwestern

This comment has been minimized.

Copy link

bestwestern commented Oct 18, 2017

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

eirikurn added a commit to aranja/tux that referenced this pull request Nov 16, 2017

Remove explicit react-hot-loader logic
We should not support it since by default it's an aggressive and flaky
HMR handler. Where it says it can handle more file changes than it
actually can. Developers usually learn not to trust it and refresh
manually.

It also breaks JS error handling in arrow functions:

gaearon/react-proxy#76

After this change, HMR is still properly configured, including the
module.hot api and client/server communications. By default JS changes
refresh and CSS changes appear without refresh.

For the future, we should monitor the progress of this PR:

facebook/create-react-app#2304
@ro-savage

This comment has been minimized.

Copy link
Contributor

ro-savage commented Jan 18, 2018

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

This comment has been minimized.

Copy link

aslushnikov commented Jan 22, 2018

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

@gaearon

This comment has been minimized.

Copy link
Member Author

gaearon commented Jan 22, 2018

This is amazing, thank you @aslushnikov!

We should start getting this up to date.

@csepulv csepulv referenced this pull request Feb 7, 2018

Open

CSS hotreload #18

@onpaws

This comment has been minimized.

Copy link

onpaws commented Mar 12, 2018

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

This comment has been minimized.

Copy link

mnemanja commented Apr 11, 2018

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

@gaearon

This comment has been minimized.

Copy link
Member Author

gaearon commented May 11, 2018

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.

@gaearon gaearon force-pushed the gaearon:hot-reloading-poc branch from ff00a57 to 2d8eb24 May 11, 2018

@gaearon gaearon changed the base branch from master to next May 11, 2018

@Timer Timer changed the base branch from next to master Oct 19, 2018

@eddiemonge

This comment has been minimized.

Copy link

eddiemonge commented Oct 25, 2018

@gaearon this still on track for this year?

@stale

This comment has been minimized.

Copy link

stale bot commented Nov 24, 2018

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.

@stale stale bot added the stale label Nov 24, 2018

@gausie

This comment has been minimized.

Copy link

gausie commented Nov 24, 2018

Please bot do not stale 🙏🤖

@stale stale bot removed the stale label Nov 24, 2018

@Timer Timer added this to the 3.0 milestone Nov 24, 2018

@ahmad2smile

This comment has been minimized.

Copy link

ahmad2smile commented Nov 28, 2018

Fingers crossed 🤞

@iansu iansu modified the milestones: 3.0, 3.x Mar 10, 2019

@amyrlam amyrlam force-pushed the facebook:master branch from cecd762 to d3b19f9 Mar 24, 2019

@BetterCallSky

This comment has been minimized.

Copy link

BetterCallSky commented Mar 26, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.