refactor react-refresh plugin, babel user-dependency no longer needed

create-snowpack-app/app-scripts-react/babel.config.json

@@ -1,9 +1,3 @@
 {
-  "presets": [["@babel/preset-react"], "@babel/preset-typescript"],
-  "plugins": ["@babel/plugin-syntax-import-meta"],
-  "env": {
-    "development": {
-      "plugins": ["react-refresh/babel"]
-    }
-  }
+  "presets": [["@babel/preset-react"], "@babel/preset-typescript"]
 }

create-snowpack-app/app-scripts-react/package.json

@@ -8,7 +8,6 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.10.5",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@snowpack/plugin-babel": "^2.1.1",

create-snowpack-app/app-template-react-typescript/package.json

@@ -24,7 +24,6 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@snowpack/app-scripts-react": "^1.11.0",
-    "@snowpack/plugin-babel": "^2.1.0",
     "@snowpack/plugin-dotenv": "^2.0.1",
     "@snowpack/plugin-react-refresh": "^2.1.0",
     "@testing-library/jest-dom": "^5.5.0",

create-snowpack-app/app-template-react-typescript/snowpack.config.js

@@ -5,7 +5,6 @@ module.exports = {
   },
   plugins: [
     '@snowpack/plugin-react-refresh',
-    '@snowpack/plugin-babel',
     '@snowpack/plugin-dotenv',
     ['@snowpack/plugin-run-script', {cmd: 'tsc --noEmit', watch: '$1 --watch'}],
   ],

create-snowpack-app/app-template-react/package.json

@@ -23,7 +23,6 @@
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@snowpack/app-scripts-react": "^1.11.0",
-    "@snowpack/plugin-babel": "^2.1.0",
     "@snowpack/plugin-dotenv": "^2.0.1",
     "@snowpack/plugin-react-refresh": "^2.1.0",
     "@testing-library/jest-dom": "^5.5.0",

create-snowpack-app/app-template-react/snowpack.config.js

@@ -5,7 +5,6 @@ module.exports = {
   },
   plugins: [
     '@snowpack/plugin-react-refresh',
-    '@snowpack/plugin-babel',
     '@snowpack/plugin-dotenv',
   ],
 };

plugins/plugin-react-refresh/README.md

@@ -11,28 +11,15 @@ npm install --save-dev @snowpack/plugin-react-refresh
 ```js
 // snowpack.config.json
 {
-  "plugins": ["@snowpack/plugin-react-refresh"]
-}
-```
-
-In addition, you have to add `react-refresh/babel` as a plugin to your babel configuration:
-
-```js
-// babel.config.json
-{
-  "env": {
-    "development": {
-      "plugins": [
-        "react-refresh/babel"
-      ]
-    }
-  }
+  "plugins": ["@snowpack/plugin-react-refresh", {/* options: see below */}]
 }
 ```
 
 ## Plugin Options
 
-None
+| Name    |   Type    | Description                                                                                                                                                                        |
+| :------ | :-------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `babel` | `boolean` | By default, this plugin uses Babel to add Fast-Refresh code to eligible JS files. If you want to configure & run this yourself, set `"babel": false"`. Most users won't need this. |
 
 ## How it Works
 

plugins/plugin-react-refresh/package.json

@@ -7,7 +7,8 @@
     "access": "public"
   },
   "dependencies": {
-    "react-refresh": "^0.8.3"
+    "react-refresh": "^0.8.3",
+    "@babel/core": "^7.0.0"
   },
   "peerDependencies": {
     "react": ">=16.10.0",

plugins/plugin-react-refresh/plugin.js

@@ -29,7 +29,38 @@ function transformHtml(contents) {
   );
 }
 
-function transformJs(contents, id) {
+const babel = require('@babel/core');
+const IS_FAST_REFRESH_ENABLED = /\$RefreshReg\$\(/;
+async function transformJs(contents, id, skipTransform) {
+  let fastRefreshEnhancedCode;
+
+  if (skipTransform) {
+    fastRefreshEnhancedCode = contents;
+  } else if (IS_FAST_REFRESH_ENABLED.test(contents)) {
+    // Warn in case someone has a bad setup, and to help older users upgrade.
+    console.warn(
+      `[@snowpack/plugin-react-refresh] ${id}\n"react-refresh/babel" babel plugin no longer needed, safe to remove from user babel config.`,
+    );
+    fastRefreshEnhancedCode = contents;
+  } else {
+    const {code} = await babel.transformAsync(contents, {
+      cwd: process.cwd(),
+      filename: id,
+      ast: false,
+      compact: false,
+      sourceMaps: false,
+      configFile: false,
+      babelrc: false,
+      plugins: [require('react-refresh/babel')],
+    });
+    fastRefreshEnhancedCode = code;
+  }
+
+  // If fast refresh markup wasn't added, just return the original content.
+  if (!fastRefreshEnhancedCode || !IS_FAST_REFRESH_ENABLED.test(fastRefreshEnhancedCode)) {
+    return contents;
+  }
+
   return `
 /** React Refresh: Setup **/
 if (import.meta.hot) {
@@ -45,7 +76,7 @@ if (import.meta.hot) {
   }
 }
 
-${contents}
+${fastRefreshEnhancedCode}
 
 /** React Refresh: Connect **/
 if (import.meta.hot) {
@@ -57,7 +88,7 @@ if (import.meta.hot) {
 }`;
 }
 
-module.exports = function reactRefreshTransform(snowpackConfig) {
+module.exports = function reactRefreshTransform(snowpackConfig, {babel}) {
   return {
     name: '@snowpack/plugin-react-refresh',
     transform({contents, fileExt, id, isDev}) {
@@ -68,8 +99,9 @@ module.exports = function reactRefreshTransform(snowpackConfig) {
       if (!isDev) {
         return;
       }
-      if (fileExt === '.js' && /\$RefreshReg\$\(/.test(contents)) {
-        return transformJs(contents, id);
+      if (fileExt === '.js') {
+        const skipTransform = babel === false;
+        return transformJs(contents, id, skipTransform);
       }
       if (fileExt === '.html') {
         return transformHtml(contents);