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

…#1178) * refactor react-refresh plugin, babel user-dependency no longer needed * remove babel syntax plugin no longer needed
FredKSchott · Oct 2, 2020 · d69dbfe · d69dbfe · vercel · Oct 2, 2020
1 parent a809fcc
commit d69dbfe
Show file tree

Hide file tree

Showing 18 changed files with 74 additions and 93 deletions.
diff --git a/create-snowpack-app/app-scripts-preact/babel.config.json b/create-snowpack-app/app-scripts-preact/babel.config.json
@@ -14,7 +14,6 @@
       }
     ]
   ],
-  "plugins": ["@babel/plugin-syntax-import-meta"],
   "env": {
     "development": {
       "plugins": ["@prefresh/babel-plugin"]

diff --git a/create-snowpack-app/app-scripts-preact/jest/babelTransform.js b/create-snowpack-app/app-scripts-preact/jest/babelTransform.js
@@ -33,5 +33,4 @@ module.exports = babelJest.createTransformer({
       },
     ],
   ],
-  plugins: ["@babel/plugin-syntax-import-meta"],
 });
diff --git a/create-snowpack-app/app-scripts-preact/package.json b/create-snowpack-app/app-scripts-preact/package.json
@@ -8,7 +8,6 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.10.5",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",

diff --git a/create-snowpack-app/app-scripts-react/babel.config.json b/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"]
 }
diff --git a/create-snowpack-app/app-scripts-react/package.json b/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",

diff --git a/create-snowpack-app/app-template-preact/babel.config.json b/create-snowpack-app/app-template-preact/babel.config.json
@@ -14,7 +14,6 @@
       }
     ]
   ],
-  "plugins": ["@babel/plugin-syntax-import-meta"],
   "env": {
     "development": {
       "plugins": ["@prefresh/babel-plugin"]

diff --git a/create-snowpack-app/app-template-preact/package.json b/create-snowpack-app/app-template-preact/package.json
@@ -19,7 +19,6 @@
     "preact": "^10.4.6"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@prefresh/babel-plugin": "^0.1.0",

diff --git a/create-snowpack-app/app-template-react-typescript/babel.config.json b/create-snowpack-app/app-template-react-typescript/babel.config.json
diff --git a/create-snowpack-app/app-template-react-typescript/package.json b/create-snowpack-app/app-template-react-typescript/package.json
@@ -20,11 +20,9 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@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",

diff --git a/create-snowpack-app/app-template-react-typescript/snowpack.config.js b/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'}],
   ],

diff --git a/create-snowpack-app/app-template-react/babel.config.json b/create-snowpack-app/app-template-react/babel.config.json
diff --git a/create-snowpack-app/app-template-react/package.json b/create-snowpack-app/app-template-react/package.json
@@ -20,10 +20,8 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@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",

diff --git a/create-snowpack-app/app-template-react/snowpack.config.js b/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',
   ],
 };
diff --git a/plugins/plugin-react-refresh/README.md b/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
 

diff --git a/plugins/plugin-react-refresh/package.json b/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",

diff --git a/plugins/plugin-react-refresh/plugin.js b/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);

