From ca19076f2964c0f6101d28b3a68a117b33d8cc70 Mon Sep 17 00:00:00 2001
From: Teo Dragovic <teo.dragovic@gmail.com>
Date: Thu, 16 Apr 2020 14:20:30 +0200
Subject: [PATCH] feat(gatsby-plugin-preact): enable preact in development
 (#22441)

Co-authored-by: Ward Peeters <ward@coding-tech.com>
---
 packages/gatsby-plugin-preact/README.md       |  6 ----
 packages/gatsby-plugin-preact/package.json    |  2 +-
 .../src/__tests__/gatsby-node.js              |  8 -----
 .../src/gatsby-browser.js                     | 12 +++----
 .../gatsby-plugin-preact/src/gatsby-node.js   | 34 +++++++++++--------
 5 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/packages/gatsby-plugin-preact/README.md b/packages/gatsby-plugin-preact/README.md
index bb678a9acddf1..81e3227223d48 100644
--- a/packages/gatsby-plugin-preact/README.md
+++ b/packages/gatsby-plugin-preact/README.md
@@ -18,9 +18,3 @@ React.
 // In your gatsby-config.js
 plugins: [`gatsby-plugin-preact`]
 ```
-
-## Usage in a development environment
-
-Gatsby development server currently has a hardcoded dependency on React-dom, therefore this plugin does not enable Preact in development.
-
-While Preact is designed to be a drop-in replacement, you should check that your production build works as expected before putting it live.
diff --git a/packages/gatsby-plugin-preact/package.json b/packages/gatsby-plugin-preact/package.json
index d10fb558ca97b..503b2367c2b0d 100644
--- a/packages/gatsby-plugin-preact/package.json
+++ b/packages/gatsby-plugin-preact/package.json
@@ -25,7 +25,7 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^2.0.0",
-    "preact": "^10.0.0"
+    "preact": "^10.3.4"
   },
   "repository": {
     "type": "git",
diff --git a/packages/gatsby-plugin-preact/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-preact/src/__tests__/gatsby-node.js
index 16aa96c994683..0720ed4b2031e 100644
--- a/packages/gatsby-plugin-preact/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-plugin-preact/src/__tests__/gatsby-node.js
@@ -17,12 +17,4 @@ describe(`gatsby-plugin-preact`, () => {
       },
     })
   })
-
-  it(`does not invoke setWebpackConfig when stage is develop`, () => {
-    const actions = { setWebpackConfig: jest.fn() }
-
-    onCreateWebpackConfig({ stage: `develop`, actions })
-
-    expect(actions.setWebpackConfig).not.toHaveBeenCalled()
-  })
 })
diff --git a/packages/gatsby-plugin-preact/src/gatsby-browser.js b/packages/gatsby-plugin-preact/src/gatsby-browser.js
index c0d106b79f856..3952ff3173cb9 100644
--- a/packages/gatsby-plugin-preact/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-preact/src/gatsby-browser.js
@@ -1,6 +1,6 @@
-// TODO enable preact/debug again when preact devtools is fixed.
-// exports.onClientEntry = () => {
-//   if (process.env.NODE_ENV !== `production`) {
-//     require(`preact/debug`)
-//   }
-// }
+exports.onClientEntry = () => {
+  if (process.env.NODE_ENV !== `production`) {
+    console.log(`[HMR] disabled: preact is not compatible with RHL`)
+    require(`preact/debug`)
+  }
+}
diff --git a/packages/gatsby-plugin-preact/src/gatsby-node.js b/packages/gatsby-plugin-preact/src/gatsby-node.js
index d70ed4f12a023..9e78e05642d78 100644
--- a/packages/gatsby-plugin-preact/src/gatsby-node.js
+++ b/packages/gatsby-plugin-preact/src/gatsby-node.js
@@ -1,16 +1,22 @@
-exports.onCreateWebpackConfig = ({ stage, actions }) => {
-  // Requiring the server version of React-dom is hardcoded right now
-  // in the development server. So we'll just avoid loading Preact there
-  // for now.
-  if (stage !== `develop`) {
-    actions.setWebpackConfig({
-      resolve: {
-        alias: {
-          react: `preact/compat`,
-          "react-dom": `preact/compat`,
-          "react-dom/server": `preact/compat`,
-        },
+exports.onPreInit = () => {
+  // Setting this variable replaces react-hot-loader with
+  // [fast-refresh](https://reactnative.dev/docs/next/fast-refresh)
+  // and resolves conflicts with running Preact in development.
+  process.env.GATSBY_HOT_LOADER = `fast-refresh`
+}
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  // React-dom is hardcoded as part of react-hot-loader
+  // in the development server. So we either avoid Preact
+  // during development or switch to fast-refresh and loose
+  // hot reloading capabilities.
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        react: `preact/compat`,
+        "react-dom": `preact/compat`,
+        "react-dom/server": `preact/compat`,
       },
-    })
-  }
+    },
+  })
 }