Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Oct 2, 2020
+74 −93
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59d0c0c
refactor react-refresh plugin, babel user-dependency no longer needed
FredKSchott Oct 1, 2020
5b8e4fc
remove babel syntax plugin no longer needed
FredKSchott Oct 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion create-snowpack-app/app-scripts-preact/babel.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
}
]
],
"plugins": ["@babel/plugin-syntax-import-meta"],
"env": {
"development": {
"plugins": ["@prefresh/babel-plugin"]
Expand Down
1 change: 0 additions & 1 deletion create-snowpack-app/app-scripts-preact/jest/babelTransform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,4 @@ module.exports = babelJest.createTransformer({
},
],
],
plugins: ["@babel/plugin-syntax-import-meta"],
});
1 change: 0 additions & 1 deletion create-snowpack-app/app-scripts-preact/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 1 addition & 7 deletions create-snowpack-app/app-scripts-react/babel.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
{
"presets": [["@babel/preset-react"], "@babel/preset-typescript"],
"plugins": ["@babel/plugin-syntax-import-meta"],
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

somewhat related: tested with Melissa to confirm that this is no longer needed (included by default by Babel)

"env": {
"development": {
"plugins": ["react-refresh/babel"]
}
}
"presets": [["@babel/preset-react"], "@babel/preset-typescript"]
}
1 change: 0 additions & 1 deletion create-snowpack-app/app-scripts-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion create-snowpack-app/app-template-preact/babel.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
}
]
],
"plugins": ["@babel/plugin-syntax-import-meta"],
"env": {
"development": {
"plugins": ["@prefresh/babel-plugin"]
Expand Down
1 change: 0 additions & 1 deletion create-snowpack-app/app-template-preact/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 0 additions & 9 deletions create-snowpack-app/app-template-react-typescript/babel.config.json
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions create-snowpack-app/app-template-react-typescript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion create-snowpack-app/app-template-react-typescript/snowpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}],
],
Expand Down
9 changes: 0 additions & 9 deletions create-snowpack-app/app-template-react/babel.config.json
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions create-snowpack-app/app-template-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion create-snowpack-app/app-template-react/snowpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ module.exports = {
},
plugins: [
'@snowpack/plugin-react-refresh',
'@snowpack/plugin-babel',
'@snowpack/plugin-dotenv',
],
};
21 changes: 4 additions & 17 deletions plugins/plugin-react-refresh/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
3 changes: 2 additions & 1 deletion plugins/plugin-react-refresh/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
42 changes: 37 additions & 5 deletions plugins/plugin-react-refresh/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -45,7 +76,7 @@ if (import.meta.hot) {
}
}

${contents}
${fastRefreshEnhancedCode}

/** React Refresh: Connect **/
if (import.meta.hot) {
Expand All @@ -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}) {
Expand All @@ -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);
Expand Down
1 change: 0 additions & 1 deletion snowpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
62 changes: 30 additions & 32 deletions test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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\\";
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we now use esbuild instead of Babel in this app, which created the output changes here

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`] = `
Expand Down Expand Up @@ -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();
}"
Expand Down Expand Up @@ -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`] = `
Expand Down Expand Up @@ -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();
}"
Expand Down