Skip to content

Commit

Permalink
[Fiber/Fizz] Support AsyncIterable as Children and AsyncGenerator Cli…
Browse files Browse the repository at this point in the history 
…ent Components (#28868)

Stacked on #28849, #28854, #28853. Behind a flag.

If you're following along from the side-lines. This is probably not what
you think it is.

It's NOT a way to get updates to a component over time. The
AsyncIterable works like an Iterable already works in React which is how
an Array works. I.e. it's a list of children - not the value of a child
over time.

It also doesn't actually render one component at a time. The way it
works is more like awaiting the entire list to become an array and then
it shows up. Before that it suspends the parent.

To actually get these to display one at a time, you have to opt-in with
`<SuspenseList>` to describe how they should appear. That's really the
interesting part and that not implemented yet.

Additionally, since these are effectively Async Functions and uncached
promises, they're not actually fully "supported" on the client yet for
the same reason rendering plain Promises and Async Functions aren't.
They warn. It's only really useful when paired with RSC that produces
instrumented versions of these. Ideally we'd published instrumented
helpers to help with map/filter style operations that yield new
instrumented AsyncIterables.

The way the implementation works basically just relies on unwrapThenable
and otherwise works like a plain Iterator.

There is one quirk with these that are different than just promises. We
ask for a new iterator each time we rerender. This means that upon retry
we kick off another iteration which itself might kick off new requests
that block iterating further. To solve this and make it actually
efficient enough to use on the client we'd need to stash something like
a buffer of the previous iteration and maybe iterator on the iterable so
that we can continue where we left off or synchronously iterate if we've
seen it before. Similar to our `.value` convention on Promises.

In Fizz, I had to do a special case because when we render an iterator
child we don't actually rerender the parent again like we do in Fiber.
However, it's more efficient to just continue on where we left off by
reusing the entries from the thenable state from before in that case.

DiffTrain build for commit 9f2eebd.
  • Loading branch information
@sebmarkbage
sebmarkbage committed Apr 22, 2024
1 parent 5ccb5b7 commit 6bf89d9
Show file tree
Hide file tree
Showing 10 changed files with 333 additions and 291 deletions.
24 changes: 15 additions & 9 deletions ...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<46b519886f2205ba3e56e9120fea4a08>>
* @generated SignedSource<<d6449a2b2f866a42a4d0c4e9ceba56bf>>
*/

'use strict';
Expand Down Expand Up @@ -131,6 +131,7 @@ var enableSchedulingProfiler = true;
var enableProfilerTimer = true;
var enableProfilerCommitHooks = true;
var enableProfilerNestedUpdatePhase = true;
var enableAsyncIterableChildren = false;
var syncLaneExpirationMs = 250;
var transitionLaneExpirationMs = 5000;
var enableLazyContextPropagation = false;
Expand Down Expand Up @@ -5751,7 +5752,7 @@ function createChildReconciler(shouldTrackSideEffects) {
}
}

