From 6424232dc14ba1d4e75f492c23167d459e5af403 Mon Sep 17 00:00:00 2001 From: Fatih Date: Sat, 4 Feb 2017 17:18:54 +0200 Subject: [PATCH 001/176] Reflect websocket proxy support on README (#1013) (#1483) * Reflect websocket proxy support on README * Add 'the' --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 0eb5cda3840..2e7b76e18ed 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -650,7 +650,7 @@ Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow- Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request without a `text/html` accept header will be redirected to the specified `proxy`. -Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections.
+The `proxy` option supports HTTP, HTTPS and WebSocket connections.
If the `proxy` option is **not** flexible enough for you, alternatively you can: * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). From 65e63403952f4f3c7e872f707fb3736e339254d9 Mon Sep 17 00:00:00 2001 From: vulong23 Date: Sat, 4 Feb 2017 23:47:19 +0700 Subject: [PATCH 002/176] Edit User Guide: Add ESLint config for VS Code users (#1482) * Add ESLint config for VS Code users * Update VSC ESLint note to a better solution Update VSC ESLint note to a better solution as discussed in Pull Request --- packages/react-scripts/template/README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2e7b76e18ed..2f4e2fdf1ef 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -185,6 +185,18 @@ You would need to install an ESLint plugin for your editor first. > + +>**For Visual Studio Code users** + +>VS Code ESLint plugin automatically detects Create React App's configuration file. So you do not need to create `eslintrc.json` at the root directory, except when you want to add your own rules. In that case, you should include CRA's config by adding this line: + +>```js +{ + // ... + "extends": "react-app" +} +``` + Then add this block to the `package.json` file of your project: ```js From adab23fa0093846e0ec5349c0f8f7ad6e66fcb5d Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 4 Feb 2017 12:43:27 -0500 Subject: [PATCH 003/176] e2e: Reduce complexity of e2e and improve Jest coverage (#1484) --- .../fixtures/kitchensink/.babelrc | 2 +- .../kitchensink/.template.dependencies.json | 1 - .../fixtures/kitchensink/src/App.js | 53 ++++++++++++------- .../fixtures/kitchensink/src/App.test.js | 8 --- .../kitchensink/src/features/env/NodePath.js | 20 +++---- .../src/features/env/NodePath.test.js | 4 +- .../src/features/syntax/ArrayDestructuring.js | 20 +++---- .../syntax/ArrayDestructuring.test.js | 4 +- .../src/features/syntax/ArraySpread.js | 20 +++---- .../src/features/syntax/ArraySpread.test.js | 4 +- .../src/features/syntax/AsyncAwait.js | 20 +++---- .../src/features/syntax/AsyncAwait.test.js | 4 +- .../src/features/syntax/ClassProperties.js | 12 ++++- .../features/syntax/ClassProperties.test.js | 4 +- .../src/features/syntax/ComputedProperties.js | 20 +++---- .../syntax/ComputedProperties.test.js | 4 +- .../features/syntax/CustomInterpolation.js | 20 +++---- .../syntax/CustomInterpolation.test.js | 4 +- .../src/features/syntax/DefaultParameters.js | 20 +++---- .../features/syntax/DefaultParameters.test.js | 4 +- .../features/syntax/DestructuringAndAwait.js | 20 +++---- .../syntax/DestructuringAndAwait.test.js | 4 +- .../src/features/syntax/Generators.js | 20 +++---- .../src/features/syntax/Generators.test.js | 4 +- .../features/syntax/ObjectDestructuring.js | 20 +++---- .../syntax/ObjectDestructuring.test.js | 4 +- .../src/features/syntax/ObjectSpread.js | 20 +++---- .../src/features/syntax/ObjectSpread.test.js | 4 +- .../src/features/syntax/Promises.js | 20 +++---- .../src/features/syntax/Promises.test.js | 4 +- .../src/features/syntax/RestAndDefault.js | 20 +++---- .../features/syntax/RestAndDefault.test.js | 4 +- .../src/features/syntax/RestParameters.js | 20 +++---- .../features/syntax/RestParameters.test.js | 4 +- .../features/syntax/TemplateInterpolation.js | 20 +++---- .../syntax/TemplateInterpolation.test.js | 4 +- tasks/e2e-kitchensink.sh | 14 ++++- 37 files changed, 269 insertions(+), 185 deletions(-) delete mode 100644 packages/react-scripts/fixtures/kitchensink/src/App.test.js diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc index 5686105b953..c14b2828d16 100644 --- a/packages/react-scripts/fixtures/kitchensink/.babelrc +++ b/packages/react-scripts/fixtures/kitchensink/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["latest"] + "presets": ["react-app"] } diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index 62e0d34a35c..50511b3d16a 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -1,6 +1,5 @@ { "dependencies": { - "babel-preset-latest": "6.16.0", "babel-register": "6.22.0", "babel-polyfill": "6.20.0", "chai": "3.5.0", diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index cf93b4c132b..fa297133f5d 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -1,28 +1,40 @@ -import React from 'react'; +import React, { Component, PropTypes, createElement } from 'react'; -class BuiltEmitter extends React.Component { - constructor(props) { - super(props) - - this.callWhenDone = done => done(); +class BuiltEmitter extends Component { + static propTypes = { + feature: PropTypes.func.isRequired } componentDidMount() { - this.callWhenDone(() => document.dispatchEvent(new Event('ReactFeatureDidMount'))); + const { feature } = this.props + + // Class components must call this.props.onReady when they're ready for the test. + // We will assume functional components are ready immediately after mounting. + if (!Component.isPrototypeOf(feature)) { + this.handleReady(); + } } - render() { - const feature = React.cloneElement(React.Children.only(this.props.children), { - setCallWhenDone: done => { - this.callWhenDone = done; - } - }); + handleReady() { + document.dispatchEvent(new Event('ReactFeatureDidMount')); + } - return
{feature}
; + render() { + const { + props: { feature }, + handleReady + } = this; + return ( +
+ {createElement(feature, { + onReady: handleReady + })} +
+ ); } } -class App extends React.Component { +class App extends Component { constructor(props) { super(props); @@ -105,9 +117,7 @@ class App extends React.Component { case 'unknown-ext-inclusion': require.ensure([], () => this.setFeature(require('./features/webpack/UnknownExtInclusion').default)); break; - default: - this.setFeature(null); - break; + default: throw new Error('Unknown feature!'); } } @@ -116,8 +126,11 @@ class App extends React.Component { } render() { - const Feature = this.state.feature; - return Feature ? : null; + const { feature } = this.state; + if (feature !== null) { + return ; + } + return null; } } diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.test.js b/packages/react-scripts/fixtures/kitchensink/src/App.test.js deleted file mode 100644 index b84af98d720..00000000000 --- a/packages/react-scripts/fixtures/kitchensink/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); -}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js index 1644b49ca04..deef80d20ac 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js @@ -1,21 +1,23 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' import load from 'absoluteLoad' -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js index 05b981853b9..81487d55968 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js @@ -5,6 +5,8 @@ import NodePath from './NodePath'; describe('NODE_PATH', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js index 1ee751af71f..d07271ed6fc 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load() { return [ @@ -9,21 +9,23 @@ function load() { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js index 617df2a6c6c..05d14263d25 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js @@ -5,6 +5,8 @@ import ArrayDestructuring from './ArrayDestructuring'; describe('array destructuring', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js index be6311980d7..6cb2f6162c4 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(users) { return [ @@ -9,21 +9,23 @@ function load(users) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load([{ id: 42, name: '42' }]); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js index 85fade6e3a9..a2191cf1c14 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js @@ -5,6 +5,8 @@ import ArraySpread from './ArraySpread'; describe('array spread', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js index 84dd42e0a9b..9fe920514a1 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' async function load() { return [ @@ -9,21 +9,23 @@ async function load() { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = await load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js index 072f16fffea..bc60c5b58f0 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js @@ -5,6 +5,8 @@ import AsyncAwait from './AsyncAwait'; describe('async/await', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js index 65e500d645b..726eba1524c 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js @@ -1,6 +1,10 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' + +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } -export default class extends React.Component { users = [ { id: 1, name: '1' }, { id: 2, name: '2' }, @@ -8,6 +12,10 @@ export default class extends React.Component { { id: 4, name: '4' } ]; + componentDidMount() { + this.props.onReady() + } + render() { return (
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js index 71d851dd2fc..898916b2f9a 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js @@ -5,6 +5,8 @@ import ClassProperties from './ClassProperties'; describe('class properties', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js index b6111a149d9..04dc7ba109b 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(prefix) { return [ @@ -9,21 +9,23 @@ function load(prefix) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load('user_'); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js index 4e9aaf17a1d..0aa3d4d7ec6 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js @@ -5,6 +5,8 @@ import ComputedProperties from './ComputedProperties'; describe('computed properties', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js index 8184d3bd4ba..c80f14dc882 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' const styled = ([style]) => style.trim() .split(/\s*;\s*/) @@ -14,21 +14,23 @@ function load() { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js index 10b1df278c1..79af8dc5f6b 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js @@ -5,6 +5,8 @@ import CustomInterpolation from './CustomInterpolation'; describe('custom interpolation', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js index 637a239d7a4..0d7b77d87e3 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(id = 0) { return [ @@ -9,21 +9,23 @@ function load(id = 0) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js index b5ece244681..c4a336563ac 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js @@ -5,6 +5,8 @@ import DefaultParameters from './DefaultParameters'; describe('default parameters', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js index e28e0bb3643..40f51754202 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' async function load() { return { users: [ @@ -9,21 +9,23 @@ async function load() { ] }; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const { users } = await load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js index 14521e30798..96b361c742e 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js @@ -5,6 +5,8 @@ import DestructuringAndAwait from './DestructuringAndAwait'; describe('destructuring and await', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js index a20fc19b75f..6bb64f9103f 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function * load(limit) { let i = 1; @@ -8,15 +8,13 @@ function * load(limit) { } } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } @@ -25,7 +23,11 @@ export default class extends React.Component { for (let user of load(4)) { users.push(user); } - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js index 1fd36cdbed3..4e6b8d1d9ad 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js @@ -5,6 +5,8 @@ import Generators from './Generators'; describe('generators', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js index db377cee5e6..3235a99104c 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load() { return [ @@ -9,21 +9,23 @@ function load() { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js index 7ed28147dec..0a21b291bc6 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js @@ -5,6 +5,8 @@ import ObjectDestructuring from './ObjectDestructuring'; describe('object destructuring', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js index 72356fb9404..fb43bf8676e 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(baseUser) { return [ @@ -9,21 +9,23 @@ function load(baseUser) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load({ age: 42 }); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js index 9de96c26418..4ca5d2b9ab1 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js @@ -5,6 +5,8 @@ import ObjectSpread from './ObjectSpread'; describe('object spread', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js index 9eb8c20f790..63f38fed473 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load() { return Promise.resolve([ @@ -9,24 +9,26 @@ function load() { ]); } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } componentDidMount() { load().then(users => { - this.setState({ users }, () => this.done()); + this.setState({ users }); }); } + componentDidUpdate() { + this.props.onReady(); + } + render() { return (
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js index 96b4d298d7c..36c5984a4b5 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js @@ -5,6 +5,8 @@ import Promises from './Promises'; describe('promises', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js index 94b75980835..7783868ab4d 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) { return [ @@ -9,21 +9,23 @@ function load({ id, ...rest } = { id: 0, user: { id: 42, name: '42' } }) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load(); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js index 95f4a19fa0b..22a91be0847 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js @@ -5,6 +5,8 @@ import RestAndDefault from './RestAndDefault'; describe('rest + default', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js index c1cd63e887e..cf216ce01f2 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load({ id = 0, ...rest }) { return [ @@ -9,21 +9,23 @@ function load({ id = 0, ...rest }) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load({ id: 0, user: { id: 42, name: '42' } }); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js index 8e097713318..f1f8e35e370 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js @@ -5,6 +5,8 @@ import RestParameters from './RestParameters'; describe('rest parameters', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js index 33b004722d8..dd6bf49b11d 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' function load(name) { return [ @@ -9,21 +9,23 @@ function load(name) { ]; } -export default class extends React.Component { +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired + } + constructor(props) { super(props); - - this.done = () => {}; - this.props.setCallWhenDone && this.props.setCallWhenDone((done) => { - this.done = done; - }); - this.state = { users: [] }; } async componentDidMount() { const users = load('user_'); - this.setState({ users }, () => this.done()); + this.setState({ users }); + } + + componentDidUpdate() { + this.props.onReady(); } render() { diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js index b49af029a44..41a5fad2c5f 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js @@ -5,6 +5,8 @@ import TemplateInterpolation from './TemplateInterpolation'; describe('template interpolation', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 892230ab747..c681580b0c7 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -110,6 +110,9 @@ create_react_app --scripts-version=$scripts_path --internal-testing-template=$ro # Enter the app directory cd test-kitchensink +# Link to our preset +npm link $root_path/packages/babel-preset-react-app + # Test the build NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build # Check for expected output @@ -120,6 +123,7 @@ test -e build/static/js/main.*.js REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ + NODE_ENV=test \ npm test -- --no-cache --testPathPattern="/src/" # Test "development" environment @@ -132,18 +136,23 @@ grep -q 'The app is running at:' <(tail -f $tmp_server_log) E2E_URL="http://localhost:3001" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ + NODE_ENV=development \ node node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js # Test "production" environment E2E_FILE=./build/index.html \ CI=true \ NODE_PATH=src \ + NODE_ENV=production \ node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js # ****************************************************************************** # Finally, let's check that everything still works after ejecting. # ****************************************************************************** +# Unlink our preset +npm unlink $root_path/packages/babel-preset-react-app + # Eject... echo yes | npm run eject @@ -153,7 +162,7 @@ npm link $root_path/packages/eslint-config-react-app npm link $root_path/packages/react-dev-utils npm link $root_path/packages/react-scripts -# ...and we need to remove template's .babelrc +# ...and we need to remove template's .babelrc rm .babelrc # Test the build @@ -166,6 +175,7 @@ test -e build/static/js/main.*.js REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ + NODE_ENV=test \ npm test -- --no-cache --testPathPattern="/src/" # Test "development" environment @@ -178,7 +188,7 @@ grep -q 'The app is running at:' <(tail -f $tmp_server_log) E2E_URL="http://localhost:3002" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ - NODE_ENV=production \ + NODE_ENV=development \ node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js # Test "production" environment From 9e0e18fd2e42e469e81b3b9f4aa3bd717ca1b317 Mon Sep 17 00:00:00 2001 From: Jay Phelps Date: Thu, 5 Jan 2017 12:14:36 -0800 Subject: [PATCH 004/176] UX: Explain why build is failing (#1352) --- packages/react-scripts/scripts/build.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 42be50d43a8..1e1b6217043 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -144,7 +144,7 @@ function build(previousSizeMap) { } if (process.env.CI && stats.compilation.warnings.length) { - printErrors('Failed to compile.', stats.compilation.warnings); + printErrors('Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.', stats.compilation.warnings); process.exit(1); } From 0ac0d116b90d308149e538fbabe06091431a09d5 Mon Sep 17 00:00:00 2001 From: Ro Savage Date: Thu, 9 Feb 2017 03:21:13 +1300 Subject: [PATCH 005/176] Update comments for webpack loaders --- .../config/webpack.config.dev.js | 24 ++++++++----------- .../config/webpack.config.prod.js | 22 ++++++++--------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 96fd632b795..ac63ba2f38c 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -112,20 +112,14 @@ module.exports = { } ], loaders: [ - // Default loader: load all assets that are not handled - // by other loaders with the url loader. - // Note: This list needs to be updated with every change of extensions - // the other loaders match. - // E.g., when adding a loader for a new supported file extension, - // we need to add the supported extension to this loader too. - // Add one new line in `exclude` for each loader. - // - // "file" loader makes sure those assets get served by WebpackDevServer. - // When you `import` an asset, you get its (virtual) filename. - // In production, they would get copied to the `build` folder. - // "url" loader works like "file" loader except that it embeds assets - // smaller than specified limit in bytes as data URLs to avoid requests. - // A missing `test` is equivalent to a match. + // ** ADDING/UPDATING LOADERS ** + // The "url" loader handles all assets unless explicitly excluded. + // The `exclude` list *must* be updated with every change to loader extensions. + // When adding a new loader, you must add its `test` + // as a new entry in the `exclude` list for "url" loader. + + // "url" loader embeds assets smaller than specified size as data URLs to avoid requests. + // Otherwise, it acts like the "file" loader. { exclude: [ /\.html$/, @@ -179,6 +173,8 @@ module.exports = { name: 'static/media/[name].[hash:8].[ext]' } } + // ** STOP ** Are you adding a new loader? + // Remember to add the new extension(s) to the "url" loader exclusion list. ] }, // @remove-on-eject-begin diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 058db0d7921..7181c4ccae4 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -120,18 +120,14 @@ module.exports = { } ], loaders: [ - // Default loader: load all assets that are not handled - // by other loaders with the url loader. - // Note: This list needs to be updated with every change of extensions - // the other loaders match. - // E.g., when adding a loader for a new supported file extension, - // we need to add the supported extension to this loader too. - // Add one new line in `exclude` for each loader. - // - // "file" loader makes sure those assets end up in the `build` folder. - // When you `import` an asset, you get its filename. - // "url" loader works just like "file" loader but it also embeds - // assets smaller than specified size as data URLs to avoid requests. + // ** ADDING/UPDATING LOADERS ** + // The "url" loader handles all assets unless explicitly excluded. + // The `exclude` list *must* be updated with every change to loader extensions. + // When adding a new loader, you must add its `test` + // as a new entry in the `exclude` list in the "url" loader. + + // "url" loader embeds assets smaller than specified size as data URLs to avoid requests. + // Otherwise, it acts like the "file" loader. { exclude: [ /\.html$/, @@ -189,6 +185,8 @@ module.exports = { name: 'static/media/[name].[hash:8].[ext]' } } + // ** STOP ** Are you adding a new loader? + // Remember to add the new extension(s) to the "url" loader exclusion list. ] }, // @remove-on-eject-begin From c811a31622860367985bd0a1e9b523bfc8c52585 Mon Sep 17 00:00:00 2001 From: RodrigoHahn Date: Thu, 9 Feb 2017 12:41:24 -0200 Subject: [PATCH 006/176] Change "OS X" references to "macOS" (#1511) Updated README.md to refer to the current rebranding. --- packages/react-scripts/template/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2f4e2fdf1ef..75e10517f3d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -578,7 +578,7 @@ set REACT_APP_SECRET_CODE=abcdef&&npm start (Note: the lack of whitespace is intentional.) -#### Linux, OS X (Bash) +#### Linux, macOS (Bash) ```bash REACT_APP_SECRET_CODE=abcdef npm start @@ -684,7 +684,7 @@ set HTTPS=true&&npm start (Note: the lack of whitespace is intentional.) -#### Linux, OS X (Bash) +#### Linux, macOS (Bash) ```bash HTTPS=true npm start @@ -912,7 +912,7 @@ set CI=true&&npm run build (Note: the lack of whitespace is intentional.) -##### Linux, OS X (Bash) +##### Linux, macOS (Bash) ```bash CI=true npm test @@ -1285,7 +1285,7 @@ If this doesn’t happen, try one of the following workarounds: * If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebookincubator/create-react-app/issues/1164) due to a Webpack bug. * Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Working with editors supporting safe write”](https://webpack.github.io/docs/webpack-dev-server.html#working-with-editors-ides-supporting-safe-write). * If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42). -* On Linux and OS X, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers. +* On Linux and macOS, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers. If none of these solutions help please leave a comment [in this thread](https://github.com/facebookincubator/create-react-app/issues/659). From de6e0590b27c438250527ad1eaf410abada86a97 Mon Sep 17 00:00:00 2001 From: Chandan Rai Date: Fri, 10 Feb 2017 01:38:52 +0530 Subject: [PATCH 007/176] corrected minor typo (#1514) --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 113bf641366..4734d5ea83e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -439,7 +439,7 @@ npm install --save-dev --save-exact react-scripts@0.8.0 ### Babel Preset (`babel-preset-react-app`) -* The preset now detects the Node.js version in test environment and disables unnecessary ES2015 transforms using using `babel-preset-env`. ([@shubheksha](https://github.com/shubheksha) in [#878](https://github.com/facebookincubator/create-react-app/pull/878), [@JeffreyATW](https://github.com/JeffreyATW) in [#927 +* The preset now detects the Node.js version in test environment and disables unnecessary ES2015 transforms using `babel-preset-env`. ([@shubheksha](https://github.com/shubheksha) in [#878](https://github.com/facebookincubator/create-react-app/pull/878), [@JeffreyATW](https://github.com/JeffreyATW) in [#927 ](https://github.com/facebookincubator/create-react-app/pull/927)) * Fixes a duplicate dependency on `babel-plugin-transform-regenerator`. ([@akofman](https://github.com/akofman) in [#864](https://github.com/facebookincubator/create-react-app/pull/864)) From 160d8d13ef92c3dae7d1b2b82f954f89d0677780 Mon Sep 17 00:00:00 2001 From: Calvin Webster Date: Thu, 9 Feb 2017 15:46:47 -0500 Subject: [PATCH 008/176] clarifying the use of custom environment variables (#1513) * clarifying the use of custom environment variables * Tweak --- packages/react-scripts/template/README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 75e10517f3d..357df8d5dee 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -495,7 +495,7 @@ Now you are ready to use the imported React Bootstrap components within your com Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept. -Recent versions of [Flow](http://flowtype.org/) work with Create React App projects out of the box. +Recent versions of [Flow](http://flowtype.org/) work with Create React App projects out of the box. To add Flow to a Create React App project, follow these steps: @@ -515,7 +515,11 @@ To learn more about Flow, check out [its documentation](https://flowtype.org/). Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have `NODE_ENV` defined for you, and any other environment variables starting with -`REACT_APP_`. These environment variables will be defined for you on `process.env`. For example, having an environment +`REACT_APP_`. + +>Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebookincubator/create-react-app/issues/865#issuecomment-252199527). + +These environment variables will be defined for you on `process.env`. For example, having an environment variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`, in addition to `process.env.NODE_ENV`. @@ -623,12 +627,12 @@ These tutorials will help you to integrate your app with an API backend running using `fetch()` to access it. ### Node -Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/). +Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/). You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo). ### Ruby on Rails -Check out [this tutorial](https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/). +Check out [this tutorial](https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/). You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo-rails). ## Proxying API Requests in Development @@ -961,7 +965,7 @@ Snapshot testing is a feature of Jest that automatically generates text snapshot ### Editor Integration -If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest extension](https://github.com/orta/vscode-jest) which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates. +If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest extension](https://github.com/orta/vscode-jest) which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates. ![VS Code Jest Preview](https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png) @@ -1196,7 +1200,7 @@ GitHub Pages doesn't support routers that use the HTML5 `pushState` history API ### Heroku Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
-You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). +You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). #### Resolving "Module not found: Error: Cannot resolve 'file' or 'directory'" @@ -1204,7 +1208,7 @@ Sometimes `npm run build` works locally but fails during deploy via Heroku with ``` remote: Failed to create a production build. Reason: -remote: Module not found: Error: Cannot resolve 'file' or 'directory' +remote: Module not found: Error: Cannot resolve 'file' or 'directory' MyDirectory in /tmp/build_1234/src ``` From b999405c671d0061910ae89ba58731dc1b71762c Mon Sep 17 00:00:00 2001 From: pd4d10 Date: Fri, 10 Feb 2017 05:36:20 +0800 Subject: [PATCH 009/176] Add missing '\n' to the end of `package.json` file (#1510) --- packages/react-scripts/scripts/eject.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index b8f9d313143..a8ee0fc3102 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -145,7 +145,7 @@ prompt( fs.writeFileSync( path.join(appPath, 'package.json'), - JSON.stringify(appPackage, null, 2) + JSON.stringify(appPackage, null, 2) + '\n' ); console.log(); From 1d9159de230da8bb1e24744c4581038b91f43b09 Mon Sep 17 00:00:00 2001 From: Jih-Chi Lee Date: Fri, 10 Feb 2017 11:41:03 +0800 Subject: [PATCH 010/176] Make all react app vars accessible in index.html (#1440) * Make all vars accessiable in index.html * Fix wrong env provieded to DefinePlugin * Separate results from getClientEnvironment * The `string` should be object instead of string * Fix accessing wrong field * Changed variables naming to `raw` and `stringified` * Remove trailing commas --- packages/react-scripts/config/env.js | 22 +++++++++++++------ .../config/webpack.config.dev.js | 9 ++++---- .../config/webpack.config.prod.js | 11 +++++----- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js index 66ba341b358..168e1e644f1 100644 --- a/packages/react-scripts/config/env.js +++ b/packages/react-scripts/config/env.js @@ -15,25 +15,33 @@ var REACT_APP = /^REACT_APP_/i; function getClientEnvironment(publicUrl) { - var processEnv = Object + var raw = Object .keys(process.env) .filter(key => REACT_APP.test(key)) .reduce((env, key) => { - env[key] = JSON.stringify(process.env[key]); + env[key] = process.env[key]; return env; }, { // Useful for determining whether we’re running in production mode. // Most importantly, it switches React into the correct mode. - 'NODE_ENV': JSON.stringify( - process.env.NODE_ENV || 'development' - ), + 'NODE_ENV': process.env.NODE_ENV || 'development', // Useful for resolving the correct path to static assets in `public`. // For example, . // This should only be used as an escape hatch. Normally you would put // images into the `src` and `import` them in code to get their paths. - 'PUBLIC_URL': JSON.stringify(publicUrl) + 'PUBLIC_URL': publicUrl }); - return {'process.env': processEnv}; + // Stringify all values so we can feed into Webpack DefinePlugin + var stringified = { + 'process.env': Object + .keys(raw) + .reduce((env, key) => { + env[key] = JSON.stringify(raw[key]); + return env; + }, {}) + }; + + return { raw, stringified }; } module.exports = getClientEnvironment; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index ac63ba2f38c..b984ec3e4e7 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -198,12 +198,11 @@ module.exports = { ]; }, plugins: [ - // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: + // Makes some environment variables available in index.html. + // The public URL is available as %PUBLIC_URL% in index.html, e.g.: // // In development, this will be an empty string. - new InterpolateHtmlPlugin({ - PUBLIC_URL: publicUrl - }), + new InterpolateHtmlPlugin(env.raw), // Generates an `index.html` file with the +``` + +Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data right before sending the response. The client code can then read `window.SERVER_DATA` to use it. **Make sure to [sanitize the JSON before sending it to the client](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0) as it makes your app vulnerable to XSS attacks.** + ## Running Tests >Note: this feature is available with `react-scripts@0.3.0` and higher.
From c8644e294d93a7ac1f8d2e9ceebca20e21c761f3 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 11 Feb 2017 14:25:10 +0000 Subject: [PATCH 026/176] Massage 0.9.0 changelog --- CHANGELOG.md | 74 ++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 55 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5161fdfd744..5e0dbf6b7f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,56 +1,84 @@ -## 0.9.0 (2017-02-11) +## 0.9.0 (February 11, 2017) #### :rocket: New Feature + * `react-scripts` - * [#1489](https://github.com/facebookincubator/create-react-app/pull/1489) Support setting "homepage" to "." to generate relative asset paths. ([@tibdex](https://github.com/tibdex)) - This addition allows any application not using the HTML5 pushState API to be built to be served from any relative URL. + * [#1489](https://github.com/facebookincubator/create-react-app/pull/1489) Support setting `"homepage"` to `"."` to generate relative asset paths. ([@tibdex](https://github.com/tibdex)) + +    Applications that don’t use the HTML5 `pushState` API can now be built to be served from any relative URL. To enable this, specify `"."` as your `homepage` setting in `package.json`. It used to be possible before with a few known bugs, but they should be fixed now. See [Serving the Same Build from Different Paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths). + * [#937](https://github.com/facebookincubator/create-react-app/pull/1504) Add `PUBLIC_URL` env variable for advanced use. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + + If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) section. + * [#1440](https://github.com/facebookincubator/create-react-app/pull/1440) Make all react env vars accessible in index.html. ([@jihchi](https://github.com/jihchi)) + + This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). + * `react-dev-utils` + * [#1148](https://github.com/facebookincubator/create-react-app/pull/1148) Configure which browser to open in npm start (#873). ([@GAumala](https://github.com/GAumala)) - You can now disable the automatic browser launching by setting the `BROWSER` environment variable to `none`. + You can now disable the automatic browser launching by setting the `BROWSER` environment variable to `none`. You can also specify a different browser (or an arbitrary script) to open by default, [as supported by `opn` command](https://github.com/sindresorhus/opn#app) that we use under the hood. See [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration). #### :boom: Breaking Change + * `react-scripts` + * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) * [#1432](https://github.com/facebookincubator/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) + * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated react-scripts babel-jest && jest packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) - Jest has been updated to v18 and has introduced some [breaking changes](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html). + Jest has been updated to 18 and has introduced some [breaking changes and new features](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html). * `react-scripts`, `react-dev-utils` - * [#1148](https://github.com/facebookincubator/create-react-app/pull/1148) Configure which browser to open in npm start (#873). ([@GAumala](https://github.com/GAumala)) - Non-interactive terminals no longer automatically disable launching of the browser. + * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start ([@CaryLandholt](https://github.com/CaryLandholt)) + + Non-interactive terminals no longer automatically disable launching of the browser. Instead, you need to [specify `none` as `BROWSER` environment variable](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) if you wish to disable it. #### :bug: Bug Fix + * `react-scripts` + + * [#1441](https://github.com/facebookincubator/create-react-app/pull/1441) Added babel-runtime dependency to deduplicate dependencies when using yarn. ([@jkimbo](https://github.com/jkimbo)) + + This works around a bug in Yarn that caused newly created projects to be over 400MB. Now they are down to 126MB, just like with npm 3. + * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) * [#1458](https://github.com/facebookincubator/create-react-app/pull/1458) eject: Additionally remove `react-scripts` from dependencies. ([@creynders](https://github.com/creynders)) - * [#1441](https://github.com/facebookincubator/create-react-app/pull/1441) Added babel-runtime dependency to deduplicate dependencies when using yarn. ([@jkimbo](https://github.com/jkimbo)) * [#1309](https://github.com/facebookincubator/create-react-app/pull/1309) Bump babel-loader version (#1009). ([@frontsideair](https://github.com/frontsideair)) * [#1267](https://github.com/facebookincubator/create-react-app/pull/1267) Only gitignore dirs in root, not deep. ([@jayphelps](https://github.com/jayphelps)) + * `react-dev-utils` + * [#1377](https://github.com/facebookincubator/create-react-app/pull/1377) webpack-dev-server patch for 'still-ok' success status. ([@TheBlackBolt](https://github.com/TheBlackBolt)) * [#1274](https://github.com/facebookincubator/create-react-app/pull/1274) Downgrading to compatible version of SockJS-Client. ([@holloway](https://github.com/holloway)) * [#1247](https://github.com/facebookincubator/create-react-app/pull/1247) Only open Chrome tab if BROWSER is missing or is Chrome. ([@gaearon](https://github.com/gaearon)) #### :nail_care: Enhancement + * `react-scripts` - * [#1507](https://github.com/facebookincubator/create-react-app/pull/1507) fix: add yarn gitignores. ([@adjohnson916](https://github.com/adjohnson916)) + * [#1496](https://github.com/facebookincubator/create-react-app/pull/1496) Make build exit with error code when interrupted. ([@brandones](https://github.com/brandones)) - * [#1510](https://github.com/facebookincubator/create-react-app/pull/1510) Add missing '\n' to the end of `package.json` file. ([@pd4d10](https://github.com/pd4d10)) * [#1352](https://github.com/facebookincubator/create-react-app/pull/1352) More descriptive error message for env.CI = true warnings causing failures. ([@jayphelps](https://github.com/jayphelps)) + * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) + * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated react-scripts babel-jest && jest packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) * [#1432](https://github.com/facebookincubator/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) + * [#1507](https://github.com/facebookincubator/create-react-app/pull/1507) fix: add yarn gitignores. ([@adjohnson916](https://github.com/adjohnson916)) + * [#1510](https://github.com/facebookincubator/create-react-app/pull/1510) Add missing '\n' to the end of `package.json` file. ([@pd4d10](https://github.com/pd4d10)) * [#1324](https://github.com/facebookincubator/create-react-app/pull/1324) Use npm script hooks to avoid && in deploy script. ([@zpao](https://github.com/zpao)) - * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated react-scripts babel-jest && jest packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) - * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) + * `create-react-app` + * [#1270](https://github.com/facebookincubator/create-react-app/pull/1270) gh-1269: Enabling nested folder paths for project name. ([@dinukadesilva](https://github.com/dinukadesilva)) + #### :memo: Documentation -* `react-scripts` + +* User Guide + * [#1515](https://github.com/facebookincubator/create-react-app/pull/1515) readme: Advanced Configuration. ([@Timer](https://github.com/Timer)) * [#1513](https://github.com/facebookincubator/create-react-app/pull/1513) clarifying the use of custom environment variables. ([@calweb](https://github.com/calweb)) * [#1511](https://github.com/facebookincubator/create-react-app/pull/1511) Change "OS X" references to "macOS". ([@RodrigoHahn](https://github.com/RodrigoHahn)) @@ -62,24 +90,28 @@ * [#1260](https://github.com/facebookincubator/create-react-app/pull/1260) Heroku Deployment: Adds a note on how to resolve "File/Module Not Found Errors" . ([@MsUzoAgu](https://github.com/MsUzoAgu)) * [#1256](https://github.com/facebookincubator/create-react-app/pull/1256) Add "Changing the Page Title" to User Guide. ([@gaearon](https://github.com/gaearon)) * [#1245](https://github.com/facebookincubator/create-react-app/pull/1245) Replace the Flow documentation section. ([@gaearon](https://github.com/gaearon)) -* Other * [#1514](https://github.com/facebookincubator/create-react-app/pull/1514) corrected minor typo. ([@crowchirp](https://github.com/crowchirp)) * [#1393](https://github.com/facebookincubator/create-react-app/pull/1393) replace two space syntax with
tag. ([@carlsagan21](https://github.com/carlsagan21)) * [#1384](https://github.com/facebookincubator/create-react-app/pull/1384) Document Flow support. ([@dschep](https://github.com/dschep)) -* `react-dev-utils` + +* READMEs + * [#1375](https://github.com/facebookincubator/create-react-app/pull/1375) Change console.log for errors and warnings. ([@jimmyhmiller](https://github.com/jimmyhmiller)) * [#1369](https://github.com/facebookincubator/create-react-app/pull/1369) Add missing import in react-dev-utils README.md. ([@pedronauck](https://github.com/pedronauck)) #### :house: Internal -* Other + +* Internal Test Suite + * [#1519](https://github.com/facebookincubator/create-react-app/pull/1519) Add test cases for PUBLIC_URL and relative path. ([@Timer](https://github.com/Timer)) -* `react-scripts` * [#1484](https://github.com/facebookincubator/create-react-app/pull/1484) Improve e2e-kitchensink and Jest coverage. ([@Timer](https://github.com/Timer)) * [#1463](https://github.com/facebookincubator/create-react-app/pull/1463) Minor code style and wrong expect. ([@tuchk4](https://github.com/tuchk4)) * [#1470](https://github.com/facebookincubator/create-react-app/pull/1470) E2e jsdom fix. ([@EnoahNetzach](https://github.com/EnoahNetzach)) - * [#1289](https://github.com/facebookincubator/create-react-app/pull/1289) Remove path-exists from dependencies and replace it with fs.existsSync. ([@halfzebra](https://github.com/halfzebra)) -* `create-react-app`, `react-scripts` * [#1187](https://github.com/facebookincubator/create-react-app/pull/1187) Use a more sophisticated template for end-to-end testing.. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + +* Other + + * [#1289](https://github.com/facebookincubator/create-react-app/pull/1289) Remove path-exists from dependencies and replace it with fs.existsSync. ([@halfzebra](https://github.com/halfzebra)) #### Committers: 35 - Alex Driaguine ([alexdriaguine](https://github.com/alexdriaguine)) @@ -126,6 +158,10 @@ Inside any created project that has not been ejected, run: npm install --save-dev --save-exact react-scripts@0.9.0 ``` +Then, run your tests. If you are affected by breaking changes from Jest 18, consult [blog post](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html), [changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md#jest-1800), and [documentation](http://facebook.github.io/jest/docs/getting-started.html). You might need to update any snapshots since their format might have changed. + +If you relied on the browser not starting in non-interactive terminals, you now need to explicitly specify `BROWSER=none` as an environment variable to disable it. + ## 0.8.5 (January 9, 2017) #### :bug: Bug Fix From 0e745391f71bd98baf031bd86b55018aa05cbf5e Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 11 Feb 2017 14:27:58 +0000 Subject: [PATCH 027/176] Add release cutters to changelog --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e0dbf6b7f7..be4e5e1453b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## 0.9.0 (February 11, 2017) +Thanks to [@Timer](https://github.com/timer) for cutting this release. + #### :rocket: New Feature * `react-scripts` @@ -164,6 +166,8 @@ If you relied on the browser not starting in non-interactive terminals, you now ## 0.8.5 (January 9, 2017) +Thanks to [@fson](https://github.com/fson) for cutting this release. + #### :bug: Bug Fix * `create-react-app`, `react-scripts` * [#1365](https://github.com/facebookincubator/create-react-app/pull/1365) Use yarnpkg alias to run Yarn. ([@fson](https://github.com/fson)) @@ -415,6 +419,8 @@ npm install --save-dev --save-exact react-scripts@0.8.2 ## 0.8.1 (December 4, 2016) +Thanks to [@fson](https://github.com/fson) for cutting this release. + #### :bug: Bug Fix * `react-scripts` * [#1149](https://github.com/facebookincubator/create-react-app/pull/1149) Fix incorrectly stubbing JavaScript files with a dot in the import path in tests. ([@fson](https://github.com/fson)) @@ -429,6 +435,8 @@ npm install --save-dev --save-exact react-scripts@0.8.1 ## 0.8.0 (December 3, 2016) +Thanks to [@fson](https://github.com/fson) for cutting this release. + #### :rocket: New Feature * `react-scripts` * [#944](https://github.com/facebookincubator/create-react-app/pull/944) Crash the build during CI whenever linter warnings are encountered. ([@excitement-engineer](https://github.com/excitement-engineer)) @@ -583,6 +591,8 @@ npm install --save-dev --save-exact react-scripts@0.8.0 ## 0.7.0 (October 22, 2016) +Thanks to [@fson](https://github.com/fson) for cutting this release. + ### Build Dependency (`react-scripts`) * Updates Jest to [version 16.0](http://facebook.github.io/jest/blog/2016/10/03/jest-16.html), with an upgraded CLI, improved snapshot testing, new matchers and more. ([@chase](https://github.com/chase) in [#858](https://github.com/facebookincubator/create-react-app/pull/858)) From 7ea799d4327f0c5ce796e0556f497a0d98fe4e85 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 11 Feb 2017 14:31:52 +0000 Subject: [PATCH 028/176] Tweak indentation --- CHANGELOG.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index be4e5e1453b..e7fbc72b889 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,12 +11,12 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release.    Applications that don’t use the HTML5 `pushState` API can now be built to be served from any relative URL. To enable this, specify `"."` as your `homepage` setting in `package.json`. It used to be possible before with a few known bugs, but they should be fixed now. See [Serving the Same Build from Different Paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths). * [#937](https://github.com/facebookincubator/create-react-app/pull/1504) Add `PUBLIC_URL` env variable for advanced use. ([@EnoahNetzach](https://github.com/EnoahNetzach)) - - If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) section. + +    If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) section. * [#1440](https://github.com/facebookincubator/create-react-app/pull/1440) Make all react env vars accessible in index.html. ([@jihchi](https://github.com/jihchi)) - - This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). + +    This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). * `react-dev-utils` @@ -46,7 +46,7 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * [#1441](https://github.com/facebookincubator/create-react-app/pull/1441) Added babel-runtime dependency to deduplicate dependencies when using yarn. ([@jkimbo](https://github.com/jkimbo)) - This works around a bug in Yarn that caused newly created projects to be over 400MB. Now they are down to 126MB, just like with npm 3. +    This works around a bug in Yarn that caused newly created projects to be over 400MB. Now they are down to 126MB, just like with npm 3. * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) * [#1458](https://github.com/facebookincubator/create-react-app/pull/1458) eject: Additionally remove `react-scripts` from dependencies. ([@creynders](https://github.com/creynders)) From 0bcb28493fc8e857cec07cbbe44645dba31e79e0 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 11 Feb 2017 14:41:43 +0000 Subject: [PATCH 029/176] Markdown whitespace fixes --- CHANGELOG.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7fbc72b889..84c5666b503 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,23 +7,23 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * `react-scripts` * [#1489](https://github.com/facebookincubator/create-react-app/pull/1489) Support setting `"homepage"` to `"."` to generate relative asset paths. ([@tibdex](https://github.com/tibdex)) - -    Applications that don’t use the HTML5 `pushState` API can now be built to be served from any relative URL. To enable this, specify `"."` as your `homepage` setting in `package.json`. It used to be possible before with a few known bugs, but they should be fixed now. See [Serving the Same Build from Different Paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths). + + Applications that don’t use the HTML5 `pushState` API can now be built to be served from any relative URL. To enable this, specify `"."` as your `homepage` setting in `package.json`. It used to be possible before with a few known bugs, but they should be fixed now. See [Serving the Same Build from Different Paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths). * [#937](https://github.com/facebookincubator/create-react-app/pull/1504) Add `PUBLIC_URL` env variable for advanced use. ([@EnoahNetzach](https://github.com/EnoahNetzach)) - -    If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) section. - * [#1440](https://github.com/facebookincubator/create-react-app/pull/1440) Make all react env vars accessible in index.html. ([@jihchi](https://github.com/jihchi)) + If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) section. -    This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). + * [#1440](https://github.com/facebookincubator/create-react-app/pull/1440) Make all react env vars accessible in index.html. ([@jihchi](https://github.com/jihchi)) + This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). + * `react-dev-utils` * [#1148](https://github.com/facebookincubator/create-react-app/pull/1148) Configure which browser to open in npm start (#873). ([@GAumala](https://github.com/GAumala)) - + You can now disable the automatic browser launching by setting the `BROWSER` environment variable to `none`. You can also specify a different browser (or an arbitrary script) to open by default, [as supported by `opn` command](https://github.com/sindresorhus/opn#app) that we use under the hood. See [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration). - + #### :boom: Breaking Change * `react-scripts` @@ -31,7 +31,7 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) * [#1432](https://github.com/facebookincubator/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated react-scripts babel-jest && jest packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) - + Jest has been updated to 18 and has introduced some [breaking changes and new features](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html). * `react-scripts`, `react-dev-utils` @@ -46,8 +46,8 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * [#1441](https://github.com/facebookincubator/create-react-app/pull/1441) Added babel-runtime dependency to deduplicate dependencies when using yarn. ([@jkimbo](https://github.com/jkimbo)) -    This works around a bug in Yarn that caused newly created projects to be over 400MB. Now they are down to 126MB, just like with npm 3. - + This works around a bug in Yarn that caused newly created projects to be over 400MB. Now they are down to 126MB, just like with npm 3. + * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) * [#1458](https://github.com/facebookincubator/create-react-app/pull/1458) eject: Additionally remove `react-scripts` from dependencies. ([@creynders](https://github.com/creynders)) * [#1309](https://github.com/facebookincubator/create-react-app/pull/1309) Bump babel-loader version (#1009). ([@frontsideair](https://github.com/frontsideair)) @@ -93,7 +93,7 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * [#1256](https://github.com/facebookincubator/create-react-app/pull/1256) Add "Changing the Page Title" to User Guide. ([@gaearon](https://github.com/gaearon)) * [#1245](https://github.com/facebookincubator/create-react-app/pull/1245) Replace the Flow documentation section. ([@gaearon](https://github.com/gaearon)) * [#1514](https://github.com/facebookincubator/create-react-app/pull/1514) corrected minor typo. ([@crowchirp](https://github.com/crowchirp)) - * [#1393](https://github.com/facebookincubator/create-react-app/pull/1393) replace two space syntax with
tag. ([@carlsagan21](https://github.com/carlsagan21)) + * [#1393](https://github.com/facebookincubator/create-react-app/pull/1393) replace two space syntax with br tag. ([@carlsagan21](https://github.com/carlsagan21)) * [#1384](https://github.com/facebookincubator/create-react-app/pull/1384) Document Flow support. ([@dschep](https://github.com/dschep)) * READMEs From 3e226b26aa1e105b2997983f9fb66860a0555bdf Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 11 Feb 2017 14:47:22 +0000 Subject: [PATCH 030/176] Some changelog formatting --- CHANGELOG.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84c5666b503..5d4225d0755 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,17 +10,17 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. Applications that don’t use the HTML5 `pushState` API can now be built to be served from any relative URL. To enable this, specify `"."` as your `homepage` setting in `package.json`. It used to be possible before with a few known bugs, but they should be fixed now. See [Serving the Same Build from Different Paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths). - * [#937](https://github.com/facebookincubator/create-react-app/pull/1504) Add `PUBLIC_URL` env variable for advanced use. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + * [#937](https://github.com/facebookincubator/create-react-app/pull/1504) Add `PUBLIC_URL` environment variable for advanced use. ([@EnoahNetzach](https://github.com/EnoahNetzach)) If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) section. - * [#1440](https://github.com/facebookincubator/create-react-app/pull/1440) Make all react env vars accessible in index.html. ([@jihchi](https://github.com/jihchi)) + * [#1440](https://github.com/facebookincubator/create-react-app/pull/1440) Make all `REACT_APP_*` environment variables accessible in `index.html`. ([@jihchi](https://github.com/jihchi)) This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). * `react-dev-utils` - * [#1148](https://github.com/facebookincubator/create-react-app/pull/1148) Configure which browser to open in npm start (#873). ([@GAumala](https://github.com/GAumala)) + * [#1148](https://github.com/facebookincubator/create-react-app/pull/1148) Configure which browser to open with `npm start`. ([@GAumala](https://github.com/GAumala)) You can now disable the automatic browser launching by setting the `BROWSER` environment variable to `none`. You can also specify a different browser (or an arbitrary script) to open by default, [as supported by `opn` command](https://github.com/sindresorhus/opn#app) that we use under the hood. See [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration). @@ -30,13 +30,13 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) * [#1432](https://github.com/facebookincubator/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) - * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated react-scripts babel-jest && jest packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) + * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated `babel-jest` and `jest` packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) Jest has been updated to 18 and has introduced some [breaking changes and new features](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html). * `react-scripts`, `react-dev-utils` - * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start ([@CaryLandholt](https://github.com/CaryLandholt)) + * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) Non-interactive terminals no longer automatically disable launching of the browser. Instead, you need to [specify `none` as `BROWSER` environment variable](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) if you wish to disable it. @@ -44,14 +44,14 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * `react-scripts` - * [#1441](https://github.com/facebookincubator/create-react-app/pull/1441) Added babel-runtime dependency to deduplicate dependencies when using yarn. ([@jkimbo](https://github.com/jkimbo)) + * [#1441](https://github.com/facebookincubator/create-react-app/pull/1441) Added `babel-runtime` dependency to deduplicate dependencies when using Yarn. ([@jkimbo](https://github.com/jkimbo)) This works around a bug in Yarn that caused newly created projects to be over 400MB. Now they are down to 126MB, just like with npm 3. * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) - * [#1458](https://github.com/facebookincubator/create-react-app/pull/1458) eject: Additionally remove `react-scripts` from dependencies. ([@creynders](https://github.com/creynders)) - * [#1309](https://github.com/facebookincubator/create-react-app/pull/1309) Bump babel-loader version (#1009). ([@frontsideair](https://github.com/frontsideair)) - * [#1267](https://github.com/facebookincubator/create-react-app/pull/1267) Only gitignore dirs in root, not deep. ([@jayphelps](https://github.com/jayphelps)) + * [#1458](https://github.com/facebookincubator/create-react-app/pull/1458) Additionally remove `react-scripts` from dependencies on eject. ([@creynders](https://github.com/creynders)) + * [#1309](https://github.com/facebookincubator/create-react-app/pull/1309) Bump `babel-loader` version (#1009). ([@frontsideair](https://github.com/frontsideair)) + * [#1267](https://github.com/facebookincubator/create-react-app/pull/1267) Only gitignore directories in root, not deep. ([@jayphelps](https://github.com/jayphelps)) * `react-dev-utils` @@ -64,13 +64,13 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * `react-scripts` * [#1496](https://github.com/facebookincubator/create-react-app/pull/1496) Make build exit with error code when interrupted. ([@brandones](https://github.com/brandones)) - * [#1352](https://github.com/facebookincubator/create-react-app/pull/1352) More descriptive error message for env.CI = true warnings causing failures. ([@jayphelps](https://github.com/jayphelps)) + * [#1352](https://github.com/facebookincubator/create-react-app/pull/1352) More descriptive error message for `env.CI = true` warnings causing failures. ([@jayphelps](https://github.com/jayphelps)) * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) - * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated react-scripts babel-jest && jest packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) + * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated `babel-jest` and `jest` packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) * [#1432](https://github.com/facebookincubator/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) * [#1507](https://github.com/facebookincubator/create-react-app/pull/1507) fix: add yarn gitignores. ([@adjohnson916](https://github.com/adjohnson916)) - * [#1510](https://github.com/facebookincubator/create-react-app/pull/1510) Add missing '\n' to the end of `package.json` file. ([@pd4d10](https://github.com/pd4d10)) - * [#1324](https://github.com/facebookincubator/create-react-app/pull/1324) Use npm script hooks to avoid && in deploy script. ([@zpao](https://github.com/zpao)) + * [#1510](https://github.com/facebookincubator/create-react-app/pull/1510) Add missing `'\n'` to the end of `package.json` file. ([@pd4d10](https://github.com/pd4d10)) + * [#1324](https://github.com/facebookincubator/create-react-app/pull/1324) Use npm script hooks to avoid `&&` in deploy script. ([@zpao](https://github.com/zpao)) * `create-react-app` From 12e8ceae9d5b07af952db3032b4cf590d2c5e212 Mon Sep 17 00:00:00 2001 From: Blaine Kasten Date: Sat, 11 Feb 2017 17:05:54 -0600 Subject: [PATCH 031/176] Suggest jest-enzyme for simplifying test matchers (#994) * Suggest jest-enzyme for simplifying test matchers * Update README.md * Update README.md --- packages/react-scripts/template/README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c49da3e8d34..c30fb9d13ee 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -867,6 +867,20 @@ it('renders welcome message', () => { All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value).
Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below. +Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme. + +```js +expect(wrapper).toContainReact(welcome) +``` + +To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. + +```js +// src/setupTests.js +import 'jest-enzyme'; +``` + + ### Using Third Party Assertion Libraries We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566). From 645ba66d41a9c537f5514994893daacdbfbafb23 Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Sun, 12 Feb 2017 02:38:59 +0200 Subject: [PATCH 032/176] Add SASS support documentation #1007 (#1008) * Add SASS support documentation #1007 * Change SASS section title to more generic label * Fix link in Table of Contents * Chain build-css with watch-css script, fix typos * Update Sass and Less naming style * Fix wording, remove offensive words * Slightly rewite --- packages/react-scripts/template/README.md | 47 +++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c30fb9d13ee..00e4f248131 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -20,6 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) +- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Changing the HTML](#changing-the-html) @@ -353,6 +354,52 @@ becomes this: There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. +## Adding a CSS Preprocessor (Sass, Less etc.) + +Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a `.Button` CSS class in `` and `` components, we recommend creating a `