From 59d0c0c12e5cb9f3f398405b3f244e9812f4d972 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Thu, 1 Oct 2020 16:32:51 -0700 Subject: [PATCH] refactor react-refresh plugin, babel user-dependency no longer needed --- .../app-scripts-react/babel.config.json | 8 +--- .../app-scripts-react/package.json | 1 - .../babel.config.json | 9 ---- .../package.json | 1 - .../snowpack.config.js | 1 - .../app-template-react/babel.config.json | 9 ---- .../app-template-react/package.json | 1 - .../app-template-react/snowpack.config.js | 1 - plugins/plugin-react-refresh/README.md | 21 ++-------- plugins/plugin-react-refresh/package.json | 3 +- plugins/plugin-react-refresh/plugin.js | 42 ++++++++++++++++--- 11 files changed, 44 insertions(+), 53 deletions(-) delete mode 100644 create-snowpack-app/app-template-react-typescript/babel.config.json delete mode 100644 create-snowpack-app/app-template-react/babel.config.json diff --git a/create-snowpack-app/app-scripts-react/babel.config.json b/create-snowpack-app/app-scripts-react/babel.config.json index cf74e349cf..36101861c0 100644 --- 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 index 071a8bdc76..d7018729bd 100644 --- 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-react-typescript/babel.config.json b/create-snowpack-app/app-template-react-typescript/babel.config.json deleted file mode 100644 index cf74e349cf..0000000000 --- a/create-snowpack-app/app-template-react-typescript/babel.config.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "presets": [["@babel/preset-react"], "@babel/preset-typescript"], - "plugins": ["@babel/plugin-syntax-import-meta"], - "env": { - "development": { - "plugins": ["react-refresh/babel"] - } - } -} diff --git a/create-snowpack-app/app-template-react-typescript/package.json b/create-snowpack-app/app-template-react-typescript/package.json index b406ba491d..b08e446f8d 100644 --- a/create-snowpack-app/app-template-react-typescript/package.json +++ b/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", diff --git a/create-snowpack-app/app-template-react-typescript/snowpack.config.js b/create-snowpack-app/app-template-react-typescript/snowpack.config.js index f64968ed5b..f4c656c72b 100644 --- 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 deleted file mode 100644 index 9da0beca23..0000000000 --- a/create-snowpack-app/app-template-react/babel.config.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "presets": [["@babel/preset-react"]], - "plugins": ["@babel/plugin-syntax-import-meta"], - "env": { - "development": { - "plugins": ["react-refresh/babel"] - } - } -} diff --git a/create-snowpack-app/app-template-react/package.json b/create-snowpack-app/app-template-react/package.json index d615328a77..31926976a1 100644 --- a/create-snowpack-app/app-template-react/package.json +++ b/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", diff --git a/create-snowpack-app/app-template-react/snowpack.config.js b/create-snowpack-app/app-template-react/snowpack.config.js index 77deed545c..e47c51dc7e 100644 --- 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 index 6df056244d..a33039d802 100644 --- 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 index f1764006a0..a5306eb7f7 100644 --- 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 index e7e79f43bd..5d0d9e1210 100644 --- 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);