* 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
This also buffers all rows into a single console.log call.
This is because jest nows adds the line number of each console.log
call which becomes quite noisy for these trees.
This is unfortunate since we agreed on using the `null | Fiber`
convention instead of `?Fiber` but haven't upgraded yet and this
is the pattern I've been using everywhere else so far.
We should be able to abort an update without any side-effects to the
current tree. This fixes a few cases where that was broken.
The callback list should only ever be set on the workInProgress.
There's no reason to add it to the current tree because they're not
needed after they are called during the commit phase.
Also found a bug where the memoizedProps were set to null in the
case of an update, because the pendingProps were null. Fixed by
transfering the props from the instance, like we were already doing
with state.
Added a test to ensure that setState can be called inside a
callback.
Callbacks are stored on the same queue as updates. They care called
during the commit phase, after the updates have been flushed.
Because the update queue is cleared during the completion phase (before
commit), a new field has been added to fiber called callbackList. The
queue is transferred from updateQueue to callbackList during completion.
During commit, the list is reset.
Need a test to confirm that callbacks are not lost if an update is
preempted.
Rather than bubble up both trees, bubble up once and assign to the
alternate at each level.
Extract logic for adding to the queue to the StateQueue module.
Updates are scheduled by setting a work priority on the fiber and bubbling it to
the root. Because the instance does not know which tree is current at any given
time, the update is scheduled on both fiber alternates.
Need to add more unit tests to cover edge cases.
This colocates the reliance on alternate with the scheduler, so
that we have the option to not use this, or more easily break
apart the initial mount phase into an optimized path.
I'll probably end up reverting this before the bigger release
since it is not part of the official public API. However,
it is useful to be able to compare the performance between
functional components and classes.
The findPendingWork phase is the same as just walking the tree the
normal way effectively. It only makes things more complex to
think about. We might possibly be able to write a few special
branches to optimize it but for now it doesn't seem necessary.
The priority level gets reset at the wrong time because I rely
on mutating it at the wrong point. This moves it to the end of
completed work as a second pass over the children to see what
the highest priority is. This is inefficient for large sets but
we can try to find a smarter way to do this later. E.g. passing
it down the stack.
This bug fix revealed another bug that I had flagged before that
we're finding work to do in the "current" tree instead of the
working tree. For trees that were paused, e.g. childInProgress
trees, this won't work since don't have a current tree to search.
Therefore I fixed findNextUnitOfWorkAtPriority to use
workInProgress instead of current.
* 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
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.
* 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
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.
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.
* 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];
}
```
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/
This commit takes the first incremental step towards adding type checks
to the React event code. A couple of issues came up.
There is an issue with the SyntheticEvent type: Flow declares a
SyntheticEvent type[1] that lacks the non-public properties which are
used in React internals. To solve this I declared a class that extends
SyntheticEvent. This class can be expanded as we add Flow types to more
places where SyntheticEvent instances are referenced.
I'm happy to change this if folks prefer a different approach.
Some options I considered:
- Override the SyntheticEvent declaration with our own declaration
- Pro: We can use 'SyntheticEvent' as a type just like we are used to
when working in any other codebase.
- Pro: No need to import any type since it's a declaration
- Pro: Only one version of SyntheticEvent; less confusion.
- Con: Could get out of sync with real implementation.
- Con: Duplicates part of the type declared in Flow.
- Import the SyntheticEvent class and use that as the type
- Pro: Keeps type definition in sync with the real implementation.
- Con: Declaration overrides implementation so I'm not sure this would
work.
- Con: Have to remember to import the type.
- Declare a separate type called ReactSyntheticEvent that extends
SyntheticEvent
- Pro: Stays in sync with the Flow SyntheticEvent type;
less duplication.
- Pro: Differentiates this type from the Flow SyntheticEvent type;
less confusion.
- Pro: No need to import any type since it's a declaration
- Con: Could get out of sync with real implementation.
I also ran into an issue where a variable was only non-null when
'__DEV__' is true, similar to PR #7586.[2] The work-around is to force
it to be typed non-null and add a comment documenting the reason. At
this time Flow doesn't have a better way to deal with the situation.
Next steps:
- Specific type for the 'dispatchConfig' property of SyntheticEvent
- More detailed types for PluginName and PluginModule
Lastly; note that I renamed some variables to follow the convention of
reserving PascalCase for classes, enums, and Flow types.
[1]: https://github.com/facebook/flow/blob/master/lib/react.js#L277-L293
[2]: https://github.com/facebook/react/pull/7586/commits/b99eb5087bc2df3bcb64d76a2d75953978f61f34
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 :)