if (isArray(newChild) || getIteratorFn(newChild)) {
if (isArray(newChild) || getIteratorFn(newChild) || enableAsyncIterableChildren ) {
var _created3 = createFiberFromFragment(newChild, returnFiber.mode, lanes, null);

_created3.return = returnFiber;
Expand Down Expand Up @@ -5836,7 +5837,7 @@ function createChildReconciler(shouldTrackSideEffects) {
}
}

if (isArray(newChild) || getIteratorFn(newChild)) {
if (isArray(newChild) || getIteratorFn(newChild) || enableAsyncIterableChildren ) {
if (key !== null) {
return null;
}
Expand Down Expand Up @@ -5904,7 +5905,7 @@ function createChildReconciler(shouldTrackSideEffects) {
return updateFromMap(existingChildren, returnFiber, newIdx, init(payload), lanes, mergeDebugInfo(debugInfo, newChild._debugInfo));
}

if (isArray(newChild) || getIteratorFn(newChild)) {
if (isArray(newChild) || getIteratorFn(newChild) || enableAsyncIterableChildren ) {
var _matchedFiber3 = existingChildren.get(newIdx) || null;

return updateFragment(returnFiber, _matchedFiber3, newChild, lanes, null, mergeDebugInfo(debugInfo, newChild._debugInfo));
Expand Down Expand Up @@ -6137,7 +6138,7 @@ function createChildReconciler(shouldTrackSideEffects) {
return resultingFirstChild;
}

function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, lanes, debugInfo) {
function reconcileChildrenIteratable(returnFiber, currentFirstChild, newChildrenIterable, lanes, debugInfo) {
// This is the same implementation as reconcileChildrenArray(),
// but using the iterator instead.
var iteratorFn = getIteratorFn(newChildrenIterable);
Expand Down Expand Up @@ -6176,6 +6177,10 @@ function createChildReconciler(shouldTrackSideEffects) {
}
}

return reconcileChildrenIterator(returnFiber, currentFirstChild, newChildren, lanes, debugInfo);
}

function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildren, lanes, debugInfo) {
if (newChildren == null) {
throw new Error('An iterable object provided no iterator.');
}
Expand Down Expand Up @@ -6481,8 +6486,8 @@ function createChildReconciler(shouldTrackSideEffects) {
}

if (getIteratorFn(newChild)) {
return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, lanes, mergeDebugInfo(debugInfo, newChild._debugInfo));
} // Usables are a valid React node type. When React encounters a Usable in
return reconcileChildrenIteratable(returnFiber, currentFirstChild, newChild, lanes, mergeDebugInfo(debugInfo, newChild._debugInfo));
}
// a child position, it unwraps it using the same algorithm as `use`. For
// example, for promises, React will throw an exception to unwind the
// stack, then replay the component once the promise resolves.
Expand Down Expand Up @@ -6967,7 +6972,8 @@ function warnIfAsyncClientComponent(Component) {
// for transpiled async functions. Neither mechanism is completely
// bulletproof but together they cover the most common cases.
var isAsyncFunction = // $FlowIgnore[method-unbinding]
Object.prototype.toString.call(Component) === '[object AsyncFunction]';
Object.prototype.toString.call(Component) === '[object AsyncFunction]' || // $FlowIgnore[method-unbinding]
Object.prototype.toString.call(Component) === '[object AsyncGeneratorFunction]';

if (isAsyncFunction) {
// Encountered an async Client Component. This is not yet supported.
Expand Down Expand Up @@ -22983,7 +22989,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
return root;
}

var ReactVersion = '19.0.0-canary-faeca3c1';
var ReactVersion = '19.0.0-canary-88928511';

/*
* The `'' + value` pattern (used in perf-sensitive code) throws for Symbol
Expand Down
76 changes: 40 additions & 36 deletions ...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<9553b8ed4acfe1f92cf2f7113b446768>>
* @generated SignedSource<<c6fc72b49d174b33d4572246c49e569a>>
*/

"use strict";
Expand Down Expand Up @@ -1811,25 +1811,20 @@ function createChildReconciler(shouldTrackSideEffects) {
function reconcileChildrenIterator(
returnFiber,
currentFirstChild,
newChildrenIterable,
newChildren,
lanes
) {
var iteratorFn = getIteratorFn(newChildrenIterable);
if ("function" !== typeof iteratorFn)
throw Error(
"An object is not an iterable. This error is likely caused by a bug in React. Please file an issue."
);
newChildrenIterable = iteratorFn.call(newChildrenIterable);
if (null == newChildrenIterable)
if (null == newChildren)
throw Error("An iterable object provided no iterator.");
for (
var previousNewFiber = (iteratorFn = null),
var resultingFirstChild = null,
previousNewFiber = null,
oldFiber = currentFirstChild,
newIdx = (currentFirstChild = 0),
nextOldFiber = null,
step = newChildrenIterable.next();
step = newChildren.next();
null !== oldFiber && !step.done;
newIdx++, step = newChildrenIterable.next(), null
newIdx++, step = newChildren.next(), null
) {
oldFiber.index > newIdx
? ((nextOldFiber = oldFiber), (oldFiber = null))
Expand All @@ -1845,28 +1840,30 @@ function createChildReconciler(shouldTrackSideEffects) {
deleteChild(returnFiber, oldFiber);
currentFirstChild = placeChild(newFiber, currentFirstChild, newIdx);
null === previousNewFiber
? (iteratorFn = newFiber)
? (resultingFirstChild = newFiber)
: (previousNewFiber.sibling = newFiber);
previousNewFiber = newFiber;
oldFiber = nextOldFiber;
}
if (step.done)
return deleteRemainingChildren(returnFiber, oldFiber), iteratorFn;
return (
deleteRemainingChildren(returnFiber, oldFiber), resultingFirstChild
);
if (null === oldFiber) {
for (; !step.done; newIdx++, step = newChildrenIterable.next(), null)
for (; !step.done; newIdx++, step = newChildren.next(), null)
(step = createChild(returnFiber, step.value, lanes)),
null !== step &&
((currentFirstChild = placeChild(step, currentFirstChild, newIdx)),
null === previousNewFiber
? (iteratorFn = step)
? (resultingFirstChild = step)
: (previousNewFiber.sibling = step),
(previousNewFiber = step));
return iteratorFn;
return resultingFirstChild;
}
for (
oldFiber = mapRemainingChildren(oldFiber);
!step.done;
newIdx++, step = newChildrenIterable.next(), null
newIdx++, step = newChildren.next(), null
)
(step = updateFromMap(oldFiber, returnFiber, newIdx, step.value, lanes)),
null !== step &&
Expand All @@ -1875,14 +1872,14 @@ function createChildReconciler(shouldTrackSideEffects) {
oldFiber.delete(null === step.key ? newIdx : step.key),
(currentFirstChild = placeChild(step, currentFirstChild, newIdx)),
null === previousNewFiber
? (iteratorFn = step)
? (resultingFirstChild = step)
: (previousNewFiber.sibling = step),
(previousNewFiber = step));
shouldTrackSideEffects &&
oldFiber.forEach(function (child) {
return deleteChild(returnFiber, child);
});
return iteratorFn;
return resultingFirstChild;
}
function reconcileChildFibersImpl(
returnFiber,
Expand Down Expand Up @@ -2009,13 +2006,20 @@ function createChildReconciler(shouldTrackSideEffects) {
newChild,
lanes
);
if (getIteratorFn(newChild))
if (getIteratorFn(newChild)) {
key = getIteratorFn(newChild);
if ("function" !== typeof key)
throw Error(
"An object is not an iterable. This error is likely caused by a bug in React. Please file an issue."
);
newChild = key.call(newChild);
return reconcileChildrenIterator(
returnFiber,
currentFirstChild,
newChild,
lanes
);
}
if ("function" === typeof newChild.then)
return reconcileChildFibersImpl(
returnFiber,
Expand Down Expand Up @@ -9143,19 +9147,19 @@ function wrapFiber(fiber) {
fiberToWrapper.set(fiber, wrapper));
return wrapper;
}
var devToolsConfig$jscomp$inline_1019 = {
var devToolsConfig$jscomp$inline_1028 = {
findFiberByHostInstance: function () {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "19.0.0-canary-926deca4",
version: "19.0.0-canary-e1a9c38c",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1238 = {
bundleType: devToolsConfig$jscomp$inline_1019.bundleType,
version: devToolsConfig$jscomp$inline_1019.version,
rendererPackageName: devToolsConfig$jscomp$inline_1019.rendererPackageName,
rendererConfig: devToolsConfig$jscomp$inline_1019.rendererConfig,
var internals$jscomp$inline_1247 = {
bundleType: devToolsConfig$jscomp$inline_1028.bundleType,
version: devToolsConfig$jscomp$inline_1028.version,
rendererPackageName: devToolsConfig$jscomp$inline_1028.rendererPackageName,
rendererConfig: devToolsConfig$jscomp$inline_1028.rendererConfig,
overrideHookState: null,
overrideHookStateDeletePath: null,
overrideHookStateRenamePath: null,
Expand All @@ -9172,26 +9176,26 @@ var internals$jscomp$inline_1238 = {
return null === fiber ? null : fiber.stateNode;
},
findFiberByHostInstance:
devToolsConfig$jscomp$inline_1019.findFiberByHostInstance ||
devToolsConfig$jscomp$inline_1028.findFiberByHostInstance ||
emptyFindFiberByHostInstance,
findHostInstancesForRefresh: null,
scheduleRefresh: null,
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "19.0.0-canary-926deca4"
reconcilerVersion: "19.0.0-canary-e1a9c38c"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1239 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
var hook$jscomp$inline_1248 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
if (
!hook$jscomp$inline_1239.isDisabled &&
hook$jscomp$inline_1239.supportsFiber
!hook$jscomp$inline_1248.isDisabled &&
hook$jscomp$inline_1248.supportsFiber
)
try {
(rendererID = hook$jscomp$inline_1239.inject(
internals$jscomp$inline_1238
(rendererID = hook$jscomp$inline_1248.inject(
internals$jscomp$inline_1247
)),
(injectedHook = hook$jscomp$inline_1239);
(injectedHook = hook$jscomp$inline_1248);
} catch (err) {}
}
exports._Scheduler = Scheduler;
Expand Down
Loading

0 comments on commit 6bf89d9

Please sign in to comment.