Skip to content

Commit

Permalink
Support Context as renderable node (#25641)
Browse files Browse the repository at this point in the history 
## Based on #25634

Like promises, this adds support for Context as a React node.

In this initial implementation, the context dependency is added to the
parent of child node. This allows the parent to re-reconcile its
children when the context updates, so that it can delete the old node if
the identity of the child has changed (i.e. if the key or type of an
element has changed). But it also means that the parent will replay its
entire begin phase. Ideally React would delete the old node and mount
the new node without reconciling all the children. I'll leave this for a
future optimization.

DiffTrain build for [1317681](1317681)
  • Loading branch information
@acdlite
acdlite committed Mar 11, 2023
1 parent 132204a commit 6b8da26
Show file tree
Hide file tree
Showing 24 changed files with 1,030 additions and 110 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
d4f58c3b8123f1654ca1b06692c3165928bef8df
131768166b60b3bc271b54a3f93f011f310519de
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-dev.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ if (
}
"use strict";

var ReactVersion = "18.3.0-www-modern-abf2779e";
var ReactVersion = "18.3.0-www-modern-052eefbf";

// ATTENTION
// When adding new symbols to this file,
Expand Down
71 changes: 67 additions & 4 deletions compiled/facebook-www/ReactART-dev.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}

var ReactVersion = "18.3.0-www-classic-3bfe2b4e";
var ReactVersion = "18.3.0-www-classic-e28878a7";

var LegacyRoot = 0;
var ConcurrentRoot = 1;
Expand Down Expand Up @@ -6088,6 +6088,18 @@ function createChildReconciler(shouldTrackSideEffects) {
return createChild(returnFiber, unwrapThenable(thenable), lanes);
}

if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
) {
var context = newChild;
return createChild(
returnFiber,
readContextDuringReconcilation(returnFiber, context, lanes),
lanes
);
}

throwOnInvalidObjectType(returnFiber, newChild);
}

Expand Down Expand Up @@ -6163,6 +6175,19 @@ function createChildReconciler(shouldTrackSideEffects) {
);
}

if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
) {
var context = newChild;
return updateSlot(
returnFiber,
oldFiber,
readContextDuringReconcilation(returnFiber, context, lanes),
lanes
);
}

throwOnInvalidObjectType(returnFiber, newChild);
}

Expand Down Expand Up @@ -6249,6 +6274,20 @@ function createChildReconciler(shouldTrackSideEffects) {
);
}

if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
) {
var context = newChild;
return updateFromMap(
existingChildren,
returnFiber,
newIdx,
readContextDuringReconcilation(returnFiber, context, lanes),
lanes
);
}

throwOnInvalidObjectType(returnFiber, newChild);
}

Expand Down Expand Up @@ -6937,6 +6976,19 @@ function createChildReconciler(shouldTrackSideEffects) {
);
}

if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
) {
var context = newChild;
return reconcileChildFibersImpl(
returnFiber,
currentFirstChild,
readContextDuringReconcilation(returnFiber, context, lanes),
lanes
);
}

throwOnInvalidObjectType(returnFiber, newChild);
}

Expand Down Expand Up @@ -17000,6 +17052,17 @@ function readContext(context) {
}
}

return readContextForConsumer(currentlyRenderingFiber, context);
}
function readContextDuringReconcilation(consumer, context, renderLanes) {
if (currentlyRenderingFiber === null) {
prepareToReadContext(consumer, renderLanes);
}

return readContextForConsumer(consumer, context);
}

function readContextForConsumer(consumer, context) {
var value = context._currentValue2;

if (lastFullyObservedContext === context);
Expand All @@ -17011,7 +17074,7 @@ function readContext(context) {
};

if (lastContextDependency === null) {
if (currentlyRenderingFiber === null) {
if (consumer === null) {
throw new Error(
"Context can only be read while React is rendering. " +
"In classes, you can read it in the render method or getDerivedStateFromProps. " +
Expand All @@ -17021,13 +17084,13 @@ function readContext(context) {
} // This is the first dependency for this component. Create a new list.

lastContextDependency = contextItem;
currentlyRenderingFiber.dependencies = {
consumer.dependencies = {
lanes: NoLanes,
firstContext: contextItem
};

if (enableLazyContextPropagation) {
currentlyRenderingFiber.flags |= NeedsPropagation;
consumer.flags |= NeedsPropagation;
}
} else {
// Append a new context item.
Expand Down
71 changes: 67 additions & 4 deletions compiled/facebook-www/ReactART-dev.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}

var ReactVersion = "18.3.0-www-modern-4c8eb7b9";
var ReactVersion = "18.3.0-www-modern-1b2e7ccd";

var LegacyRoot = 0;
var ConcurrentRoot = 1;
Expand Down Expand Up @@ -5844,6 +5844,18 @@ function createChildReconciler(shouldTrackSideEffects) {
return createChild(returnFiber, unwrapThenable(thenable), lanes);
}

if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
) {
var context = newChild;
return createChild(
returnFiber,
readContextDuringReconcilation(returnFiber, context, lanes),
lanes
);
}

throwOnInvalidObjectType(returnFiber, newChild);
}

Expand Down Expand Up @@ -5919,6 +5931,19 @@ function createChildReconciler(shouldTrackSideEffects) {
);
}

if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
) {
var context = newChild;
return updateSlot(
returnFiber,
oldFiber,
readContextDuringReconcilation(returnFiber, context, lanes),
lanes
);
}

throwOnInvalidObjectType(returnFiber, newChild);
}

Expand Down Expand Up @@ -6005,6 +6030,20 @@ function createChildReconciler(shouldTrackSideEffects) {
);
}

