From 6dad6d2b7a32bb03ee50e0bc783d9b364ab8de96 Mon Sep 17 00:00:00 2001 From: sw-yx Date: Sun, 8 Oct 2017 14:34:03 -0400 Subject: [PATCH 01/16] added documentation for passing arguments to event handlers --- content/docs/handling-events.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index e1ea2d3c..38b985ee 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -139,3 +139,17 @@ class LoggingButton extends React.Component { ``` The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem. + +## Passing arguments to event handlers + +Inside a loop it is common to want to pass a param to an event handler. For example if `i` is the row id: + +```js + +``` + +or alternatively (especially if you want to avoid triggering a re-render in a child component): + +```js + +``` From de3bd87f4b3c5d370fe97e7eb65ef673e002404b Mon Sep 17 00:00:00 2001 From: jxom Date: Tue, 10 Oct 2017 08:41:44 +1100 Subject: [PATCH 02/16] Added fbjs eslint config, fixed lint errors and warnings --- .eslintrc | 7 +++++-- package.json | 6 +++++- .../StickyResponsiveSidebar/StickyResponsiveSidebar.js | 4 +++- src/html.js | 2 +- src/templates/components/MetaTitle/index.js | 4 +++- src/templates/components/Sidebar/Section.js | 1 + src/utils/isItemActive.js | 5 ++--- 7 files changed, 20 insertions(+), 9 deletions(-) diff --git a/.eslintrc b/.eslintrc index 28d87f00..a51454ef 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,13 +1,16 @@ { "extends": [ - "eslint:recommended", - "plugin:react/recommended" + "fbjs" ], "plugins": [ "prettier", "react" ], "parser": "babel-eslint", + "rules": { + "relay/graphql-naming": 0, + "max-len": 0 + }, "env": { "node": true, "browser": true diff --git a/package.json b/package.json index 8541b89c..1d214c9f 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,14 @@ "array-from": "^2.1.1", "babel-eslint": "^8.0.1", "eslint": "^4.8.0", + "eslint-config-fbjs": "^2.0.0", "eslint-config-react": "^1.1.7", - "eslint-plugin-flowtype": "^2.37.0", + "eslint-plugin-babel": "^4.1.2", + "eslint-plugin-flowtype": "^2.39.1", + "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-prettier": "^2.3.1", "eslint-plugin-react": "^7.4.0", + "eslint-plugin-relay": "^0.0.19", "flow-bin": "^0.56.0", "gatsby": "^1.9.9", "gatsby-link": "^1.6.9", diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js index d92e6ab9..d2981de3 100644 --- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js +++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js @@ -147,7 +147,9 @@ class StickyResponsiveSidebar extends Component { boxShadow: '0 0 20px rgba(0, 0, 0, 0.3)', [media.lessThan('small')]: smallScreenBottomBarStyles, }} - onClick={this._openNavMenu}> + onClick={this._openNavMenu} + role="button" + tabIndex="-1">
+ }} + role="link" + tabIndex="-1"> {children}
); diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js index 83b9917c..517a89dd 100644 --- a/src/templates/components/Sidebar/Section.js +++ b/src/templates/components/Sidebar/Section.js @@ -9,6 +9,7 @@ 'use strict'; +import React from 'react'; import {colors, media} from 'theme'; import isItemActive from 'utils/isItemActive'; import MetaTitle from '../MetaTitle'; diff --git a/src/utils/isItemActive.js b/src/utils/isItemActive.js index d5e501cd..ad0dfe11 100644 --- a/src/utils/isItemActive.js +++ b/src/utils/isItemActive.js @@ -26,10 +26,9 @@ const isItemActive = (location, item) => { } } else if (item.id.includes('html')) { return location.pathname.includes(item.id); - } else { - const slugId = location.pathname.split('/').slice(-1)[0]; - return slugId === slugify(item.id); } + const slugId = location.pathname.split('/').slice(-1)[0]; + return slugId === slugify(item.id); }; export default isItemActive; From 43c1c007032f0c57ab3b4e8bda66af5ba6112e89 Mon Sep 17 00:00:00 2001 From: hozefaj Date: Mon, 9 Oct 2017 16:11:18 -0700 Subject: [PATCH 03/16] fix links to pure component within docs --- content/blog/2017-04-07-react-v15.5.0.md | 4 ++-- content/docs/addons-pure-render-mixin.md | 2 +- content/docs/addons-shallow-compare.md | 4 ++-- content/docs/addons.md | 2 +- content/docs/reference-pure-render-mixin.md | 2 +- content/docs/reference-react-component.md | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/content/blog/2017-04-07-react-v15.5.0.md b/content/blog/2017-04-07-react-v15.5.0.md index eea84664..7a61d6e8 100644 --- a/content/blog/2017-04-07-react-v15.5.0.md +++ b/content/blog/2017-04-07-react-v15.5.0.md @@ -113,8 +113,8 @@ We're discontinuing active maintenance of React Addons packages. In truth, most - **react-addons-create-fragment** – React 16 will have first-class support for fragments, at which point this package won't be necessary. We recommend using arrays of keyed elements instead. - **react-addons-css-transition-group** - Use [react-transition-group/CSSTransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement. - **react-addons-linked-state-mixin** - Explicitly set the `value` and `onChange` handler instead. -- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead. -- **react-addons-shallow-compare** - Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead. +- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. +- **react-addons-shallow-compare** - Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. - **react-addons-transition-group** - Use [react-transition-group/TransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement. - **react-addons-update** - Use [immutability-helper](https://github.com/kolodny/immutability-helper) instead, a drop-in replacement. - **react-linked-input** - Explicitly set the `value` and `onChange` handler instead. diff --git a/content/docs/addons-pure-render-mixin.md b/content/docs/addons-pure-render-mixin.md index 03cd2e02..c6230586 100644 --- a/content/docs/addons-pure-render-mixin.md +++ b/content/docs/addons-pure-render-mixin.md @@ -8,7 +8,7 @@ category: Add-Ons > Note: > -> `PureRenderMixin` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead. +> `PureRenderMixin` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. **Importing** diff --git a/content/docs/addons-shallow-compare.md b/content/docs/addons-shallow-compare.md index 8845d387..90f0c1d1 100644 --- a/content/docs/addons-shallow-compare.md +++ b/content/docs/addons-shallow-compare.md @@ -8,7 +8,7 @@ category: Reference > Note: > -> `shallowCompare` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead. +> `shallowCompare` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. **Importing** @@ -19,7 +19,7 @@ var shallowCompare = require('react-addons-shallow-compare'); // ES5 with npm ## Overview -Before [`React.PureComponent`](/docs/react-api.html#react.purecomponent) was introduced, `shallowCompare` was commonly used to achieve the same functionality as [`PureRenderMixin`](pure-render-mixin.html) while using ES6 classes with React. +Before [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) was introduced, `shallowCompare` was commonly used to achieve the same functionality as [`PureRenderMixin`](pure-render-mixin.html) while using ES6 classes with React. If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this helper function for a performance boost in some cases. diff --git a/content/docs/addons.md b/content/docs/addons.md index 374bedab..841348da 100644 --- a/content/docs/addons.md +++ b/content/docs/addons.md @@ -21,7 +21,7 @@ The add-ons below are in the development (unminified) version of React only: The add-ons below are considered legacy and their use is discouraged. They will keep working in observable future, but there is no further development. -- [`PureRenderMixin`](pure-render-mixin.html). Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead. +- [`PureRenderMixin`](pure-render-mixin.html). Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. - [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update. - [`update`](update.html). Use [`kolodny/immutability-helper`](https://github.com/kolodny/immutability-helper) instead. - [`ReactDOMFactories`](dom-factories.html), pre-configured DOM factories to make React easier to use without JSX. diff --git a/content/docs/reference-pure-render-mixin.md b/content/docs/reference-pure-render-mixin.md index a68357bc..6da08e31 100644 --- a/content/docs/reference-pure-render-mixin.md +++ b/content/docs/reference-pure-render-mixin.md @@ -8,7 +8,7 @@ permalink: docs/pure-render-mixin.html > Note -> The `PureRenderMixin` mixin predates `React.PureComponent`. This reference doc is provided for legacy purposes, and you should consider using [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead. +> The `PureRenderMixin` mixin predates `React.PureComponent`. This reference doc is provided for legacy purposes, and you should consider using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead. If your React component's render function renders the same result given the same props and state, you can use this mixin for a performance boost in some cases. diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 24d5f6ff..a91183da 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -204,7 +204,7 @@ Returning `false` does not prevent child components from re-rendering when *thei Currently, if `shouldComponentUpdate()` returns `false`, then [`componentWillUpdate()`](#componentwillupdate), [`render()`](#render), and [`componentDidUpdate()`](#componentdidupdate) will not be invoked. Note that in the future React may treat `shouldComponentUpdate()` as a hint rather than a strict directive, and returning `false` may still result in a re-rendering of the component. -If you determine a specific component is slow after profiling, you may change it to inherit from [`React.PureComponent`](/docs/react-api.html#react.purecomponent) which implements `shouldComponentUpdate()` with a shallow prop and state comparison. If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped. +If you determine a specific component is slow after profiling, you may change it to inherit from [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) which implements `shouldComponentUpdate()` with a shallow prop and state comparison. If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped. * * * From 192fca8a43d0f9e1394239f02f010856ed0cb0f2 Mon Sep 17 00:00:00 2001 From: Tommy Graves Date: Mon, 9 Oct 2017 19:35:38 -0400 Subject: [PATCH 04/16] Clarifies the behavior of test renderer's find methods --- content/docs/reference-test-renderer.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md index 75f75f01..9e463400 100644 --- a/content/docs/reference-test-renderer.md +++ b/content/docs/reference-test-renderer.md @@ -158,7 +158,7 @@ Returns the root "test instance" object that is useful for making assertions abo testInstance.find(test) ``` -Find the first descendant test instance for which `test(testInstance)` returns `true`. +Find the only descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error. ### `testInstance.findByType()` @@ -166,7 +166,7 @@ Find the first descendant test instance for which `test(testInstance)` returns ` testInstance.findByType(type) ``` -Find the first descendant test instance with the provided `type`. +Find the only descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error. ### `testInstance.findByProps()` @@ -174,7 +174,7 @@ Find the first descendant test instance with the provided `type`. testInstance.findByProps(props) ``` -Find the first descendant test instance with the provided `props`. +Find the only descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error. ### `testInstance.findAll()` From b373eeccbd9827ec3f60c79eba1399189fd18215 Mon Sep 17 00:00:00 2001 From: Rodrigo Rosenfeld Rosas Date: Mon, 9 Oct 2017 21:08:05 -0300 Subject: [PATCH 05/16] Improves the documentation on Reconciliation --- content/docs/reconciliation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index ce0bfb26..9bf5d304 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -142,7 +142,7 @@ As a last resort, you can pass item's index in the array as a key. This can work ## Tradeoffs -It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. We are regularly refining the heuristics in order to make common use cases faster. +It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. Just to be clear, rerender in this context means calling `render` for all components, it doesn't mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections. We are regularly refining the heuristics in order to make common use cases faster. In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree. From 037fdf82d02532d59e08ec40c85d7a813d91524a Mon Sep 17 00:00:00 2001 From: sw-yx Date: Mon, 9 Oct 2017 22:11:11 -0400 Subject: [PATCH 06/16] modified handling-events page --- content/docs/handling-events.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 38b985ee..5a64a395 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -145,11 +145,5 @@ The problem with this syntax is that a different callback is created each time t Inside a loop it is common to want to pass a param to an event handler. For example if `i` is the row id: ```js - -``` - -or alternatively (especially if you want to avoid triggering a re-render in a child component): - -```js - -``` + +``` \ No newline at end of file From 4b155a22ed9cd1e7c9d9688d249d21e4e0837b99 Mon Sep 17 00:00:00 2001 From: jxom Date: Tue, 10 Oct 2017 15:30:25 +1100 Subject: [PATCH 07/16] PR changes --- .../StickyResponsiveSidebar.js | 2 +- src/templates/components/MetaTitle/index.js | 14 +- src/templates/components/Sidebar/Section.js | 47 ++--- yarn.lock | 180 +++++++++++------- 4 files changed, 136 insertions(+), 107 deletions(-) diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js index d2981de3..70547391 100644 --- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js +++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js @@ -149,7 +149,7 @@ class StickyResponsiveSidebar extends Component { }} onClick={this._openNavMenu} role="button" - tabIndex="-1"> + tabIndex={0}>
( +const MetaTitle = ({children, title, cssProps = {}, onDark = false}) => (
+ }}> {children}
); diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js index 517a89dd..ff7a4596 100644 --- a/src/templates/components/Sidebar/Section.js +++ b/src/templates/components/Sidebar/Section.js @@ -26,32 +26,35 @@ const Section = ({ section, }) => (
- + - {section.title} - + {section.title} + - + [media.lessThan('small')]: { + display: 'none', + }, + }} + /> + +
    =6.0.0 <=6.1.1": +"emoji-regex@>=6.0.0 <=6.1.1", emoji-regex@^6.1.0: version "6.1.1" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e" @@ -3076,6 +3100,10 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" +eslint-config-fbjs@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-fbjs/-/eslint-config-fbjs-2.0.0.tgz#9f6ed690f500c2d750bf651e0cf1c65cf10b1c14" + eslint-config-prettier@^2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.6.0.tgz#f21db0ebb438ad678fb98946097c4bb198befccc" @@ -3086,12 +3114,28 @@ eslint-config-react@^1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/eslint-config-react/-/eslint-config-react-1.1.7.tgz#a0918d0fc47d0e9bd161a47308021da85d2585b3" -eslint-plugin-flowtype@^2.37.0: - version "2.37.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.37.0.tgz#2b09694deea6efdd8354eccd328db134b2d8b6d5" +eslint-plugin-babel@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-4.1.2.tgz#79202a0e35757dd92780919b2336f1fa2fe53c1e" + +eslint-plugin-flowtype@^2.39.1: + version "2.39.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.39.1.tgz#b5624622a0388bcd969f4351131232dcb9649cd5" dependencies: lodash "^4.15.0" +eslint-plugin-jsx-a11y@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.2.tgz#659277a758b036c305a7e4a13057c301cd3be73f" + dependencies: + aria-query "^0.7.0" + array-includes "^3.0.3" + ast-types-flow "0.0.7" + axobject-query "^0.1.0" + damerau-levenshtein "^1.0.0" + emoji-regex "^6.1.0" + jsx-ast-utils "^1.4.0" + eslint-plugin-prettier@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.3.1.tgz#e7a746c67e716f335274b88295a9ead9f544e44d" @@ -3108,6 +3152,12 @@ eslint-plugin-react@^7.4.0: jsx-ast-utils "^2.0.0" prop-types "^15.5.10" +eslint-plugin-relay@^0.0.19: + version "0.0.19" + resolved "https://registry.yarnpkg.com/eslint-plugin-relay/-/eslint-plugin-relay-0.0.19.tgz#68767f79f19bf81e2aa6a7ccf82fe30d65015efe" + dependencies: + graphql "^0.11.3" + eslint-scope@^3.7.1: version "3.7.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8" @@ -3175,10 +3225,6 @@ esprima@^2.6.0: version "2.7.3" resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581" -esprima@^3.1.1: - version "3.1.3" - resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633" - esprima@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804" @@ -3461,9 +3507,9 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.1, fbjs@^0.8.16: - version "0.8.16" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" +fbjs@^0.8.1, fbjs@^0.8.12, fbjs@^0.8.9: + version "0.8.14" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" dependencies: core-js "^1.0.0" isomorphic-fetch "^2.1.1" @@ -3473,9 +3519,9 @@ fbjs@^0.8.1, fbjs@^0.8.16: setimmediate "^1.0.5" ua-parser-js "^0.7.9" -fbjs@^0.8.12, fbjs@^0.8.9: - version "0.8.14" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" +fbjs@^0.8.16: + version "0.8.16" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" dependencies: core-js "^1.0.0" isomorphic-fetch "^2.1.1" @@ -4392,12 +4438,18 @@ graphql-skip-limit@^1.0.5: dependencies: babel-runtime "^6.26.0" -graphql@0.10.5, graphql@^0.10.3, graphql@^0.10.5: +graphql@^0.10.3, graphql@^0.10.5: version "0.10.5" resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.10.5.tgz#c9be17ca2bdfdbd134077ffd9bbaa48b8becd298" dependencies: iterall "^1.1.0" +graphql@^0.11.3: + version "0.11.7" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.11.7.tgz#e5abaa9cb7b7cccb84e9f0836bf4370d268750c6" + dependencies: + iterall "1.1.3" + gray-matter@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e" @@ -4869,26 +4921,7 @@ inline-style-prefixer@^3.0.6: bowser "^1.6.0" css-in-js-utils "^1.0.3" -inquirer@^3.0.1: - version "3.1.1" - resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.1.1.tgz#87621c4fba4072f48a8dd71c9f9df6f100b2d534" - dependencies: - ansi-escapes "^2.0.0" - chalk "^1.0.0" - cli-cursor "^2.1.0" - cli-width "^2.0.0" - external-editor "^2.0.4" - figures "^2.0.0" - lodash "^4.3.0" - mute-stream "0.0.7" - run-async "^2.2.0" - rx-lite "^4.0.8" - rx-lite-aggregates "^4.0.8" - string-width "^2.0.0" - strip-ansi "^3.0.0" - through "^2.3.6" - -inquirer@^3.0.6: +inquirer@^3.0.1, inquirer@^3.0.6: version "3.3.0" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9" dependencies: @@ -5341,6 +5374,10 @@ items@2.x.x: version "2.1.1" resolved "https://registry.yarnpkg.com/items/-/items-2.1.1.tgz#8bd16d9c83b19529de5aea321acaada78364a198" +iterall@1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9" + iterall@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.1.tgz#f7f0af11e9a04ec6426260f5019d9fcca4d50214" @@ -5386,14 +5423,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" -js-yaml@^3.4.6, js-yaml@^3.5.2, js-yaml@^3.8.1: - version "3.8.4" - resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.4.tgz#520b4564f86573ba96662af85a8cafa7b4b5a6f6" - dependencies: - argparse "^1.0.7" - esprima "^3.1.1" - -js-yaml@^3.9.1: +js-yaml@^3.4.6, js-yaml@^3.5.2, js-yaml@^3.8.1, js-yaml@^3.9.1: version "3.10.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc" dependencies: @@ -5547,6 +5577,10 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.3.6" +jsx-ast-utils@^1.4.0: + version "1.4.1" + resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1" + jsx-ast-utils@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f" @@ -6189,13 +6223,13 @@ mime-db@~1.25.0: version "1.25.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.25.0.tgz#c18dbd7c73a5dbf6f44a024dc0d165a1e7b1c392" -mime-types@2.1.13: +mime-types@2.1.13, mime-types@~2.1.11: version "2.1.13" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.13.tgz#e07aaa9c6c6b9a7ca3012c69003ad25a39e92a88" dependencies: mime-db "~1.25.0" -mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.7: +mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.7: version "2.1.15" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.15.tgz#a4ebf5064094569237b8cf70046776d09fc92aed" dependencies: @@ -7513,11 +7547,7 @@ preserve@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" -prettier@^1.3.1: - version "1.5.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.5.2.tgz#7ea0751da27b93bfb6cecfcec509994f52d83bb3" - -prettier@^1.7.4: +prettier@^1.3.1, prettier@^1.7.4: version "1.7.4" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa" @@ -7580,14 +7610,14 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.10, prop-types@^15.5.8: +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8: version "15.5.10" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" dependencies: fbjs "^0.8.9" loose-envify "^1.3.1" -prop-types@^15.5.4, prop-types@^15.6.0: +prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -7725,7 +7755,16 @@ react-deep-force-update@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.0.1.tgz#4f7f6c12c3e7de42f345992a3c518236fa1ecad3" -react-dom@16.0.0, react-dom@^15.6.0, react-dom@^16.0.0: +react-dom@^15.6.0: + version "15.6.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730" + dependencies: + fbjs "^0.8.9" + loose-envify "^1.1.0" + object-assign "^4.1.0" + prop-types "^15.5.10" + +react-dom@^16.0.0: version "16.0.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58" dependencies: @@ -7788,7 +7827,17 @@ react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" -react@16.0.0, react@^15.6.0, react@^16.0.0: +react@^15.6.0: + version "15.6.2" + resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72" + dependencies: + create-react-class "^15.6.0" + fbjs "^0.8.9" + loose-envify "^1.1.0" + object-assign "^4.1.0" + prop-types "^15.5.10" + +react@^16.0.0: version "16.0.0" resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d" dependencies: @@ -8974,13 +9023,6 @@ string-width@^1.0.1, string-width@^1.0.2: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" -string-width@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.0.tgz#030664561fc146c9423ec7d978fe2457437fe6d0" - dependencies: - is-fullwidth-code-point "^2.0.0" - strip-ansi "^4.0.0" - string-width@^2.1.0, string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" @@ -9363,18 +9405,12 @@ topo@2.x.x: dependencies: hoek "4.x.x" -tough-cookie@>=2.3.3: +tough-cookie@>=2.3.3, tough-cookie@~2.3.0: version "2.3.3" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561" dependencies: punycode "^1.4.1" -tough-cookie@~2.3.0: - version "2.3.2" - resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a" - dependencies: - punycode "^1.4.1" - tracer@^0.8.9: version "0.8.11" resolved "https://registry.yarnpkg.com/tracer/-/tracer-0.8.11.tgz#5941c67404410d86665b75bba68bb1c9d2c3cacd" From 16b5b8f51012b65ba5d559071587691b82f87350 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 10 Oct 2017 11:54:43 +0100 Subject: [PATCH 08/16] Tweak instructions --- content/docs/how-to-contribute.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md index ff97aec5..e514a948 100644 --- a/content/docs/how-to-contribute.md +++ b/content/docs/how-to-contribute.md @@ -95,7 +95,7 @@ In order to accept your pull request, we need you to submit a CLA. You only need ### Contribution Prerequisites -* You have `node` installed at v4.0.0+ and `npm` at v2.0.0+. +* You have `node` installed at v6.0.0+ and `npm` at v3.0.0+. * You have `gcc` installed or are comfortable installing a compiler if needed. Some of our `npm` dependencies may require a compilation step. On OS X, the Xcode Command Line Tools will cover this. On Ubuntu, `apt-get install build-essential` will install the required packages. Similar commands should work on other Linux distros. Windows will require some additional steps, see the [`node-gyp` installation instructions](https://github.com/nodejs/node-gyp#installation) for details. * You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally. * You are familiar with `git`. @@ -118,7 +118,7 @@ First, run `npm run build`. This will produce pre-built bundles in `build` folde The easiest way to try your changes is to run `npm run build` and then open `fixtures/packaging/babel-standalone/dev.html`. This file already uses `react.js` from the `build` folder so it will pick up your changes. -If you want to try your changes in your existing React project, you may copy `build/umd/react.development.js`, `build/umd/react-dom.development.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `npm link` to point them to your local `build` folder: +If you want to try your changes in your existing React project, you may copy `build/dist/react.development.js`, `build/dist/react-dom.development.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `npm link` to point them to your local `build` folder: ```sh cd your_project From a2011135358dc9d88543ba67b647c9eb2adea169 Mon Sep 17 00:00:00 2001 From: Fredrick Mgbeoma Date: Tue, 10 Oct 2017 12:51:41 +0100 Subject: [PATCH 09/16] Added ellipsis to indicate incomplete code snippet (#115) * Added ellipsis to indicate incomplete code snippet Ellipsis indicate that the code snippet shown is part of a larger code sample. * Add missing indentation --- content/docs/lifting-state-up.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index e7beb98e..43cb7db8 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -166,6 +166,7 @@ class TemperatureInput extends React.Component { render() { const temperature = this.state.temperature; + // ... ``` However, we want these two inputs to be in sync with each other. When we update the Celsius input, the Fahrenheit input should reflect the converted temperature, and vice versa. @@ -182,6 +183,7 @@ First, we will replace `this.state.temperature` with `this.props.temperature` in render() { // Before: const temperature = this.state.temperature; const temperature = this.props.temperature; + // ... ``` We know that [props are read-only](/docs/components-and-props.html#props-are-read-only). When the `temperature` was in the local state, the `TemperatureInput` could just call `this.setState()` to change it. However, now that the `temperature` is coming from the parent as a prop, the `TemperatureInput` has no control over it. @@ -194,6 +196,7 @@ Now, when the `TemperatureInput` wants to update its temperature, it calls `this handleChange(e) { // Before: this.setState({temperature: e.target.value}); this.props.onTemperatureChange(e.target.value); + // ... ``` >Note: From 2ef21dfd4cdf035e8601b1688a71bfaa20d6b7a4 Mon Sep 17 00:00:00 2001 From: Max Humme Date: Mon, 9 Oct 2017 20:43:41 +0200 Subject: [PATCH 10/16] Clarify idea for improvement 1. When I was working through this, I found it not completely clear what was meant by 'instead of "6"'. I assumed the document refers to the move numbers in the move list, so that's what this change clarifies. --- content/tutorial/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index c38344fd..16be5c8b 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1090,7 +1090,7 @@ Check out the final result here: [Final Result](https://codepen.io/gaearon/pen/g If you have extra time or want to practice your new skills, here are some ideas for improvements you could make, listed in order of increasing difficulty: -1. Display the move locations in the format "(1, 3)" instead of "6". +1. Display the move locations in the format "(1, 3)" in the move list. 2. Bold the currently selected item in the move list. 3. Rewrite Board to use two loops to make the squares instead of hardcoding them. 4. Add a toggle button that lets you sort the moves in either ascending or descending order. From 348a727e8c02fb091d1cc780202026f4e4e535a0 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 10 Oct 2017 08:19:29 -0700 Subject: [PATCH 11/16] Added parens --- content/docs/reconciliation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 9bf5d304..7b36664a 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -142,7 +142,7 @@ As a last resort, you can pass item's index in the array as a key. This can work ## Tradeoffs -It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. Just to be clear, rerender in this context means calling `render` for all components, it doesn't mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections. We are regularly refining the heuristics in order to make common use cases faster. +It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. (Just to be clear, rerender in this context means calling `render` for all components, it doesn't mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections.) We are regularly refining the heuristics in order to make common use cases faster. In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree. From 3dfc414701a155a11694b212423265cc85fa3f5b Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 10 Oct 2017 08:32:29 -0700 Subject: [PATCH 12/16] Nit --- content/docs/handling-events.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 5a64a395..81da691c 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -145,5 +145,6 @@ The problem with this syntax is that a different callback is created each time t Inside a loop it is common to want to pass a param to an event handler. For example if `i` is the row id: ```js + -``` \ No newline at end of file +``` From 7f8d084a2c35c519f010634c757c0bd1b2fb1d51 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 10 Oct 2017 08:33:00 -0700 Subject: [PATCH 13/16] Wordsmithing --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 81da691c..4690d8c7 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -142,7 +142,7 @@ The problem with this syntax is that a different callback is created each time t ## Passing arguments to event handlers -Inside a loop it is common to want to pass a param to an event handler. For example if `i` is the row id: +Inside a loop it is common to want to pass a param to an event handler. For example, if `i` is the row id, either of the following would work: ```js From ad8cb6ea709aae9a7f551f79c185ef12f9342a02 Mon Sep 17 00:00:00 2001 From: Rodrigo Rosenfeld Rosas Date: Tue, 10 Oct 2017 12:36:29 -0300 Subject: [PATCH 14/16] Improve writing style in Reconciliation Tradeoffs (#119) I've improved my previous changes to what re-render means by following Dan Abramov's suggestion on the writing style to remove the parenthesis from that paragraph. See issue #108 for more context. --- content/docs/reconciliation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 7b36664a..6a23282c 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -142,9 +142,9 @@ As a last resort, you can pass item's index in the array as a key. This can work ## Tradeoffs -It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. (Just to be clear, rerender in this context means calling `render` for all components, it doesn't mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections.) We are regularly refining the heuristics in order to make common use cases faster. +It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. Just to be clear, rerender in this context means calling `render` for all components, it doesn't mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections. -In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree. +We are regularly refining the heuristics in order to make common use cases faster. In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree. Because React relies on heuristics, if the assumptions behind them are not met, performance will suffer. From db1262d06f7ec5081886c8257afe0e6c239dd16c Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 10 Oct 2017 16:42:48 +0100 Subject: [PATCH 15/16] Tweak the event doc --- content/docs/handling-events.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 4690d8c7..4077e45d 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -140,11 +140,15 @@ class LoggingButton extends React.Component { The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem. -## Passing arguments to event handlers +## Passing Arguments to Event Handlers -Inside a loop it is common to want to pass a param to an event handler. For example, if `i` is the row id, either of the following would work: +Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work: ```js - - + + ``` + +The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively. + +In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded. From 18000f1b3740f0569a0b769ad422d4ebebfcbd5b Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 10 Oct 2017 09:34:28 -0700 Subject: [PATCH 16/16] Wording nit: s/the only/a single/ --- content/docs/reference-test-renderer.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md index 9e463400..4c6bcfc4 100644 --- a/content/docs/reference-test-renderer.md +++ b/content/docs/reference-test-renderer.md @@ -158,7 +158,7 @@ Returns the root "test instance" object that is useful for making assertions abo testInstance.find(test) ``` -Find the only descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error. +Find a single descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error. ### `testInstance.findByType()` @@ -166,7 +166,7 @@ Find the only descendant test instance for which `test(testInstance)` returns `t testInstance.findByType(type) ``` -Find the only descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error. +Find a single descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error. ### `testInstance.findByProps()` @@ -174,7 +174,7 @@ Find the only descendant test instance with the provided `type`. If there is not testInstance.findByProps(props) ``` -Find the only descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error. +Find a single descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error. ### `testInstance.findAll()`