* Added UNSAFE_ methods to create-class HAS_MANY list
* Added warning for UNSAFE_componentWillRecieveProps misspelling
* Bumping create-react-class package version
* Added support for static getDerivedStateFromProps mixins
Fix this so that @nhunzaker gets his name up there for real (will want to cherry-pick back to master but the blog post isn't there either so I'll let y'all handle that)
After realizing this was the second time I've visited this exact page within a year and second guessing myself that the `textInput` ref isn't actually the `<input />` element. I decided to attempt to make this a little more explicit; you are actually accessing the method on the child class and not the `focus` method on the dom input element. Having them named the same caused some confusion.
(cherry picked from commit 6d37c05dd7)
* Add AgentConf 2018
We are having another edition of the AgentConf in 2018, which has again a strong focus on react, and we'll be skiing again 😎 Last year's PR for reference: https://github.com/facebook/react/pull/8196
* Update conferences.md
* Use a closure to bind gaurded callback
This way the fake event isn't being implicitly passed into the event handler
* Add tests for ReactErrorUtils
Add fiber test report
Linting fixes
* Prevents adding units to css custom properties
* Fix code style
* Optimize custom property checking
* Prevents adding units to css custom properties in markup creation
* Update passing tests
* Fix argument name and reuse check in DEV
**what is the change?:**
Added an `eslintrc` which disables the 'comma-dangle' rule just for
addons.
**why make this change?:**
To get CI passing again on the 15* branches.
We don't have dangling commas in the addons because it breaks GCC under
certain conditions. This doesn't affect React because we use Babel with
React, but it's not worth setting up Babel for the addons at this time.
**test plan:**
`yarn lint`
**issue:**
None - hopefully will fix this before it's a problem
* Blog post for 15.6.0
**what is the change?:**
A short and sweet summary of 15.6.0 changes
**why make this change?:**
To thank community contributors and call out important changes.
**test plan:**
Visual inspection.
I also looked it over in a markdown viewer - http://dillinger.io/
**issue:**
https://github.com/facebook/react/issues/9398
* Add 'Installation' and 'Changelog' to 15.6.0 blog post
**what is the change?:**
Added the 'Installation' section we have on most release blog posts,
customized for the 15.6.0 version of React.
Added the 'Changelog' from master to the blog post.
**why make this change?:**
To show folks how to install React and what changes are in this release.
**test plan:**
Visual inspection
**issue:**
https://github.com/facebook/react/issues/9398
* Improvements to blog post, and add self to `authors.yml`
**what is the change?:**
- Add self to contributors so my name turns into a link
- Use backticks for code-ish things
- Second header to ##, not #
- Change production mode link to the new address per @bvaughn's comment
- Update changelog with fixes from https://github.com/facebook/react/pull/9951
**why make this change?:**
Make things more clear and accurate.
**test plan:**
Visual inspect - @flarnie will paste an image of how it appears in the
actual docs.
**issue:**
https://github.com/facebook/react/issues/9398
* Further improvements to 15.6 blog post
**what is the change?:**
- Reword heading about deprecation warning changes
- add 'br' s to the list of installation options
- add some stray missing backticks
**why make this change?:**
Clarity and readability
**test plan:**
Visual inspection
**issue:**
https://github.com/facebook/react/issues/9398
**what is the change?:**
`git checkout master -- CHANGELOG.md`
Then made the 15.6 release no longer wrapped in 'details' tag.
**why make this change?:**
We are releasing 15.6 :D
**test plan:**
Visual inspection
**issue:**
https://github.com/facebook/react/issues/9398
I would prefer to rebase but was not able to.
1) There were a couple of conflicts;
addons/create-react-class/package.json
src/isomorphic/classic/class/__tests__/create-react-class-integration-test.js
2) Force pushing the result of the rebase was a no-go because
`15-stable` is a protected branch.
So merging is ok too.
For more details about all the commits in this merge, see the `15-dev`
branch commit history from cef396d092 to d095bc8391
**what is the change?:**
We ran the latest version of
`addons/create-react-class/create-react-class.js` through https://jscompress.com/
**why make this change?:**
The last corner case I'm thinking of is this:
- The `createClass` deprecation warning never went out in 15.5, and is going out now for real in 15.6.
- The `createClass` UMD build is broken for AMD/CommonJS, but we fixed it. But not for the minified version of the file.
- If someone see the warning, and tries to use the UMD build, then it's going to be broken in some cases.
- Since we're skipping mentioning the add-ons in the blog post, and this might be a new warning for them, this could be a nasty surprise for folks.
We can do a quick 15.5.4 release of that package, we would at least fix that case.
This diverges from what @gaearon is doing to fix the add-ons. I would
probably try to use cherry-pick and interactive rebase to move this
commit to right after
ce3ecfb1df
and then do the patch release of `create-react-class` from that spot in
history.
Alternately I can merge this into the forked branch
`15.6-before-addon-reconstruction` and then do the patch release from
there.
**test plan:**
I didn't test this. Ideally minifying this file won't break anything,
and it's high cost to test add-ons until we have some repeatable tests
in place.
**issue:**
https://github.com/facebook/react/issues/9765
While reading the page, the "chain of thought" is broken by stating that the `tempertature` and `onTemperatureChange` don't have any special meaning. Making this a blockquote makes that note look more like a comment and keep the "chain of thought" intact.
* Add 'Test Utils' docs back to main navigation
**why make this change?:**
We accidentally removed this - still supporting the use of Test Utilities, so we should have them in the docs.
**test plan:**
Manually tested the website - will insert a screenshot.
**issue:**
https://github.com/facebook/react/issues/9651
* Move test-utils docs to reference section
**what is the change?:**
Moved from 'advanced guides' to 'reference'
**why make this change?:**
It makes more sense as a reference
**test plan:**
Visual inspection (flarnie may add a screenshot)
**issue:**
* Add back the shallow renderer docs and remove outdated docs
**what is the change?:**
- Remove outdated 'shallow renderer' docs on 'test utils' page, and point to the updated 'shallow renderer' docs.
- Re-add a link to the updated 'shallow renderer' docs on the main navigation.
**why make this change?:**
This was already approved in https://github.com/facebook/react/pull/9331 which was then cherry-picked to https://github.com/facebook/react/pull/9359/commits and landed on master.
I'm not sure why some of these changes didn't persist. For now just adding back the changes we need.
**test plan:**
Manually inspected website - will insert screenshots.
**issue:**
* Further improvements to 'shallow rendering' and 'test utils' docs
Thanks @gaearon for the improvements!
**what is the change?:**
- Remove <hr/> from end of 'shallow rendering' docs
- 'documents' -> 'documentation'
- Move 'shallow rendering' redirection section to top of 'test utils' docs
- Add intro sentence about testing to 'shallow rendering' docs
**why make this change?:**
Documentation helps people learn.
**test plan:**
Visual inspection
(cherry picked from commit 114b9c5500)
* Update 2015-12-16-ismounted-antipattern.md
In case anybody else stumbles across this old blog post, I wanted to submit a patch to help with unhandled rejections.
`#then` and `#catch` each return new Promise instances, so here we actually create two new promises (that aren't assigned). If the argument promise to `#makeCancelable` rejects, the promise created by `#then` will be an unhandled rejection, which in Node 7 will be an uncaught error.
By using the second argument of `#then` to handle rejections instead, we don't need to worry about the runtime finding any unhandled rejections here.
* Style updates
* Add update notice
(cherry picked from commit 546e7721ec)
As of Chrome 58, the Timeline tab is now called the Performance tab, this updates the "Optimizing Performance > Profiling Components with Chrome Performance" section of the docs to reflect that.
(cherry picked from commit 5cf571839e)
* tutorial: adds note about onClick
* tutorial: show full square component
* merge
* fixes line number
* tutorial: misc changes
* fixes Board render initial code sample
* [tutorial] adds codepen links and misc small fixes
* removes useless arrow functions, #9531
* {this.renderSquare} new lines
* be more explicit about history state
* fixes highlight
* following along locally
* changes todo to this.props.value
* removes calculateWinner from initial codepens and includes it in tutorial
* removes note about calculateWinner at end of file
* adds debug-view and debug-view-final
* removes debug view, updates codepen instructions
* adds another codepen
* tutorial.md
* tutorial.md
* tutorial.md
* tutorial.md
* Put . into links for consistency with docs
* Make the very first change easier to follow
* A few more changes
(cherry picked from commit e9d6f3f10e)
this was a surprise to me because the docs seemed to indicate that when
using an updater, the result _needed_ to be a new state object. I was
[not alone](https://twitter.com/ken_wheeler/status/857939690191806464)
i think in discovering this as a result of the previous tweet in the
thread.
(cherry picked from commit f737d63302)
* Add guide on integrating with non-react code
* Capitalize guide title
* Make links to other docs relative
* Rephrase 'What it does do'
* Remove experimental syntax
* Capitalize Backbone
* Remove empty lifecycle method in generic jQuery example
* Use shouldComponentUpdate() not componentWillUpdate()
* Prefer single quotes
* Add cleanup to generic jQuery example
* Capitalize React
* Generalize the section on Backbone Views
* Generalize the section on Backbone Models, a little
* Add introduction
* Adjust wording
* Simplify ref callbacks
* Fix typo in generic jQuery example
* Fix typos in Backbone models in React components
* Fix more typos in Backbone models in React components
* Add generic section on integrating with other view libraries
* Stress the benefits of an unchanging React element
* Small changes to introduction
* Add missing semicolon
* Revise generic jQuery wrapper section
Moved the section on using empty elements to prevent conflicts above the
code example and added brief introduction to that example.
* Add usage example for Chosen wrapper
* Prevent Chosen wrapper from updating
* Note that sharing the DOM with plugins is not recommended
* Mention how React is used at Facebook
* Mention React event system in template rendering section
* Remove destructuring from function parameters
* Do not name React components Component
* Elaborate on unmountComponentAtNode()
* Mention preference for unidirectional data flow
* Rename backboneModelAdapter
* Replace rest syntax
* Respond to updated model in connectToBackboneModel
* Rewrite connectToBackboneModel example
* Rework connectToBackboneModel example
* Misc changes
* Misc changes
* Change wording
* Tweak some parts
(cherry picked from commit 1816d06d6b)
* React.createElement syntax
Added React.createElement syntax.
I think this is required for this tutorial.
* Reword
(cherry picked from commit 9824d52a4c)
* Add reference to the Hyperscript libraries
I feel these should be mentioned as they provide terser syntax than using `R.createElement` directly, even with a shorthand.
* Rephrase
(cherry picked from commit a8c223ab41)
This should have been retained in our docs, since PropTypes are only
moved and not deprecated.
Partially handles #9467, and I'll make a separate PR to
https://github.com/reactjs/prop-types to add more docs to the README
there.
(cherry picked from commit 39ca8aacf8)
* [Docs: Installation] Fix tabs responsive layout
* Move tabs a pixel down
* Remove left margin on first tab
* Remove the long line
* Fix mobile styles
(cherry picked from commit a92128e7fb)
* Lift state up - Updating the documentation to mention that onClick is a synthetic event handler
* Review comments - Rephrase to handle synthetic events and event handler patterns
* Tweak
(cherry picked from commit 53a3939fb0)
Previously two headings were 'Javascript Expressions' - now 'Javascript
Expressions as Props' and 'Javascript Expressions as Children'
(cherry picked from commit 363f6cb2e5)
* Updated the Good First Bug section in readme
* Inconsistent use of quotes. Prefered single quotes instead of double quotes
* Updated Good first bug link in how_to_contribute doc.
* Undo JSX attribute quote change
* don't capitalize "beginner friendly issue"
(cherry picked from commit 36c935ca8f)
* Add tabs to installation page (#9275, #9277)
This adds tabs for create-react-app and existing apps to the installation section of the docs. The tab implementation is a simplified version of React Native's installation page.
Fixes#9275.
* Use classList instead of className
* Use same implementation as in RN
* Clarification of setState() behavior
`setState()` is a frequent source of confusion for people new to React, and I believe part of that is due to minimization of the impact of the asynchronous behavior of `setState()` in the documentation. This revision is an attempt to clarify that behavior. For motivation and justification, see [setState Gate](https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82).
* Update reference-react-component.md
* Signature fix
* Update to address @acdlite concerns
* Add more details
* [#9627] Fix create-react-class isMounted ordering issue
Split the IsMountedMixin in two so that the __isMounted flag is set to false after componentWillUnmount is executed in mixins and the component.
* Revert changes to integration test
* Test 'create-react-class' with fixtures
NOTE: Never going to merge this commit, but I may cherry-pick it onto
branches in order to test fixes for issue #9765
**what is the change?:**
Require and use the UMD bundles of 'create-react-class' in three
fixtures to test the three supported uses;
- test Global JS with globals.html
- test AMD with requirejs.html
- test CommonJS with webpack-alias
**why make this change?:**
To test https://github.com/facebook/react/pull/9761 and other PRs fixing https://github.com/facebook/react/issues/9765
**test plan:**
Manual testing;
- cd into the directory in fixtures
- run the build step if needed
- open the file
**issue:**
https://github.com/facebook/react/issues/9765
* Rename fixtures testing create-react-class
**what is the change?:**
Renamed some fixtures.
**why make this change?:**
This is part of setting up manual tests of the add-ons we are fixing.
**test plan:**
`cd fixtures && node ./build-all.js` and manually open the renamed
fixtures.
**issue:**
https://github.com/facebook/react/issues/9765
* Prettify the unminified UMD build of `react-linked-input`
**what is the change?:**
`prettier addons/react-linked-input/react-linked-input.js | pbcopy` and
replaced the contents of the file.
**why make this change?:**
I am manually tweaking this file and want it to be more readable.
**test plan:**
about to set up manual testing of this with fixtures. I expect that
right now only the use of it as a global will work, and subsequent
commits will fix the AMD and CommonJS use cases.
**issue:**
https://github.com/facebook/react/issues/9765
* Test state of `react-linked-input` and `create-fragment` before fix
**what is the change?:**
Setting up the fixtures to enable manual testing of the
`react-linked-input` and `create-fragment` UMD builds.
This was a painstaking and frustrating process and we need something
better before making any more fixes to addons. Here is roughly what I
did;
- add 'console.log' statements to the add-on to confirm that you've loaded the right build case
- copy the add-on into 'build/packages' so that the 'webpack-alias' can find it.
- make copies of each of the following three fixtures for each add-on you want to test, renaming them to specify what you are testing:
- globals.js
- requirejs.js
- webpack-alias/*
- modify those fixtures to use the add-on you intend to text
**why make this change?:**
We need to verify the current state of the bug before fixing it, to
confirm that the change actually is fixing the bug.
**test plan:**
`open fixtures/globals-with-create-react-fragment.html`
`open fixtures/globals-with-react-linked-input.html`
`open fixtures/requirejswith-create-react-fragment.html`
`open fixtures/requirejswith-react-linked-input.html`
`cd fixtures/webpack-aliaswith-create-react-fragment/ && yarn build && open index.html`
`cd fixtures/webpack-aliaswith-react-linked-input/ && yarn build && open index.html`
**issue:**
https://github.com/facebook/react/issues/9765
* Fix missing `React` in `react-linked-input` and `create-fragment`
**what is the change?:**
Manually tweaking the UMD builds for both add-ons to include a
dependency on React.
**why make this change?:**
They were broken before for AMD and CommonJS.
For reasons I have not debugged, the CommonJS builds are still broken,
but the AMD is now fixed and globals still work:
```
do 'react-linked-input' and
'create-react-fragment' work?
before after
+ my + my +
en^ironment | fix | fix |
+----------------------------------------
| | |
Global JS | :) yes | :) yes |
+----------------------------------------
| | |
AMD | X no | :) yes |
+----------------------------------------
| | |
CommonJS | X no | X no |
+-------------+-----------+-----------+--
```
**test plan:**
In the previous commit we set up fixtures to manually test these.
**issue:**
https://github.com/facebook/react/issues/9765
* More adjustments to enable testing with fixtures
Not worth explaining - just committing as a 'save point' while I fiddle
with the fixtures.
* Remove all cruft from manually testing addons in fixtures
**what is the change?:**
We forked three of the fixtures into two variations to test two of the
react addons. We also added `console.log` statements to the addons to
verify that we were loading the right build.
This commit cleans it up by
- deleting forked fixtures
- re-adding the original fixtures
- removing `console.log` statements
**why make this change?:**
To get this branch ready for review.
**test plan:**
`cd fixtures && node ./build-all.js` and then check the updated fixtures
manually
**issue:**
https://github.com/facebook/react/issues/9765
* Double to single quotes in 'react-linked-input'
**what is the change?:**
`:%s /"/'/gc`
I left double quotes wrapping cases where we have single quotes in the
string.
**why make this change?:**
I ran the code for the unminified 'react-linked-input' through
'prettier' so it would be easier for me to manually fix the UMD wrapper.
And 'prettier' changed many single quotes into double quotes. @spicyj
pointed out this will be treated differently by the google closure
compiler, and may have semantic differences.
**test plan:**
It's not worth testing imo.
**issue:**
https://github.com/facebook/react/issues/9765
* remove random newline
* Fix missing react in create-react-class
refs #9689
* Modify the 'create-react-class' package to make 'globals' work again
**what is the change?:**
Pass the global 'react' into the global conditional in the UMD build of
'create-react-class'.
**why make this change?:**
Here is the deal:
- @mondwan's original fix does fix the AMD build, but breaks the
'global JS' build.
- My modification makes it work with both AMD and the 'global JS'
build.
- @mondwan's fix seems to have fixed the CommonJS build too, and I
maintained that fix with my modification.
```
Does the 'create-react-class' UMD build work?
Before After After
+ @mondwan's + @mondwan's + @flarnie's
Build System | fix | fix | modification
+---------------------------------------------------------+
| | |
Global JS | :D Success | X Fail | :D Success
| | |
+---------------------------------------------------------+
| | |
AMD | X Fail | :D Success | :D Success
| | |
+---------------------------------------------------------+
| | |
Common JS | X Fail | :D Success | :D Success
| | |
+ + +
```
**test plan:**
The testing for this was really tricky and involves a fragile multi-step
process:
1) Make sure the fixtures are working on your branch
2) Modify some of the fixtures to use 'create-react-class', like in this
commit (you can just cherry-pick it if you are on a branch based on
the 15.* branches) -
51dcbd5ef1
3) Make sure React is set up, and then
`cd fixures && node ./build-all.js`
4) The following fixtures could be used to test the various builds:
- test GlobalJS with `globals.html`
- test AMD with `requirejs.html`
- test CommonJS with `webpack-alias/index.html`
**issue:**
https://github.com/facebook/react/issues/9689
and
https://github.com/facebook/react/issues/9765
* Fix missing react in create-react-class
refs #9689
* Test 'create-react-class' with fixtures
NOTE: Never going to merge this commit, but I may cherry-pick it onto
branches in order to test fixes for issue #9765
In this case I will clean it up afterwards.
**what is the change?:**
Require and use the UMD bundles of 'create-react-class' in three
fixtures to test the three supported uses;
- test Global JS with globals.html
- test AMD with requirejs.html
- test CommonJS with webpack-alias
**why make this change?:**
To test https://github.com/facebook/react/pull/9761 and other PRs fixing https://github.com/facebook/react/issues/9765
**test plan:**
Manual testing;
- cd into the directory in fixtures
- run the build step if needed
- open the file
**issue:**
https://github.com/facebook/react/issues/9765
* Remove fiber specific fixures
This already was merged (https://github.com/facebook/react/pull/9902)
but I wanted to do manual testing and needed the change locally.
**what is the change?:**
Remove 'fiber-debugger', 'fiber-triangle', and 'packaging' from
'fixtures' directory.
**why make this change?:**
These were not meant to be included on this branch and cause the
'build-all.js' script to throw.
**test plan:**
`cd ./fixtures && node ./build-all.js`
* Modify the 'create-react-class' package to make 'globals' work again
**what is the change?:**
Pass the global 'react' into the global conditional in the UMD build of
'create-react-class'.
**why make this change?:**
Here is the deal:
- @mondwan's original fix does fix the AMD build, but breaks the
'global JS' build.
- My modification makes it work with both AMD and the 'global JS'
build.
- @mondwan's fix seems to have fixed the CommonJS build too, and I
maintained that fix with my modification.
```
Does the 'create-react-class' UMD build work?
Before After After
+ @mondwan's + @mondwan's + @flarnie's
Build System | fix | fix | modification
+---------------------------------------------------------+
| | |
Global JS | :D Success | X Fail | :D Success
| | |
+---------------------------------------------------------+
| | |
AMD | X Fail | :D Success | :D Success
| | |
+---------------------------------------------------------+
| | |
Common JS | X Fail | :D Success | :D Success
| | |
+ + +
```
**test plan:**
The testing for this was really tricky and involves a fragile multi-step
process:
1) Make sure the fixtures are working on your branch
2) Modify some of the fixtures to use 'create-react-class', like in this
commit (you can just cherry-pick it if you are on a branch based on
the 15.* branches) -
51dcbd5ef1
3) Make sure React is set up, and then
`cd fixures && node ./build-all.js`
4) The following fixtures could be used to test the various builds:
- test GlobalJS with `globals.html`
- test AMD with `requirejs.html`
- test CommonJS with `webpack-alias/index.html`
**issue:**
https://github.com/facebook/react/issues/9689
and
https://github.com/facebook/react/issues/9765
* Undo modifications that add 'create-react-class' to fixtures
**what is the change?:**
In the previous commit we modified the fixtures to test
'create-react-class' manually, and this puts them all back.
**why make this change?:**
This will be useful for cherry-picking onto branches where we used the
previous commit for testing purposes
**test plan:**
`cd fixtures && node ./build-all.js` and open the fixtures
* remove stray console.log
While reading the page, the "chain of thought" is broken by stating that the `tempertature` and `onTemperatureChange` don't have any special meaning. Making this a blockquote makes that note look more like a comment and keep the "chain of thought" intact.
* Add 'Test Utils' docs back to main navigation
**why make this change?:**
We accidentally removed this - still supporting the use of Test Utilities, so we should have them in the docs.
**test plan:**
Manually tested the website - will insert a screenshot.
**issue:**
https://github.com/facebook/react/issues/9651
* Move test-utils docs to reference section
**what is the change?:**
Moved from 'advanced guides' to 'reference'
**why make this change?:**
It makes more sense as a reference
**test plan:**
Visual inspection (flarnie may add a screenshot)
**issue:**
* Add back the shallow renderer docs and remove outdated docs
**what is the change?:**
- Remove outdated 'shallow renderer' docs on 'test utils' page, and point to the updated 'shallow renderer' docs.
- Re-add a link to the updated 'shallow renderer' docs on the main navigation.
**why make this change?:**
This was already approved in https://github.com/facebook/react/pull/9331 which was then cherry-picked to https://github.com/facebook/react/pull/9359/commits and landed on master.
I'm not sure why some of these changes didn't persist. For now just adding back the changes we need.
**test plan:**
Manually inspected website - will insert screenshots.
**issue:**
* Further improvements to 'shallow rendering' and 'test utils' docs
Thanks @gaearon for the improvements!
**what is the change?:**
- Remove <hr/> from end of 'shallow rendering' docs
- 'documents' -> 'documentation'
- Move 'shallow rendering' redirection section to top of 'test utils' docs
- Add intro sentence about testing to 'shallow rendering' docs
**why make this change?:**
Documentation helps people learn.
**test plan:**
Visual inspection
(cherry picked from commit 114b9c5500)
* Update 2015-12-16-ismounted-antipattern.md
In case anybody else stumbles across this old blog post, I wanted to submit a patch to help with unhandled rejections.
`#then` and `#catch` each return new Promise instances, so here we actually create two new promises (that aren't assigned). If the argument promise to `#makeCancelable` rejects, the promise created by `#then` will be an unhandled rejection, which in Node 7 will be an uncaught error.
By using the second argument of `#then` to handle rejections instead, we don't need to worry about the runtime finding any unhandled rejections here.
* Style updates
* Add update notice
(cherry picked from commit 546e7721ec)
As of Chrome 58, the Timeline tab is now called the Performance tab, this updates the "Optimizing Performance > Profiling Components with Chrome Performance" section of the docs to reflect that.
(cherry picked from commit 5cf571839e)
* Remove fixtures that only work with Fiber
**what is the change?:**
Removes three directories in the 'fixtures' directory.
**why make this change?:**
These fixtures were designed to work with Fiber, and were accidentally
pulled into this branch. They were causing errors when we try to build
the other fixtures.
**test plan:**
`cd react/fixtures && node ./build-all.js` no longer throws an error
from `fiber-debugger/App.js` - although it still throws another error
**issue:**
https://github.com/facebook/react/issues/9900
* Add back the 'babel-standalone' fixture
**what is the change?:**
Add this fixture back to the 15.6 branch
**why make this change?:**
This fixture is not fiber specific
**test plan:**
`node ./build-all.js` inside of ./fixtures
**issue:**
https://github.com/facebook/react/issues/9900
* Remove fixtures that only work with Fiber
**what is the change?:**
Removes three directories in the 'fixtures' directory.
**why make this change?:**
These fixtures were designed to work with Fiber, and were accidentally
pulled into this branch. They were causing errors when we try to build
the other fixtures.
**test plan:**
`cd react/fixtures && node ./build-all.js` no longer throws an error
from `fiber-debugger/App.js` - although it still throws another error
**issue:**
https://github.com/facebook/react/issues/9900
* Add back the 'babel-standalone' fixture
**what is the change?:**
Add this fixture back to the 15.6 branch
**why make this change?:**
This fixture is not fiber specific
**test plan:**
`node ./build-all.js` inside of ./fixtures
**issue:**
https://github.com/facebook/react/issues/9900
**what is the change?:**
We needed this dependency in the package.json
**why make this change?:**
Even though `create-react-class` was added as a dependency to the
`package.json` in https://github.com/facebook/react/pull/9399/files we
didn't completely cherry-pick this change onto 15.6 from master in b48b2594fa
This fixes that omission.
Following this fix we will review PR 9399 and make sure nothing else was
missed.
**test plan:**
`yarn build` and inspect the `builds/packages/react/package.json`, see
that `create-react-class` is included.
**issue:**
https://github.com/facebook/react/issues/9830
* Hello 15.6 Release Candidate
**what is the change?:**
We update the versions of all associated React packages when bumping the
version of React.
**why make this change?:**
We want to publish a RC to give folks time to try out the latest version
before it's final.
Why bump the version of every other associated package?
It makes the dependency between them more clear.
There will be cases where we make a fix in React-DOM and it requires
changes in React core. In that case, it will be more clear to people
when we update the versions of both and they remain in sync.
**test plan:**
Visual inspection
**issue:**
https://github.com/facebook/react/issues/9398
* Update a couple more packages versions
**what is the change?:**
Updates version for 'react-dom-factories' package and 'react-addons'
template.
**why make this change?:**
We missed these in the previous commit, which was copying the approach
from https://github.com/facebook/react/pull/9828/files
**test plan:**
Visual inspection, and running the build
**issue:**
https://github.com/facebook/react/issues/9398
* Prepare `react-dom-factories` for publishing
**what is the change?:**
- copies the `React.DOM.*` factory helpers into the package and wraps
them with an IIFE
- set peerDependency on React to latest 15 version
**why make this change?:**
We are deprecating `React.DOM.*` and this provides a fallback option for
those using it.
We just copied the code in order to avoid a circular dependency, which
keeps complexity down since we are supporting every possible build
system.
**test plan:**
TODO -
1. Copy this into one of our fixtures using a UMD/AMD build and see if
it works there.
2. Do an initial publish of the package on npm and then pull it into
CRA, and try it there.
3. Try it in https://github.com/duncanbeevers/jade-react or some other
project that actually uses the `React.DOM.*` helpers, using the
related codemod.
**issue:**
https://github.com/facebook/react/issues/9398
* Fix lints and capitalization of 'reactDOMFactories'
**what is the change?:**
Fixing nits in capitalization, quotes, and defined globals
**why make this change?:**
To get CI passing, consistency, correctness
**test plan:**
see prev. commit
**issue:**
https://github.com/facebook/react/issues/9398
This is a follow-up on
https://github.com/facebook/react/pull/9584#discussion_r115642293. There
is no need to assign the value property of an input if the value
property of the React component changes types, but stringifies to the
same value. For example:
```javascript
DOM.render(<input value="true" />, el)
DOM.render(<input value={true} />, el)
```
In this case, the assignment to `input.value` will always be
cast to the string "true". There is no need to perform this
assignment. Particularly when we already cast the value to a string
later:
```javascript
// Cast `value` to a string to ensure the value is set correctly. While
// browsers typically do this as necessary, jsdom doesn't.
node.value = '' + value;
```
* Improve warning for `React.createClass`
**what is the change?:**
- Explain that this will be removed in v16.0 specifically
- Mention the version number for the drop-in replacement module.
- Link to docs in the blog post about how to migrate
**why make this change?:**
We want to make our deprecation warnings more clear and helpful.
**test plan:**
Visual inspection and `yarn test`
**issue:**
https://github.com/facebook/react/issues/9398
* Widen range of recommended replacement module versions
**what is the change?:**
Instead of recommending specific versions of 'prop-types' and
'create-react-class' we ask folks to use the latest available 15.* version.
**why make this change?:**
The latest version of those plugins, within the 15 version, is the most likely
to be stable. For example, we know that 'react-create-class' is broken for AMD
builds at the current latest version, so once we release a fix then the
recommended version will change.
**test plan:**
Visual inspection
Also fixed some tests.
* Fix typos and things
**what is the change?:**
- `migrade` -> `migrate`
- `15.* prop-types package` -> `v15.* prop-types package`
**why make this change?:**
Correctness
**test plan:**
`yarn test` and visual inspection
**what is the change?:**
`grep -r "react-addons-dom-factories" ./src` and the same in `./packages`
then `%s /react-addons-dom-factories/react-dom-factories/gc`
**why make this change?:**
React dom factories were never part of the 'addons' and we want to minimize the
whole 'addons' thing, since we are deprecating the `React.addons.*` API.
**test plan:**
`yarn test`
and manually look at the README that was updated.
**issue:**
https://github.com/facebook/react/issues/9398
Remove a comment saying `es6`, since this is potentially unclear. We aren't
contrasting to an es5 example here.
Thanks to @gaearon for catching this in review of
https://github.com/facebook/react/pull/9780
* react-create-class -> create-react-class
* Fix issues/bugs introduced by merge conflict resolution
**what is the change?:**
A couple of bugs and holes were introduced when cherry-picking https://github.com/facebook/react/pull/9232 onto the 15.6 branch. This fixes them.
We also needed to add some logic from https://github.com/facebook/react/pull/9399
**why make this change?:**
To keep tests passing and get this change working.
**test plan:**
`yarn test`
**issue:**
https://github.com/facebook/react/issues/9398
* Move component base classes into a single file (#8918)
* More fixes for issues introduced by rebasing
**what is the change?:**
- Remove some outdated 'require' statements that got orphaned in 'React.js'
- Change 'warning' to 'lowPriorityWarning' for 'React.createClass'
- Fix syntax issues in 'React-test'
- Use 'creatReactClass' instead of ES6 class in ReactART
- Update 'prop-type' dependency to use no higher than 15.7 because 15.8 limits the number of warnings, and this causes a test to fail.
- Fix some mixed-up and misnamed variables in `React.js`
- Rebase onto commit that updates deprecation messages
- Update a test based on new deprecation messages
**why make this change?:**
These were bugs introduced by rebasing and tests caught the regressions.
**test plan:**
`yarn test`
**issue:**
https://github.com/facebook/react/issues/9398
* Reset `yarn.lock`
**what is the change?:**
I didn't mean to commit changes to `yarn.lock` except for the `prop-types` and `create-react-class` updates.
**why make this change?:**
To minimize the changes we make to dependency versions.
**test plan:**
`rm -rf node_modules`
`yarn install`
`yarn run build`
`yarn test`
* Run `yarn prettier`
* Improve deprecation warnings by more info and links
**what is the change?:**
Updates the warnings for -
- `React.createMixin` (was never implemented!)
- `React.PropTypes`
- `React.createClass`
- `React.DOM.*`
We never added the warning for `React.createClass` to the 15.5 line, so
a follow-up PR will add that, with a link to docs etc.
Does *not* update the older warnings for -
- Factory.type
- 'isMounted' and 'replaceState'
- ReactPerf
We could do a second pass if we want to improve those three warnings, but for now I don't think they are as hi-pri.
Still TODO:
- Do an initial release of the [`react-addons-dom-factories`](https://github.com/facebook/react/tree/master/packages/react-dom-factories#react-addons-dom-factories) package on npm, making it 1.0.
- Improve the docs for `react-addons-dom-factories` adding documentation and mention the [codemod](https://github.com/reactjs/react-codemod/blob/master/transforms/React-DOM-to-react-dom-factories.js)
**why make this change?:**
- We want to make updating as easy as possible. Warning messages should increase clarity, and in the past they have caused confusion.
**test plan:**
`yarn test` and running these messages past some folks who use React.
**issue:**
https://github.com/facebook/react/issues/9398
* Rephrase deprecation messages for clarity
**what is the change?:**
We rephrased the deprecation messages to clarify that
- these APIs are currently deprecated
- they will be removed in React v16.0
The previous wording implied that they would be deprecated in v16.0.
**why make this change?:**
To make the messages easier to understand.
**test plan:**
Visual inspection
* Add back caught error and other checks to 'lowPriorityWarning'
**what is the change?:**
This change makes 'lowPriorityWarning' an exact copy of 'warning.js' from
e66ba20ad5/packages/fbjs/src/__forks__/warning.js
where before we had skipped some checks from that module.
- Adds an error which we catch, in order to let people find the error and resulting stack trace when using devtools with 'pause on caught errors' checked.
- Adds check that 'format' argument is passed
**why make this change?:**
- To maintain a closer fork to 'warning.js'
- To allow easier debugging using 'pause on caught errors'
- To validate inputs to 'lowPriorityWarning'
**test plan:**
`yarn test`
**what is the change?:**
It looks like we missed updating this callsite in 12a96b9482
**why make this change?:**
We are deprecating the `React.PropTypes` syntax and splitting that functionality into [a separate module](12a96b9482).
@acdlite please correct me if there is a reason we left this here.
**test plan:**
`yarn test`
**issue:**
https://github.com/facebook/react/issues/9755
* Downgrade deprecation warnings from errors to warnings (#9650)
* Downgrade deprecation warnings from errors to warnings
**what is the change?:**
Swapping out `warning` module for a fork that uses `console.warn`.
It looks like we were using the `warning` module for deprecation notices, *but* there is also a 'deprecated' module designed specifically for deprecation notices.
However, we could not find any place that it was currently used.
Since React's build process is not 100% clear to me, I assume it could still be used somewhere by something and just updated it along with other deprecation notices.
We might consider a follow-up diff that does some clean up here;
- remove 'deprecated' module if it's unused, OR
- use 'deprecated' module for all our current deprecation warnings
**why make this change?:**
- We have had complaints about noisy warnings, in particular after introducing new deprecations
- They potentially cause CI failures
- Deprecations are not really time-sensitive, can ship without breaking your app, etc.
For more context - https://github.com/facebook/react/issues/9395
**test plan:**
`npm run test`
and unit tests for the new modules
and manual testing (WIP)
**issue:**
https://github.com/facebook/react/issues/9395
* Add 'lowPriorityWarning' to ReactExternals
**what is the change?:**
We won't bundle 'lowPriorityWarning' with the rest of React when building for Facebook.
NOTE: A parallel commit will introduce an internal implementation of 'lowPriorityWarning' in Facebook's codebase, to compensate. Will post a comment with the diff number once that is up.
**why make this change?:**
So that the sync between github and Facebook can go more smoothly!
**test plan:**
We will see when I run the sync! But this is a reasonable first step imo.
**issue:**
https://github.com/facebook/react/issues/9398
* Tweaks to get tests passing after cherry-picking PR#9650
**what is the change?:**
- adds 'lowPriorityWarning' for deprecation of '__spread' and 'createMixin'
- tweaks test to check for 'warn' and not 'error'
**why make this change?:**
Both these issues were introduced by merge conflict resolution when cherry-picking this change from master onto 15.6.
**test plan:**
`yarn test`
**issue:**
* Fix mis-written 'require' for 'warning' module
**what is the change?:**
Fixes 'warning' to be required from 'warning'
**why make this change?:**
It was causing the browserify build to crash, because we don't expect to have a path to 'warning'.
**test plan:**
CI
* Only fire input value change events when the value changes (#5746)
* Allow simulated native events to propagate
fixes#7211fixes#6822fixes#6614
we should make sure it doesn't break #3926 any worse (or works with #8438)
* Provide non-standard stack with invalid type warnings
* Include parent stack but mark owner chain as pertinent
* Just parent stack is enough for my needs
Because to avoid noise it is enough to collapse too close frames in the UI.
* functionName => name
* Hide behind a feature flag
- Update examples to no longer use React.DOM
- Add package and documentation entries for react-addons-dom-factories
- Update dom-factories readme
- Set up proxy to intercept React.DOM usage
- Update ReactDOM children tests to use createElement
- Add more specific warning assertion for React DOM factories
- Do not use expectDev in ReactDOMFactories tests
**what is the change?:**
Removed some tests which were added in e29871e6be
**why make this change?:**
These tests use `inputValueTracking`, which was only added on the master branch and has not yet been added to the 15.* branch.
[There is a PR out](https://github.com/facebook/react/pull/8575) to add this and related bug fixes to the 15.* branch, but there are some unresolved issues there. We plan to follow up on this after releasing 15.6.
For now, we are removing these to unblock releasing 15.6.
**test plan:**
`npm run test`
**issue:**
https://github.com/facebook/react/issues/9410
* Remove loose check when assigning non-number inputs
This commit removes a check I added when working on number input
issues where we perform a loose check on an input's value before we
assign it. This prevented controlled text inputs from disallowing
numeric text entry.
I also added a DOM fixture text case.
Related issues:
https://github.com/facebook/react/issues/9561#issuecomment-298394312
* Use strict equality as a guard before assigning input.value
This commit adds back the guard around assigning the value property to
an input, however it does it using a strict equals. This prevents
validated inputs, like emails and urls from losing the cursor
position.
It also adds associated test fixtures.
* Add copy command after build for interup with surge.sh
* Use setProperty when setting style properties
setProperty is faster in all/most modern browsers. It also lets us support CSS variables.
* Only use setProperty when setting CSS variables
* Add test to ensure setting CSS variables do not warn
* Make this PR pretty again
* Run fiber test script
* tutorial: adds note about onClick
* tutorial: show full square component
* merge
* fixes line number
* tutorial: misc changes
* fixes Board render initial code sample
* [tutorial] adds codepen links and misc small fixes
* removes useless arrow functions, #9531
* {this.renderSquare} new lines
* be more explicit about history state
* fixes highlight
* following along locally
* changes todo to this.props.value
* removes calculateWinner from initial codepens and includes it in tutorial
* removes note about calculateWinner at end of file
* adds debug-view and debug-view-final
* removes debug view, updates codepen instructions
* adds another codepen
* tutorial.md
* tutorial.md
* tutorial.md
* tutorial.md
* Put . into links for consistency with docs
* Make the very first change easier to follow
* A few more changes
(cherry picked from commit e9d6f3f10e)
this was a surprise to me because the docs seemed to indicate that when
using an updater, the result _needed_ to be a new state object. I was
[not alone](https://twitter.com/ken_wheeler/status/857939690191806464)
i think in discovering this as a result of the previous tweet in the
thread.
(cherry picked from commit f737d63302)
* Add guide on integrating with non-react code
* Capitalize guide title
* Make links to other docs relative
* Rephrase 'What it does do'
* Remove experimental syntax
* Capitalize Backbone
* Remove empty lifecycle method in generic jQuery example
* Use shouldComponentUpdate() not componentWillUpdate()
* Prefer single quotes
* Add cleanup to generic jQuery example
* Capitalize React
* Generalize the section on Backbone Views
* Generalize the section on Backbone Models, a little
* Add introduction
* Adjust wording
* Simplify ref callbacks
* Fix typo in generic jQuery example
* Fix typos in Backbone models in React components
* Fix more typos in Backbone models in React components
* Add generic section on integrating with other view libraries
* Stress the benefits of an unchanging React element
* Small changes to introduction
* Add missing semicolon
* Revise generic jQuery wrapper section
Moved the section on using empty elements to prevent conflicts above the
code example and added brief introduction to that example.
* Add usage example for Chosen wrapper
* Prevent Chosen wrapper from updating
* Note that sharing the DOM with plugins is not recommended
* Mention how React is used at Facebook
* Mention React event system in template rendering section
* Remove destructuring from function parameters
* Do not name React components Component
* Elaborate on unmountComponentAtNode()
* Mention preference for unidirectional data flow
* Rename backboneModelAdapter
* Replace rest syntax
* Respond to updated model in connectToBackboneModel
* Rewrite connectToBackboneModel example
* Rework connectToBackboneModel example
* Misc changes
* Misc changes
* Change wording
* Tweak some parts
(cherry picked from commit 1816d06d6b)
* React.createElement syntax
Added React.createElement syntax.
I think this is required for this tutorial.
* Reword
(cherry picked from commit 9824d52a4c)
* Add reference to the Hyperscript libraries
I feel these should be mentioned as they provide terser syntax than using `R.createElement` directly, even with a shorthand.
* Rephrase
(cherry picked from commit a8c223ab41)
This should have been retained in our docs, since PropTypes are only
moved and not deprecated.
Partially handles #9467, and I'll make a separate PR to
https://github.com/reactjs/prop-types to add more docs to the README
there.
(cherry picked from commit 39ca8aacf8)
* Update tests to not warn due to moved PropTypes and shallowRenderer
We added some warnings in v15.5 for calling `React.PropTypes` and
calling the shallow renderer from the wrong place. These warnings were
causing test failures, and now they are fixed.
Most of these were for the `React.PropTypes` change.
* tweak from running prettier
* Final tweaks to get tests passing
**what is the change?:**
Updated 'PropTypes' and 'shallow renderer' syntax in a couple more
places to get tests passing.
**why make this change?:**
In order to verify any changes to the 15.6 and 15.* branches in general
we should have tests passing.
**test plan:**
`npm run test`
**issue:**
https://github.com/facebook/react/issues/9410
* Run 'prettier' on the v15.6 branch
This is an easy fix and I'd like this branch to be as similar to master
(v16.0) as possible.
* `npm install --save-dev prettier && yarn prettier`
Checking in the updated `package.json` and `yarn.lock` for the 15.6
branch.
Oddly, running `yarn prettier` updated more files. I thought the
previous commit had covered all `prettier` syntax updates. Will commit
the new changes in a separate commit.
* Ran prettier
More syntax updates to get `prettier` checks passing on the `15.6-dev`
branch, and eventually, on 15-stable.
* Tweak eslint ignore comments to get linter passing
Something with running `prettier` moves or changes these comments in a
way that they were no longer being applied. We tweaked them so that both
'prettier' and 'eslint' pass.
This fixes an issue where if we decided not to create a measurement we would clear ALL measurements from the performance entry buffer due to passing `undefined` as the entry name.
* [Docs: Installation] Fix tabs responsive layout
* Move tabs a pixel down
* Remove left margin on first tab
* Remove the long line
* Fix mobile styles
(cherry picked from commit a92128e7fb)
* Lift state up - Updating the documentation to mention that onClick is a synthetic event handler
* Review comments - Rephrase to handle synthetic events and event handler patterns
* Tweak
(cherry picked from commit 53a3939fb0)
Previously two headings were 'Javascript Expressions' - now 'Javascript
Expressions as Props' and 'Javascript Expressions as Children'
(cherry picked from commit 363f6cb2e5)
* Updated the Good First Bug section in readme
* Inconsistent use of quotes. Prefered single quotes instead of double quotes
* Updated Good first bug link in how_to_contribute doc.
* Undo JSX attribute quote change
* don't capitalize "beginner friendly issue"
(cherry picked from commit 36c935ca8f)
* Add tabs to installation page (#9275, #9277)
This adds tabs for create-react-app and existing apps to the installation section of the docs. The tab implementation is a simplified version of React Native's installation page.
Fixes#9275.
* Use classList instead of className
* Use same implementation as in RN
* Clarification of setState() behavior
`setState()` is a frequent source of confusion for people new to React, and I believe part of that is due to minimization of the impact of the asynchronous behavior of `setState()` in the documentation. This revision is an attempt to clarify that behavior. For motivation and justification, see [setState Gate](https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82).
* Update reference-react-component.md
* Signature fix
* Update to address @acdlite concerns
* Add more details
The `.eslintignore` had gotten a merge conflict committed accidentally
at some point, and also was not ignoring the `addons` directory. This
fixes that.
We also had a couple of missing commas that snuck in, and those are
fixed here too.
* Amended implementation-notes.md to include a link to a blog post by Dan Abramov, explaining the difference between components, elements, and instances. An understanding of this distinction is crucial in tracing through Implementation pseudocode, and reading Dan's blog first may ease newcomers into understanding the implementation.
* adjusted wording to maintain stylistic consistency with rest of content, per @aweary's request
* Add missing object-assign dep to create-react-class
* Remove unnecessary inlines and irrelevant tests in createFragment
* Uninline shallowEqual in shallowCompare
* Uninline invariant in update
* Uninline invariant/warning and remove unreachable code in react-linked-input
* Envify and collapse createClass UMD
* Envify and collapse createFragment
* ReactLink doesn't really need PropTypes dep
It is unnecessary because it is not explicitly exposed and was never public API.
* Rebuild, envify and collapse LinkedStateMixin UMD
* Collapse PureRenderMixin UMD
* Rebuild shallowCompare
* Envify and collapse update UMD
* Remove unused prop-types dep from linked-input
* Fix change handling in LinkedInput
* Compile LinkedInput to ES5
* Rebuild, collapse, and fix LinkedInput UMD
* Add full README for react-addons-create-fragment
* Mention compat version of transition-group so we can delete those docs
* README for react-addons-linked-state-mixin
* More docs
* Fix devDeps for createClass
* docs
* Update example snippet in old 'React.addons' doc page
This makes the example more consistent.
* Add back the pointers in docs that were mistakenly removed
In https://github.com/facebook/react/pull/9359 we accidentally removed
pointers in some doc pages. Putting them back now.
* Link to npm package instead of github page
This seems like a more stable place to link to in the 'context'
document.
Based on @bvaughn's feedback in https://github.com/facebook/react/pull/9359
* `react-addons-test-utils` -> `react-dom/test-utils`
Updating all references and docs on the `React.addons.TestUtils` and the
shallow renderer to refer to the correct targets.
Instead of:
```
const React = require('react');
// ...
React.addons.Testutils
// or
const ReactTestUtils = require('react-addons-test-utils');
```
we now show:
```
const ReactTestUtils = require('react-dom/test-utils');
```
And for shallow renderer, instead of:
```
const shallowRenderer = TestUtils.createRenderer();
```
we now show:
```
const shallowRenderer = require('react-test-renderer/shallow');
```
* Update the 'prev' and 'next' attributes of 'add-ons' docs
These flags are used to set arrow links to easily navigate through the
documents. They were wrong or missing in some of the 'add-ons' pages and
this bothered me when manually testing the updates from the previous
commit.
* Update syntax for instantiating shallow renderer
Missed this when updating the docs for the changes to shallow-renderer
in React 15.5.
* Fix pointers in addons docs
Thanks @bvaughn for catching this
* Make example of shallow renderer more consistent
We should show using the same variable names between code samples.
* Make names in example even more consistent
We should use the same variable name for the same thing across examples.
`renderer` -> `shallowRenderer`.
* Update docs to deprecate React<CSS>TransitionGroup
- removes link to the docs about `ReactCSSTransitionGroup` and
`ReactTransitionGroup` from the main navigation
- updates 'prev' and 'next' pointers to skip this page
- adds deprecation warning to the top of the page
- remove references to these modules from the packages README
- updates 'add-ons' main page to list this as a deprecated add-on
* Update `React.createClass` to `createReactClass` in the docs
The `React.createClass` method is being deprecated in favor of
`createReactClass`.
* Remove 'React.createClass' from top level API docs
It no longer makes sense to have a section for the 'createClass' method
in this page, since it won't be available as a top level method on
'React'.
I initially was going to pull the section about 'createClass' into a
separate page to add under 'addons' but it was short and duplicative of
the 'react-without-es6' docs. So I just linked to those.
* Remove *most* `React.PropTypes` from the docs
I am doing the docs for `context` in a separate commit because that case
was a bit less clear-cut.
We will no longer support `React.PropTypes` as a built-in feature of
React, and instead should direct folks to use the `PropTypes` project
that stands alone.
Rather than retaining the `React.PropTypes` examples and just revamping
them to show the use of the stand-alone `PropTypes` library with React,
it makes more sense to direct people to that project and reduce the
perceived API area and complexity of React core. The proper place to
document `PropTypes` is in the README or docs of that project, not in
React docs.
* Update `context` docs to not use `React.PropTypes`
We use `React.PropTypes` to define the `contextType` for the `context`
feature of React. It's unclear how this will work once `React.PropTypes`
is replaced by the external `PropTypes` library. Some options;
a) Deprecate `context`, either in v16 or shortly after. Seems reasonable
based on the intense warnings against using context that we have in the
docs -
https://facebook.github.io/react/docs/context.html#why-not-to-use-context
**Except** that probably some widely used libraries depend on it, like
`React-Router`.
b) Expect users will use external `PropTypes` library when defining
`contextTypes` and just don't do our `checkReactTypeSpec` against them
any more in v16.
c) Stop masking context and pass the whole context
unmasked everywhere. Worst option, do not recommend.
I went with `b` and assume that, for now, we will get users to use the
external `PropTypes` when defining context. I will update this PR if we
want a different approach.
* Remove 'addons' items from left nav, and deprecate 'addons' doc page
The plan:
[X] Remove links to 'addons' items from main navigation
[X] Add deprecation notices where appropriate, and update syntax to show
using the separate modules.
[ ] Update other references to 'React.addons' in docs. Coming in next
commit.
--- blocked but coming in future PRs
[ ] Link to a blog post describing the new locations of add-ons in the
deprecation notice on the '/docs/addons.html' page. Blocked until we
actually publish that blog post.
[ ] Move the docs for each add-on to the actual github repo where it now
lives.
[ ] Redirect the old add-ons doc permalinks to the docs in the separate
github repos for those modules.
[ ] Remove the old add-ons doc markdown files from React core docs.
* Remove references to `React.addons` from docs
Just misc. places where we referenced the 'addons' feature. All gone!
features → feature
> There is nothing "bad" about using state or lifecycle hooks in components. Like any powerful feature**s**, they should be used in moderation, but we have no intention to remove them.
I can’t explain the exact grammatical principle this violates, but it sounds wrong to my native English ears that “feature” is plural here. Another way to check if the grammar sounds right is to change the order of the clauses: ”They should be used in moderation, like any powerful feature“ sounds right, whereas “They should be used in moderation, like any powerful features” does not.
1. Moved react-addons-test-utils to react-dom/test-utils and added deprecation message.
2. Moved shallow renderer (previous accessible via TestUtils.createRenderer) to react-test-renderer/shallow and added deprecation message.
3. Updated READMEs for react-addons-test-utils and react-test-renderer
* Only re-assign defaultValue if it is different
* Do not set value if it is the same
* Properly cover defaultValue
* Use coercion to be smart about value assignment
* Add explanation of loose type checks in value assignment.
* Add test coverage for setAttribute update.
* Only apply loose value check to text inputs
* Fix case where empty switches to zero
* Handle zero case in controlled input
* Correct mistake with default value assignment after rebase
* Do not assign bad input to number input
* Only trigger number input value attribute updates on blur
* Remove reference to LinkedValueUtils
* Record new fiber tests
* Add tests for blurred number input behavior
* Replace onBlur wrapper with rule in ChangeEventPlugin
* Sift down to only number inputs
* Re-record fiber tests
* Add test case for updating attribute on uncontrolled inputs. Make related correction
* Handle uncontrolled inputs, integrate fiber
* Reorder boolean to mitigate DOM checks
* Only assign value if it is different
* Add number input browser test fixtures
During the course of the number input fix, we uncovered many edge
cases. This commit adds browser test fixtures for each of those instances.
* Address edge case preventing number precision lower than 1 place
0.0 coerces to 0, however they are not the same value when doing
string comparision. This prevented controlled number inputs from
inputing the characters `0.00`.
Also adds test cases.
* Accommodate lack of IE9 number input support
IE9 does not support number inputs. Number inputs in IE9 fallback to
traditional text inputs. This means that accessing `input.value` will
report the raw text, rather than parsing a numeric value.
This commit makes the ReactDOMInput wrapper check to see if the `type`
prop has been configured to `"number"`. In those cases, it will
perform a comparison based upon `parseFloat` instead of the raw input
value.
* Remove footnotes about IE exponent issues
With the recent IE9 fix, IE properly inserts `e` when it produces an
invalid number.
* Address exception in IE9/10 ChangeEventPlugin blur event
On blur, inputs have their values assigned. This is so that number
inputs do not conduct unexpected behavior in
Chrome/Safari. Unfortunately, there are cases where the target
instance might be undefined in IE9/10, raising an exception.
* Migrate over ReactDOMInput.js number input fixes to Fiber
Also re-record tests
* Update number fixtures to use latest components
* Add number input test case for dashes and negative numbers
* Replace trailing dash test case with replace with dash
Also run prettier
* Show Source Error Addemden if __source available
* Add Parent Stack on invalid element type
* refactor to use normalizeCodeLocInfo
* Remove ( ) from addendum
- Backport change to enqueueReplaceState. Use new API instead of
enqueueCallback, which is gone in 16.
- Implement isMounted using lifecycles, so we have the option of
removing this later.
* Updated Chain React
Changed conference date from "Summer 2017" to given date on website
* Updated React Native EU
Updated date and place with information from website
(cherry picked from commit 2b59afb984)
Warns when using React.createClass for the first time.
Usages of createClass in tests have been converted to plain JavaScript
classes. Tests that rely on replaceState or isMounted use
updater.enqueueReplaceState and updater.isMounted.
* Update Lifting State Up not to mix up DOM value with component state
A few weeks ago when teaching my friend, she got stuck on
`this.state.value` vs. `event.target.value`. As the documentation
talked a lot about "values", and the term value could mean three
different things (values in general, the "value" prop / DOM value of
the <input> component and the value in state/props), it was not weird
that she got a bit confused.
* Rename Lifting State Up onChange props to onTemperatureChange
This is in-line with how the temperature is provided as a prop named `temperature`
* Fix one value prop not being renamed to temperature
* Update codepen examples in Lifting state up documentation
* Update devtools state change to reflect docs change
(cherry picked from commit a190cfce29)
* Replace the header_links plugin with client-side generated anchors.
Fixesfacebook/react#4124
* Move anchor-link code into a separate script
Also adds a couple comments, for context.
(cherry picked from commit 7a878d27e3)
* Improved for a better understanding
that code shouldn't name this parameter onchange. It is so confusing for a starter of ReactJs like me. It looks like that the onChange is an common event from props.
* Update the lifting state up paragraph
I tried to write something to explain to starter programmers in react, how we lift the state up calling a method defined by the ancestor and called by the children that will affect the children element.
* Rewrite Lifting State Up
(cherry picked from commit fc362bf095)
* Add note about refs on stateless components
* Move info about refs in the stateless components to the main section
* Simplification of the part about refs and functional components
* Tweaks
* Move sections around
* Oops
* Rearrange more sections
(cherry picked from commit d42c285aa2)
* Explain arbitrariness of ref name in callback
The sample code was confusing because it's not clear that "textInput" in this.textInput is an arbitrary name for the ref.
* Tweak wording
(cherry picked from commit 79be3543dd)
* Add benchmarking tutorial
I've written what I hope is the simplest introduction to benchmarking React components. It's meant to be straightforward and easy to follow for beginners. If you agree that it would be helpful, I'd like to add it to the docs.
Would also welcome any and all feedback.
* Just put links together
(cherry picked from commit 4c6fec902f)
* Added a link to "State Updates are Merged"
* better inline links
* moved the explanation down
* Minor unrelated tweaks
(cherry picked from commit eb89bc4c30)
* Update conferences.md
* Update conferences.md
path fixed
* Changed capitalization to match the website and Twitter
(cherry picked from commit b2b6d9daf7)
* devDependencies: add core-js and es6-symbol polyfill for tests
* Update Flow and fix issues (#8006)
* Add npm v4.0.0 support (#8082)
* Add support for node v7 (#8135)
* Upgrade ESLint and dependencies, fix new lint errors, switch Travis to Yarn (#8309)
* Update ESLint to 3.10.2
Also pull in fbjs for extending properly, per @zpao. This also disables consistent-return, which has about 80 failing cases in React currently. If we'd like to turn this back on, we should do it separately and fix all the call sites properly (rather than just adding 'return undefined;' everywhere, which adds no value.
Fixes to all existing lint errors plus an update for yarn.lock to follow.
* Update yarn.lock after the eslint update.
* Fix all new eslint failures
Unfortunately I had to add three eslint-disable-next-line instances. All have explanations inline.
* Switch Travis to use yarn instead of npm
* Update all Jest packages to 17.x (#8327)
* Update all Jest packages to 17.x, cache babel-jest transforms
* Remove the caching
Looking at the other builds it doesn't seem to actually be that necessary. The bottleneck is executors, not build time.
* Remove unnecessary package, fix fiber test runner
* Regenerate yarn lockfile
* Update Flow to 0.37.0 (#8608)
Nothing really changes.
* Update to Jest 18 (#8621)
* mockImpl -> mockImplementation
D4329549
* Fixed linting errors
* circle.yml and circleci scripts
* Update Flow and fix issues (#8006)
* Fixed flow errors
* Updated shrinkwrap
* Removed unnecessary change
* Added jest --runInBand flag
* Removed ReactDOMFiber changes
* devDependencies: add core-js and es6-symbol polyfill for tests
* Update Flow and fix issues (#8006)
* Add npm v4.0.0 support (#8082)
* Add support for node v7 (#8135)
* Upgrade ESLint and dependencies, fix new lint errors, switch Travis to Yarn (#8309)
* Update ESLint to 3.10.2
Also pull in fbjs for extending properly, per @zpao. This also disables consistent-return, which has about 80 failing cases in React currently. If we'd like to turn this back on, we should do it separately and fix all the call sites properly (rather than just adding 'return undefined;' everywhere, which adds no value.
Fixes to all existing lint errors plus an update for yarn.lock to follow.
* Update yarn.lock after the eslint update.
* Fix all new eslint failures
Unfortunately I had to add three eslint-disable-next-line instances. All have explanations inline.
* Switch Travis to use yarn instead of npm
* Update all Jest packages to 17.x (#8327)
* Update all Jest packages to 17.x, cache babel-jest transforms
* Remove the caching
Looking at the other builds it doesn't seem to actually be that necessary. The bottleneck is executors, not build time.
* Remove unnecessary package, fix fiber test runner
* Regenerate yarn lockfile
* Update Flow to 0.37.0 (#8608)
Nothing really changes.
* Update to Jest 18 (#8621)
* mockImpl -> mockImplementation
D4329549
* Fixed linting errors
* circle.yml and circleci scripts
* Update Flow and fix issues (#8006)
* Fixed flow errors
* Updated shrinkwrap
* Removed unnecessary change
* Added jest --runInBand flag
* Removed ReactDOMFiber changes
* Reminder: strip quotes from attributes with JS code
Web developers who are used to standards-compliant HTML and XML will, out of habit, put quotes around all attributes because the standards require them. Other templating systems like ASP.NET also require (or at least allow) quotes around attributes that contain code. This behavior will get users into trouble in JSX because a quoted attribute is always treated as a string literal, even if it contains curly-braced javascript code. Let's add to the docs to help newbies evade this problem.
* Tweak wording
(cherry picked from commit fc302494b7)
* use an easier word
The word `mandatory` is relatively difficult for people with ESL (English as a second language), so I propose an alternative word.
This would be much easier to understand.
* use simpler word
(cherry picked from commit 6308238498)
* Added flow to PR template
* Added record-tests step to PR template and contribution docs
* Updated order of PR checks
(cherry picked from commit bfd5b1878e)
* Update refs-and-the-dom.md
I want to propose some changes to the Refs and the DOM documentation page.
- Make it clear that string refs are legacy. It seems that this information got lost during the transition to new docs and only some part stayed the same, which was confusing when first reading the docs.
- Clarify and explain that during render, if the ref callback is provided, it will get called twice, first with `null` and then with the rendered DOM element. Discussed in https://github.com/facebook/react/issues/4533 and first proposed docs change in PR #8333.
I've also planned on adding an example for passing the refs up the component chain based on something I've needed to solve myself (e.g. you want to connect two dynamic components by line in React, so you need to both use refs and propagate them up the chain), and while it would be great to read up on this in the docs, it may be too specific for this section; I'd be happy to hear any recommendations.
* Adds more specific information about the callback
* Moved the ref callback description to the Caveats section
* Fixed suggested nits
* Replace 'each render pass' with 'updates'
* Tweak the wording
(cherry picked from commit 4a7e06bab7)
* Add manual build fixtures
* Inject ReactDOM into ReactWithAddons from ReactWithAddons
We used to read ReactDOM as a global inside ReactAddonsDOMDependenciesUMDShim.
This didn't work in AMD environments such as RequireJS and SystemJS.
Instead, I changed it so that ReactDOM gets injected into ReactWithAddons by ReactDOM itself.
This way we don't have to try to require it (which wouldn't work because AMD doesn't handle circular dependencies well).
This means you have to load ReactDOM first before using ReactDOM-dependent addons, but this was already the case before.
This commit makes all build fixtures pass.
* Memoize ReactDOM to avoid going into require on every access
* Add Brunch fixture
* Inline requires to work around Brunch bug
See #8556 and https://github.com/brunch/brunch/issues/1591#issuecomment-270742503 for context.
This appears to be a Brunch bug but we can keep a temporary fix until the next major.
(cherry picked from commit ca2c71c0c5)
**What** and **Why**:
* When using npm version 2, `object-assign` and `fbjs` were not getting properly installed
* This PR adds `object-assign` and `fbjs` as explicit dependencies to both `react-test-renderer` and `react-addons`
(cherry picked from commit 7cd26024ce)
* Check if textContent should be set for textarea
shouldSetNodeTextContent returns whether a node.textContent should be
updated. Currently it only covers one case, which is to avoid setting
the textContent if the text is empty and a placeholder exists.
* Only set node.value if it's equal to initialValue
In IE11 textContent is populated when the placeholder attribute is set.
Without this check, we end up setting node.value equal to the
placeholder text, causing the textarea to actually render with the text
inside.
This check makes sure that textContent is equal to our expected
initialValue, which should be the case when using defaultValue.
* Remove placeholder/textarea check, use contentToUse instead
(cherry picked from commit e644faa610)
* Consider Host Component classes when creating a new internal instance
* Remove unused tagToComponentClass & injectComponentClasses from ReactHostComponent
(cherry picked from commit 461a74115c)
* Only assign defaultValue if it has changed.
* Improve comment about reason for defaultValue conditional assignment
(cherry picked from commit 0d20dcf910)
* Fix typo in Proposing a Change section in how-to-contribute.md
Not sure if it was actually intended or was a typo but changed 'If you intend to change to the public API' --> 'If you intend to make a change to the public API'
* Simplify
* Component Lifecycle In Depth documentation
* first steps to improve react component reference
* improved react component reference
- remove the component-lifecycle-in-depth
* add a note for usage of ReactDOM.findDOMNode
* one note on componentWillReceiveProps
* remove old useless images for lifecycle docs
* Tweak wording
- In the previous example, the code works even without using bind(this) in the constructor.
- the reason being handleClick doesn't even use `this` and its just calling the global function alert.
- this change make use of this via access this.state.
My first contribution to React!
While upgrading a React project, I found some suspect SVG that needed updating, so I dug in after checking the docs. I knew that support for some SVG properties had been added (namely `xmlns` and `xmlnsXlink`), but I noticed them missing from the reference's attribute list. This pull request updates `reference-dom-elements.md` by adding said properties.
Fix for #8308. This is a bad hack -- EventPluginHub.getListener isn't even DOM-specific -- but this works for now and lets us release 15.4.1.
(cherry picked from commit c7129ce1f0)
* Fix browser bundle for AMD
* Final fix for standalone browser build.
Much more scientific than the rest so it should stick.
* Throw when we can't find code we need to replace.
(cherry picked from commit a3ba48bf72)
Showing how to create a form without labeling inputs is an accessibility anti-pattern. This change adds labels to the examples to address that. Codepen may still need to be updated depending on how that example is created.
* Remove spread operator
I believe what was meant here was to express that you would create the new player object with all the previous properties of the existing player object in addition to now updating the score value. That being said, this is a simple example, and the player object clearly has no other values. Objects are not (by default) iterable using this operator, so this little piece does more harm than good. I believe the new example to be much clearer.
* Using Object.assign()
* Tweak wording
* Update tutorial.md
Is it possible to be more clear here?
This implies that we are removing the constructor from GAME, and not board (which is what I believe the author is trying to say).
It took me several reads to understand.
With this edit, it is now clear that the adjustment is being made to -Board- and not to -Game-
* also remove "for Board earlier"
* Make the Shallow Rendering example clearer
I was reading through the documentation, and I found that the `render` call on the `renderer` was missing.
* Use a regular function to define MyComponent
(cherry picked from commit 53e45e78e4)
* fix broken links to outdated code
* another broken links to outdated code
* update hash commit & folder structure to current
(cherry picked from commit b847226ec4)
* Use _hostContainerInfo to track test renderer options
The transaction is not available when unmounting or updating the
instance, so we track it using _hostContainerInfo
* Throw if hostContainerInfo is not populated in getPublicInstance
* Linting fixes
* Remove transaction from ref lifecycle code path
We don't need to pass the transaction around anymore since we store the
test options on _hostContainerInfo instead
* Remove unused argument
(cherry picked from commit e43aaab254)
Prior to this, React was using a nextDebugID variable that was locally
scoped to both `instantiateReactComponent` and `ReactShallowRenderer`.
This caused problems when the debugIDs would collide, the `itemMap` in
`ReactComponentTreeHook` would be overwritten and tests would fail
with the message "Expected onBeforeMountComponent() parent and
onSetChildren() to be consistent".
This change shares the debugID with both modules thus preventing any
collisions in the future.
(cherry picked from commit 6eebed0535)
* took codes.json from the 15-dev branch
* fixed react:extract-errors task in gulpfile
* generated error codes
* Revert "generated error codes"
This reverts commit b8f3aeed9d8f0d469edd5f6623fa6090930594d8.
* Added a README for the error code system
* took codes.json from the 15-dev branch
* fixed react:extract-errors task in gulpfile
* generated error codes
* Revert "generated error codes"
This reverts commit b8f3aeed9d8f0d469edd5f6623fa6090930594d8.
* Added a README for the error code system
Gets rid of an obsolete word in the documentation for "State and Lifecycle":
"Consider the ticking clock example from the one of the previous sections."
->
"Consider the ticking clock example from one of the previous sections."
The code section above these changes defines a `formatName` function
that expects a parameter `user`. The code section containing these
changes incorrectly called `formatName(user.name)`. For those following
along with CodePen, this section should correctly call
`formatName(user)`.
* Reapplied fixes to updated docs from master
* Reapplied fixes to Forms, removed ES2016 function includes()
* Missing carriage return
* Adding back some line breaks
* Making requested changes.
* Making space changes
* Fixed typo and removed unnecessary hyphen.
* Reworded select, and highlighted line
* Fixed string styles
* Refactored <label> to use htmlFor
* Another refactor of <label>
* Removed name prop from radiobutton
* Reapplied fixes to updated docs from master
* Reapplied fixes to Forms, removed ES2016 function includes()
* Missing carriage return
* Adding back some line breaks
* Making requested changes.
* Making space changes
The tutorial wants to throw a 'warning' and explains about 'key' of React's list, but it throws nothing since there is sensible key.
"key={move}" should be removed, and added after explaining about key.
The script that strips providesModule is very sensitive.
Test plan:
Searched for providesModule in build. No more.
reactComponentExpect used to have problems too but doesn't seem
to anymore. Don't know why.
* Add more to Codebase Overview
* WIP
* Start a reconciler overview
* Add a few more sections
* todo
* WIP
* Finish it
* Whitespace
* Minor tweaks
* Minor tweaks
* Ensure lib/ is packaged for react-test-renderer
* Run npm pack from right working directory
We were running this on the original packages not the compiled ones, resulting in missing files
(cherry picked from commit 077d660a27)
This is a manual cherry-pick of 2 PRs, updated to handle differences in the stable branch:
- c78464f8ea - Resolve flow errors with ReactTestRenderer (#7736)
- 7dfa01f9fa - Revert ReactMultiChild to plain object (#7757)
This should be more of a fair A/B test so the timings aren't affected by having different load on your system when testing the two alternatives.
(cherry picked from commit c0007d56e9)
* Add a hook that throws a runtime warning for invalid WAI ARIA attributes and values.
* Resolved linting errors.
* Added a test case for many props.
* Added a test case for ARIA attribute proper casing.
* Added a warning for uppercased attributes to ReactDOMInvalidARIAHook
(cherry picked from commit 59ff7749ed)
When you put the output of a bash command in a variable, it replaces the `\n` with a space. Using `ls` instead of `echo` fixes it
Test Plan:
Run
```
ALL_FILES=`find src -name '*.js' | grep -v umd/ | grep -v __tests__ | grep -v __mocks__`
COUNT_ALL_FILES=`ls $ALL_FILES | wc -l`
echo $COUNT_ALL_FILES
```
Make sure that it outputs 221
(cherry picked from commit 72ed5df5a4)
Use the newly added tracking system to track the number of fiber tests that are passing/failing.
I first tried to modify the grunt lint rule for it and send the output in stdout but unfortunately grunt displays the rule + done messages there. I had like 30 lines of js already and I figured I could just write 3 lines of bash and it would work the same. Let me know if you want me to use another approach for it.
Test Plan:
Run the commands that have been introduced in this commit but the facts-tracker one
Run `echo $FIBER_TESTS` and make sure it prints `666/1434`
(cherry picked from commit 84f8df1f89)
* Introduce facts-tracker
We want to be able to track various things like number of files that are flowified, number of tests passing with Fiber...
This introduces a tool that lets you do that. The API is very simple, you execute the script with a list of tuples [key value] and it's going to create a `facts` branch and put a txt file for each fact and values over time.
```
node scripts/facts-tracker/index.js \
"flow-files" "$COUNT_WITH_FLOW/$COUNT_ALL_FILES"
```
Test Plan:
This is tricky to test because Travis only exposes the private variables (github token) when it processes a committed file and not on branches. The reason is that otherwise anyone could send a pull requests that does `echo $GITHUB_TOKEN` and steal your token.
Given this constraint, I did all the work using two of my repos:
- https://github.com/vjeux/facts-tracker
- https://github.com/vjeux/facts-tracker-test
and am sending this pull request that should work as is /fingers crossed/, but we won't be able to test it out until it is committed.
Note that once this lands, I'm going to kill those two repos.
* Update with all the suggested changes
* Branch on a flow type in travis.yml
* Use $GITHUB_TOKEN
* properly escape it
(cherry picked from commit dbd9c4b205)
This ensures we ignore relative to our project root and won't be tripped up by issues where checkouts in other places result in Flow passing when it shouldn't (eg on Travis CI where the checkout path is `/home/travis/build/facebook/react`)
(cherry picked from commit 864bc7b939)
* create ReactTestTextComponent fil
* create ReactTestEmptyComponent
* Use class for ReactTestRenderer
* Add flow to ReactTestRenderer
(cherry picked from commit 5a3abab660)
* High priority work
Adds the ability to schedule and perform high priority work. In the
noop renderer, this is exposed using a method `performHighPriWork(fn)`
where the function is executed and all updates in that scope are given
high priority.
To do this, the scheduler keeps track of a default priority level.
A new function `performWithPriority(priority, fn)` changes the default
priority before calling the function, then resets it afterwards.
* Rename overloaded priority terms
"High" and "low" priority are overloaded terms. There are priority
levels called HighPriority and LowPriority. Meanwhile, there are
functions called {perform,schedule}HighPriWork, which corresponds
to requestAnimationFrame, and {perform,schedule}LowPriWork, which
corresponds to requestIdleCallback. But in fact, work that has
HighPriority is meant to be scheduled with requestIdleCallback.
This is super confusing.
To address this, {perform,schedule}HighPriWork has been renamed
to {perform,schedule}AnimationWork, and
{perform,schedule}LowPriWork has been renamed to
{perform,schedule}DeferredWork. HighPriority and LowPriority
remain the same.
* Priority levels merge fix
(cherry picked from commit 6144212a86)
* Implement optional mockConfig and getMockRef
* default mockConfig, walk render tree
* Pass mockConfig to transaction
* Attach mockConfig to transaction
* type mockConfig in ReactRef
* Expect object in native component ref test
* Fix argument name for attachRefs
* Add mockConfig support to legacy refs
* Pass transaction to getPublicInstance
* Implement getMockConfig on ReactTestReconcileTransaction
* Merge defaultMockConfig and mockConfig options
* Rename mockConfig to testOptions
* Break getPublicInstnce into three lines
* createMockRef -> createNodeMock
(cherry picked from commit f3569a2c31)
Due to a typo in PR#7667 where I put 'DispatchConfig' when the type was
'EventTypes', there were some flow errors being thrown.
Then PR#7642 fixed a bug in SimpleEventPlugin and added some untyped
methods, which threw more flow errors.
Last, while fixing this, I fixed two eslint errors in the
SimpleEventPlugin test.
(cherry picked from commit 54cbe29262)
* Cull disabled mouse events at plugin level. Remove component level filters
* DisabledInputUtils tests are now for SimpleEventPlugin
* Add click bubbling test
* Add isInteractive function. Use in iOS click exception rules
* Invert interactive check in local click listener. Add test coverage
* Reduce number of mouse events disabable. Formatting in isIteractive()
* Switch isInteractive tag order for alignment
* Update formatting of isInteractive method
(cherry picked from commit 73c50e7d00)
In order to properly type an `Operation`, we need to change the call site from having two arguments: one for `type` and one for `payload` into an object that contains both. This isn't a perf regression because we were already constructing this object in the first place and doesn't change the emitted event so shouldn't affect the dev tools.
None of the call sites are actually flow-ified so it isn't technically used but once we will, it'll make sure that we don't send random strings and payload through those very generic methods.
(cherry picked from commit eaefd9052a)
React IDs have been killed and there was one call site left in a test. I trimmed down the implementation to keep only what is actually used and inlined it inside of the test so we don't get more people using it in the future.
(cherry picked from commit 82598eec79)
* Type SimpleEventPlugin and TapEventPlugin
- Renamed file from 'ReactSynteticEvent' to 'ReactSyntheticEventType'
- Fills in the 'any' holes that were left in DispatchConfig type and the
type annotations in EventPluginRegistry.
- Adds polymorphic PluginModule type and related types
- Uses hack to support indexable properties on 'Touch' type in
TapEventPlugin
The issue in TapEventPlugin is that the code is accessing one of four
possible properties on the 'Touch' type native event using the bracket
accessor. Classes in Flow don't support using the bracket accessor,
unless you use a declaration and the syntax `[key: Type]: Type`.[1] The
downside of using that here is that we create a global type, which we
may not need in other files.
[1]: https://github.com/facebook/flow/issues/1323
Other options:
- Use looser typing or a '@FixMe' comment and open an issue with Flow to
support indexing on regular classes.
- Rewrite TapEventPlugin to not use the bracket accessor on 'Touch'. I
thought the current implementation was elegant and didn't want to
change it. But we could do something like this:
```
if (nativeEvent.pageX || nativeEvent.pageY) {
return axis.page === 'pageX' ? nativeEvent.pageX : nativeEvent.pageY;
} else {
var clientAxis = axis.client === 'clientX' ? nativeEvent.clientX : nativeEvent.clientY;
return nativeEvent[axis.client] + ViewportMetrics[axis.envScroll];
}
```
(cherry picked from commit 7b2d9655da)
It turns out that flow cannot type `this` with a function constructor + prototype overrides. Turning it to a class makes flow happy and has minimal impact on the output.
In open source, we already use the loose version of the class transform and internally we have one that's outputting even less code if you have `@preventMunge` in the header.
See discussion in https://www.facebook.com/groups/2003630259862046/permalink/2098480820376989/
(cherry picked from commit a70acb37d9)
We disabled coverage in Travis because the implementation was crashing ( https://github.com/facebook/react/issues/6290 ). Since we upgraded to Jest 15, the entire coverage implementation is brand new so we should give it another try.
(cherry picked from commit 839697f60c)
We used to copy and paste the same big blob many times in order for it to work with keyOf which is no longer a constraint. This pull request takes a list of all the events as string and generate those data structures at runtime.
It reduces the size of React by 1k post gzip and flow is able to extract the structure out of it :)
(cherry picked from commit 1229a238c4)
This is the last callsite of keyMirror! It removes 0.5k gzipped :)
The only trick with this one is that ReactTestUtils actually iterates over the list of all the events. Instead of duplicating the logic, I used the $Enum feature of flow that lets us statically extract out the type from the dynamic value. Inside of react-dom we're no longer requiring the file directly so it doesn't bloat the file size, and we still get to have static typing, best of both worlds!
(cherry picked from commit 2f9a9dc4c5)
This one is interesting because we have transaction objects being passed around everywhere in the codebase but there's actually no Transaction class. It's a "mixin" that comes to life by being Object.assigned to the prototype of a real "class" (before class was cool!). Therefore, we can't just say `var Transaction = require('Transaction'); (transaction: Transaction) => { }` because it would be the object that contains a mixin and not an instance of a transaction.
The trick I use is to export `TransactionType` and alias it to `Transaction` in the file as it doesn't actually require transaction. In case they do, we'll figure it out, but in the few files I looked at, it doesn't seem to be the case.
For the perform function, it actually typechecks pretty well!
(cherry picked from commit a3e576e1bb)
This one was really interesting to type as it's doing a lot of unusual JavaScript. Fortunately flow is now pretty kick ass and I've been able to mostly type it. The only missing piece is that it won't check the constructor arguments.
If you are a fb employee, you can follow the discussion here: https://www.facebook.com/groups/flowtype/permalink/1132359430146004/
(cherry picked from commit 19b8eadb24)
Incrementally type ReactInstance by adding the types of attach/detachRef.
I moved isValidOwner as a function inside of the file since it's never used externally.
(cherry picked from commit fa9869b5a0)
This one involves a bit more work as I added "phantom" flow types to a bunch of places where the type is a ReactPropTypeLocations even though those files are not `@flow` yet.
A good side effect is that `ReactPropTypeLocationNames` keys are now correctly typed, this means that they cannot go out of sync without breaking flow :)
(cherry picked from commit 84084153ed)
Flow doesn't really support the concept of variables that are non-null but only inside of a `__DEV__` block. There's an internal post about it ( https://www.facebook.com/groups/flowtype/permalink/1132437726804841/ ) and the conclusion is that we should force it to be non-null and trust the developer to put the proper DEV checks in place.
(cherry picked from commit 0d927844fb)
We need to export FlushHistory type and I submitted a PR on flow to fix the type of console.table which is too restrictive.
I'm already starting to see the benefits of flow, I can look at random variables in the code and flow knows what shape the objects are! It's really useful to try and understand what's going on :)
(cherry picked from commit 2fb5eae372)
It turns out that we don't need it, flow is smart enough to realize that the function is declared in the two branches :)
(cherry picked from commit b977cf13c4)
In Type ReactComponentTreeHook #7504, I merged even though travis didn't report green (travis for all the fb repos has been backlogged like crazy since this morning) by manually doing `npm test` and `npm run flow` but I didn't ensure that lint was all green.
@millermedeiros pinged me about it so here's a quick fix
(cherry picked from commit 66e77f696a)
For this one, I wanted to type a non-trivial piece of the codebase and ran into the fact that we do not have types for ReactElement nor ReactInstance, so I had to create them.
I'll add comments inline
(cherry picked from commit ea494a2c10)
* Show React events in the timeline when ReactPerf is active
This currently only seems to work on Chrome.
* Address Chrome issue
(cherry picked from commit 0a248ee7b9)
I already had to aliasify to have better control over the requires
so we might as well do it everywhere for consistency.
This probably makes it easier to rebase the rollup work too
because aliases seems to be how you solve this in that world.
(cherry picked from commit c8f7215b20)
This is needed for flat builds. It also lets us get rid of a bunch
of special cases in the build scripts.
It also allow us to just copy the source files into React Native
instead of having to build first to resolve the special cases.
(cherry picked from commit 1c5a639c37)
This builds a `react-dom-fiber.js` bundle which exposes ReactDOMFiber.
This allows early experiments with the new Fiber reconciler.
I also expose it in the npm package through `react-dom/fiber`.
(cherry picked from commit f7e0db9a18)
This copies modules into three separate packages instead of
putting it all in React.
The overlap in shared and between renderers gets duplicated.
This allows the isomorphic package to stay minimal. It can also
be used as a direct dependency without much risk.
This also allow us to ship versions to each renderer independently
and we can ship renderers without updating the main react package
dependency.
(cherry picked from commit 0f004efce2)
We currently write all our tests against the DOM implementation.
I need a way to run the Fiber tests against it. But I don't want
to take on any package dependencies on Fiber modules yet.
There's a problem with jest right now where you can't globally
mock modules that already exist. So I have to add a global call
to jest.mock.
Luckily we already have a way to test the useCreateElement paths
using a feature flag. I won't activate this flag in travis until
it passes, but the idea is to run all three variants in travis.
I'm not sure that invoking rAF and rIC synchronously is the best
way to test this since it doesn't capture the backwards
compatibility aspect. I.e. the fact that people might be relying
on the synchronous nature in real apps too. It's a start.
Ideally, jest would have these built-in.
(cherry picked from commit c06a68a10b)
Without this we end up bundling all of the isomorphic React into
the DOM bundle. This was fixed in #7168 too but I'll just do an
early fix to ensure that #7168 is purely an npm change.
(cherry picked from commit ca9167c202)
* Cut out isomorphic dependencies from the renderers
These files reaches into isomorphic files.
The ReactElement functions are exposed on the React object anyway
so I can just use those instead.
I also found some files that are not shared that should be in
renderers shared.
* Found a few more shared dependencies
renderSubtreeIntoContainer is only used by the DOM renderer.
It's not an addon.
ReactClass isn't needed as a dependency since injection doesn't
happen anymore.
* Use a shim file to load addons' dependencies on DOM
By replacing this intermediate file we can do the lazy loading
without needing any lazy requires. This set up works with ES
modules.
We could also replace the globalShim thing with aliased files
instead for consistency.
* Bundle DOM renderers into their individual UMD bundles
Instead of exposing the entire DOM renderer on the react.js
package, I only expose CurrentOwner and ComponentTreeDevtool which
are currently the only two modules that share __state__ with the
renderers.
Then I package each renderer in its own package. That could allow
us to drop more server dependencies from the client package. It
will also allow us to ship fiber as a separate renderer.
Unminified DEV after before
react.js 123kb 696kb
react-with-addons.js 227kb 774kb
react-dom.js 668kb 1kb
react-dom-server.js 638kb 1kb
Minified PROD after before
react.min.js 24kb 154kb
react-with-addons.min.js 37kb 166kb
react-dom.min.js 149kb 1kb
react-dom-server.min.js 144kb 1kb
The total size for react.min.js + react-dom.min.js is +19kb larger
because of the overlap between them right now. I'd like to see
what an optimizing compiler can do to this. Some of that is fbjs
stuff. There shouldn't need to be that much overlap so that's
something we can hunt. We should keep isomorphic absolutely
minimal so there's no reason for other React clones not to use it.
There will be less overlap with Fiber.
However, another strategy that we could do is package the
isomorphic package into each renderer bundle and conditionally
initialize it if it hasn't already been initialized. That way
you only pay an overlap tax when there are two renderers on the
page but not without it. It's also easier to just pull in one
package. The downside is the versioning stuff that the separate
npm package would solve. That applies to CDNs as well.
ReactWithAddons is a bit weird because it is packaged into the
isomorphic package but has a bunch of DOM dependencies. So we have
to load them lazily since the DOM package gets initialized after.
(cherry picked from commit 8ef00dbb7d)
* PropTypes: distinguish nullable from optional object field
This gives a more precise message (no type semantics change) to the case of passing a field in an object, but whose value is `null`:
Before:
```js
propTypes: {
foo: React.PropTypes.number.isRequired
}
```
Would scream "Required prop `foo` was not specified in `MyComp`".
Now it'll be "Required prop `foo` was specified in `MyComp`, but its value is `null`.".
Works as expected in nested objects.
This fixes the issue of a component transitively passing a `null`, specifying the correct field to the child but have the child tell it that it didn't provide the prop.
Optional field and nullable are two different things anyway.
* Add missing test case.
* Reword messages.
(cherry picked from commit 0292d34047)
* Reduce confusion in testing documentation.
Just wanted to add some clarity to this page and link to the react tutorial on Jest's website to give people more information. Also changed enzyme's definition from library to utility to help reduce the confusion. Hope this makes sense to everybody :)
See https://twitter.com/damusnet/status/780752042675597312
cc @lelandrichardson
* Update 10.4-test-utils.md
(cherry picked from commit 0990c93806)
* Russian translation for self-closing-tag of tips
* Fix next link for inline styles tip
* Update 04-self-closing-tag.ru-RU.md
(cherry picked from commit 7d5c70d98c)
To demonstrate multiple arguments `bind(this, arg1, arg2, ...)`, also not to pass in for than what `handleClick` needed, namely props, or maybe even pass item itself, etc.
Going to change the kor file after review.
(cherry picked from commit 05cbc93401)
comments to issue #7317.
Updated JP doc examples to match other languages
Reformat to match JSX multi-line style #7550
(cherry picked from commit 3071f31d04)
It used to be slow whenever a type miss occurred because expensive `Error` objects were being created. For example, with `oneOfType([number, data])`, passing a date would create an `Error` object in `number` typechecker for every item.
The savings depend on how much commonly you used `oneOfType()`, and how often it had “misses”. If you used it heavily, you might see 1.5x to 2x performance improvements in `__DEV__` after this fix.
(cherry picked from commit 680685bec4)
* Add propsTypes and defaultProps example for stateless functions
* Update 05-reusable-components.md
* Update 05-reusable-components.md
(cherry picked from commit 09f0a06b8a)
* Write failing test
* Ensure .min and .max are set before .value
* Adjusting test for false negative
* Revert test adjustment (apparently it was only failing locally)
(cherry picked from commit 3013afe2d5)
ReactElement requires a generic argument now and the return function of render is a ReactTestInstance and not a ReactElement.
(cherry picked from commit 9a48b5ca7b)
* Remove onBeforeMountComponent hook event
It is unnecessary.
We now pass the element as part of onInstantiateComponent, and it can't change before mounting.
* Remove onComponentHasMounted hook event
It is unused after #7410.
* Replace on(Begin|End)ReconcilerTimer hook events
We already have onBeforeUpdateComponent.
Let's just have on(Before?)(Mount|Update|Unmount)Component and stick with them.
This removes double event dispatches in some hot spots.
* Remove onComponentHasUpdated hook
The tests still pass so presumably it was not necessary.
* Add missing __DEV__ to TestUtils code
* Replace on(InstantiateComponent|SetParent) with onBeforeMountComponent
This lets us further consolidate hooks.
The parent ID is now passed as an argument to onBeforeMountComponent() with the element.
* Remove onMountRootComponent hook event
It is unnecessary now that we pass the parent ID to onBeforeMountComponent.
* Use parentDebugID = 0 both for roots and production
This removes some awkward branching.
(cherry picked from commit 0e976e136c)
* Remove unnecessary indirection from the tree hook
* Replace onSetDisplayName, onSetOwner, onSetText with one event
Less events is better.
onSetDisplayName, onSetOwner, and onSetText only existed because we didn't initially track elements.
* Remove unused variables
(cherry picked from commit 1f31357a2e)
* Comment previous occurrences of this issue
* Fix DEV performance regression in V8
* Extract try/catch into a separate function when calling hooks
(cherry picked from commit afa27bc4d5)
* Prevent internal performance regression
This only affects Facebook website, not open source version of React.
On the Facebook website, we don't have a transform for warnings and invariants.
Therefore, expensive arguments will be calculated even if the warning doesn't fire.
This fixes a few cases where that calculation might be more expensive than usually.
In my testing, this brings down average row click time in Power Editor from ~300ms to ~220ms in __DEV__ (vs ~40ms in prod).
* Put warning() that shows up in profile behind condition
(cherry picked from commit 178cb7d339)
* corrected ReactChildrenMutationWarningHook's name
* changed `onComponentHasMounted` to `onMountComponent`
and get element from `ReactComponentTreeHook` instead of keeping an internal store
(cherry picked from commit 5514ea369d)
'change' custom events raise "Member not found" in <= IE10. To
circumvent this, the SyntheticEvent class now checks for "typeof
event.cancelBubble !== 'unknown'". This eliminates this exception and
maintains the expected bubbling functionality.
Addresses #7320.
(cherry picked from commit 2823dfcbfb)
For controlled inputs, `updateWrapper` was getting called before the
`type` prop had a chance to update. This could lead to a case where
switching from the `text` to `number` type caused a validation error
that would prevent the proper input value from being assigned.
This commit moves the call to `ReactDOMInput.updateWrapper` below
`_updateProperties` to avoid this situation.
(cherry picked from commit 08a0895887)
* Update tutorial with reference to autobinding docs
* Update tutorial to clarify that autobinding happens specifically with createClass() API
(cherry picked from commit f329099831)
"It is worth repeating: there is no configuration files or complicated folder structures." > "It is worth repeating: there are no configuration files or complicated folder structures."
(cherry picked from commit c0b7d81872)
* Eagerly evaluate inline requires in Jest
I inlined some requires in #7188 to fix the build size regression.
However this caused an issue with Jest due to it resetting module registry between tests.
This is a temporary fix to #7240.
It should be reverted as part of #7178.
* Make the hack work in all environments
(cherry picked from commit 15ae5857f6)
I caused it with #7189.
We generally don’t recommend running TestUtils in production environment but this is technically a regression.
Fixes#7231.
(cherry picked from commit 27d7592cf6)
Adds `.update(newElement)` and `.unmount()` and makes children reorders and composite type swapping work.
Part of #7148.
(cherry picked from commit caec8d5ce7)
Previously, the extract-components script would create the same number of layers of composites as the page it captures, but it would output a new class for each time any composite is used (since we don't want to replicate all the component logic).
I changed the script to output a single type for each type in the input -- and each generated component takes an index for which output it should return. This should be closer to how the original code behaves, especially with respect to VM function call lookups where the amount of polymorphism makes a difference.
I re-recorded the benchmarks with the new scripts. They run significantly faster:
```
Comparing old.txt (control) vs new.txt (test)
Significant differences marked by ***
% change from control to test, with 99% CIs:
* ssr_pe_cold_ms_jsc_jit
% change: -41.73% [-43.37%, -40.09%] ***
means: 39.3191 (control), 22.9127 (test)
* ssr_pe_cold_ms_jsc_nojit
% change: -44.24% [-46.69%, -41.80%] ***
means: 45.8646 (control), 25.5764 (test)
* ssr_pe_cold_ms_node
% change: -45.61% [-47.38%, -43.85%] ***
means: 90.1118 (control), 49.0116 (test)
```
This is probably in part due to the changes here, but also the page I captured has changed somewhat in the meantime and there seem to be slightly fewer components in the hierarchy, so they're not really comparable. But going forward we can use this benchmark which should be more accurate. I also included an identical copy that uses stateless functional components so we can test optimizations to those later.
(cherry picked from commit e5513eceff)
As reported in #7227, unmounting performance regressed with React 15.
It seems that `delete` has become much slower since we started using numeric keys.
Forcing dictionary keys to start with a dot fixes the issue.
(cherry picked from commit 64e7602b3b)
This provides an easy way to indicate that components should only rerender when given new props, like PureRenderMixin. If you rely on mutation in your React components, you can continue to use `React.Component`.
Inheriting from `React.PureComponent` indicates to React that your component doesn't need to rerender when the props are unchanged. We'll compare the old and new props before each render and short-circuit if they're unchanged. It's like an automatic shouldComponentUpdate.
(cherry picked from commit c8fbdac227)
* Warn if PropType function is called in production
* Check if console is undefined before warning
* Randomize value of ReactPropTypesSecret
* Remove dev environment tests
* Rename typeCheckPass to productionWarningCheck
* Rename productionWarningCheck to expectWarningInProduction
* Call toString on Math.random()
* Rename test block for React type checks
* Make sure warning isnt emitted for failing props
* Cache warning by component and prop, warn in dev
* Pass ReactPropTypesSecret to internal checks
* Move tests to ReactPropTypes-test.js
* Update the warning message to include link
* Do not test warning for unions with invalid args
(cherry picked from commit 95ac239cf3)
* Fix for 5468: Validate proptype definitions sooner
Added typeCheckWarn() func and updated the oneOf/oneOfType tests
Added __DEV__ warning for invalid oneOf/OneOfType args
* Suppress redundant error on warn; typeCheckWarn() removed
* Return no-op
* Using emptyFunction module for consistency
* Remove createChainableTypeChecker() call
* Adjust test to assert type check passes when warned
(cherry picked from commit 6cc037bd0d)
This was added to catch internal errors in React but doesn't seem to be doing much good except frustrating people more when their apps throw (#6895, FB-internal t11950821). Until more proper error boundaries land, let's make this a warning.
(cherry picked from commit abcd567325)
Although it is unreasonable to set every possible property for
simulated events, `type` is useful for event handlers that are shared
between types and potentially have different behaviors.
(cherry picked from commit 5a20d449f6)
* Resolve refs in the order of the children
React makes no guarantees about ref resolution order. Unfortunately, some of the internal Facebook component APIs (specifically, layer dialogs) currently depend on the ref resolution order. Specifically, the assumption is that if the layer dialog is placed as a last child, by the time it mounts or updates, the refs to any previously declared elements have been resolved.
With the current `ReactMultiChild`, this is *usually* the case but not always. Both initial mount and an update of all components satisfy this assumption: by the time a child mounts or updates, the previous children’s refs have been resolved. The one scenario where it isn’t true is when **a new child is mounted during an update**.
In this case, the `mountComponent()` call used to be delayed until `ReactMultiChild` processes the queue. However, this is inconsistent with how updates normally work: unlike mounting, updating and unmounting happens inside `ReactChildReconciler.updateChildren()` loop.
This PR changes the `mountComponent()` to be performed inside `ReactChildReconciler`, just like `receiveComponent()` and `unmountComponent()`, and thus ensures that `attachRef()` calls are enqueued in the order the children were processed, so by the time the next child flushes, the refs of the previous children have been resolved.
This is not ideal and will probably be broken by incremental reconciler in the future. However, since we are trying to get rid of mixins in the internal codebase, and layered components are one of the biggest blockers to that, it’s lesser evil to temporarily make ref resolution order more strict until we have time to fix up the layer APIs to not rely on it, and are able to relax it again (which would be a breaking change).
* Use array instead of object to avoid lookups
(cherry picked from commit 83cbc3e5fb)
* Add failing test demonstrating a ReactPerf warning
* Make the failing ReactPerf test more precise
* Make ReactPerf.start() work during reconciliation
* Reorder lifecycle methods for greater clarity
* Fix memory leak
* Error boundaries should not break ReactPerf
* Put onBeginFlush/onEndFlush into transaction wrappers
This looks cleaner even though it is not strictly necessary.
We still call them manually for unmounting because it doesn't have a transaction.
(cherry picked from commit 1a0e3a3215)
* Add failing tests for #7187 and #7190
* Pass shouldHaveDebugID flag to instantiateComponent
This allows us to remove a hack that was added in #6770 and caused #7187 and #7190.
* Move logic for choosing whether to use debugID outside instantiate
(cherry picked from commit d2ff462b79)
The src/core folder moved while this PR was pending so this file
didn't move with it.
Let's get rid of this annoying top level folder.
(cherry picked from commit 4f7a38c3b7)
Touch behavior is inconsistent across different platforms, and ResponderTouchHistoryStore currently fatals when assumptions are broken. In addition, the behavior differs between development and production.
This pull request does a few things to make ResponderTouchHistoryStore easier to deal with:
Adds Flow to keep the TouchEvent, Touch, and TouchRecord types straight.
Changes behavior to be consistent across environments. This means either always throwing or never throwing (and making use of warning and console.error as appropriate).
When an orphaned move or end event is received, print debug information and ignore it instead of crashing and burning.
(cherry picked from commit 2b226f5fa6)
Summary:
I had to cast into any because flow doesn't think that checking the lowercase version of nodeName is a valid way to refine the variable from HTMLElement to HTMLInputElement. I'm also not confident enough in changing the implementation to an instanceof HTMLInputElement to please flow. It also takes care of the null check in the process.
The `nodeName &&` condition wasn't useful since the two branches are checking it against concrete values and actually makes the type different since nodeName is not a boolean per se. I replaced them with if conditions to make it clearer what it actually did instead of doing boolean logic tricks.
It is unclear why I had to type supportedInputTypes, see this internal post for a discussion: https://www.facebook.com/groups/flowtype/permalink/1084168611631753/
The only difference in behavior is that I now explicitely convert to boolean the object dereference via `!!`.
Test Plan:
npm run flow
Careful inspection of the code
Reviewers: @zpao @spicyj
(cherry picked from commit 309215fc40)
* Inline dev-only requires
This reduces the production bundled build size.
* Use new references after resetting module registry in tests
This fixes the tests which were broken due to inlining some requires.
(cherry picked from commit 8fe6b5fb46)
This commit fixes#5473: ReactDOMServer.renderToString: presence of onClick
handler causes errors on async update
This commit performs the following changes:
- Adds a getUpdateQueue method to ReactServerRenderingTransaction,
ReactReconcileTransaction, ReactNativeReconcileTransaction and
ReactTestReconcileTransaction
- Make the ReactCompositeComponent call this getUpdateQueue instead of using
ReactUpdateQueue that was unwanted at certain moments on server
- On ReactServerRenderingTransaction, dispatch ReactUpdateQueue's methods
while rendering and warning methods afterwards. This is done through the new
ReactServerUpdateQueue class
- Added a series of tests that mimics the case presented in #5473 with setState,
forceUpdate and replaceState
- Add flow typechecking on concerned files
(cherry picked from commit dbdddf1c82)
- Removed the prop transitionAppearTimeout from
addons/transitions/ReactTransitionGroup in order to remove a warning
when passing unknown props to DOM elements.
(cherry picked from commit 6e5dd8926c)
This moves some files out of shared that are not actually shared
with isomorphic. They're specific to the renderers.
(cherry picked from commit 4bc1048e0d)
* addresses issue #7065
* fix test to use new message
* fix string in tests
* fix test string
* Update error message and tests
(cherry picked from commit f94912516f)
* create failing test case
* Fix renderSubtreeIntoContainer to update context
Fixes#6599
* Also test re-rendering due to prop update
* Address review feedback
(cherry picked from commit 25f9f4563e)
Summary:
The only callsite of ReactStateSetters is in LinkedStateMixin which lives in addons/link. Better move it there to avoid cluttering the other folder.
Test Plan:
None
Reviewers: @zpao @spicyj
(cherry picked from commit b0732ef881)
* Standardise format of the three "state" questions.
The original format follows the template:
> 1. x? if `x` then probably isn't state
> 2. y? if `!y` then probably isn't state
> 3. z? if `z` then it's not state
This caused both me and a hallway tester to do a double take.
The proposed reformulation allows the answers to follow the same template.
In the same spirit, it uses the same contraction pattern in the last answer (`it's not state`-> `it isn't state`). This has the welcome side effect to make the lack of "probably" stand out more.
* Update phrasing in thinking in reacr
(cherry picked from commit 5bca3773ab)
* Workaround IE lacking innerHTML on SVG elements
* Add tests for setInnerHTML
* Correctly check if node has innerHTML property
* Ensure tests for setInnerHTML actually tests both codepaths
* Provide mock element for setInnerHTML tests
* Only use SVG setInnerHTML workaround for SVG elements
(cherry picked from commit 99d8524d23)
* Stop passing null as second argument to document.createElement()
* rewrap check for props.is to make it more readable
(cherry picked from commit 263615573c)
Previously, this threw:
```
FAIL src/test/__tests__/ReactTestUtils-test.js (7.291s)
● ReactTestUtils › it can fail context when shallowly rendering
- TypeError: Cannot read property '_source' of null
at describeID (src/renderers/shared/devtools/ReactComponentTreeDevtool.js:70:46)
at Object.ReactComponentTreeDevtool.getStackAddendumByID (src/renderers/shared/devtools/ReactComponentTreeDevtool.js:203:15)
at checkReactTypeSpec (src/isomorphic/classic/types/checkReactTypeSpec.js:76:58)
at ReactCompositeComponentMixin._checkContextTypes (src/renderers/shared/stack/reconciler/ReactCompositeComponent.js:668:5)
at ReactCompositeComponentMixin._processContext (src/renderers/shared/stack/reconciler/ReactCompositeComponent.js:607:14)
at ReactCompositeComponentMixin.mountComponent (src/renderers/shared/stack/reconciler/ReactCompositeComponent.js:191:30)
at ReactShallowRenderer._render (src/test/ReactTestUtils.js:483:14)
at _batchedRender (src/test/ReactTestUtils.js:460:12)
at ReactDefaultBatchingStrategyTransaction.Mixin.perform (src/shared/utils/Transaction.js:140:20)
at Object.ReactDefaultBatchingStrategy.batchedUpdates (src/renderers/shared/stack/reconciler/ReactDefaultBatchingStrategy.js:65:19)
at Object.batchedUpdates (src/renderers/shared/stack/reconciler/ReactUpdates.js:112:20)
at ReactShallowRenderer.render (src/test/ReactTestUtils.js:453:16)
at Spec.eval (src/test/__tests__/ReactTestUtils-test.js:289:34)
at jasmine.Block.execute (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:1067:17)
at jasmine.Queue.next_ (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2100:31)
at jasmine.Queue.start (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2053:8)
at Spec.jasmine.Spec.execute (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2380:14)
at jasmine.Queue.next_ (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2100:31)
at onComplete (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2096:18)
at Spec.jasmine.Spec.finish (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2354:5)
at eval [as onComplete] (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2381:10)
at jasmine.Queue.next_ (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2110:14)
at eval (node_modules/jest-jasmine1/vendor/jasmine-1.3.0.js:2090:18)
at Timeout.e [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:440:19)
at tryOnTimeout (timers.js:224:11)
at Timer.listOnTimeout (timers.js:198:5)
```
(cherry picked from commit 510155e027)
* Don't count the time inside flushes towards lifecycle hooks
Fixes#6842.
We keep the existing behavior of testing for matching `onBeginLifeCycleTimer`/`onEndLifeCycleTimer` calls, but we push the current timer onto the stack if we enter a flush.
This solves an issue with portals which cause updates while a lifecycle timer is already running.
I chose to subtract the time spent in the flush from the time counted towards the lifecycle method because it would artificially inflate the “total” time of the component due to all the components inside the portal, so it would skew the exclusive table.
* Fix up the comment
(cherry picked from commit 8d7161e004)
* Fix componentWillUnmount() not counted by ReactPerf
* Test that functional component render() time shows up in ReactPerf
* Test for setState() code path updates being included
(cherry picked from commit 9ba5668d18)
Test Plan: Changed the preprocessor to log the output of babel.transform and saw
```
var _jsxFileName = 'src/isomorphic/modern/element/__tests__/ReactJSXElementValidator-test.js';
```
in the resulting output, instead of an absolute path.
(cherry picked from commit 6afd51061a)
One of the ReactMultiChildText tests renders 2145 roots (and even more components) and unmounts none of them. Now we don't loop through them all a bunch of times so the test takes 20 seconds instead of 60.
We should clean up instantiateReactComponent somehow so that the onSetDisplayName call isn't produced for the TopLevelWrapper, which should allow us to just store an array of unmountedIDs instead of a hash map so we at least don't have double maps. This change mirrors the old logic though.
Reviewers: @gaearon, @sebmarkbage
(cherry picked from commit 3cc733add4)
Being able to get the source for your parent components seems useful, and ReactComponentTreeDevtool is best poised to be able to do that.
I'm also not sure it makes sense to have separate DOM-specific `onMountDOMComponent` and `onUpdateDOMComponent` events, so I removed them for now. Even if we want them, their timing seemed sort of arbitrary.
I also made it so DOM devtools can listen to non-DOM events too. Willing to change that if people think it's ugly though.
(cherry picked from commit 03f4ba260b)
For clarity.
I left "native event" as-is because there's a lot of it, it's not particularly ambiguous, and SimulateNative/nativeTouchData are public API in ReactTestUtils.
(cherry picked from commit ba9b985406)
This is an outline for the new reconciler infrastructure.
I created a noop renderer to have something to get started from.
I split the reconciler folder into old and new, as well as shared.
I put shouldUpdateReactComponent in shared as an example of a
utility that can easily be shared between both. I plan on breaking
out more utilities like these.
(cherry picked from commit cf157886e9)
* New approach for 6062 fix : Show source line number on unknown property warning
* WIP: ReactDebugToolEventForwarderDevTool
* Update event signature to debugID
* Trigger events in ReactDOMComponent
* Renamed to onMountDOMComponent; passing in element directly
* Added debugID; updated simple test
* Added test for multi-div JSX to ref exact line
* Added test for composite component
(cherry picked from commit 7cf61db257)
This just configures flow to be checked and fixes our existing
Flow typed files.
Possible enhancements:
Export .js.flow declarations from the build. Unclear whether this
will be a supported workflow in the future or not, so let's wait
on that.
We should fail builds and CI on Flow errors.
Ideally we should lint for Flow style guides (like no space before
colon).
(cherry picked from commit 771d938fc0)
Most people don't use the official Flux implementation or docs so I think this is likely to be more confusing than helpful. Maybe later we can add a better comparison of data management solutions.
(cherry picked from commit 9498747606)
I *think* this should refer to the second example, where the instance to the ref is stored. In any case please can someone confirm for my own understanding?
(cherry picked from commit 712b1f75bf)
This makes it easier to figure out where the docs live.
Googling for e.g. `react-addons-update` also works, but this should
make things easier for people that hyperclick directly to the source.
(cherry picked from commit db175052c0)
* Create 01-why-react.zh-TW.md
Translation for language code [zh-TW](https://en.wikipedia.org/wiki/Zh-TW)
* Update 01-why-react.zh-TW.md
change "封裝性非常好" to "封裝性高"
(cherry picked from commit 44f84634d7)
This is no longer needed on the native side.
This is also the last use of the Platform flag. React Core is now
platform agnostic with regard to React Native. So I'll remove
the mocks and dependency.
(cherry picked from commit 0e4b046634)
This can happen if something gets unmounted before the event gets
dispatched. I'm not sure how this works out exactly but this
preserves previous behavior in this scenario.
(cherry picked from commit 69b6869a3e)
Please indicate if this issue affects the following tools provided by React Compiler.
options:
- label:React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
- label:babel-plugin-react-compiler (build issue installing or using the Babel plugin)
- label:eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
- label:react-compiler-healthcheck (build issue installing or using the healthcheck script)
- type:input
attributes:
label:Link to repro
description:|
Please provide a repro by either sharing a [Playground link](https://playground.react.dev), or a public GitHub repo so the React team can reproduce the error being reported. Please do not share localhost links!
placeholder:|
e.g. public GitHub repo, or Playground link
validations:
required:true
- type:textarea
attributes:
label:Repro steps
description:|
What were you doing when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
Issues filed without repro steps will be closed.
placeholder:|
Example bug report:
1. Log in with username/password
2. Click "Messages" on the left menu
3. Open any message in the list
validations:
required:true
- type:dropdown
attributes:
label:How often does this bug happen?
description:|
Following the repro steps above, how easily are you able to reproduce this bug?
options:
- Every time
- Often
- Sometimes
- Only once
validations:
required:true
- type:input
attributes:
label:What version of React are you using?
description:|
Please provide your React version in the app where this issue occurred.
validations:
required:true
- type:input
attributes:
label:What version of React Compiler are you using?
description:|
Please provide the exact React Compiler version in the app where this issue occurred.
We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.
**Before submitting a pull request,** please make sure the following is done:
Before submitting a pull request, please make sure the following is done:
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`.
2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect".
7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
10. If you haven't already, complete the CLA.
Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html
-->
## Summary
<!--
Explain the **motivation** for making this change. What existing problem does the pull request solve?
-->
## How did you test this change?
<!--
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface.
How exactly did you verify that your PR solves the issue you wanted to solve?
If you leave this empty, your PR will very likely be closed.
-->
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
2. If you've added code that should be tested, add tests!
3. If you've changed APIs, update the documentation.
4. Ensure the test suite passes (`npm test`).
5. Make sure your code lints (`npm run lint`).
6. Format your code with [prettier](https://github.com/prettier/prettier) (`npm run prettier`).
7. Run the [Flow](https://flowtype.org/) typechecks (`npm run flow`).
8. If you added or removed any tests, run `./scripts/fiber/record-tests` before submitting the pull request, and commit the resulting changes.
# Don't use restore-keys here. Otherwise the cache grows indefinitely.
- name:Ensure clean build directory
run:rm -rf build
- run:yarn install --frozen-lockfile
if:steps.node_modules.outputs.cache-hit != 'true'
- name:Restore archived build
uses:actions/download-artifact@v4
with:
pattern:_build_*
path:build
merge-multiple:true
- name:Display structure of build
run:ls -R build
- name:Search build artifacts for unminified errors
run:|
yarn extract-errors
git diff --exit-code || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
- name:Insert @headers into eslint plugin and react-refresh
run:|
sed -i -e 's/ LICENSE file in the root directory of this source tree./ LICENSE file in the root directory of this source tree.\n *\n * @noformat\n * @nolint\n * @lightSyntaxTransform\n * @preventMunge\n * @oncall react_core/' \
# Number of days of inactivity before an issue or PR becomes stale
days-before-stale:90
# Number of days of inactivity before a stale issue or PR is closed
days-before-close:7
# API calls per run
operations-per-run:100
# --- Issues ---
stale-issue-label:"Resolution: Stale"
# Comment to post when marking an issue as stale
stale-issue-message:>
This issue has been automatically marked as stale.
**If this issue is still affecting you, please leave any comment** (for example, "bump"), and we'll keep it open.
We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
# Comment to post when closing a stale issue
close-issue-message:>
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
# Issues with these labels will never be considered stale
# Comment to post when marking a pull request as stale
stale-pr-message:>
This pull request has been automatically marked as stale.
**If this pull request is still relevant, please leave any comment** (for example, "bump"), and we'll keep it open.
We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.
# Comment to post when closing a stale pull request
close-pr-message:>
Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!
# PRs with these labels will never be considered stale
React is a JavaScript library for building user interfaces.
* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using [Node](https://nodejs.org/en) and power mobile apps using [React Native](https://reactnative.dev/).
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
[Learn how to use React in your project](https://react.dev/learn).
## Installation
React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**:
* Use [Quick Start](https://react.dev/learn) to get a taste of React.
* [Add React to an Existing Project](https://react.dev/learn/add-react-to-an-existing-project) to use as little or as much React as you need.
* [Create a New React App](https://react.dev/learn/start-a-new-react-project) if you're looking for a powerful JavaScript toolchain.
## Documentation
You can find the React documentation [on the website](https://react.dev/).
Check out the [Getting Started](https://react.dev/learn) page for a quick overview.
The documentation is divided into several sections:
This example will render "Hello Taylor" into a container on the page.
This example will render "Hello John" into a container on the page.
You'll notice that we used an HTML-like syntax; [we call it JSX](https://react.dev/learn#writing-markup-with-jsx). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML.
You'll notice that we used an HTML-like syntax; [we call it JSX](https://facebook.github.io/react/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. We recommend using [Babel](https://babeljs.io/) with a [React preset](https://babeljs.io/docs/plugins/preset-react/) to convert JSX into native JavaScript for browsers to digest.
## Installation
React is available as the `react` package on [npm](https://www.npmjs.com/). It is also available on a [CDN](https://facebook.github.io/react/docs/installation.html#using-a-cdn).
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
The recommended way to install React depends on your project. Here you can find short guides for the most common scenarios:
* [Trying Out React](https://facebook.github.io/react/docs/installation.html#trying-out-react)
* [Creating a Single Page Application](https://facebook.github.io/react/docs/installation.html#creating-a-single-page-application)
* [Adding React to an Existing Application](https://facebook.github.io/react/docs/installation.html#adding-react-to-an-existing-application)
## Contributing
The main purpose of this repository is to continue evolving React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, check out our [contribution guide](https://facebook.github.io/react/contributing/how-to-contribute.html).
### [Code of Conduct](https://code.fb.com/codeofconduct)
### [Code of Conduct](https://code.facebook.com/codeofconduct)
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
Read our [contributing guide](https://legacy.reactjs.org/docs/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
### [Good First Issues](https://github.com/facebook/react/labels/good%20first%20issue)
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/facebook/react/labels/good%20first%20issue) that contain bugs that have a relatively limited scope. This is a great place to get started.
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first bugs](https://github.com/facebook/react/labels/good%20first%20bug) that contain bugs which are fairly easy to fix. This is a great place to get started.
### License
React is [MIT licensed](./LICENSE).
React documentation is [Creative Commons licensed](./LICENSE-docs).
Examples provided in this repository and in the documentation are [separately licensed](./LICENSE-examples).
## Troubleshooting
See the [Troubleshooting Guide](https://github.com/facebook/react/wiki/Troubleshooting)
If you believe you have found a security vulnerability in React, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem.
Please refer to the following page for our responsible disclosure policy, reward guidelines, and those things that should not be reported:
In this case, make sure to put the `<script>` tag after React.
## Overview
In most cases, you can use the `key` prop to specify keys on the elements you're returning from `render`. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there's no way to put a key on each set without adding a wrapper element.
The keys of the passed object (that is, `left` and `right`) are used as keys for the entire set of children, and the order of the object's keys is used to determine the order of the rendered children. With this change, the two sets of children will be properly reordered in the DOM without unmounting.
The return value of `createFragment` should be treated as an opaque object; you can use the [`React.Children`](https://facebook.github.io/react/docs/react-api.html#react.children) helpers to loop through a fragment but should not access it directly. Note also that we're relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.
The code in this package has moved. We recommend you to use `CSSTransitionGroup` from [`react-transition-group`](https://github.com/reactjs/react-transition-group) instead.
In particular, its version `1.x` is a drop-in replacement for the last released version of `react-addons-css-transition-group`.
Run `npm install --save react-transition-group@1.x`, and replace the imports in your code:
The documentation branch for `react-transition-group@1.x` [can be found here](https://github.com/reactjs/react-transition-group/tree/v1-stable#high-level-api-csstransitiongroup).
`LinkedStateMixin` is an easy way to express two-way binding with React.
In React, data flows one way: from owner to child. We think that this makes your app's code easier to understand. You can think of it as "one-way data binding."
However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.
In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](https://facebook.github.io/react/docs/forms.html) for more information.
Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React `state` -- is concise and supports a wide variety of applications. We've provided `LinkedStateMixin`: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React `state`.
> Note:
>
> `LinkedStateMixin` is just a thin wrapper and convention around the `onChange`/`setState()` pattern. It doesn't fundamentally change how data flows in your React application.
## LinkedStateMixin: Before and After
Here's a simple form example without using `LinkedStateMixin`:
This works really well and it's very clear how data is flowing, however, with a lot of form fields it could get a bit verbose. Let's use `LinkedStateMixin` to save us some typing:
`LinkedStateMixin` adds a method to your React component called `linkState()`. `linkState()` returns a `valueLink` object which contains the current value of the React state and a callback to change it. The `LinkInput` component passes those properties to the input it renders.
`valueLink` objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.
Note that checkboxes have a special behavior regarding their `value` attribute, which is the value that will be sent on form submit if the checkbox is checked (defaults to `on`). The `value` attribute is not updated when the checkbox is checked or unchecked. For checkboxes, you should use `checkedLink` instead of `valueLink`:
In this case, make sure to put the `<script>` tag after React.
## Overview
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.
Under the hood, the mixin implements [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate), in which it compares the current props and state with the next ones and returns `false` if the equalities pass.
> Note:
>
> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
>
> Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
In this case, make sure to put the `<script>` tag after React.
## Overview
Before [`React.PureComponent`](https://facebook.github.io/react/docs/react-api.html#react.purecomponent) was introduced, `shallowCompare` was commonly used to achieve the same functionality as [`PureRenderMixin`](https://www.npmjs.com/package/react-addons-pure-render-mixin) 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.
`shallowCompare` performs a shallow equality check on the current `props` and `nextProps` objects as well as the current `state` and `nextState` objects.
It does this by iterating on the keys of the objects being compared and returning true when the values of a key in each object are not strictly equal.
`shallowCompare` returns `true` if the shallow comparison for props or state fails and therefore the component should update.
`shallowCompare` returns `false` if the shallow comparison for props and state both pass and therefore the component does not need to update.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
