feat: loader now searches for jsxDEV

THIS IS A BREAKING CHANGE
Babel 7.9.0+ required

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 2.0.0 (Mar 21st, 2020)
+
+- Now requires Babel 7.9.0+ with runtime=`automatic` on preset-react (see [README.md](./README.md))
+
+## 1.2.6 (Dec 15, 2019)
+
+- Fix webpack not caching loader
+
+## 1.2.4 (Dec 11, 2019)
+
+- Minor tweaks
+
+## 1.0.9 (Oct 11, 2019)
+
+- Remove `webpack@4` support again
+
 ## 1.0.4 (Sep 16th, 2019)
 
 - Adds support for both `webpack@4` and `webpack@5`

README.md

@@ -1,8 +1,8 @@
 # webpack-fast-refresh
 
-React Fast Refresh plugin and loader for webpack@5+
+React Fast Refresh plugin and loader for webpack@5+ and babel@7.9.0+
 
-We recommend webpack@4 users to use https://github.com/pmmmwh/react-refresh-webpack-plugin
+webpack@4 users should try https://github.com/pmmmwh/react-refresh-webpack-plugin
 
 # Usage
 
@@ -27,6 +27,7 @@ config.plugins.unshift(new ReactRefreshPlugin());
 
 ```json
 {
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["react-refresh/babel"]
 }
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webhotelier/webpack-fast-refresh",
-  "version": "1.2.6",
+  "version": "2.0.0",
   "main": "src/index.js",
   "description": "React Fast Refresh plugin and loader for webpack",
   "author": "Apostolos Tsakpinis <apostolos@webhotelier.net>",
@@ -11,9 +11,5 @@
   },
   "bugs": {
     "url": "https://github.com/WebHotelier/webpack-fast-refresh/issues"
-  },
-  "peerDependencies": {
-    "react-refresh": ">= 0.7",
-    "webpack": ">= 5.0.0-beta.7"
   }
 }

src/loader.js

@@ -1,13 +1,15 @@
 const { Template } = require('webpack');
 const { refreshUtils } = require('./runtime/globals');
 const RefreshModuleRuntime = require('./runtime/RefreshModuleRuntime');
-const RefreshModuleRuntimeString = Template.getFunctionContent(RefreshModuleRuntime)
+const RefreshModuleRuntimeString = Template.getFunctionContent(
+  RefreshModuleRuntime
+)
   .trim()
   .replace(/^ {2}/gm, '')
   .replace(/\$RefreshUtils\$/g, refreshUtils);
 
 /** A token to match code statements similar to a React import. */
-const reactModule = /['"]react['"]/;
+const reactModule = /jsxDEV/;
 
 /**
  * A simple Webpack loader to inject react-refresh HMR code into modules.
@@ -24,7 +26,9 @@ function RefreshHotLoader(source, inputSourceMap) {
   this.callback(
     null,
     // Only apply transform if the source code contains a React import
-    reactModule.test(source) ? source + '\n\n' + RefreshModuleRuntimeString : source,
+    reactModule.test(source)
+      ? source + '\n\n' + RefreshModuleRuntimeString
+      : source,
     inputSourceMap
   );
 }