[Meta] Releasing this Plugin as "Fast Refresh" capable

[pmmmwh]

Ref: facebook/react#16604

This issues tracks what is missing before this plugin attains "feature-parity" with the RN implementation and is representative of the "fast-refresh" branding.

Tasks

• Error Recovery
  • Module Import Errors
    • Static Imports
    • Dynamic Imports (Lazy)
    • Add/Remove Imports
    • Concurrent Mode
  • Syntax Errors
    • File Level
    • Component Level
    • Life-cycle Method Level
    • Function Return Level
  • Runtime Errors
    • Rendering Errors
    • React-related Errors
  • Root Mounting Errors (Full Refresh)
    • Error on Initial Mount
    • Accidental Root Unmount
• Component Auto-Registration
  • Function Components (via Babel plugin)
    • Loader would also pickup false-negatives from the plugin
  • Class Components (via packaged loader)
  • Mutating Exports (add/remove/change)
• Error Box Integration (iframe) feat: error integration #3
  • Compilation Errors (via Socket)
    • Renders Error Message
    • Dismissal after Error Recovery (via tracking of Hot status)
  • Runtime Errors (via console injection)
    • Renders Error Message (optional source trace? source-map support?)
    • Dismissal after Error Recovery (via hook in window)
• Webpack Advanced Integration
  • Supports __resourceQuery (wait for WDS v4) Add custom sockHost/sockPort/sockPath #52
  • Allow custom socket integrations (through transportMode or a plugin option with a similar footprint) feat: allow socket runtime to be configurable #64
  • Express-like middleware to cater advanced WDM users
• Webpack@5 Support feat: add webpack 5 support #123
  • Correctly detects context.hot
  • Update hook footprints to match new object types
  • Detects and support multi-compilers and child-compilers (Obsolete for now, this plugin won't break in those scenarios)
  • Better integration with the new modular HMR system feat: add support for HMR Invalidation API #89
  • Release after Webpack@5 hits beta stage (0.4.0-beta.6+)
• Tests
  • Fast refresh conformance tests test: set up conformance testing architecture for React Refresh #93 test: add more tests from metro #96
  • Fast refresh error recovery regression tests
  • Plugin unit tests test: overhaul of testing infra and add more tests #127

[maisano]

@pmmmwh What needs to happen in order to get this working with webpack 5? I haven't spent much time looking into the changelog there.

[pmmmwh]

@pmmmwh What needs to happen in order to get this working with webpack 5? I haven't spent much time looking into the changelog there.

@maisano
It has nothing to do with the flow/logic, it is mostly related to hook signatures changing:

1. The afterResolve now returns resolvedData with a field createData - which is the equivalent of webpack 4 resolveData. The hook is also switched to a series bail hook so we can't return the modified data.
2. The require hook in mainTemplate now switched to return chunk context instead of the actual chunk. To effectively detect entry modules, we now have to get iterable entry modules from the chunkGraph then loop them through.
3. Direct references to the normal module loader (which I used to detect hot context here) is completely removed and we now have to get it via webpack.NormalModule.getCompilationHooks(compilation).loader.

In fact - I have already implemented these changes, locally. But because webpack 5 is still in alpha, I am not sure if releasing them at this stage is a good move.

Speaking of versions, I am still debating on the proper range of webpack versions to support. It would be easiest to only support webpack 4+, but I do understand that webpack 3 is still being used by a lot of people.

[pmmmwh]

@gaearon
I have been working on the error box integration for a few days now - and have got to a point where I would like your input on a few things:

• I was trying to integrate with react-error-overlay, like how react-dev-utils did for CRA. However, I read from here that the overlay is going to get a rewrite soon - mind tell me a little bit more about that?
• (edited to better phrase the question) I have made recovery from runtime errors and build-time errors both working, utilizing the exact same approach from react-dev-utils and webpack-dev-server's overlays.
  • For build errors, I haven't found an alternative to having a socket server in-place, whether it is from webpack or it is built into the plugin. Initially, I achieved this by building a socket server into the plugin because I didn't want to rely on WDS - but thinking about it more, I probably was wrong, and that would probably make things more complicated than what it should be. Not to mention that addressing the needs of every webpack + React user is probably unrealistic. My new proposal to make this work:
    1. Baseline - allow zero-configuration experience with WDS
    2. For advanced users, provide an express style middleware that will work with webpack-dev-middleware which creates an endpoint that does the same thing as WDS's stats emitter.
  • For runtime errors, if we go for a similar experience that react-error-overlay provides, a sourcemap (cheap-module-source-map in particular) have to be generated. I am not sure if enforcing this is a good idea, especially when this have implications in using browser debuggers. I can still provide insights on what the error is about and the stack, just not as elegant as having the source visible for debugging.

[gaearon]

Do you two wanna do a video call next week with me? Might be easier to talk through all issues.

[maisano]

Sounds good. I'm on EST (GMT-4) and generally pretty flexible, so let me know what works for you all.

[pmmmwh]

Do you two wanna do a video call next week with me? Might be easier to talk through all issues.

Sounds good to me too. I am on GMT+8 and also pretty flexible. What time will work for you Dan?

[pmmmwh]

I have been working on the error box integration for a few days now

My progress is tracked on this branch. It is pretty rough though.

[bvaughn]

Did the three of you ever end up talking?

If I was looking to lend a hand here, what would be the most impactful thing to look into?

Maybe it would be helpful for two or three of us to chat? (Assuming you'd like a hand.)

[maisano]

👋 @bvaughn – we haven't met yet–I have some time this week if we want to try. Are you on PST?

@pmmmwh – assuming this is you, can you open your DMs? It'd be easier to coordinate there.

[bvaughn]

Hi 👋 I am located in California, so yeah PST. Happy to chat for a bit to ramp up context if that would be helpful.

[pmmmwh]

Did the three of you ever end up talking?

If I was looking to lend a hand here, what would be the most impactful thing to look into?

Maybe it would be helpful for two or three of us to chat? (Assuming you'd like a hand.)

Nope - we haven't talked yet. I definitely would like a hand 😃 . It would be great if you can provide more context on the error-box experience @bvaughn .

👋 @bvaughn – we haven't met yet–I have some time this week if we want to try. Are you on PST?

@pmmmwh – assuming this is you, can you open your DMs? It'd be easier to coordinate there.

@maisano Yep that's my long abandoned Twitter account - I have opened my DMs.

[bvaughn]

@maisano Want to start a thread between the three of us on Twitter?