-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Comments
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! |
@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/. |
@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 😃 |
I see that React Fast Refresh is the better way to achieve the same goal. Related tweet: https://twitter.com/addyosmani/status/1251967793479606272
Should we change the goal of this issue? |
More about React Fast Refresh from React Status newsletter issue 185 (https://react.statuscode.com/issues/185): |
React Fast Refresh was enabled by default in Next.js v9.4: https://nextjs.org/blog/next-9-4#fast-refresh. |
It looks like multiple entry points, that we have to support (it's documented in |
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. |
There is PR opened that looks very promising: #23013 🎉 |
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 |
I managed to get it working by extending the current Webpack config from |
@epiqueras cool. have a PR link to share? |
I started looking at integration with |
I landed #28273 today. It works with the The package should be published to npm with the |
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.
The text was updated successfully, but these errors were encountered: