From 55bf157871997bfc94c1339837ebd8cd039b3726 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 1 Dec 2020 13:29:10 +0100 Subject: [PATCH 1/3] add FAST_REFRESH flag --- packages/gatsby/cache-dir/app.js | 6 ++++++ packages/gatsby/src/services/initialize.ts | 4 ++-- packages/gatsby/src/utils/flags.ts | 9 +++++++++ .../gatsby/src/utils/get-react-hot-loader-strategy.ts | 5 ++++- 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js index de028d5758fff..16e1d35ba2b94 100644 --- a/packages/gatsby/cache-dir/app.js +++ b/packages/gatsby/cache-dir/app.js @@ -12,6 +12,12 @@ import syncRequires from "$virtual/sync-requires" // Generated during bootstrap import matchPaths from "$virtual/match-paths.json" +if (process.env.GATSBY_HOT_LOADER === `fast-refresh` && module.hot) { + module.hot.accept(`$virtual/sync-requires`, () => { + // Manually reload + }) +} + window.___emitter = emitter const loader = new DevLoader(syncRequires, matchPaths) diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts index c21d66271b4e6..b6da2ad09d7a8 100644 --- a/packages/gatsby/src/services/initialize.ts +++ b/packages/gatsby/src/services/initialize.ts @@ -105,8 +105,6 @@ export async function initialize({ reporter.panic(`Missing program args`) } - process.env.GATSBY_HOT_LOADER = getReactHotLoaderStrategy() - /* Time for a little story... * When running `gatsby develop`, the globally installed gatsby-cli starts * and sets up a Redux store (which is where logs are now stored). When gatsby @@ -216,6 +214,8 @@ export async function initialize({ } } + process.env.GATSBY_HOT_LOADER = getReactHotLoaderStrategy() + // theme gatsby configs can be functions or objects if (config && config.__experimentalThemes) { reporter.warn( diff --git a/packages/gatsby/src/utils/flags.ts b/packages/gatsby/src/utils/flags.ts index 385ac6b8a3d18..6d2c17b919320 100644 --- a/packages/gatsby/src/utils/flags.ts +++ b/packages/gatsby/src/utils/flags.ts @@ -60,6 +60,15 @@ const activeFlags: Array = [ description: `Don't process images during development until they're requested from the browser. Speeds starting the develop server.`, umbrellaIssue: `https://github.com/gatsbyjs/gatsby/discussions/27603`, }, + { + name: `FAST_REFRESH`, + env: `GATSBY_FAST_REFRESH`, + command: `develop`, + telemetryId: `FastRefresh`, + experimental: false, + description: `Replaces the default HMR loader (react-hot-loader) with React Fast Refresh. Recommended for versions of React >= 17.0.`, + umbrellaIssue: `https://github.com/gatsbyjs/gatsby/discussions/28390`, + }, ] export default activeFlags diff --git a/packages/gatsby/src/utils/get-react-hot-loader-strategy.ts b/packages/gatsby/src/utils/get-react-hot-loader-strategy.ts index 58d2ce6c2ebfe..7c713b1b990d6 100644 --- a/packages/gatsby/src/utils/get-react-hot-loader-strategy.ts +++ b/packages/gatsby/src/utils/get-react-hot-loader-strategy.ts @@ -7,10 +7,13 @@ export function getReactHotLoaderStrategy(): string { // If the user has defined this, we don't want to do any package sniffing if (process.env.GATSBY_HOT_LOADER) return process.env.GATSBY_HOT_LOADER + // If the config flag is true, return fast-refresh + if (process.env.GATSBY_FAST_REFRESH) return `fast-refresh` + // Do some package sniffing to see if we can use fast-refresh if the user didn't // specify a specific hot loader with the environment variable. - // TODO: Decide if we wanna do this + // TODO: Probably use the flags for this /* try { const reactVersion = require(`react/package.json`).version From 9c0cd97d408b02249af528c2e0969dfc49fe42a9 Mon Sep 17 00:00:00 2001 From: Lennart Date: Tue, 1 Dec 2020 13:50:52 +0100 Subject: [PATCH 2/3] update desc --- packages/gatsby/src/utils/flags.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/utils/flags.ts b/packages/gatsby/src/utils/flags.ts index 6d2c17b919320..0f2c7558a25a0 100644 --- a/packages/gatsby/src/utils/flags.ts +++ b/packages/gatsby/src/utils/flags.ts @@ -66,7 +66,7 @@ const activeFlags: Array = [ command: `develop`, telemetryId: `FastRefresh`, experimental: false, - description: `Replaces the default HMR loader (react-hot-loader) with React Fast Refresh. Recommended for versions of React >= 17.0.`, + description: `Use React Fast Refresh instead of the legacy react-hot-loader for instantaneous feedback in your development server. Recommended for versions of React >= 17.0.`, umbrellaIssue: `https://github.com/gatsbyjs/gatsby/discussions/28390`, }, ] From c803d2b5f9c9d9600268458dbe9df6c0eafb0e0f Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Tue, 1 Dec 2020 18:05:42 +0100 Subject: [PATCH 3/3] handle case when FAST_REFRESH flag is set and GATSBY_HOT_LOADER env var is set to something else than fast-refresh --- packages/gatsby/src/services/initialize.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/gatsby/src/services/initialize.ts b/packages/gatsby/src/services/initialize.ts index b6da2ad09d7a8..21ad88953c662 100644 --- a/packages/gatsby/src/services/initialize.ts +++ b/packages/gatsby/src/services/initialize.ts @@ -182,6 +182,23 @@ export async function initialize({ // Setup flags if (config && config.flags) { + // TODO: this should be handled in FAST_REFRESH configuration and not be one-off here. + if ( + config.flags.FAST_REFRESH && + process.env.GATSBY_HOT_LOADER && + process.env.GATSBY_HOT_LOADER !== `fast-refresh` + ) { + delete config.flags.FAST_REFRESH + reporter.warn( + reporter.stripIndent(` + Both FAST_REFRESH gatsby-config flag and GATSBY_HOT_LOADER environment variable is used with conflicting setting ("${process.env.GATSBY_HOT_LOADER}"). + + Will use react-hot-loader. + + To use Fast Refresh either do not use GATSBY_HOT_LOADER environment variable or set it to "fast-refresh". + `) + ) + } const availableFlags = require(`../utils/flags`).default // Get flags const { enabledConfigFlags, unknownFlagMessage, message } = handleFlags(