diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 76b20a4637c..bce9b72f7cc 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -6,134 +6,113 @@ */ 'use strict'; -const plugins = [ - // Experimental macros support. Will be documented after it's had some time - // in the wild. - require.resolve('babel-plugin-macros'), - // class { handleClick = () => { } } - require.resolve('babel-plugin-transform-class-properties'), - // The following two plugins use Object.assign directly, instead of Babel's - // extends helper. Note that this assumes `Object.assign` is available. - // { ...todo, completed: true } - [ - require.resolve('babel-plugin-transform-object-rest-spread'), - { - useBuiltIns: true, - }, - ], - // Transforms JSX - [ - require.resolve('babel-plugin-transform-react-jsx'), - { - useBuiltIns: true, - }, - ], - // Polyfills the runtime needed for async/await and generators - [ - require.resolve('babel-plugin-transform-runtime'), - { - helpers: false, - polyfill: false, - regenerator: true, - }, - ], -]; - -// This is similar to how `env` works in Babel: -// https://babeljs.io/docs/usage/babelrc/#env-option -// We are not using `env` because it’s ignored in versions > babel-core@6.10.4: -// https://github.com/babel/babel/issues/4539 -// https://github.com/facebookincubator/create-react-app/issues/720 -// It’s also nice that we can enforce `NODE_ENV` being specified. -var env = process.env.BABEL_ENV || process.env.NODE_ENV; -if (env !== 'development' && env !== 'test' && env !== 'production') { - throw new Error( - 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + - '`BABEL_ENV` environment variables. Valid values are "development", ' + - '"test", and "production". Instead, received: ' + - JSON.stringify(env) + - '.' - ); -} +module.exports = function(api, opts) { + if (!opts) { + opts = {}; + } -if (env === 'development' || env === 'test') { - // The following two plugins are currently necessary to make React warnings - // include more valuable information. They are included here because they are - // currently not enabled in babel-preset-react. See the below threads for more info: - // https://github.com/babel/babel/issues/4702 - // https://github.com/babel/babel/pull/3540#issuecomment-228673661 - // https://github.com/facebookincubator/create-react-app/issues/989 - plugins.push.apply(plugins, [ - // Adds component stack to warning messages - require.resolve('babel-plugin-transform-react-jsx-source'), - // Adds __self attribute to JSX which React will use for some warnings - require.resolve('babel-plugin-transform-react-jsx-self'), - ]); -} + // This is similar to how `env` works in Babel: + // https://babeljs.io/docs/usage/babelrc/#env-option + // We are not using `env` because it’s ignored in versions > babel-core@6.10.4: + // https://github.com/babel/babel/issues/4539 + // https://github.com/facebookincubator/create-react-app/issues/720 + // It’s also nice that we can enforce `NODE_ENV` being specified. + var env = process.env.BABEL_ENV || process.env.NODE_ENV; + var isEnvDevelopment = env === 'development'; + var isEnvProduction = env === 'production'; + var isEnvTest = env === 'test'; + if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) { + throw new Error( + 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + + '`BABEL_ENV` environment variables. Valid values are "development", ' + + '"test", and "production". Instead, received: ' + + JSON.stringify(env) + + '.' + ); + } -if (env === 'test') { - module.exports = { + return { presets: [ - // ES features necessary for user's Node version - [ - require('babel-preset-env').default, + isEnvTest && [ + // ES features necessary for user's Node version + require('@babel/preset-env').default, { targets: { node: 'current', }, }, ], - // JSX, Flow - require.resolve('babel-preset-react'), - ], - plugins: plugins.concat([ - // Compiles import() to a deferred require() - require.resolve('babel-plugin-dynamic-import-node'), - ]), - }; -} else { - module.exports = { - presets: [ - // Latest stable ECMAScript features - [ - require.resolve('babel-preset-env'), + (isEnvProduction || isEnvDevelopment) && [ + // Latest stable ECMAScript features + require('@babel/preset-env').default, { targets: { // React parses on ie 9, so we should too ie: 9, - // We currently minify with uglify - // Remove after https://github.com/mishoo/UglifyJS2/issues/448 - uglify: true, }, + // We currently minify with uglify + // Remove after https://github.com/mishoo/UglifyJS2/issues/448 + forceAllTransforms: true, // Disable polyfill transforms useBuiltIns: false, // Do not transform modules to CJS modules: false, }, ], - // JSX, Flow - require.resolve('babel-preset-react'), - ], - plugins: plugins.concat([ - // function* () { yield 42; yield 43; } [ - require.resolve('babel-plugin-transform-regenerator'), + require('@babel/preset-react').default, + { + // Adds component stack to warning messages + // Adds __self attribute to JSX which React will use for some warnings + development: isEnvDevelopment || isEnvTest, + }, + ], + [require('@babel/preset-flow').default], + ].filter(Boolean), + plugins: [ + // Experimental macros support. Will be documented after it's had some time + // in the wild. + require('babel-plugin-macros'), + // class { handleClick = () => { } } + require('@babel/plugin-proposal-class-properties').default, + // The following two plugins use Object.assign directly, instead of Babel's + // extends helper. Note that this assumes `Object.assign` is available. + // { ...todo, completed: true } + [ + require('@babel/plugin-proposal-object-rest-spread').default, + { + useBuiltIns: true, + }, + ], + // Transforms JSX + [ + require('@babel/plugin-transform-react-jsx').default, + { + useBuiltIns: true, + }, + ], + // Polyfills the runtime needed for async/await and generators + [ + require('@babel/plugin-transform-runtime').default, + { + helpers: false, + polyfill: false, + regenerator: true, + }, + ], + // function* () { yield 42; yield 43; } + !isEnvTest && [ + require('@babel/plugin-transform-regenerator').default, { // Async functions are converted to generators by babel-preset-env async: false, }, ], // Adds syntax support for import() - require.resolve('babel-plugin-syntax-dynamic-import'), - ]), + require('@babel/plugin-syntax-dynamic-import').default, + isEnvTest && + // Transform dynamic import to require + require('babel-plugin-transform-dynamic-import').default, + ].filter(Boolean), }; - - if (env === 'production') { - // Optimization: hoist JSX that never changes out of render() - // Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553 - // TODO: Enable again when these issues are resolved. - // plugins.push.apply(plugins, [ - // require.resolve('babel-plugin-transform-react-constant-elements') - // ]); - } -} +}; diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index d141fca52a0..c094838633b 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -11,21 +11,19 @@ "index.js" ], "dependencies": { - "babel-plugin-dynamic-import-node": "1.1.0", + "@babel/core": "7.0.0-beta.36", + "@babel/plugin-proposal-class-properties": "7.0.0-beta.36", + "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.36", + "@babel/plugin-transform-classes": "7.0.0-beta.36", + "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.36", + "@babel/plugin-transform-react-display-name": "7.0.0-beta.36", + "@babel/plugin-transform-react-jsx": "7.0.0-beta.36", + "@babel/plugin-transform-regenerator": "7.0.0-beta.36", + "@babel/plugin-transform-runtime": "7.0.0-beta.36", + "@babel/preset-env": "7.0.0-beta.36", + "@babel/preset-flow": "7.0.0-beta.36", + "@babel/preset-react": "7.0.0-beta.36", "babel-plugin-macros": "2.0.0", - "babel-plugin-syntax-dynamic-import": "6.18.0", - "babel-plugin-transform-class-properties": "6.24.1", - "babel-plugin-transform-object-rest-spread": "6.26.0", - "babel-plugin-transform-react-constant-elements": "6.23.0", - "babel-plugin-transform-react-jsx": "6.24.1", - "babel-plugin-transform-react-jsx-self": "6.22.0", - "babel-plugin-transform-react-jsx-source": "6.22.0", - "babel-plugin-transform-regenerator": "6.26.0", - "babel-plugin-transform-runtime": "6.23.0", - "babel-preset-env": "1.6.1", - "babel-preset-react": "6.24.1" - }, - "peerDependencies": { - "babel-runtime": "^6.23.0" + "babel-plugin-transform-dynamic-import": "2.0.0" } } diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index a10ef679952..915509069e7 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -11,7 +11,7 @@ "index.js" ], "peerDependencies": { - "babel-eslint": "^7.2.3", + "babel-eslint": "^8.0.2", "eslint": "^4.1.1", "eslint-plugin-flowtype": "^2.34.1", "eslint-plugin-import": "^2.6.0", diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 35c405e276c..6344c01185d 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -37,7 +37,7 @@ ], "dependencies": { "address": "1.0.3", - "babel-code-frame": "6.26.0", + "@babel/code-frame": "7.0.0-beta.36", "chalk": "1.1.3", "cross-spawn": "5.1.0", "detect-port-alt": "1.1.3", diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index ad0cf671c98..8dc0088f1b0 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -30,13 +30,15 @@ "lib/index.js" ], "devDependencies": { + "@babel/code-frame": "7.0.0-beta.36", + "@babel/core": "7.0.0-beta.36", + "@babel/runtime": "7.0.0-beta.36", "anser": "1.4.4", - "babel-code-frame": "6.26.0", - "babel-core": "^6.26.0", - "babel-eslint": "7.2.3", - "babel-loader": "^7.1.2", + "babel-core": "^7.0.0-bridge.0", + "babel-eslint": "^8.0.2", + "babel-jest": "^22.0.6", + "babel-loader": "^8.0.0-beta.0", "babel-preset-react-app": "^3.1.0", - "babel-runtime": "6.26.0", "chalk": "^2.1.0", "chokidar": "^1.7.0", "cross-env": "5.0.5", diff --git a/packages/react-error-overlay/src/containers/StackFrameCodeBlock.js b/packages/react-error-overlay/src/containers/StackFrameCodeBlock.js index 9bd36e019f7..eedf8006b84 100644 --- a/packages/react-error-overlay/src/containers/StackFrameCodeBlock.js +++ b/packages/react-error-overlay/src/containers/StackFrameCodeBlock.js @@ -14,7 +14,7 @@ import type { ScriptLine } from '../utils/stack-frame'; import { primaryErrorStyle, secondaryErrorStyle } from '../styles'; import generateAnsiHTML from '../utils/generateAnsiHTML'; -import codeFrame from 'babel-code-frame'; +import { codeFrameColumns } from '@babel/code-frame'; type StackFrameCodeBlockPropsType = {| lines: ScriptLine[], @@ -53,10 +53,17 @@ function StackFrameCodeBlock(props: Exact) { } sourceCode[line - 1] = text; }); - const ansiHighlight = codeFrame( + const ansiHighlight = codeFrameColumns( sourceCode.join('\n'), - lineNum, - columnNum == null ? 0 : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0), + { + start: { + line: lineNum, + column: + columnNum == null + ? 0 + : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0), + }, + }, { forceColor: true, linesAbove: contextSize, diff --git a/packages/react-error-overlay/webpack.config.iframe.js b/packages/react-error-overlay/webpack.config.iframe.js index c80b15afa14..2f26b43823f 100644 --- a/packages/react-error-overlay/webpack.config.iframe.js +++ b/packages/react-error-overlay/webpack.config.iframe.js @@ -19,7 +19,24 @@ module.exports = { rules: [ { test: /\.js$/, - include: path.resolve(__dirname, './src'), + include: [ + path.resolve(__dirname, './src'), + path.dirname( + require.resolve('chalk', { + paths: path.dirname(require.resolve('@babel/code-frame')), + }) + ), + path.dirname( + require.resolve( + 'ansi-styles', + path.dirname( + require.resolve('chalk', { + paths: path.dirname(require.resolve('@babel/code-frame')), + }) + ) + ) + ), + ], use: 'babel-loader', }, ], diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index b509af97054..2c6b364fe55 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -96,9 +96,9 @@ module.exports = { // Resolve Babel runtime relative to react-scripts. // It usually still works on npm 3 without this but it would be // unfortunate to rely on, as react-scripts could be symlinked, - // and thus babel-runtime might not be resolvable from the source. - 'babel-runtime': path.dirname( - require.resolve('babel-runtime/package.json') + // and thus @babel/runtime might not be resolvable from the source. + '@babel/runtime': path.dirname( + require.resolve('@babel/runtime/package.json') ), // @remove-on-eject-end // Support React Native Web diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index dea5b99eac6..0f1fc1c1704 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -103,9 +103,9 @@ module.exports = { // Resolve Babel runtime relative to react-scripts. // It usually still works on npm 3 without this but it would be // unfortunate to rely on, as react-scripts could be symlinked, - // and thus babel-runtime might not be resolvable from the source. - 'babel-runtime': path.dirname( - require.resolve('babel-runtime/package.json') + // and thus @babel/runtime might not be resolvable from the source. + '@babel/runtime': path.dirname( + require.resolve('@babel/runtime/package.json') ), // @remove-on-eject-end // Support React Native Web diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc deleted file mode 100644 index 14397221e3b..00000000000 --- a/packages/react-scripts/fixtures/kitchensink/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["react-app"], - "plugins": ["babel-plugin-transform-es2015-modules-commonjs"] -} diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index b8500f804b1..e4d3bec84f2 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -1,8 +1,8 @@ { "dependencies": { - "babel-register": "6.22.0", - "babel-plugin-transform-es2015-modules-commonjs": "6.22.0", - "babel-polyfill": "6.20.0", + "@babel/plugin-transform-modules-commonjs": "7.0.0-beta.36", + "@babel/polyfill": "7.0.0-beta.36", + "@babel/register": "7.0.0-beta.36", "chai": "3.5.0", "jsdom": "9.8.3", "mocha": "3.2.0", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index cdc0e921b4b..4b64367eeb7 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -21,13 +21,14 @@ "react-scripts": "./bin/react-scripts.js" }, "dependencies": { + "@babel/core": "7.0.0-beta.36", + "@babel/runtime": "7.0.0-beta.36", "autoprefixer": "7.1.6", - "babel-core": "6.26.0", - "babel-eslint": "7.2.3", + "babel-core": "7.0.0-bridge.0", + "babel-eslint": "8.0.2", "babel-jest": "22.0.6", - "babel-loader": "7.1.2", + "babel-loader": "8.0.0-beta.0", "babel-preset-react-app": "^3.1.0", - "babel-runtime": "6.26.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "css-loader": "0.28.7", diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index d73c45ddbfa..7b17163ca9e 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -134,26 +134,37 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_ENV=test \ yarn test --no-cache --testPathPattern=src -# Test "development" environment +# Prepare "development" environment tmp_server_log=`mktemp` PORT=3001 \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ nohup yarn start &>$tmp_server_log & grep -q 'You can now view' <(tail -f $tmp_server_log) + +# Before running Mocha, specify that it should use our preset +# TODO: this is very hacky and we should find some other solution +echo '{"presets":["react-app"]}' > .babelrc + +# Test "development" environment E2E_URL="http://localhost:3001" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ NODE_ENV=development \ - node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js - + BABEL_ENV=test \ + node_modules/.bin/mocha --compilers js:@babel/register --require @babel/polyfill integration/*.test.js # Test "production" environment E2E_FILE=./build/index.html \ CI=true \ NODE_PATH=src \ NODE_ENV=production \ + BABEL_ENV=test \ PUBLIC_URL=http://www.example.org/spa/ \ - node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js + node_modules/.bin/mocha --compilers js:@babel/register --require @babel/polyfill integration/*.test.js + +# Remove the config we just created for Mocha +# TODO: this is very hacky and we should find some other solution +rm .babelrc # ****************************************************************************** # Finally, let's check that everything still works after ejecting. @@ -193,15 +204,17 @@ E2E_URL="http://localhost:3002" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ NODE_ENV=development \ - node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js + BABEL_ENV=test \ + node_modules/.bin/mocha --compilers js:@babel/register --require @babel/polyfill integration/*.test.js # Test "production" environment E2E_FILE=./build/index.html \ CI=true \ NODE_ENV=production \ + BABEL_ENV=test \ NODE_PATH=src \ PUBLIC_URL=http://www.example.org/spa/ \ - node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js + node_modules/.bin/mocha --compilers js:@babel/register --require @babel/polyfill integration/*.test.js # Cleanup cleanup diff --git a/tasks/replace-own-deps.js b/tasks/replace-own-deps.js index 9178b01029e..15d53d9dc86 100755 --- a/tasks/replace-own-deps.js +++ b/tasks/replace-own-deps.js @@ -16,13 +16,15 @@ const packagesDir = path.join(__dirname, '../packages'); const pkgFilename = path.join(packagesDir, 'react-scripts/package.json'); const data = require(pkgFilename); -fs.readdirSync(packagesDir).forEach((name) => { +fs.readdirSync(packagesDir).forEach(name => { if (data.dependencies[name]) { data.dependencies[name] = 'file:' + path.join(packagesDir, name); } -}) +}); -fs.writeFile(pkgFilename, JSON.stringify(data, null, 2), 'utf8', (err) => { - if (err) throw err; +fs.writeFile(pkgFilename, JSON.stringify(data, null, 2), 'utf8', err => { + if (err) { + throw err; + } console.log('Replaced local dependencies.'); });