Scripts: Replace live reload with React Fast Refresh in the start command

[cliffordp]

Edit from @gziolo: There is a new cool kid on the block – React Fast Refresh – that seems to be the best replacement for live reload. See my comments to learn more.

---

I see https://www.npmjs.com/package/webpack-livereload-plugin is included at https://github.com/WordPress/gutenberg/blob/v7.7.1/packages/scripts/config/webpack.config.js#L5

Is my research correct that this is for the $10 app at http://livereload.com/ ? Is this supposed to be a Hot Module Replacement (HMR) implementation instead of doing so via webpack? If yes, why? If no, what is this used for?

I dug into webpack and HMR pretty deep, found https://github.com/WordPress/gutenberg/pull/4121#issuecomment-355089641 basically said, "we're not going to do HMR via webpack." So I was surprised to see LiveReload in the mix.

Plus, that "no HMR" comment was from January 2018.

Maybe it's a new decade and we're open to HMR now, such as via some .env settings???

Thanks for helping.

[talldan]

This is possibly just a relic. It seems to have been introduced in this commit - https://github.com/WordPress/gutenberg/commit/23f8945f809c3477991c52dc12c3626dfa4b4178, and predates the scripts package. (cc @atimmer).

Perhaps it was an experiment back then.

Are you interested in HMR for Gutenberg development, or for a separate project that uses the @wordpress/scripts package?

[cliffordp]

Thanks for the quick reply.

Gutenberg and/or a wp-admin page that uses React and the Settings API.

FYI: lack of HMR is one of several significant (to me) reasons why I'm sticking with Parcel instead of extending wp/scripts' webpack. All my reasoning after playing around a long while is here: https://github.com/cliffordp/cliff-wp-plugin-boilerplate/issues/77

TBH, I was disappointed in wp/scripts. Simply, I was really excited about it at first sight, seeing all that it could do (linting, license checking, etc.), and therefore assumed it would have more "JS app" features out of the box -- process JSX, CSS, PCSS, and SASS files and have HMR implemented.

Alas, it does not, and I would have thought this to be foundational to getting up-and-running quickly. High hopes for the future, though!

[atimmer]

@cliffordp Nobody is against hot module reloading as far as I am aware 🙂. @Xyfi and I tried to make HMR work back then, but we didn't manage to make it work within Gutenberg. So if you are able to make it work that would be awesome.

Live reload was the next best thing, something to make developing Gutenberg just a little bit nicer. I wasn't aware that the Livereload app is now $10. But I believe the browser extensions are still free: http://livereload.com/extensions/.

[gziolo]

@cliffordp, CSS support (https://github.com/WordPress/gutenberg/issues/14801) and HMR is something that we really want to have in wp-scripts.

Gutenberg uses a different process for CSS handling that is very specific to how the repository is structured to properly work with npm packages publishing. We are open to different approach for wp-scripts.

By the way, we are watching progress on Parcel 2 that has monorepo support and is able to work with CSS imports in JS out of the box. There is this issue how to configure it to generate multiple output files based on the file name patterns.

If you know how to enable HMR let us know 😃

[gziolo]

I see that React Fast Refresh is the better way to achieve the same goal. Related tweet:

https://twitter.com/addyosmani/status/1251967793479606272

React Fast Refresh is coming to the web!

⌨️ Hot reloading that preserves component state ⚠️ Better recovery from runtime errors ⚛️ Supports Hooks & function components

To learn more see:

• https://github.com/facebook/create-react-app/pull/8582
• https://github.com/pmmmwh/react-refresh-webpack-plugin

Should we change the goal of this issue?

[gziolo]

More about React Fast Refresh from React Status newsletter issue 185 (https://react.statuscode.com/issues/185):

• https://dutzi.party/react-fast-refresh/
• https://stackoverflow.com/questions/59085281/difference-between-hot-reload-and-fast-refresh-in-react-native

[gziolo]

React Fast Refresh was enabled by default in Next.js v9.4: https://nextjs.org/blog/next-9-4#fast-refresh.

[gziolo]

It looks like multiple entry points, that we have to support (it's documented in @wordpress/scripts), aren't working correctly as filed in the webpack plugin repository in https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/88.

[epiqueras]

I've been following that issue since it was opened. I'm just waiting for it to be fixed to bring it into Gutenberg.

If they take too long, I might just make a proxy file for development that unifies all the packages into one entry point.

[gziolo]

There is PR opened that looks very promising: #23013 🎉

[cliffordp]

FYI, Parcel v2 has this: https://github.com/parcel-bundler/parcel/issues/4514#issuecomment-617871714

I bring it up because I remember someone mentioning to me that Gutenberg team is considering Parcel - so just to avoid duplicate work

[epiqueras]

I managed to get it working by extending the current Webpack config from wp-scripts. I think we should merge that and later ship it as part of wp-scripts.

[cliffordp]

@epiqueras cool. have a PR link to share?

[epiqueras]

https://github.com/WordPress/gutenberg/pull/23013

[gziolo]

I started looking at integration with @wordpress/scripts as documented in https://github.com/WordPress/gutenberg/pull/28273. So far no luck with making it work. I tried --watch flag only. It might require some webpack dev server integration though.

[gziolo]

I landed https://github.com/WordPress/gutenberg/pull/28273 today. It works with the start command from @wordpress/scripts when the --hot flag is passed. In addition to that you will need either the Gutenberg plugin activated on the site and SCRIPT_DEBUG set to true or React Developer Tools installed in your browser.

The package should be published to npm with the next dist-tag at the end of the week. The stable version (latest dist-tag) will be available in a few weeks.