* Initial React DevTools support for Fiber
* Record a newly failing irrelevant test
This is fine because we don't use it in Stack anyway (at least not that part), and we also rely on Set/Map in other parts of code.
The newly failing test is the one saying "it works without Map/Set".
* Explicitly check for Fiber DevTools support
This lets us ignore pre-Fiber DevTools instead of crashing them by injecting a different API.
* Track the roots in DevTools instead
* Lol Dan this is not how warnings work in our codebase
* Move injection to the renderer
* Notify DevTools about unmounts
* Make it work in production
* Fix lint and flow
* Fixups
* Address feedback
When visiting the yields, the root is the stateNode of the coroutine. If
its return value is wrong we'll end up at the alternate of the
workInProgress which will start scanning its children which is wrong.
There are a few different issues:
* Updates result in unnecessary duplicate placements because it can't find the current fiber for continuations.
* When run together, coroutine update and unmounting tests appear to lock down in an infinite loop. They don't freeze in isolation.
I don't have a solution for this but just leaving it for future fixes.
Coroutines was kind of broken because it tried to do reparenting and
enabling state preservation to be passed along the coroutine. However,
since we couldn't determine which Fiber was "current" on a reified yield
this was kind of broken.
This removes the "continuation" part of yields so they're basically just
return values. It is still possible to do continuations by just passing
simple functions or classes as part of the return value but they're not
stateful.
This means that we won't have reparenting, but I actually don't think we
need it. There's another way to structure this by doing all the state in
the first phase and then yielding a stateless representation of the result.
This stateless representation of the tree can then be rendered in different
(or even multiple) locations.
Because we no longer have a stateful continuation, you may have noticed
that this really no longer represent the "coroutine" concept. I will
rename it in a follow up commit.
It is slightly more useful this way because when we want to find host nodes
we typically want to do so in the second phase. That's the real tree where
as the first phase is more of a virtual part of the tree.
I introduce the ReactDOMFrameScheduling module which just exposes
rIC and rAF.
The polyfill works by scheduling a requestAnimationFrame, store the time
for the start of the frame, then schedule a postMessage which gets
scheduled after paint. The deadline is set to time + frame rate.
By separating the idle call into a separate event tick we ensure that
layout, paint and other browser work is counted against the available time.
The frame rate is dynamically adjusted by tracking the minimum time between
two rAF callbacks. This is not perfect because browsers can schedule
multiple callbacks to catch up after a long frame. To compensate for this
we only adjust if two consecutive periods are faster than normal.
This seems to guarantee that we will hit frame deadlines and we don't end
up dropping frames. However, there is still some lost time so we risk
starving by not having enough idle time.
Especially Firefox seems to have issues keeping up on the triangle demo
However, that is also true for native rIC in Firefox. It seems like more
render work is scheduled on the main thread pipeline and also that JS
execution just generally has more overhead.
It's not just events that read the current props. Controlled components
do as well. Since we're no longer updating the Fiber pointer during updates
we have to instead read from the node props to get the current props.
Since this method is no longer just used for events I renamed it.
* Allow renderers to return an update payload in prepareUpdate
This then gets stored on updateQueue so that the renderer doesn't need to
think about how to store this.
It then gets passed into commitUpdate during the commit phase.
This allows renderers to do the diffing during the time sliced path,
allocate a queue for changes and do only the absolute minimal work to
apply those changes in the commit phase.
If refs update we still schedule and update.
* Hack around the listener problem
* Diff ReactDOMFiber properties in prepareUpdate
We now take advantage of the new capability to diff properties early.
We do this by generating an update payload in the form of an array with
each property name and value that we're about to update.
* Add todo for handling wasCustomComponentTag
* Always force an update to wrapper components
Wrapper components have custom logic that gets applied at the commit phase
so we always need to ensure that we schedule an update for them.
* Remove rootContainerInstance from commitMount
No use case yet and I removed it from commitUpdate earlier.
* Use update signal object in test renderer
* Incorporate 8652 into new algorithm
* Fix comment
* Add failing test for flipping event handlers
This illustrates the problem that happens if we store a pointer to the
Fiber and then choose not to update that pointer when no properties change.
That causes an old Fiber to be retained on the DOM node. Then that Fiber
can be reused by the pooling mechanism which then will mutate that Fiber
with new event handlers, which makes them active before commit.
* Store current props in the RN instance cache and on the DOM node
This represents the current set of event listeners. By not relying on the
Fiber, it allows us to avoid doing any effects in the commit phase when
nothing changes.
This is a bit ugly. Not super happy how this all came together.
* Add a test for rendering SVG into a non-React SVG tree
It is failing in Fiber.
* Add a test for rendering HTML into non-React foreignObject
It happens to pass in Fiber.
* Determine root namespace by container namespace, not just tag
A tag alone is not enough to determine the tree namespace.
* Skip the test that exhibits jsdom bug in non-createElement mode
jsdom doesn't give HTML namespace to foreignObject.innerHTML children.
This problem doesn't exist in the browsers.
https://github.com/facebook/react/pull/8638#issuecomment-269349642
We will skip this test in non-createElement mode considering
that non-createElement mounting is effectively dead code now anyway.
A new module has been added (ReactFiberErrorLogger). This logs error information (call stack and component stack) to the console to make errors easier to debug. It also prompts users to use error boundaries if they are not already using them.
In the future, perhaps this will be injectable, enabling users to provide their own handler for custom processing/logging. For the time being, this should help with issues like this / #2461.
Andrew Clark
Dan Abramov
Zac Braddy
Frank Yan
Sebastian Markbåge
Sebastian Markbage
Brian Vaughn
jddxf
Brandon Dail
lokson
Edvin Erikson
Ben Alpert
OJ Kwon
Mark Pedrotti
Brian Vaughn
Eric Churchill
Piper Chester
Diego Muracciole