diff --git a/snowpack/package.json b/snowpack/package.json
@@ -25,7 +25,6 @@
     "snowpack": "index.bin.js"
   },
   "dependencies": {
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@snowpack/plugin-build-script": "^2.0.7",
     "@snowpack/plugin-run-script": "^2.1.3",
     "cacache": "^15.0.0",

diff --git a/test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap b/test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap
@@ -7506,26 +7506,26 @@ document.head.appendChild(styleEl);"
 `;
 
 exports[`create-snowpack-app app-template-react: _dist_/App.js 1`] = `
-"import React, { useState } from '../web_modules/react.js';
-import logo from './logo.svg.proxy.js';
-import './App.css.proxy.js';
-function App() {
-  return /*#__PURE__*/React.createElement(\\"div\\", {
+"import React, {useState} from \\"../web_modules/react.js\\";
+import logo2 from \\"./logo.svg.proxy.js\\";
+import \\"./App.css.proxy.js\\";
+function App2() {
+  return /* @__PURE__ */ React.createElement(\\"div\\", {
     className: \\"App\\"
-  }, /*#__PURE__*/React.createElement(\\"header\\", {
+  }, /* @__PURE__ */ React.createElement(\\"header\\", {
     className: \\"App-header\\"
-  }, /*#__PURE__*/React.createElement(\\"img\\", {
-    src: logo,
+  }, /* @__PURE__ */ React.createElement(\\"img\\", {
+    src: logo2,
     className: \\"App-logo\\",
     alt: \\"logo\\"
-  }), /*#__PURE__*/React.createElement(\\"p\\", null, \\"Edit \\", /*#__PURE__*/React.createElement(\\"code\\", null, \\"src/App.jsx\\"), \\" and save to reload.\\"), /*#__PURE__*/React.createElement(\\"a\\", {
+  }), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"Edit \\", /* @__PURE__ */ React.createElement(\\"code\\", null, \\"src/App.jsx\\"), \\" and save to reload.\\"), /* @__PURE__ */ React.createElement(\\"a\\", {
     className: \\"App-link\\",
     href: \\"https://reactjs.org\\",
     target: \\"_blank\\",
     rel: \\"noopener noreferrer\\"
   }, \\"Learn React\\")));
 }
-export default App;"
+export default App2;"
 `;
 
 exports[`create-snowpack-app app-template-react: _dist_/index.css 1`] = `
@@ -7556,12 +7556,11 @@ document.head.appendChild(styleEl);"
 exports[`create-snowpack-app app-template-react: _dist_/index.js 1`] = `
 "import __SNOWPACK_ENV__ from '../__snowpack__/env.js';
 import.meta.env = __SNOWPACK_ENV__;
-import React from '../web_modules/react.js';
-import ReactDOM from '../web_modules/react-dom.js';
-import App from './App.js';
-import './index.css.proxy.js';
-ReactDOM.render( /*#__PURE__*/React.createElement(React.StrictMode, null, /*#__PURE__*/React.createElement(App, null)), document.getElementById('root')); // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
-// Learn more: https://www.snowpack.dev/#hot-module-replacement
+import React from \\"../web_modules/react.js\\";
+import ReactDOM from \\"../web_modules/react-dom.js\\";
+import App2 from \\"./App.js\\";
+import \\"./index.css.proxy.js\\";
+ReactDOM.render(/* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(App2, null)), document.getElementById(\\"root\\"));
 if (import.meta.hot) {
   import.meta.hot.accept();
 }"
@@ -8021,26 +8020,26 @@ document.head.appendChild(styleEl);"
 `;
 
 exports[`create-snowpack-app app-template-react-typescript: _dist_/App.js 1`] = `
-"import React from '../web_modules/react.js';
-import logo from './logo.svg.proxy.js';
-import './App.css.proxy.js';
-function App({}) {
-  return /*#__PURE__*/React.createElement(\\"div\\", {
+"import React from \\"../web_modules/react.js\\";
+import logo2 from \\"./logo.svg.proxy.js\\";
+import \\"./App.css.proxy.js\\";
+function App2({}) {
+  return /* @__PURE__ */ React.createElement(\\"div\\", {
     className: \\"App\\"
-  }, /*#__PURE__*/React.createElement(\\"header\\", {
+  }, /* @__PURE__ */ React.createElement(\\"header\\", {
     className: \\"App-header\\"
-  }, /*#__PURE__*/React.createElement(\\"img\\", {
-    src: logo,
+  }, /* @__PURE__ */ React.createElement(\\"img\\", {
+    src: logo2,
     className: \\"App-logo\\",
     alt: \\"logo\\"
-  }), /*#__PURE__*/React.createElement(\\"p\\", null, \\"Edit \\", /*#__PURE__*/React.createElement(\\"code\\", null, \\"src/App.tsx\\"), \\" and save to reload.\\"), /*#__PURE__*/React.createElement(\\"a\\", {
+  }), /* @__PURE__ */ React.createElement(\\"p\\", null, \\"Edit \\", /* @__PURE__ */ React.createElement(\\"code\\", null, \\"src/App.tsx\\"), \\" and save to reload.\\"), /* @__PURE__ */ React.createElement(\\"a\\", {
     className: \\"App-link\\",
     href: \\"https://reactjs.org\\",
     target: \\"_blank\\",
     rel: \\"noopener noreferrer\\"
   }, \\"Learn React\\")));
 }
-export default App;"
+export default App2;"
 `;
 
 exports[`create-snowpack-app app-template-react-typescript: _dist_/index.css 1`] = `
@@ -8071,12 +8070,11 @@ document.head.appendChild(styleEl);"
 exports[`create-snowpack-app app-template-react-typescript: _dist_/index.js 1`] = `
 "import __SNOWPACK_ENV__ from '../__snowpack__/env.js';
 import.meta.env = __SNOWPACK_ENV__;
-import React from '../web_modules/react.js';
-import ReactDOM from '../web_modules/react-dom.js';
-import App from './App.js';
-import './index.css.proxy.js';
-ReactDOM.render( /*#__PURE__*/React.createElement(React.StrictMode, null, /*#__PURE__*/React.createElement(App, null)), document.getElementById('root')); // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
-// Learn more: https://www.snowpack.dev/#hot-module-replacement
+import React from \\"../web_modules/react.js\\";
+import ReactDOM from \\"../web_modules/react-dom.js\\";
+import App2 from \\"./App.js\\";
+import \\"./index.css.proxy.js\\";
+ReactDOM.render(/* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(App2, null)), document.getElementById(\\"root\\"));
 if (import.meta.hot) {
   import.meta.hot.accept();
 }"