if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
) {
var context = newChild;
return updateFromMap(
existingChildren,
returnFiber,
newIdx,
readContextDuringReconcilation(returnFiber, context, lanes),
lanes
);
}

throwOnInvalidObjectType(returnFiber, newChild);
}

Expand Down Expand Up @@ -6693,6 +6732,19 @@ function createChildReconciler(shouldTrackSideEffects) {
);
}

if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
) {
var context = newChild;
return reconcileChildFibersImpl(
returnFiber,
currentFirstChild,
readContextDuringReconcilation(returnFiber, context, lanes),
lanes
);
}

throwOnInvalidObjectType(returnFiber, newChild);
}

Expand Down Expand Up @@ -16689,6 +16741,17 @@ function readContext(context) {
}
}

return readContextForConsumer(currentlyRenderingFiber, context);
}
function readContextDuringReconcilation(consumer, context, renderLanes) {
if (currentlyRenderingFiber === null) {
prepareToReadContext(consumer, renderLanes);
}

return readContextForConsumer(consumer, context);
}

function readContextForConsumer(consumer, context) {
var value = context._currentValue2;

if (lastFullyObservedContext === context);
Expand All @@ -16700,7 +16763,7 @@ function readContext(context) {
};

if (lastContextDependency === null) {
if (currentlyRenderingFiber === null) {
if (consumer === null) {
throw new Error(
"Context can only be read while React is rendering. " +
"In classes, you can read it in the render method or getDerivedStateFromProps. " +
Expand All @@ -16710,13 +16773,13 @@ function readContext(context) {
} // This is the first dependency for this component. Create a new list.

lastContextDependency = contextItem;
currentlyRenderingFiber.dependencies = {
consumer.dependencies = {
lanes: NoLanes,
firstContext: contextItem
};

if (enableLazyContextPropagation) {
currentlyRenderingFiber.flags |= NeedsPropagation;
consumer.flags |= NeedsPropagation;
}
} else {
// Append a new context item.
Expand Down
62 changes: 53 additions & 9 deletions compiled/facebook-www/ReactART-prod.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1711,6 +1711,15 @@ function createChildReconciler(shouldTrackSideEffects) {
);
if ("function" === typeof newChild.then)
return createChild(returnFiber, unwrapThenable(newChild), lanes);
if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
return createChild(
returnFiber,
readContextDuringReconcilation(returnFiber, newChild, lanes),
lanes
);
throwOnInvalidObjectType(returnFiber, newChild);
}
return null;
Expand Down Expand Up @@ -1751,6 +1760,16 @@ function createChildReconciler(shouldTrackSideEffects) {
unwrapThenable(newChild),
lanes
);
if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
return updateSlot(
returnFiber,
oldFiber,
readContextDuringReconcilation(returnFiber, newChild, lanes),
lanes
);
throwOnInvalidObjectType(returnFiber, newChild);
}
return null;
Expand Down Expand Up @@ -1811,6 +1830,17 @@ function createChildReconciler(shouldTrackSideEffects) {
unwrapThenable(newChild),
lanes
);
if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
return updateFromMap(
existingChildren,
returnFiber,
newIdx,
readContextDuringReconcilation(returnFiber, newChild, lanes),
lanes
);
throwOnInvalidObjectType(returnFiber, newChild);
}
return null;
Expand Down Expand Up @@ -2131,6 +2161,16 @@ function createChildReconciler(shouldTrackSideEffects) {
unwrapThenable(newChild),
lanes
);
if (
newChild.$$typeof === REACT_CONTEXT_TYPE ||
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
)
return reconcileChildFibersImpl(
returnFiber,
currentFirstChild,
readContextDuringReconcilation(returnFiber, newChild, lanes),
lanes
);
throwOnInvalidObjectType(returnFiber, newChild);
}
return ("string" === typeof newChild && "" !== newChild) ||
Expand Down Expand Up @@ -5037,20 +5077,24 @@ function prepareToReadContext(workInProgress, renderLanes) {
(workInProgress.firstContext = null)));
}
function readContext(context) {
return readContextForConsumer(currentlyRenderingFiber, context);
}
function readContextDuringReconcilation(consumer, context, renderLanes) {
null === currentlyRenderingFiber &&
prepareToReadContext(consumer, renderLanes);
return readContextForConsumer(consumer, context);
}
function readContextForConsumer(consumer, context) {
var value = context._currentValue2;
if (lastFullyObservedContext !== context)
if (
((context = { context: context, memoizedValue: value, next: null }),
null === lastContextDependency)
) {
if (null === currentlyRenderingFiber)
throw Error(formatProdErrorMessage(308));
if (null === consumer) throw Error(formatProdErrorMessage(308));
lastContextDependency = context;
currentlyRenderingFiber.dependencies = {
lanes: 0,
firstContext: context
};
enableLazyContextPropagation && (currentlyRenderingFiber.flags |= 524288);
consumer.dependencies = { lanes: 0, firstContext: context };
enableLazyContextPropagation && (consumer.flags |= 524288);
} else lastContextDependency = lastContextDependency.next = context;
return value;
}
Expand Down Expand Up @@ -9846,7 +9890,7 @@ var slice = Array.prototype.slice,
return null;
},
bundleType: 0,
version: "18.3.0-www-classic-812a2cd2",
version: "18.3.0-www-classic-92b5c33e",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1303 = {
Expand Down Expand Up @@ -9877,7 +9921,7 @@ var internals$jscomp$inline_1303 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-www-classic-812a2cd2"
reconcilerVersion: "18.3.0-www-classic-92b5c33e"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1304 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Loading

0 comments on commit 6b8da26

Please sign in to comment.