fix(gatsby): Add FAST_REFRESH config flag (#28409)

* add FAST_REFRESH flag * update desc * handle case when FAST_REFRESH flag is set and GATSBY_HOT_LOADER env var is set to something else than fast-refresh Co-authored-by: Michal Piechowiak <[email protected]> (cherry picked from commit ce090e5)
gatsbyjs · Dec 1, 2020 · 1bbbab6 · 1bbbab6
1 parent b249ba5
commit 1bbbab6
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git 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
@@ -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
@@ -184,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(
@@ -216,6 +231,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
@@ -60,6 +60,15 @@ const activeFlags: Array<IFlag> = [
     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: `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`,
+  },
 ]
 
 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
@@ -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