Skip to content

Commit 6b8da26

Browse files
acdliteacdlite
committed
Support Context as renderable node (#25641)
## 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)
1 parent 132204a commit 6b8da26

24 files changed

+1030
-110
lines changed

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
d4f58c3b8123f1654ca1b06692c3165928bef8df
1+
131768166b60b3bc271b54a3f93f011f310519de

‎compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ if (
2727
}
2828
"use strict";
2929

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

3232
// ATTENTION
3333
// When adding new symbols to this file,

‎compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

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

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;
@@ -6088,6 +6088,18 @@ function createChildReconciler(shouldTrackSideEffects) {
60886088
return createChild(returnFiber, unwrapThenable(thenable), lanes);
60896089
}
60906090

6091+
if (
6092+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
6093+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
6094+
) {
6095+
var context = newChild;
6096+
return createChild(
6097+
returnFiber,
6098+
readContextDuringReconcilation(returnFiber, context, lanes),
6099+
lanes
6100+
);
6101+
}
6102+
60916103
throwOnInvalidObjectType(returnFiber, newChild);
60926104
}
60936105

@@ -6163,6 +6175,19 @@ function createChildReconciler(shouldTrackSideEffects) {
61636175
);
61646176
}
61656177

6178+
if (
6179+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
6180+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
6181+
) {
6182+
var context = newChild;
6183+
return updateSlot(
6184+
returnFiber,
6185+
oldFiber,
6186+
readContextDuringReconcilation(returnFiber, context, lanes),
6187+
lanes
6188+
);
6189+
}
6190+
61666191
throwOnInvalidObjectType(returnFiber, newChild);
61676192
}
61686193

@@ -6249,6 +6274,20 @@ function createChildReconciler(shouldTrackSideEffects) {
62496274
);
62506275
}
62516276

6277+
if (
6278+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
6279+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
6280+
) {
6281+
var context = newChild;
6282+
return updateFromMap(
6283+
existingChildren,
6284+
returnFiber,
6285+
newIdx,
6286+
readContextDuringReconcilation(returnFiber, context, lanes),
6287+
lanes
6288+
);
6289+
}
6290+
62526291
throwOnInvalidObjectType(returnFiber, newChild);
62536292
}
62546293

@@ -6937,6 +6976,19 @@ function createChildReconciler(shouldTrackSideEffects) {
69376976
);
69386977
}
69396978

6979+
if (
6980+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
6981+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
6982+
) {
6983+
var context = newChild;
6984+
return reconcileChildFibersImpl(
6985+
returnFiber,
6986+
currentFirstChild,
6987+
readContextDuringReconcilation(returnFiber, context, lanes),
6988+
lanes
6989+
);
6990+
}
6991+
69406992
throwOnInvalidObjectType(returnFiber, newChild);
69416993
}
69426994

@@ -17000,6 +17052,17 @@ function readContext(context) {
1700017052
}
1700117053
}
1700217054

17055+
return readContextForConsumer(currentlyRenderingFiber, context);
17056+
}
17057+
function readContextDuringReconcilation(consumer, context, renderLanes) {
17058+
if (currentlyRenderingFiber === null) {
17059+
prepareToReadContext(consumer, renderLanes);
17060+
}
17061+
17062+
return readContextForConsumer(consumer, context);
17063+
}
17064+
17065+
function readContextForConsumer(consumer, context) {
1700317066
var value = context._currentValue2;
1700417067

1700517068
if (lastFullyObservedContext === context);
@@ -17011,7 +17074,7 @@ function readContext(context) {
1701117074
};
1701217075

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

1702317086
lastContextDependency = contextItem;
17024-
currentlyRenderingFiber.dependencies = {
17087+
consumer.dependencies = {
1702517088
lanes: NoLanes,
1702617089
firstContext: contextItem
1702717090
};
1702817091

1702917092
if (enableLazyContextPropagation) {
17030-
currentlyRenderingFiber.flags |= NeedsPropagation;
17093+
consumer.flags |= NeedsPropagation;
1703117094
}
1703217095
} else {
1703317096
// Append a new context item.

‎compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

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

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;
@@ -5844,6 +5844,18 @@ function createChildReconciler(shouldTrackSideEffects) {
58445844
return createChild(returnFiber, unwrapThenable(thenable), lanes);
58455845
}
58465846

5847+
if (
5848+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
5849+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
5850+
) {
5851+
var context = newChild;
5852+
return createChild(
5853+
returnFiber,
5854+
readContextDuringReconcilation(returnFiber, context, lanes),
5855+
lanes
5856+
);
5857+
}
5858+
58475859
throwOnInvalidObjectType(returnFiber, newChild);
58485860
}
58495861

@@ -5919,6 +5931,19 @@ function createChildReconciler(shouldTrackSideEffects) {
59195931
);
59205932
}
59215933

5934+
if (
5935+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
5936+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
5937+
) {
5938+
var context = newChild;
5939+
return updateSlot(
5940+
returnFiber,
5941+
oldFiber,
5942+
readContextDuringReconcilation(returnFiber, context, lanes),
5943+
lanes
5944+
);
5945+
}
5946+
59225947
throwOnInvalidObjectType(returnFiber, newChild);
59235948
}
59245949

@@ -6005,6 +6030,20 @@ function createChildReconciler(shouldTrackSideEffects) {
60056030
);
60066031
}
60076032

6033+
if (
6034+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
6035+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
6036+
) {
6037+
var context = newChild;
6038+
return updateFromMap(
6039+
existingChildren,
6040+
returnFiber,
6041+
newIdx,
6042+
readContextDuringReconcilation(returnFiber, context, lanes),
6043+
lanes
6044+
);
6045+
}
6046+
60086047
throwOnInvalidObjectType(returnFiber, newChild);
60096048
}
60106049

@@ -6693,6 +6732,19 @@ function createChildReconciler(shouldTrackSideEffects) {
66936732
);
66946733
}
66956734

6735+
if (
6736+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
6737+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
6738+
) {
6739+
var context = newChild;
6740+
return reconcileChildFibersImpl(
6741+
returnFiber,
6742+
currentFirstChild,
6743+
readContextDuringReconcilation(returnFiber, context, lanes),
6744+
lanes
6745+
);
6746+
}
6747+
66966748
throwOnInvalidObjectType(returnFiber, newChild);
66976749
}
66986750

@@ -16689,6 +16741,17 @@ function readContext(context) {
1668916741
}
1669016742
}
1669116743

16744+
return readContextForConsumer(currentlyRenderingFiber, context);
16745+
}
16746+
function readContextDuringReconcilation(consumer, context, renderLanes) {
16747+
if (currentlyRenderingFiber === null) {
16748+
prepareToReadContext(consumer, renderLanes);
16749+
}
16750+
16751+
return readContextForConsumer(consumer, context);
16752+
}
16753+
16754+
function readContextForConsumer(consumer, context) {
1669216755
var value = context._currentValue2;
1669316756

1669416757
if (lastFullyObservedContext === context);
@@ -16700,7 +16763,7 @@ function readContext(context) {
1670016763
};
1670116764

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

1671216775
lastContextDependency = contextItem;
16713-
currentlyRenderingFiber.dependencies = {
16776+
consumer.dependencies = {
1671416777
lanes: NoLanes,
1671516778
firstContext: contextItem
1671616779
};
1671716780

1671816781
if (enableLazyContextPropagation) {
16719-
currentlyRenderingFiber.flags |= NeedsPropagation;
16782+
consumer.flags |= NeedsPropagation;
1672016783
}
1672116784
} else {
1672216785
// Append a new context item.

‎compiled/facebook-www/ReactART-prod.classic.js

Lines changed: 53 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1711,6 +1711,15 @@ function createChildReconciler(shouldTrackSideEffects) {
17111711
);
17121712
if ("function" === typeof newChild.then)
17131713
return createChild(returnFiber, unwrapThenable(newChild), lanes);
1714+
if (
1715+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
1716+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
1717+
)
1718+
return createChild(
1719+
returnFiber,
1720+
readContextDuringReconcilation(returnFiber, newChild, lanes),
1721+
lanes
1722+
);
17141723
throwOnInvalidObjectType(returnFiber, newChild);
17151724
}
17161725
return null;
@@ -1751,6 +1760,16 @@ function createChildReconciler(shouldTrackSideEffects) {
17511760
unwrapThenable(newChild),
17521761
lanes
17531762
);
1763+
if (
1764+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
1765+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
1766+
)
1767+
return updateSlot(
1768+
returnFiber,
1769+
oldFiber,
1770+
readContextDuringReconcilation(returnFiber, newChild, lanes),
1771+
lanes
1772+
);
17541773
throwOnInvalidObjectType(returnFiber, newChild);
17551774
}
17561775
return null;
@@ -1811,6 +1830,17 @@ function createChildReconciler(shouldTrackSideEffects) {
18111830
unwrapThenable(newChild),
18121831
lanes
18131832
);
1833+
if (
1834+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
1835+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
1836+
)
1837+
return updateFromMap(
1838+
existingChildren,
1839+
returnFiber,
1840+
newIdx,
1841+
readContextDuringReconcilation(returnFiber, newChild, lanes),
1842+
lanes
1843+
);
18141844
throwOnInvalidObjectType(returnFiber, newChild);
18151845
}
18161846
return null;
@@ -2131,6 +2161,16 @@ function createChildReconciler(shouldTrackSideEffects) {
21312161
unwrapThenable(newChild),
21322162
lanes
21332163
);
2164+
if (
2165+
newChild.$$typeof === REACT_CONTEXT_TYPE ||
2166+
newChild.$$typeof === REACT_SERVER_CONTEXT_TYPE
2167+
)
2168+
return reconcileChildFibersImpl(
2169+
returnFiber,
2170+
currentFirstChild,
2171+
readContextDuringReconcilation(returnFiber, newChild, lanes),
2172+
lanes
2173+
);
21342174
throwOnInvalidObjectType(returnFiber, newChild);
21352175
}
21362176
return ("string" === typeof newChild && "" !== newChild) ||
@@ -5037,20 +5077,24 @@ function prepareToReadContext(workInProgress, renderLanes) {
50375077
(workInProgress.firstContext = null)));
50385078
}
50395079
function readContext(context) {
5080+
return readContextForConsumer(currentlyRenderingFiber, context);
5081+
}
5082+
function readContextDuringReconcilation(consumer, context, renderLanes) {
5083+
null === currentlyRenderingFiber &&
5084+
prepareToReadContext(consumer, renderLanes);
5085+
return readContextForConsumer(consumer, context);
5086+
}
5087+
function readContextForConsumer(consumer, context) {
50405088
var value = context._currentValue2;
50415089
if (lastFullyObservedContext !== context)
50425090
if (
50435091
((context = { context: context, memoizedValue: value, next: null }),
50445092
null === lastContextDependency)
50455093
) {
5046-
if (null === currentlyRenderingFiber)
5047-
throw Error(formatProdErrorMessage(308));
5094+
if (null === consumer) throw Error(formatProdErrorMessage(308));
50485095
lastContextDependency = context;
5049-
currentlyRenderingFiber.dependencies = {
5050-
lanes: 0,
5051-
firstContext: context
5052-
};
5053-
enableLazyContextPropagation && (currentlyRenderingFiber.flags |= 524288);
5096+
consumer.dependencies = { lanes: 0, firstContext: context };
5097+
enableLazyContextPropagation && (consumer.flags |= 524288);
50545098
} else lastContextDependency = lastContextDependency.next = context;
50555099
return value;
50565100
}
@@ -9846,7 +9890,7 @@ var slice = Array.prototype.slice,
98469890
return null;
98479891
},
98489892
bundleType: 0,
9849-
version: "18.3.0-www-classic-812a2cd2",
9893+
version: "18.3.0-www-classic-92b5c33e",
98509894
rendererPackageName: "react-art"
98519895
};
98529896
var internals$jscomp$inline_1303 = {
@@ -9877,7 +9921,7 @@ var internals$jscomp$inline_1303 = {
98779921
scheduleRoot: null,
98789922
setRefreshHandler: null,
98799923
getCurrentFiber: null,
9880-
reconcilerVersion: "18.3.0-www-classic-812a2cd2"
9924+
reconcilerVersion: "18.3.0-www-classic-92b5c33e"
98819925
};
98829926
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
98839927
var hook$jscomp$inline_1304 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

0 commit comments

Comments
 (0)