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

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

Open
cliffordp opened this issue Mar 19, 2020 · 16 comments
Open
Assignees
Labels
Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Tool] WP Scripts /packages/scripts [Type] Build Tooling Issues or PRs related to build tooling [Type] Enhancement A suggestion for improvement.

Comments

@cliffordp
Copy link
Contributor

cliffordp commented Mar 19, 2020

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 #4121 (comment) 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
Copy link
Contributor

talldan commented Mar 19, 2020

This is possibly just a relic. It seems to have been introduced in this commit - 23f8945, 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?

@talldan talldan added the [Type] Question Questions about the design or development of the editor. label Mar 19, 2020
@cliffordp
Copy link
Contributor Author

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: cliffordp/cliff-wp-plugin-boilerplate#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
Copy link
Member

atimmer commented Mar 19, 2020

@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 gziolo added the [Tool] WP Scripts /packages/scripts label Mar 25, 2020
@gziolo
Copy link
Member

gziolo commented Mar 25, 2020

@cliffordp, CSS support (#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 gziolo changed the title What is LiveReload doing in scripts/config? We want HMR. Is this it? Scripts: Replace live reload with HMR in the start command Mar 25, 2020
@gziolo
Copy link
Member

gziolo commented Apr 20, 2020

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:

Should we change the goal of this issue?

@gziolo gziolo added [Type] Enhancement A suggestion for improvement. [Type] Build Tooling Issues or PRs related to build tooling and removed [Type] Question Questions about the design or development of the editor. labels Apr 20, 2020
@gziolo
Copy link
Member

gziolo commented Apr 22, 2020

@gziolo gziolo changed the title Scripts: Replace live reload with HMR in the start command Scripts: Replace live reload with React Fast Refresh in the start command Apr 22, 2020
@gziolo gziolo added the Needs Dev Ready for, and needs developer efforts label Apr 22, 2020
@gziolo
Copy link
Member

gziolo commented May 16, 2020

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

@gziolo gziolo added the [Status] Blocked Used to indicate that a current effort isn't able to move forward label May 26, 2020
@gziolo
Copy link
Member

gziolo commented May 26, 2020

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 pmmmwh/react-refresh-webpack-plugin#88.

@epiqueras
Copy link
Contributor

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 gziolo added [Status] In Progress Tracking issues with work in progress and removed [Status] Blocked Used to indicate that a current effort isn't able to move forward labels Jun 13, 2020
@gziolo
Copy link
Member

gziolo commented Jun 13, 2020

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

@cliffordp
Copy link
Contributor Author

FYI, Parcel v2 has this: parcel-bundler/parcel#4514 (comment)

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

@epiqueras
Copy link
Contributor

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
Copy link
Contributor Author

@epiqueras cool. have a PR link to share?

@epiqueras
Copy link
Contributor

#23013

@gziolo
Copy link
Member

gziolo commented Jan 18, 2021

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

@gziolo
Copy link
Member

gziolo commented Dec 14, 2021

I landed #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Tool] WP Scripts /packages/scripts [Type] Build Tooling Issues or PRs related to build tooling [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants