* Reword duplicate key warning
**what is the change?:**
- Removes the now-inaccurate description of behavior around duplicate
keys
- Adds link to 'key' docs page
- Changes tone to be more casual and friendly
Alternative wording idea;
'Encountered two children with the same key, ${key}
Child keys must be unique; using duplicate keys is not supported and
will cause unexpected behavior in some versions of React.
See https://fb.me/react-warning-keys for more information on how to
fix this.'
**why make this change?:**
Mainly this change was needed because in React 16, duplicate keys will
not cause omission of items with duplicate keys. All items will be
rendered. It could happen that in future versions of React we will have
different behavior though.
**test plan:**
`yarn test`
**issue:**
Wishlist item on https://github.com/facebook/react/issues/8854
* Further improve wording of duplicate key error
**what is the change?:**
Another tweak to the wording of this error to make it more clear and
accurate.
**why make this change?:**
The previous tweak was too casual in tone and still not clear enough.
**test plan:**
`yarn test` and `REACT_DOM_JEST_USE_FIBER=1 yarn run test`
**issue:**
Wishlist item on https://github.com/facebook/react/issues/8854
* Run prettier
* Fix typo in error message for duplicate keys
**what is the change?:**
Fixed a typo in the updated message
* Fix two more typo spots
* change the argument passed to CallbackQueue.getPooled
* remove undefined from function call
* add test for ReactNativeReconcileTransaction
* update log of tests
* change test to one that operates on setState
* added new tests and fixed another instance of the bug
* run prettier
* update names of tests and minor clean up
* remove arg from CallbackQueue and update tests
* Add react-dom-unstable-native-dependencies
react-native-web and react-primitives currently access a few internals
for shimming DOM events into native ones. Changes in react@16 packaging
hide these internals completely. This change adds a submodule to react-dom,
unstable-native-dependencies that includes the necessary modules to
continue enabling that method of dom-native event injection.
* Update ResponderEventPlugin to use "public" interfaces for test
In order to get some sort of smoke testing on
react-dom-unstable-native-dependencies, update ResponderEventPlugin-test
to use the "public" interfaces provided by react-dom and the new
react-dom/unstable-native dependencies
Also adds the missing references in package.json as well as missing
files required for unittests to do imports correctrly
Also exports injectComponentTree() which is required for the unittests
to re-set the shared component state between runs.
* Tweak bundle comment
* Bundle content updates from exporting injectComponentTree
* Added FB_DEV, FB_PROD to bundle types
* Run yarn prettier for -unstable-native-dependencies updates
* Add failing test to show that shallow test renderer doesn't call setState's callback arg
* Record tests
* Fix shallow renderer's setState/replaceState/forceUpdate to execute any callbacks passed. (#10089)
* Ensure shallow renderer callbacks are called with the correct binding.
This fixes a snapshot test regression introduced by #10008. I had
noticed this change and believe the new behavior was correct, but upon
further investigation I was wrong. This reverts the snapshot test and
fixes it accordingly.
To make sure we don't reset the priority of a down-prioritized fiber,
we compare the priority we're currently rendering at to the fiber's
work priority. If the work priority is lower, then we know not to reset
the work priority.
When an error in thrown in the begin phase, we begin work on the
error boundary a second time to unmount the children. This is a special
case of "resuming" work that we need to account for. The children are
set to the current children so that we can delete them.
The current implementation of resuming work is buggy. The underlying
model is also flawed. Rather than attempt to fix a flawed model, we'll
scrap the feature entirely and add it back later.
* Warn for text content
* Warn for different attributes/properties values
Warns if there are unknown extra attributes in the hydrated node.
It also tries to compare the existing property or attribute against the
expected value. It does this by reading the property and comparing it to
the prop. Except it's not that simple because multiple prop values can
yield the same output. For this we pass an extra expected value that is
a hint as to which one was used. This is a bit weird but I'm not sure the
alternatives were much better.
* Warn when there is an insertion or deletion during hydration
This warns if there is ever an insertion or deletion due to hydration
failing to find a match.
Currently we can't warn for insertions required into the root because
that's how we do all non-hydrating renders atm. Left a todo.
This strategy is a bit unfortunate that it leads to so much plumbing code.
And we have to add three extra methods to the HostConfig that are only used
in DEV and not for anything else. I don't really have a better idea.
* Don't try to delete children of a textarea
Textareas are special cases. The initial mount inserts children
as the default value, but we should leave that untouched. This is the same
as the special case where we set text content of children so I'll use that
mechanism.
* Change expected format for text differences
In Stack this is presented as HTML which needs to have normalized escaping
rules. In Fiber it is currently not presented as HTML but a raw string
so we don't escape it.
* Unmount component in between tests
In Fiber, the second warning isn't issued because it's considered an update
not a new initial render and we don't fire the warning for those.
* Change expectation of white space text behavior in Fiber
In Fiber we don't expect empty strings to be different from rendering null.
In fact, in a follow up I plan on formalizing this by never creating text
Fibers for empty strings.
* Warn for different dangerouslySetInnerHTML
We can't just compare the raw innerHTML value because it will have been
normalized. Instead, we'll create another element, set its innerHTML and
read it back.
Since there can be custom elements registered with this document, we want
to avoid any side-effects they might cause. So I do this in a fresh new
document.
I'm not sure how this would affect controlled components and other stuff
that could have changed after runtime. I think for those cases maybe we
just need a general way of opting out of the diff.
* Warn if unmounting a non-container
* Warn if the 2nd+ child is a "root" element but not first
This triggers our non-reuse mode. This is covered by ReactMount already but
the test doesn't pass yet without also landing #10026.
Simplifies markup generation by only inserting a simple comments between
consecutive text nodes.
I also skip past comments and other nodes while hydrating. This leaves them
in place instead of being removed by the hydration mechanism. This is more
efficient but will also be needed by hydration validator.
There's a special case for empty strings. We probably shouldn't have nodes
for those at all. For now I special case it by assuming there won't be one
so if we need one, we'll insert an empty text node.
I also dropped the ID from the react ID.
This covers up errors that are thrown in Fiber, because callback gets
fired *and* an error is thrown. Created a follow up #10049 to reevaluate
these semantics.
# Conflicts:
# scripts/fiber/tests-passing-except-dev.txt
# scripts/fiber/tests-passing.txt
This ensures that custom properties that are required by Facebook's error tooling (eg 'framesToPop') don't get dropped.
I also improved the handling/messaging of thrown strings.
There's no advantage to scheduling updates with animation priority
versus scheduling sync work inside requestAnimationCallback. So we can
remove all the animation-specific code. Now there's only one type of
callback.
Allows us to make assertions on the values that are yielded when
performing work. In our existing tests, we do this manually by pushing
into an array.
ReactNoop.flushThrough extends this concept. It accepts an array of
expected values and flushes until those values are yielded.
When a user types an emoji via Touch keyboard in IE, React's fallback logic
creates the `BeforeInput` event based on the `keypress`. However, the length
of an emoji character (e.g. `\uD83D\uDE0A`) is two, so the `which` property
does not represent an emoji correctly.
Because IE's KeyboardEvent has the `char` property holding an entire emoji,
we can use it directly instead of converting from the `which`.
This makes it so you don't need to pattern-match manually to build a renderer where the container and instance types are not the same. Prerequisite to #9835.
* 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
* Remove internal forwarding modules for /lib/
* Add *Entry suffix to all entry points
* Don't bundle ReactNativeFeatureFlags since it's shimmed
* Delete TestRendererStack
* Switch tests at forwarding modules rather than via Jest
* Share mocks between regular and equivalence fixtures
* Rename environment flag to be more generic
* Remove accidental variable name change
* Minor naming changes for consistency
Files that have two versions get the engine in variable name.
* Add ReactNoop.yield, ReactNoop.flushAndYield, ReactNoop.flushUnitsOfWork
Incremental tests often rely on yielding at a specific point. Using an
explicit API should make our tests more resilient to changes
in implementation.
* Fuzz tester that simulates Sierpinski Triangle demo
The tests only assert that the output of the tree is consistent after
each action, and that the final result after all work has flushed is
the expected value. It does not assert how work is reused, which means
it can't detect starvation issues. However, this also means that it
is fairly resilient to changes in our incremental algorithm.
Flarnie MarchanandGitHub
Garrett McCulloughandDan Abramov
Peter RuibalandDan Abramov
walrusfruitcakeandDan Abramov
Brandon DailandDan Abramov
Eli WhiteandBen Alpert
Dheeraj KumarandBrian Vaughn
Andrew ClarkandGitHub
Andrew Clark
Sebastian MarkbågeandGitHub
Toru KobayashiandAndrew Clark
Sasha AickinandGitHub
Jack FordandDan Abramov
Michael RidgwayandDan Abramov
tokikuchandBen Alpert
Dominic GannawayandGitHub
Bogdan ChadkinandDan Abramov
Dan Abramov