` which is visible. We could hoistables a virtual representation by giving them a virtual rect. E.g. at the top of the page. This could be added after the fact. --- .../react-devtools-shared/src/devtools/store.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 99971f6a1a6..eeb6da60f8a 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -51,6 +51,7 @@ import type { ComponentFilter, ElementType, SuspenseNode, + Rect, } from 'react-devtools-shared/src/frontend/types'; import type { FrontendBridge, @@ -99,6 +100,10 @@ export type Capabilities = { supportsAdvancedProfiling: AdvancedProfiling, }; +function isNonZeroRect(rect: Rect) { + return rect.width > 0 || rect.height > 0 || rect.x > 0 || rect.y > 0; +} + /** * The store is the single source of truth for updates from the backend. * ContextProviders can subscribe to the Store for specific things they want to provide. @@ -918,7 +923,15 @@ export default class Store extends EventEmitter<{ if (current === undefined) { continue; } + // Ignore any suspense boundaries that has no visual representation as this is not + // part of the visible loading sequence. + // TODO: Consider making visible meta data and other side-effects get virtual rects. + const hasRects = + current.rects !== null && + current.rects.length > 0 && + current.rects.some(isNonZeroRect); if ( + hasRects && (!uniqueSuspendersOnly || current.hasUniqueSuspenders) && // Roots are already included as part of the Screen current.id !== rootID From e2ce64acb94968d8ca464f37fab2a7ed77848fa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 13 Oct 2025 12:11:52 -0400 Subject: [PATCH 063/276] [DevTools] Don't show the root as being non-compliant (#34827) `isStrictModeNonCompliant` on the root just means that it supports strict mode. It's inherited by other nodes. It's not possible to opt-in to strict mode on the root itself but rather right below it. So we should not mark the root as being non-compliant. This lets you select the root in the suspense tab and it shouldn't show as red with a warning. --- .../src/devtools/views/Components/InspectedElement.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index 88aeab7bfd4..633a4d382eb 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js @@ -194,7 +194,7 @@ export default function InspectedElementWrapper(_: Props): React.Node { } let strictModeBadge = null; - if (element.isStrictModeNonCompliant) { + if (element.isStrictModeNonCompliant && element.parentID !== 0) { strictModeBadge = ( <Tooltip label="This component is not running in StrictMode. Click to learn more."> <a @@ -237,7 +237,7 @@ export default function InspectedElementWrapper(_: Props): React.Node { <div className={styles.SelectedComponentName}> <div className={ - element.isStrictModeNonCompliant + element.isStrictModeNonCompliant && element.parentID !== 0 ? `${styles.ComponentName} ${styles.StrictModeNonCompliantComponentName}` : styles.ComponentName } From d7215b4970858ea45db924e1ec435a9a3e5cff40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 13 Oct 2025 12:12:12 -0400 Subject: [PATCH 064/276] [DevTools] Preserve the original index when sorting suspended by (#34829) The index is both used as the key and for hydration purposes. Previously we didn't preserve the index when sorting so the index didn't line up which caused hydration to be the wrong slot when sorted. --- .../Components/InspectedElementSuspendedBy.js | 35 +++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index d1da51a0cf1..19cc47f982c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -300,9 +300,31 @@ type Props = { store: Store, }; -function compareTime(a: SerializedAsyncInfo, b: SerializedAsyncInfo): number { - const ioA = a.awaited; - const ioB = b.awaited; +function withIndex( + value: SerializedAsyncInfo, + index: number, +): { + index: number, + value: SerializedAsyncInfo, +} { + return { + index, + value, + }; +} + +function compareTime( + a: { + index: number, + value: SerializedAsyncInfo, + }, + b: { + index: number, + value: SerializedAsyncInfo, + }, +): number { + const ioA = a.value.awaited; + const ioB = b.value.awaited; if (ioA.start === ioB.start) { return ioA.end - ioB.end; } @@ -364,7 +386,8 @@ export default function InspectedElementSuspendedBy({ minTime = maxTime - 25; } - const sortedSuspendedBy = suspendedBy === null ? [] : suspendedBy.slice(0); + const sortedSuspendedBy = + suspendedBy === null ? [] : suspendedBy.map(withIndex); sortedSuspendedBy.sort(compareTime); let unknownSuspenders = null; @@ -407,11 +430,11 @@ export default function InspectedElementSuspendedBy({ <ButtonIcon type="copy" /> </Button> </div> - {sortedSuspendedBy.map((asyncInfo, index) => ( + {sortedSuspendedBy.map(({value, index}) => ( <SuspendedByRow key={index} index={index} - asyncInfo={asyncInfo} + asyncInfo={value} bridge={bridge} element={element} inspectedElement={inspectedElement} From 026abeaa5f3fdb5f5fdef7ebd699e3ed8e64a506 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 13 Oct 2025 12:29:00 -0400 Subject: [PATCH 065/276] [Flight] Respect displayName of Promise instances on the server (#34825) This lets you assign a name to a Promise that's passed into first party code from third party since it otherwise would have no other stack frame to indicate its name since the whole creation stack would be in third party. We already respect the `displayName` on the client but it's more complicated on the server because we don't only consider the exact instance passed to `use()` but the whole await sequence and we can pick any Promise along the way for consideration. Therefore this also adds a change where we pick the Promise node for consideration if it has a name but no stack. Where we otherwise would've picked the I/O node. Another thing that this PR does is treat anonymous stack frames (empty url) as third party for purposes of heuristics like "hasUnfilteredFrame" and the name assignment. This lets you include these in the actual generated stacks (by overriding `filterStackFrame`) but we don't actually want them to be considered first party code in the heuristics since it ends up favoring those stacks and using internals like `Function.all` in name assignment. --- .../react-server/src/ReactFlightServer.js | 73 ++- .../ReactFlightAsyncDebugInfo-test.js | 590 +++++++++++------- 2 files changed, 415 insertions(+), 248 deletions(-) diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 152be2eecca..1c769c93ee7 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -252,7 +252,11 @@ function findCalledFunctionNameFromStackTrace( const url = devirtualizeURL(callsite[1]); const lineNumber = callsite[2]; const columnNumber = callsite[3]; - if (filterStackFrame(url, functionName, lineNumber, columnNumber)) { + if ( + filterStackFrame(url, functionName, lineNumber, columnNumber) && + // Don't consider anonymous code first party even if the filter wants to include them in the stack. + url !== '' + ) { if (bestMatch === '') { // If we had no good stack frames for internal calls, just use the last // first party function name. @@ -308,7 +312,10 @@ function hasUnfilteredFrame(request: Request, stack: ReactStackTrace): boolean { const isAsync = callsite[6]; if ( !isAsync && - filterStackFrame(url, functionName, lineNumber, columnNumber) + filterStackFrame(url, functionName, lineNumber, columnNumber) && + // Ignore anonymous stack frames like internals. They are also not in first party + // code even though it might be useful to include them in the final stack. + url !== '' ) { return true; } @@ -367,7 +374,10 @@ export function isAwaitInUserspace( const url = devirtualizeURL(callsite[1]); const lineNumber = callsite[2]; const columnNumber = callsite[3]; - return filterStackFrame(url, functionName, lineNumber, columnNumber); + return ( + filterStackFrame(url, functionName, lineNumber, columnNumber) && + url !== '' + ); } return false; } @@ -2347,6 +2357,7 @@ function visitAsyncNode( } const awaited = node.awaited; let match: void | null | PromiseNode | IONode = previousIONode; + const promise = node.promise.deref(); if (awaited !== null) { const ioNode = visitAsyncNode(request, task, awaited, visited, cutOff); if (ioNode === undefined) { @@ -2361,17 +2372,27 @@ function visitAsyncNode( if (ioNode.tag === PROMISE_NODE) { // If the ioNode was a Promise, then that means we found one in user space since otherwise // we would've returned an IO node. We assume this has the best stack. + // Note: This might also be a Promise with a displayName but potentially a worse stack. + // We could potentially favor the outer Promise if it has a stack but not the inner. match = ioNode; } else if ( - node.stack === null || - !hasUnfilteredFrame(request, node.stack) + (node.stack !== null && hasUnfilteredFrame(request, node.stack)) || + (promise !== undefined && + // $FlowFixMe[prop-missing] + typeof promise.displayName === 'string' && + (ioNode.stack === null || + !hasUnfilteredFrame(request, ioNode.stack))) ) { + // If this Promise has a stack trace then we favor that over the I/O node since we're + // mainly dealing with Promises as the abstraction. + // If it has no stack but at least has a displayName and the io doesn't have a better + // stack anyway, then also use this Promise instead since at least it has a name. + match = node; + } else { // If this Promise was created inside only third party code, then try to use // the inner I/O node instead. This could happen if third party calls into first // party to perform some I/O. match = ioNode; - } else { - match = node; } } else if (request.status === ABORTING) { if (node.start < request.abortTime && node.end > request.abortTime) { @@ -2379,8 +2400,11 @@ function visitAsyncNode( // Promise that was aborted. This won't necessarily have I/O associated with it but // it's a point of interest. if ( - node.stack !== null && - hasUnfilteredFrame(request, node.stack) + (node.stack !== null && + hasUnfilteredFrame(request, node.stack)) || + (promise !== undefined && + // $FlowFixMe[prop-missing] + typeof promise.displayName === 'string') ) { match = node; } @@ -2389,7 +2413,6 @@ function visitAsyncNode( } // We need to forward after we visit awaited nodes because what ever I/O we requested that's // the thing that generated this node and its virtual children. - const promise = node.promise.deref(); if (promise !== undefined) { const debugInfo = promise._debugInfo; if (debugInfo != null && !visited.has(debugInfo)) { @@ -4497,17 +4520,33 @@ function serializeIONode( let stack = null; let name = ''; + if (ioNode.promise !== null) { + // Pick an explicit name from the Promise itself if it exists. + // Note that we don't use the promiseRef passed in since that's sometimes the awaiting Promise + // which is the value observed but it's likely not the one with the name on it. + const promise = ioNode.promise.deref(); + if ( + promise !== undefined && + // $FlowFixMe[prop-missing] + typeof promise.displayName === 'string' + ) { + name = promise.displayName; + } + } if (ioNode.stack !== null) { // The stack can contain some leading internal frames for the construction of the promise that we skip. const fullStack = stripLeadingPromiseCreationFrames(ioNode.stack); stack = filterStackTrace(request, fullStack); - name = findCalledFunctionNameFromStackTrace(request, fullStack); - // The name can include the object that this was called on but sometimes that's - // just unnecessary context. - if (name.startsWith('Window.')) { - name = name.slice(7); - } else if (name.startsWith('<anonymous>.')) { - name = name.slice(7); + if (name === '') { + // If we didn't have an explicit name, try finding one from the stack. + name = findCalledFunctionNameFromStackTrace(request, fullStack); + // The name can include the object that this was called on but sometimes that's + // just unnecessary context. + if (name.startsWith('Window.')) { + name = name.slice(7); + } else if (name.startsWith('<anonymous>.')) { + name = name.slice(7); + } } } const owner = ioNode.owner; diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index 9253371f54a..992b58d3880 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -109,6 +109,7 @@ describe('ReactFlightAsyncDebugInfo', () => { async function getData(text) { await delay(1); const promise = delay(2); + promise.displayName = 'hello'; await Promise.all([promise]); return text.toUpperCase(); } @@ -159,7 +160,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -183,7 +184,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -210,9 +211,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 117, + 118, 26, - 116, + 117, 5, ], ], @@ -231,7 +232,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -250,9 +251,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 117, + 118, 26, - 116, + 117, 5, ], ], @@ -267,7 +268,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "end": 0, "env": "Server", - "name": "delay", + "name": "hello", "owner": { "env": "Server", "key": null, @@ -277,7 +278,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -304,9 +305,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 117, + 118, 20, - 116, + 117, 5, ], ], @@ -325,7 +326,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -336,7 +337,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 112, + 113, 21, 109, 5, @@ -344,9 +345,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 117, + 118, 20, - 116, + 117, 5, ], ], @@ -366,9 +367,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 119, + 120, 60, - 116, + 117, 5, ], ], @@ -380,7 +381,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "end": 0, "env": "Server", - "name": "delay", + "name": "hello", "owner": { "env": "Server", "key": null, @@ -390,7 +391,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -430,9 +431,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 119, + 120, 60, - 116, + 117, 5, ], ], @@ -441,9 +442,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "InnerComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 125, + 126, 35, - 122, + 123, 5, ], ], @@ -624,9 +625,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 588, + 589, 40, - 569, + 570, 49, ], [ @@ -656,9 +657,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 588, + 589, 40, - 569, + 570, 49, ], [ @@ -683,17 +684,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 571, + 572, 13, - 570, + 571, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 576, + 577, 36, - 575, + 576, 5, ], ], @@ -712,9 +713,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 588, + 589, 40, - 569, + 570, 49, ], [ @@ -731,17 +732,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 571, + 572, 13, - 570, + 571, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 576, + 577, 36, - 575, + 576, 5, ], ], @@ -761,9 +762,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 578, + 579, 60, - 575, + 576, 5, ], ], @@ -782,9 +783,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 588, + 589, 40, - 569, + 570, 49, ], [ @@ -809,17 +810,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 571, + 572, 13, - 570, + 571, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 577, + 578, 22, - 575, + 576, 5, ], ], @@ -838,9 +839,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 578, + 579, 60, - 575, + 576, 5, ], ], @@ -849,9 +850,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "InnerComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 584, + 585, 40, - 581, + 582, 5, ], ], @@ -926,9 +927,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 895, + 896, 109, - 882, + 883, 80, ], ], @@ -947,9 +948,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 895, + 896, 109, - 882, + 883, 80, ], ], @@ -966,9 +967,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 895, + 896, 109, - 882, + 883, 80, ], ], @@ -1040,9 +1041,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1009, + 1010, 109, - 1000, + 1001, 94, ], ], @@ -1125,9 +1126,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1094, + 1095, 109, - 1070, + 1071, 50, ], ], @@ -1221,9 +1222,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1190, + 1191, 109, - 1173, + 1174, 63, ], ], @@ -1248,9 +1249,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1280,9 +1281,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1299,17 +1300,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1175, + 1176, 13, - 1174, + 1175, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1181, + 1182, 24, - 1180, + 1181, 5, ], ], @@ -1336,9 +1337,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1347,17 +1348,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1175, + 1176, 13, - 1174, + 1175, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1181, + 1182, 24, - 1180, + 1181, 5, ], ], @@ -1390,9 +1391,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1409,17 +1410,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1176, + 1177, 13, - 1174, + 1175, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1181, + 1182, 18, - 1180, + 1181, 5, ], ], @@ -1446,9 +1447,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1457,17 +1458,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1176, + 1177, 13, - 1174, + 1175, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1181, + 1182, 18, - 1180, + 1181, 5, ], ], @@ -1565,9 +1566,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1529, + 1530, 40, - 1512, + 1513, 62, ], [ @@ -1597,9 +1598,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1529, + 1530, 40, - 1512, + 1513, 62, ], [ @@ -1624,17 +1625,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1514, + 1515, 13, - 1513, + 1514, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1524, + 1525, 13, - 1523, + 1524, 5, ], ], @@ -1653,9 +1654,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1529, + 1530, 40, - 1512, + 1513, 62, ], [ @@ -1672,17 +1673,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1514, + 1515, 13, - 1513, + 1514, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1524, + 1525, 13, - 1523, + 1524, 5, ], ], @@ -1702,9 +1703,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1526, 60, - 1523, + 1524, 5, ], ], @@ -1726,9 +1727,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1529, + 1530, 40, - 1512, + 1513, 62, ], [ @@ -1753,17 +1754,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1514, + 1515, 13, - 1513, + 1514, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1524, + 1525, 13, - 1523, + 1524, 5, ], ], @@ -1782,9 +1783,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1526, 60, - 1523, + 1524, 5, ], ], @@ -1793,9 +1794,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Child", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1519, + 1520, 28, - 1518, + 1519, 5, ], ], @@ -1878,9 +1879,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1842, + 1843, 40, - 1826, + 1827, 57, ], [ @@ -1910,9 +1911,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1842, + 1843, 40, - 1826, + 1827, 57, ], [ @@ -1937,17 +1938,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1828, + 1829, 13, - 1827, + 1828, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1837, + 1838, 23, - 1836, + 1837, 5, ], ], @@ -1966,9 +1967,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1842, + 1843, 40, - 1826, + 1827, 57, ], [ @@ -1985,17 +1986,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1828, + 1829, 13, - 1827, + 1828, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1837, + 1838, 23, - 1836, + 1837, 5, ], ], @@ -2015,9 +2016,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1839, 60, - 1836, + 1837, 5, ], ], @@ -2036,9 +2037,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1842, + 1843, 40, - 1826, + 1827, 57, ], [ @@ -2063,17 +2064,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1828, + 1829, 13, - 1827, + 1828, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1837, + 1838, 23, - 1836, + 1837, 5, ], ], @@ -2087,9 +2088,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1839, 60, - 1836, + 1837, 5, ], ], @@ -2174,9 +2175,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2206,9 +2207,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2233,17 +2234,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2128, + 2129, 13, - 2126, + 2127, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2133, + 2134, 13, - 2132, + 2133, 5, ], ], @@ -2262,9 +2263,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2281,17 +2282,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2128, + 2129, 13, - 2126, + 2127, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2133, + 2134, 13, - 2132, + 2133, 5, ], ], @@ -2313,9 +2314,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2340,25 +2341,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2122, + 2123, 13, - 2121, + 2122, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2127, + 2128, 15, - 2126, + 2127, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2133, + 2134, 13, - 2132, + 2133, 5, ], ], @@ -2377,9 +2378,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2396,25 +2397,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2122, + 2123, 13, - 2121, + 2122, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2127, + 2128, 15, - 2126, + 2127, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2133, + 2134, 13, - 2132, + 2133, 5, ], ], @@ -2436,9 +2437,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2463,9 +2464,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2123, + 2124, 13, - 2121, + 2122, 5, ], ], @@ -2484,9 +2485,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2503,9 +2504,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2123, + 2124, 13, - 2121, + 2122, 5, ], ], @@ -2578,9 +2579,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2548, 109, - 2536, + 2537, 58, ], ], @@ -2602,9 +2603,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2548, 109, - 2536, + 2537, 58, ], ], @@ -2621,17 +2622,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2538, + 2539, 14, - 2537, + 2538, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2544, + 2545, 20, - 2543, + 2544, 5, ], ], @@ -2650,9 +2651,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2548, 109, - 2536, + 2537, 58, ], ], @@ -2661,17 +2662,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2538, + 2539, 23, - 2537, + 2538, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2544, + 2545, 20, - 2543, + 2544, 5, ], ], @@ -2750,9 +2751,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2714, + 2715, 40, - 2702, + 2703, 56, ], [ @@ -2782,9 +2783,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2714, + 2715, 40, - 2702, + 2703, 56, ], [ @@ -2809,9 +2810,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2710, + 2711, 20, - 2709, + 2710, 5, ], ], @@ -2830,9 +2831,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2714, + 2715, 40, - 2702, + 2703, 56, ], [ @@ -2849,9 +2850,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2710, + 2711, 20, - 2709, + 2710, 5, ], ], @@ -2944,9 +2945,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -2976,9 +2977,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -2995,17 +2996,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2889, + 2890, 15, - 2888, + 2889, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2898, + 2899, 19, - 2897, + 2898, 5, ], ], @@ -3024,9 +3025,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -3043,17 +3044,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2889, + 2890, 15, - 2888, + 2889, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2898, + 2899, 19, - 2897, + 2898, 5, ], ], @@ -3075,9 +3076,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -3094,9 +3095,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2898, + 2899, 25, - 2897, + 2898, 5, ], ], @@ -3115,9 +3116,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -3134,9 +3135,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2898, + 2899, 25, - 2897, + 2898, 5, ], ], @@ -3212,9 +3213,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3179, + 3180, 40, - 3167, + 3168, 36, ], ], @@ -3236,9 +3237,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3179, + 3180, 40, - 3167, + 3168, 36, ], ], @@ -3247,9 +3248,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3171, + 3172, 7, - 3169, + 3170, 5, ], ], @@ -3268,9 +3269,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3179, + 3180, 40, - 3167, + 3168, 36, ], ], @@ -3279,9 +3280,136 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3173, + 3174, 7, - 3169, + 3170, + 5, + ], + ], + }, + { + "time": 0, + }, + { + "time": 0, + }, + { + "awaited": { + "byteSize": 0, + "end": 0, + "name": "RSC stream", + "owner": null, + "start": 0, + "value": { + "value": "stream", + }, + }, + }, + ] + `); + } + }); + + it('can track a promise created fully outside first party code', async function internal_test() { + async function internal_API(text, timeout) { + let resolve; + const promise = new Promise(r => { + resolve = r; + }); + promise.displayName = 'greeting'; + setTimeout(() => resolve(text), timeout); + return promise; + } + + async function Component({promise}) { + const result = await promise; + return result; + } + + const stream = ReactServerDOMServer.renderToPipeableStream( + <Component promise={internal_API('hello', 1)} />, + {}, + { + filterStackFrame, + }, + ); + + const readable = new Stream.PassThrough(streamOptions); + + const result = ReactServerDOMClient.createFromNodeStream(readable, { + moduleMap: {}, + moduleLoading: {}, + }); + stream.pipe(readable); + + expect(await result).toBe('hello'); + + await finishLoadingStream(readable); + if ( + __DEV__ && + gate( + flags => + flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo, + ) + ) { + expect(getDebugInfo(result)).toMatchInlineSnapshot(` + [ + { + "time": 0, + }, + { + "env": "Server", + "key": null, + "name": "Component", + "props": {}, + "stack": [ + [ + "new Promise", + "", + 0, + 0, + 0, + 0, + ], + ], + }, + { + "time": 0, + }, + { + "awaited": { + "end": 0, + "env": "Server", + "name": "greeting", + "start": 0, + "value": { + "status": "halted", + }, + }, + "env": "Server", + "owner": { + "env": "Server", + "key": null, + "name": "Component", + "props": {}, + "stack": [ + [ + "new Promise", + "", + 0, + 0, + 0, + 0, + ], + ], + }, + "stack": [ + [ + "Component", + "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", + 3325, + 20, + 3324, 5, ], ], From 83ea655a0ba1de44c933368cd7f56c8f0418f07f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 13 Oct 2025 13:07:39 -0400 Subject: [PATCH 066/276] [DevTools] Group consecutive suspended by rows by the same name (#34830) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34829. This lets you get an overview more easily when there's lots of things like scripts downloading. Pluralized the name. E.g. `script` -> `scripts` or `fetch` -> `fetches`. This only groups them consecutively when they'd have the same place in the list anyway because otherwise it might cover up some kind of waterfall effects. <img width="404" height="225" alt="Screenshot 2025-10-13 at 12 06 51 AM" src="https://github.com/user-attachments/assets/da204a8e-d5f7-4eb0-8c51-4cc5bfd184c4" /> Expanded: <img width="407" height="360" alt="Screenshot 2025-10-13 at 12 07 00 AM" src="https://github.com/user-attachments/assets/de3c3de9-f314-4c87-b606-31bc49eb4aba" /> --- .../Components/InspectedElementSuspendedBy.js | 190 ++++++++++++++++-- .../src/devtools/views/utils.js | 36 ++++ 2 files changed, 210 insertions(+), 16 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index 19cc47f982c..fa2b6a95bed 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -13,7 +13,7 @@ import {useState, useTransition} from 'react'; import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import KeyValue from './KeyValue'; -import {serializeDataForCopy} from '../utils'; +import {serializeDataForCopy, pluralize} from '../utils'; import Store from '../../store'; import styles from './InspectedElementSharedStyles.css'; import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck'; @@ -44,6 +44,7 @@ type RowProps = { index: number, minTime: number, maxTime: number, + skipName?: boolean, }; function getShortDescription(name: string, description: string): string { @@ -99,6 +100,7 @@ function SuspendedByRow({ index, minTime, maxTime, + skipName, }: RowProps) { const [isOpen, setIsOpen] = useState(false); const [openIsPending, startOpenTransition] = useTransition(); @@ -166,8 +168,10 @@ function SuspendedByRow({ className={styles.CollapsableHeaderIcon} type={isOpen ? 'expanded' : 'collapsed'} /> - <span className={styles.CollapsableHeaderTitle}>{name}</span> - {shortDescription === '' ? null : ( + <span className={styles.CollapsableHeaderTitle}> + {skipName ? shortDescription : name} + </span> + {skipName || shortDescription === '' ? null : ( <> <span className={styles.CollapsableHeaderSeparator}>{' ('}</span> <span className={styles.CollapsableHeaderTitle}> @@ -331,6 +335,110 @@ function compareTime( return ioA.start - ioB.start; } +type GroupProps = { + bridge: FrontendBridge, + element: Element, + inspectedElement: InspectedElement, + store: Store, + name: string, + suspendedBy: Array<{ + index: number, + value: SerializedAsyncInfo, + }>, + minTime: number, + maxTime: number, +}; + +function SuspendedByGroup({ + bridge, + element, + inspectedElement, + store, + name, + suspendedBy, + minTime, + maxTime, +}: GroupProps) { + const [isOpen, setIsOpen] = useState(false); + let start = Infinity; + let end = -Infinity; + let isRejected = false; + for (let i = 0; i < suspendedBy.length; i++) { + const asyncInfo: SerializedAsyncInfo = suspendedBy[i].value; + const ioInfo = asyncInfo.awaited; + if (ioInfo.start < start) { + start = ioInfo.start; + } + if (ioInfo.end > end) { + end = ioInfo.end; + } + const value: any = ioInfo.value; + if ( + value !== null && + typeof value === 'object' && + value[meta.name] === 'rejected Thenable' + ) { + isRejected = true; + } + } + const timeScale = 100 / (maxTime - minTime); + let left = (start - minTime) * timeScale; + let width = (end - start) * timeScale; + if (width < 5) { + // Use at least a 5% width to avoid showing too small indicators. + width = 5; + if (left > 95) { + left = 95; + } + } + const pluralizedName = pluralize(name); + return ( + <div className={styles.CollapsableRow}> + <Button + className={styles.CollapsableHeader} + onClick={() => { + setIsOpen(prevIsOpen => !prevIsOpen); + }} + title={pluralizedName}> + <ButtonIcon + className={styles.CollapsableHeaderIcon} + type={isOpen ? 'expanded' : 'collapsed'} + /> + <span className={styles.CollapsableHeaderTitle}>{pluralizedName}</span> + <div className={styles.CollapsableHeaderFiller} /> + {isOpen ? null : ( + <div className={styles.TimeBarContainer}> + <div + className={ + !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored + } + style={{ + left: left.toFixed(2) + '%', + width: width.toFixed(2) + '%', + }} + /> + </div> + )} + </Button> + {isOpen && + suspendedBy.map(({value, index}) => ( + <SuspendedByRow + key={index} + index={index} + asyncInfo={value} + bridge={bridge} + element={element} + inspectedElement={inspectedElement} + store={store} + minTime={minTime} + maxTime={maxTime} + skipName={true} + /> + ))} + </div> + ); +} + export default function InspectedElementSuspendedBy({ bridge, element, @@ -390,6 +498,27 @@ export default function InspectedElementSuspendedBy({ suspendedBy === null ? [] : suspendedBy.map(withIndex); sortedSuspendedBy.sort(compareTime); + // Organize into groups of consecutive entries with the same name. + const groups = []; + let currentGroup = null; + let currentGroupName = null; + for (let i = 0; i < sortedSuspendedBy.length; i++) { + const entry = sortedSuspendedBy[i]; + const name = entry.value.awaited.name; + if ( + currentGroupName !== name || + !name || + name === 'Promise' || + currentGroup === null + ) { + // Create a new group. + currentGroupName = name; + currentGroup = []; + groups.push(currentGroup); + } + currentGroup.push(entry); + } + let unknownSuspenders = null; switch (inspectedElement.unknownSuspenders) { case UNKNOWN_SUSPENDERS_REASON_PRODUCTION: @@ -430,19 +559,48 @@ export default function InspectedElementSuspendedBy({ <ButtonIcon type="copy" /> </Button> </div> - {sortedSuspendedBy.map(({value, index}) => ( - <SuspendedByRow - key={index} - index={index} - asyncInfo={value} - bridge={bridge} - element={element} - inspectedElement={inspectedElement} - store={store} - minTime={minTime} - maxTime={maxTime} - /> - ))} + {groups.length === 1 + ? // If it's only one type of suspender we can flatten it. + groups[0].map(entry => ( + <SuspendedByRow + key={entry.index} + index={entry.index} + asyncInfo={entry.value} + bridge={bridge} + element={element} + inspectedElement={inspectedElement} + store={store} + minTime={minTime} + maxTime={maxTime} + /> + )) + : groups.map((entries, index) => + entries.length === 1 ? ( + <SuspendedByRow + key={entries[0].index} + index={entries[0].index} + asyncInfo={entries[0].value} + bridge={bridge} + element={element} + inspectedElement={inspectedElement} + store={store} + minTime={minTime} + maxTime={maxTime} + /> + ) : ( + <SuspendedByGroup + key={entries[0].index} + name={entries[0].value.awaited.name} + suspendedBy={entries} + bridge={bridge} + element={element} + inspectedElement={inspectedElement} + store={store} + minTime={minTime} + maxTime={maxTime} + /> + ), + )} {unknownSuspenders} </div> ); diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js index ed14b2c236b..3b0de4118a2 100644 --- a/packages/react-devtools-shared/src/devtools/views/utils.js +++ b/packages/react-devtools-shared/src/devtools/views/utils.js @@ -198,3 +198,39 @@ export function truncateText(text: string, maxLength: number): string { return text; } } + +export function pluralize(word: string): string { + if (!/^[a-z]+$/i.test(word)) { + // If it's not a single a-z word, give up. + return word; + } + + switch (word) { + case 'man': + return 'men'; + case 'woman': + return 'women'; + case 'child': + return 'children'; + case 'foot': + return 'feet'; + case 'tooth': + return 'teeth'; + case 'mouse': + return 'mice'; + case 'person': + return 'people'; + } + + // Words ending in s, x, z, ch, sh → add "es" + if (/(s|x|z|ch|sh)$/i.test(word)) return word + 'es'; + + // Words ending in consonant + y → replace y with "ies" + if (/[bcdfghjklmnpqrstvwxz]y$/i.test(word)) return word.slice(0, -1) + 'ies'; + + // Words ending in f or fe → replace with "ves" + if (/(?:f|fe)$/i.test(word)) return word.replace(/(?:f|fe)$/i, 'ves'); + + // Default: just add "s" + return word + 's'; +} From 7b971c0a5536f7cd4573ff574921463acf947b14 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Mon, 13 Oct 2025 23:14:51 +0200 Subject: [PATCH 067/276] Current behavior for excluding Component render with unchanged props from Components track (#34822) If we rerender with the same props, the render time will not be accounted for in the Components track. The attached test reproduces the behavior observed in https://codesandbox.io/p/sandbox/patient-fast-j94f2g: <img width="1118" height="354" alt="CleanShot 2025-10-13 at 00 13 41@2x" src="https://github.com/user-attachments/assets/4be10ee9-d529-4d98-9035-4f26f9587f52" /> --- .../__tests__/ReactPerformanceTrack-test.js | 135 ++++++++++++++++-- 1 file changed, 125 insertions(+), 10 deletions(-) diff --git a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js index 72310812482..827592bb80d 100644 --- a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js +++ b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js @@ -15,9 +15,20 @@ let act; let useEffect; describe('ReactPerformanceTracks', () => { + const performanceMeasureCalls = []; + beforeEach(() => { + performanceMeasureCalls.length = 0; Object.defineProperty(performance, 'measure', { - value: jest.fn(), + value: jest.fn((measureName, reusableOptions) => { + performanceMeasureCalls.push([ + measureName, + { + // React will mutate the options it passes to performance.measure. + ...reusableOptions, + }, + ]); + }), configurable: true, }); console.timeStamp = () => {}; @@ -32,6 +43,19 @@ describe('ReactPerformanceTracks', () => { useEffect = React.useEffect; }); + function getConsoleTimestampEntries() { + try { + return console.timeStamp.mock.calls.filter(call => { + const [, startTime, endTime] = call; + + const isRegisterTrackCall = startTime !== 0.003 && endTime !== 0.003; + return isRegisterTrackCall; + }); + } finally { + console.timeStamp.mockClear(); + } + } + // @gate __DEV__ && enableComponentPerformanceTrack it('shows a hint if an update is triggered by a deeply equal object', async () => { const App = function App({items}) { @@ -45,7 +69,7 @@ describe('ReactPerformanceTracks', () => { ReactNoop.render(<App items={items} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'Mount', { @@ -62,14 +86,14 @@ describe('ReactPerformanceTracks', () => { }, ], ]); - performance.measure.mockClear(); + performanceMeasureCalls.length = 0; Scheduler.unstable_advanceTime(10); await act(() => { ReactNoop.render(<App items={items.concat('4')} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'App', { @@ -105,7 +129,7 @@ describe('ReactPerformanceTracks', () => { ReactNoop.render(<App items={items} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'Mount', { @@ -122,14 +146,14 @@ describe('ReactPerformanceTracks', () => { }, ], ]); - performance.measure.mockClear(); + performanceMeasureCalls.length = 0; Scheduler.unstable_advanceTime(10); await act(() => { ReactNoop.render(<App items={items.concat('-1')} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'App', { @@ -171,7 +195,7 @@ describe('ReactPerformanceTracks', () => { ReactNoop.render(<App data={{buffer: null}} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'Mount', { @@ -188,7 +212,7 @@ describe('ReactPerformanceTracks', () => { }, ], ]); - performance.measure.mockClear(); + performanceMeasureCalls.length = 0; Scheduler.unstable_advanceTime(10); @@ -197,7 +221,7 @@ describe('ReactPerformanceTracks', () => { ReactNoop.render(<App data={{buffer: bigData}} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'App', { @@ -324,4 +348,95 @@ describe('ReactPerformanceTracks', () => { ], ]); }); + + // @gate __DEV__ && enableComponentPerformanceTrack + it('includes spans for Components with no prop changes', async () => { + function Left({value}) { + Scheduler.unstable_advanceTime(5000); + } + function Right() { + Scheduler.unstable_advanceTime(10000); + } + + await act(() => { + ReactNoop.render( + <> + <Left value={1} /> + <Right /> + </>, + ); + }); + + expect(performanceMeasureCalls).toEqual([ + [ + 'Mount', + { + detail: { + devtools: { + color: 'warning', + properties: null, + tooltipText: 'Mount', + track: 'Components ⚛', + }, + }, + end: 5000, + start: 0, + }, + ], + [ + 'Mount', + { + detail: { + devtools: { + color: 'warning', + properties: null, + tooltipText: 'Mount', + track: 'Components ⚛', + }, + }, + end: 15000, + start: 5000, + }, + ], + ]); + performanceMeasureCalls.length = 0; + getConsoleTimestampEntries(); + + Scheduler.unstable_advanceTime(1000); + + await act(() => { + ReactNoop.render( + <> + <Left value={2} /> + <Right /> + </>, + ); + }); + + expect(performanceMeasureCalls).toEqual([ + [ + 'Left', + { + detail: { + devtools: { + color: 'error', + properties: [ + ['Changed Props', ''], + ['– value', '1'], + ['+ value', '2'], + ], + tooltipText: 'Left', + track: 'Components ⚛', + }, + }, + end: 21000, + start: 16000, + }, + ], + ]); + expect(getConsoleTimestampEntries()).toEqual([ + ['Render', 16000, 31000, 'Blocking', 'Scheduler ⚛', 'primary-dark'], + ]); + performanceMeasureCalls.length = 0; + }); }); From 47905a79507f9ae5fc1bf633f7cbbd1894b9523b Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 13 Oct 2025 17:23:04 -0400 Subject: [PATCH 068/276] Fix/add missing else branch for renders with no props change (#34837) Stacked on https://github.com/facebook/react/pull/34822. Fixes a bug introduced in https://github.com/facebook/react/pull/34370. Just copying the lower else branch to the `properties.length` else branch at the top. --- .../src/ReactFiberPerformanceTrack.js | 24 +++++++++++++++++++ .../__tests__/ReactPerformanceTrack-test.js | 3 ++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index 65cc7f04066..b2d165343a6 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -305,6 +305,30 @@ export function logComponentRender( } else { performance.measure('\u200b' + name, reusableComponentOptions); } + } else { + if (debugTask != null) { + debugTask.run( + // $FlowFixMe[method-unbinding] + console.timeStamp.bind( + console, + name, + startTime, + endTime, + COMPONENTS_TRACK, + undefined, + color, + ), + ); + } else { + console.timeStamp( + name, + startTime, + endTime, + COMPONENTS_TRACK, + undefined, + color, + ); + } } } else { if (debugTask != null) { diff --git a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js index 827592bb80d..0f5152e8d47 100644 --- a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js +++ b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js @@ -350,7 +350,7 @@ describe('ReactPerformanceTracks', () => { }); // @gate __DEV__ && enableComponentPerformanceTrack - it('includes spans for Components with no prop changes', async () => { + it('includes console.timeStamp spans for Components with no prop changes', async () => { function Left({value}) { Scheduler.unstable_advanceTime(5000); } @@ -436,6 +436,7 @@ describe('ReactPerformanceTracks', () => { ]); expect(getConsoleTimestampEntries()).toEqual([ ['Render', 16000, 31000, 'Blocking', 'Scheduler ⚛', 'primary-dark'], + ['Right', 21000, 31000, 'Components ⚛', undefined, 'error'], ]); performanceMeasureCalls.length = 0; }); From b9ec735de248f46da181afbc12aa906422be0dba Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 13 Oct 2025 17:42:13 -0400 Subject: [PATCH 069/276] [Perf Tracks]: Clear potentially large measures (#34803) Fixes https://github.com/facebook/react/issues/34770. We need to clear measures at some point, otherwise all these copies of props that we end up recording will allocate too much memory in Chromium. This adds `performance.clearMeasures(...)` calls to such cases in DEV. Validated that entries are still shown on Performance panel timeline. --- .../src/ReactFlightPerformanceTrack.js | 37 ++++++++++++++----- .../src/ReactFiberPerformanceTrack.js | 29 +++++++++++---- 2 files changed, 48 insertions(+), 18 deletions(-) diff --git a/packages/react-client/src/ReactFlightPerformanceTrack.js b/packages/react-client/src/ReactFlightPerformanceTrack.js index 81474767363..fb29fb45d0b 100644 --- a/packages/react-client/src/ReactFlightPerformanceTrack.js +++ b/packages/react-client/src/ReactFlightPerformanceTrack.js @@ -102,6 +102,7 @@ export function logComponentRender( const entryName = isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']'; const debugTask = componentInfo.debugTask; + const measureName = '\u200b' + entryName; if (__DEV__ && debugTask) { const properties: Array<[string, string]> = []; if (componentInfo.key != null) { @@ -110,9 +111,10 @@ export function logComponentRender( if (componentInfo.props != null) { addObjectToProperties(componentInfo.props, properties, 0, ''); } + debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + entryName, { + performance.measure.bind(performance, measureName, { start: startTime < 0 ? 0 : startTime, end: childrenEndTime, detail: { @@ -125,9 +127,10 @@ export function logComponentRender( }, }), ); + performance.clearMeasures(measureName); } else { console.timeStamp( - '\u200b' + entryName, + measureName, startTime < 0 ? 0 : startTime, childrenEndTime, trackNames[trackIdx], @@ -152,6 +155,7 @@ export function logComponentAborted( const isPrimaryEnv = env === rootEnv; const entryName = isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']'; + const measureName = '\u200b' + entryName; if (__DEV__) { const properties: Array<[string, string]> = [ [ @@ -165,7 +169,8 @@ export function logComponentAborted( if (componentInfo.props != null) { addObjectToProperties(componentInfo.props, properties, 0, ''); } - performance.measure('\u200b' + entryName, { + + performance.measure(measureName, { start: startTime < 0 ? 0 : startTime, end: childrenEndTime, detail: { @@ -178,9 +183,10 @@ export function logComponentAborted( }, }, }); + performance.clearMeasures(measureName); } else { console.timeStamp( - entryName, + measureName, startTime < 0 ? 0 : startTime, childrenEndTime, trackNames[trackIdx], @@ -206,6 +212,7 @@ export function logComponentErrored( const isPrimaryEnv = env === rootEnv; const entryName = isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']'; + const measureName = '\u200b' + entryName; if (__DEV__) { const message = typeof error === 'object' && @@ -222,7 +229,8 @@ export function logComponentErrored( if (componentInfo.props != null) { addObjectToProperties(componentInfo.props, properties, 0, ''); } - performance.measure('\u200b' + entryName, { + + performance.measure(measureName, { start: startTime < 0 ? 0 : startTime, end: childrenEndTime, detail: { @@ -235,9 +243,10 @@ export function logComponentErrored( }, }, }); + performance.clearMeasures(measureName); } else { console.timeStamp( - entryName, + measureName, startTime < 0 ? 0 : startTime, childrenEndTime, trackNames[trackIdx], @@ -397,6 +406,7 @@ export function logComponentAwaitAborted( }, }), ); + performance.clearMeasures(entryName); } else { console.timeStamp( entryName, @@ -453,6 +463,7 @@ export function logComponentAwaitErrored( }, }), ); + performance.clearMeasures(entryName); } else { console.timeStamp( entryName, @@ -514,6 +525,7 @@ export function logComponentAwait( }, }), ); + performance.clearMeasures(entryName); } else { console.timeStamp( entryName, @@ -538,6 +550,7 @@ export function logIOInfoErrored( const description = getIODescription(error); const entryName = getIOShortName(ioInfo, description, ioInfo.env, rootEnv); const debugTask = ioInfo.debugTask; + const measureName = '\u200b' + entryName; if (__DEV__ && debugTask) { const message = typeof error === 'object' && @@ -550,9 +563,10 @@ export function logIOInfoErrored( const properties = [['rejected with', message]]; const tooltipText = getIOLongName(ioInfo, description, ioInfo.env, rootEnv) + ' Rejected'; + debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + entryName, { + performance.measure.bind(performance, measureName, { start: startTime < 0 ? 0 : startTime, end: endTime, detail: { @@ -565,9 +579,10 @@ export function logIOInfoErrored( }, }), ); + performance.clearMeasures(measureName); } else { console.timeStamp( - entryName, + measureName, startTime < 0 ? 0 : startTime, endTime, IO_TRACK, @@ -590,6 +605,7 @@ export function logIOInfo( const entryName = getIOShortName(ioInfo, description, ioInfo.env, rootEnv); const color = getIOColor(entryName); const debugTask = ioInfo.debugTask; + const measureName = '\u200b' + entryName; if (__DEV__ && debugTask) { const properties: Array<[string, string]> = []; if (typeof value === 'object' && value !== null) { @@ -605,7 +621,7 @@ export function logIOInfo( ); debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + entryName, { + performance.measure.bind(performance, measureName, { start: startTime < 0 ? 0 : startTime, end: endTime, detail: { @@ -618,9 +634,10 @@ export function logIOInfo( }, }), ); + performance.clearMeasures(measureName); } else { console.timeStamp( - entryName, + measureName, startTime < 0 ? 0 : startTime, endTime, IO_TRACK, diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index b2d165343a6..5f94bd35e02 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -133,6 +133,7 @@ function logComponentTrigger( } else { performance.measure(trigger, reusableComponentOptions); } + performance.clearMeasures(trigger); } } @@ -200,7 +201,7 @@ const reusableComponentOptions: PerformanceMeasureOptions = { }, }; -const resuableChangedPropsEntry = ['Changed Props', '']; +const reusableChangedPropsEntry = ['Changed Props', '']; const DEEP_EQUALITY_WARNING = 'This component received deeply equal props. It might benefit from useMemo or the React Compiler in its owner.'; @@ -261,7 +262,7 @@ export function logComponentRender( alternate.memoizedProps !== props ) { // If this is an update, we'll diff the props and emit which ones changed. - const properties: Array<[string, string]> = [resuableChangedPropsEntry]; + const properties: Array<[string, string]> = [reusableChangedPropsEntry]; const isDeeplyEqual = addObjectDiffToProperties( alternate.memoizedProps, props, @@ -293,18 +294,20 @@ export function logComponentRender( reusableComponentOptions.start = startTime; reusableComponentOptions.end = endTime; + const measureName = '\u200b' + name; if (debugTask != null) { debugTask.run( // $FlowFixMe[method-unbinding] performance.measure.bind( performance, - '\u200b' + name, + measureName, reusableComponentOptions, ), ); } else { - performance.measure('\u200b' + name, reusableComponentOptions); + performance.measure(measureName, reusableComponentOptions); } + performance.clearMeasures(measureName); } else { if (debugTask != null) { debugTask.run( @@ -421,14 +424,17 @@ export function logComponentErrored( }, }, }; + + const measureName = '\u200b' + name; if (__DEV__ && debugTask) { debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + name, options), + performance.measure.bind(performance, measureName, options), ); } else { - performance.measure('\u200b' + name, options); + performance.measure(measureName, options); } + performance.clearMeasures(measureName); } else { console.timeStamp( name, @@ -488,14 +494,16 @@ function logComponentEffectErrored( }, }; const debugTask = fiber._debugTask; + const measureName = '\u200b' + name; if (debugTask) { debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + name, options), + performance.measure.bind(performance, measureName, options), ); } else { - performance.measure('\u200b' + name, options); + performance.measure(measureName, options); } + performance.clearMeasures(measureName); } else { console.timeStamp( name, @@ -762,6 +770,7 @@ export function logBlockingStart( } else { performance.measure(label, measureOptions); } + performance.clearMeasures(label); } else { console.timeStamp( label, @@ -867,6 +876,7 @@ export function logGestureStart( } else { performance.measure(label, measureOptions); } + performance.clearMeasures(label); } else { console.timeStamp( label, @@ -1007,6 +1017,7 @@ export function logTransitionStart( } else { performance.measure(label, measureOptions); } + performance.clearMeasures(label); } else { console.timeStamp( label, @@ -1238,6 +1249,7 @@ export function logRecoveredRenderPhase( } else { performance.measure('Recovered', options); } + performance.clearMeasures('Recovered'); } else { console.timeStamp( 'Recovered', @@ -1449,6 +1461,7 @@ export function logCommitErrored( } else { performance.measure('Errored', options); } + performance.clearMeasures('Errored'); } else { console.timeStamp( 'Errored', From 03a62b20fddb197876ce20ac5ea34994b0e5b242 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 14 Oct 2025 07:21:12 -0400 Subject: [PATCH 070/276] [Flight] Look for moved debugInfo when logging component performance track (#34839) --- .../react-client/src/ReactFlightClient.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 701d9df33cd..2121903b87e 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -4318,7 +4318,26 @@ function flushComponentPerformance( // First find the start time of the first component to know if it was running // in parallel with the previous. - const debugInfo = __DEV__ && root._debugInfo; + let debugInfo = null; + if (__DEV__) { + debugInfo = root._debugInfo; + if (debugInfo.length === 0 && root.status === 'fulfilled') { + const resolvedValue = resolveLazy(root.value); + if ( + typeof resolvedValue === 'object' && + resolvedValue !== null && + (isArray(resolvedValue) || + typeof resolvedValue[ASYNC_ITERATOR] === 'function' || + resolvedValue.$$typeof === REACT_ELEMENT_TYPE || + resolvedValue.$$typeof === REACT_LAZY_TYPE) && + isArray(resolvedValue._debugInfo) + ) { + // It's possible that the value has been given the debug info. + // In that case we need to look for it on the resolved value. + debugInfo = resolvedValue._debugInfo; + } + } + } if (debugInfo) { let startTime = 0; for (let i = 0; i < debugInfo.length; i++) { From 73507ec457349263bffa4c8132b2674664d5f421 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Tue, 14 Oct 2025 13:57:08 +0200 Subject: [PATCH 071/276] [DevTools] Exclude Suspense boundaries in hidden Activity (#34756) --- .../src/__tests__/store-test.js | 101 ++++++++++++++++++ .../src/backend/fiber/renderer.js | 44 ++++++-- 2 files changed, 138 insertions(+), 7 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index d5280c091c9..3638852c20b 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -3142,4 +3142,105 @@ describe('Store', () => { await actAsync(() => render(null)); expect(store).toMatchInlineSnapshot(``); }); + + // @reactVersion >= 19 + it('should keep suspended boundaries in the Suspense tree but not hidden Activity', async () => { + const Activity = React.Activity || React.unstable_Activity; + + const never = new Promise(() => {}); + function Never() { + readValue(never); + return null; + } + function Component({children}) { + return <div>{children}</div>; + } + + function App({hidden}) { + return ( + <> + <Activity mode={hidden ? 'hidden' : 'visible'}> + <React.Suspense name="inside-activity"> + <Component key="inside-activity">inside Activity</Component> + </React.Suspense> + </Activity> + <React.Suspense name="outer-suspense"> + <React.Suspense name="inner-suspense"> + <Component key="inside-suspense">inside Suspense</Component> + </React.Suspense> + {hidden ? <Never /> : null} + </React.Suspense> + </> + ); + } + + await actAsync(() => { + render(<App hidden={true} />); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + <Activity> + <Suspense name="outer-suspense"> + [suspense-root] rects={[{x:1,y:2,width:15,height:1}]} + <Suspense name="outer-suspense" rects={null}> + `); + + // mount as visible + await actAsync(() => { + render(null); + }); + await actAsync(() => { + render(<App hidden={false} />); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + ▾ <Activity> + ▾ <Suspense name="inside-activity"> + <Component key="inside-activity"> + ▾ <Suspense name="outer-suspense"> + ▾ <Suspense name="inner-suspense"> + <Component key="inside-suspense"> + [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} + <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + `); + + await actAsync(() => { + render(<App hidden={true} />); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + <Activity> + <Suspense name="outer-suspense"> + [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} + <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + `); + + await actAsync(() => { + render(<App hidden={false} />); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + ▾ <Activity> + ▾ <Suspense name="inside-activity"> + <Component key="inside-activity"> + ▾ <Suspense name="outer-suspense"> + ▾ <Suspense name="inner-suspense"> + <Component key="inside-suspense"> + [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} + <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + `); + }); }); diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index ba214db05c7..688f1b473bf 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -3144,12 +3144,30 @@ export function attach( } } + /** + * Offscreen of suspended Suspense + */ + function isSuspendedOffscreen(fiber: Fiber): boolean { + switch (fiber.tag) { + case LegacyHiddenComponent: + // fallthrough since all published implementations currently implement the same state as Offscreen. + case OffscreenComponent: + return ( + fiber.memoizedState !== null && + fiber.return !== null && + fiber.return.tag === SuspenseComponent + ); + default: + return false; + } + } + function unmountRemainingChildren() { if ( reconcilingParent !== null && (reconcilingParent.kind === FIBER_INSTANCE || reconcilingParent.kind === FILTERED_FIBER_INSTANCE) && - isHiddenOffscreen(reconcilingParent.data) && + isSuspendedOffscreen(reconcilingParent.data) && !isInDisconnectedSubtree ) { // This is a hidden offscreen, we need to execute this in the context of a disconnected subtree. @@ -4026,7 +4044,7 @@ export function attach( trackDebugInfoFromHostComponent(nearestInstance, fiber); } - if (isHiddenOffscreen(fiber)) { + if (isSuspendedOffscreen(fiber)) { // If an Offscreen component is hidden, mount its children as disconnected. const stashedDisconnected = isInDisconnectedSubtree; isInDisconnectedSubtree = true; @@ -4037,6 +4055,9 @@ export function attach( } finally { isInDisconnectedSubtree = stashedDisconnected; } + } else if (isHiddenOffscreen(fiber)) { + // hidden Activity is noisy. + // Including it may show overlapping Suspense rects } else if (fiber.tag === SuspenseComponent && OffscreenComponent === -1) { // Legacy Suspense without the Offscreen wrapper. For the modern Suspense we just handle the // Offscreen wrapper itself specially. @@ -4981,6 +5002,8 @@ export function attach( const prevWasHidden = isHiddenOffscreen(prevFiber); const nextIsHidden = isHiddenOffscreen(nextFiber); + const prevWasSuspended = isSuspendedOffscreen(prevFiber); + const nextIsSuspended = isSuspendedOffscreen(nextFiber); if (isLegacySuspense) { if ( @@ -5058,8 +5081,8 @@ export function attach( ); updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren; } - } else if (nextIsHidden) { - if (!prevWasHidden) { + } else if (nextIsSuspended) { + if (!prevWasSuspended) { // We're hiding the children. Disconnect them from the front end but keep state. if (fiberInstance !== null && !isInDisconnectedSubtree) { disconnectChildrenRecursively(remainingReconcilingChildren); @@ -5077,7 +5100,7 @@ export function attach( } finally { isInDisconnectedSubtree = stashedDisconnected; } - } else if (prevWasHidden && !nextIsHidden) { + } else if (prevWasSuspended && !nextIsSuspended) { // We're revealing the hidden children. We now need to update them to the latest state. // We do this while still in the disconnected state and then we reconnect the new ones. // This avoids reconnecting things that are about to be removed anyway. @@ -5103,6 +5126,13 @@ export function attach( // Children may have reordered while they were hidden. updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren; } + } else if (nextIsHidden) { + if (prevWasHidden) { + // still hidden. Nothing to do. + } else { + // We're hiding the children. Remove them from the Frontend + unmountRemainingChildren(); + } } else if ( nextFiber.tag === SuspenseComponent && OffscreenComponent !== -1 && @@ -5259,7 +5289,7 @@ export function attach( // We need to crawl the subtree for closest non-filtered Fibers // so that we can display them in a flat children set. if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) { - if (!nextIsHidden && !isInDisconnectedSubtree) { + if (!nextIsSuspended && !isInDisconnectedSubtree) { recordResetChildren(fiberInstance); } @@ -5335,7 +5365,7 @@ export function attach( if ( (child.kind === FIBER_INSTANCE || child.kind === FILTERED_FIBER_INSTANCE) && - isHiddenOffscreen(child.data) + isSuspendedOffscreen(child.data) ) { // This instance's children are already disconnected. } else { From 19b71673b103f49daa3c7fc0cd70a29356826143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 14 Oct 2025 07:57:48 -0400 Subject: [PATCH 072/276] [Flight] Forward the current environment when forwarding I/O entries (#34836) --- .../react-server/src/ReactFlightServer.js | 13 +- .../ReactFlightAsyncDebugInfo-test.js | 294 +++++++++--------- 2 files changed, 160 insertions(+), 147 deletions(-) diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 1c769c93ee7..587f38008f1 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -4493,6 +4493,12 @@ function outlineIOInfo(request: Request, ioInfo: ReactIOInfo): void { } else { debugStack = ioInfo.stack; } + let env = ioInfo.env; + if (env == null) { + // If we're forwarding IO info from this environment, an empty env is effectively the "client" side. + // The "client" from the perspective of our client will be this current environment. + env = (0, request.environmentName)(); + } emitIOInfoChunk( request, id, @@ -4500,7 +4506,7 @@ function outlineIOInfo(request: Request, ioInfo: ReactIOInfo): void { ioInfo.start, ioInfo.end, ioInfo.value, - ioInfo.env, + env, owner, debugStack, ); @@ -5388,6 +5394,11 @@ function forwardDebugInfo( if (info.env != null) { // $FlowFixMe[cannot-write] debugAsyncInfo.env = info.env; + } else { + // If we're forwarding IO info from this environment, an empty env is effectively the "client" side. + // The "client" from the perspective of our client will be this current environment. + // $FlowFixMe[cannot-write] + debugAsyncInfo.env = (0, request.environmentName)(); } if (info.owner != null) { // $FlowFixMe[cannot-write] diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index 992b58d3880..acc73ed223a 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -1483,12 +1483,14 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, + "env": "Server", "name": "RSC stream", "start": 0, "value": { "value": "stream", }, }, + "env": "Server", }, { "time": 0, @@ -1566,9 +1568,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1530, + 1532, 40, - 1513, + 1515, 62, ], [ @@ -1598,9 +1600,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1530, + 1532, 40, - 1513, + 1515, 62, ], [ @@ -1625,17 +1627,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1515, + 1517, 13, - 1514, + 1516, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1527, 13, - 1524, + 1526, 5, ], ], @@ -1654,9 +1656,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1530, + 1532, 40, - 1513, + 1515, 62, ], [ @@ -1673,17 +1675,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1515, + 1517, 13, - 1514, + 1516, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1527, 13, - 1524, + 1526, 5, ], ], @@ -1703,9 +1705,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1526, + 1528, 60, - 1524, + 1526, 5, ], ], @@ -1727,9 +1729,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1530, + 1532, 40, - 1513, + 1515, 62, ], [ @@ -1754,17 +1756,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1515, + 1517, 13, - 1514, + 1516, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1527, 13, - 1524, + 1526, 5, ], ], @@ -1783,9 +1785,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1526, + 1528, 60, - 1524, + 1526, 5, ], ], @@ -1794,9 +1796,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Child", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1520, + 1522, 28, - 1519, + 1521, 5, ], ], @@ -1879,9 +1881,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1843, + 1845, 40, - 1827, + 1829, 57, ], [ @@ -1911,9 +1913,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1843, + 1845, 40, - 1827, + 1829, 57, ], [ @@ -1938,17 +1940,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1829, + 1831, 13, - 1828, + 1830, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1840, 23, - 1837, + 1839, 5, ], ], @@ -1967,9 +1969,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1843, + 1845, 40, - 1827, + 1829, 57, ], [ @@ -1986,17 +1988,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1829, + 1831, 13, - 1828, + 1830, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1840, 23, - 1837, + 1839, 5, ], ], @@ -2016,9 +2018,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1839, + 1841, 60, - 1837, + 1839, 5, ], ], @@ -2037,9 +2039,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1843, + 1845, 40, - 1827, + 1829, 57, ], [ @@ -2064,17 +2066,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1829, + 1831, 13, - 1828, + 1830, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1840, 23, - 1837, + 1839, 5, ], ], @@ -2088,9 +2090,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1839, + 1841, 60, - 1837, + 1839, 5, ], ], @@ -2175,9 +2177,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2207,9 +2209,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2234,17 +2236,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2129, + 2131, 13, - 2127, + 2129, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2134, + 2136, 13, - 2133, + 2135, 5, ], ], @@ -2263,9 +2265,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2282,17 +2284,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2129, + 2131, 13, - 2127, + 2129, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2134, + 2136, 13, - 2133, + 2135, 5, ], ], @@ -2314,9 +2316,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2341,25 +2343,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2123, + 2125, 13, - 2122, + 2124, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2128, + 2130, 15, - 2127, + 2129, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2134, + 2136, 13, - 2133, + 2135, 5, ], ], @@ -2378,9 +2380,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2397,25 +2399,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2123, + 2125, 13, - 2122, + 2124, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2128, + 2130, 15, - 2127, + 2129, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2134, + 2136, 13, - 2133, + 2135, 5, ], ], @@ -2437,9 +2439,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2464,9 +2466,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2124, + 2126, 13, - 2122, + 2124, 5, ], ], @@ -2485,9 +2487,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2504,9 +2506,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2124, + 2126, 13, - 2122, + 2124, 5, ], ], @@ -2579,9 +2581,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2548, + 2550, 109, - 2537, + 2539, 58, ], ], @@ -2603,9 +2605,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2548, + 2550, 109, - 2537, + 2539, 58, ], ], @@ -2622,17 +2624,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2539, + 2541, 14, - 2538, + 2540, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2545, + 2547, 20, - 2544, + 2546, 5, ], ], @@ -2651,9 +2653,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2548, + 2550, 109, - 2537, + 2539, 58, ], ], @@ -2662,17 +2664,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2539, + 2541, 23, - 2538, + 2540, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2545, + 2547, 20, - 2544, + 2546, 5, ], ], @@ -2751,9 +2753,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2715, + 2717, 40, - 2703, + 2705, 56, ], [ @@ -2783,9 +2785,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2715, + 2717, 40, - 2703, + 2705, 56, ], [ @@ -2810,9 +2812,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2711, + 2713, 20, - 2710, + 2712, 5, ], ], @@ -2831,9 +2833,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2715, + 2717, 40, - 2703, + 2705, 56, ], [ @@ -2850,9 +2852,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2711, + 2713, 20, - 2710, + 2712, 5, ], ], @@ -2945,9 +2947,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -2977,9 +2979,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -2996,17 +2998,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2890, + 2892, 15, - 2889, + 2891, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2899, + 2901, 19, - 2898, + 2900, 5, ], ], @@ -3025,9 +3027,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -3044,17 +3046,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2890, + 2892, 15, - 2889, + 2891, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2899, + 2901, 19, - 2898, + 2900, 5, ], ], @@ -3076,9 +3078,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -3095,9 +3097,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2899, + 2901, 25, - 2898, + 2900, 5, ], ], @@ -3116,9 +3118,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -3135,9 +3137,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2899, + 2901, 25, - 2898, + 2900, 5, ], ], @@ -3213,9 +3215,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3180, + 3182, 40, - 3168, + 3170, 36, ], ], @@ -3237,9 +3239,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3180, + 3182, 40, - 3168, + 3170, 36, ], ], @@ -3248,9 +3250,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3172, + 3174, 7, - 3170, + 3172, 5, ], ], @@ -3269,9 +3271,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3180, + 3182, 40, - 3168, + 3170, 36, ], ], @@ -3280,9 +3282,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3174, + 3176, 7, - 3170, + 3172, 5, ], ], @@ -3407,9 +3409,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3325, + 3327, 20, - 3324, + 3326, 5, ], ], From 56e846921d600878ae0ab7bb400fdeba97d81827 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 14 Oct 2025 08:28:47 -0400 Subject: [PATCH 073/276] [Flight] Exclude RSC Stream if the stream resolves in a task (#34838) --- .../react-client/src/ReactFlightClient.js | 78 ++-- .../__tests__/ReactFlightDOMBrowser-test.js | 12 - .../src/__tests__/ReactFlightDOMEdge-test.js | 5 - .../react-server/src/ReactFlightServer.js | 20 +- .../ReactFlightAsyncDebugInfo-test.js | 388 ++++++++---------- 5 files changed, 236 insertions(+), 267 deletions(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 2121903b87e..1c2151362d8 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -367,6 +367,7 @@ type Response = { _debugRootStack?: null | Error, // DEV-only _debugRootTask?: null | ConsoleTask, // DEV-only _debugStartTime: number, // DEV-only + _debugIOStarted: boolean, // DEV-only _debugFindSourceMapURL?: void | FindSourceMapURLCallback, // DEV-only _debugChannel?: void | DebugChannel, // DEV-only _blockedConsole?: null | SomeChunk<ConsoleEntry>, // DEV-only @@ -500,7 +501,7 @@ function createErrorChunk<T>( } function moveDebugInfoFromChunkToInnerValue<T>( - chunk: InitializedChunk<T>, + chunk: InitializedChunk<T> | InitializedStreamChunk<any>, value: T, ): void { // Remove the debug info from the initialized chunk, and add it to the inner @@ -1569,6 +1570,10 @@ function fulfillReference( initializedChunk.reason = handler.reason; // Used by streaming chunks if (resolveListeners !== null) { wakeChunk(resolveListeners, handler.value, initializedChunk); + } else { + if (__DEV__) { + moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value); + } } } } @@ -1818,6 +1823,10 @@ function loadServerReference<A: Iterable<any>, T>( initializedChunk.value = handler.value; if (resolveListeners !== null) { wakeChunk(resolveListeners, handler.value, initializedChunk); + } else { + if (__DEV__) { + moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value); + } } } } @@ -2536,6 +2545,10 @@ function missingCall() { ); } +function markIOStarted(this: Response) { + this._debugIOStarted = true; +} + function ResponseInstance( this: $FlowFixMe, bundlerConfig: ServerConsumerModuleMap, @@ -2609,6 +2622,10 @@ function ResponseInstance( // where as if you use createFromReadableStream from the body of the fetch // then the start time is when the headers resolved. this._debugStartTime = performance.now(); + this._debugIOStarted = false; + // We consider everything before the first setTimeout task to be cached data + // and is not considered I/O required to load the stream. + setTimeout(markIOStarted.bind(this), 0); } this._debugFindSourceMapURL = findSourceMapURL; this._debugChannel = debugChannel; @@ -2762,7 +2779,7 @@ function incrementChunkDebugInfo( } } -function addDebugInfo(chunk: SomeChunk<any>, debugInfo: ReactDebugInfo): void { +function addAsyncInfo(chunk: SomeChunk<any>, asyncInfo: ReactAsyncInfo): void { const value = resolveLazy(chunk.value); if ( typeof value === 'object' && @@ -2774,34 +2791,39 @@ function addDebugInfo(chunk: SomeChunk<any>, debugInfo: ReactDebugInfo): void { ) { if (isArray(value._debugInfo)) { // $FlowFixMe[method-unbinding] - value._debugInfo.push.apply(value._debugInfo, debugInfo); + value._debugInfo.push(asyncInfo); } else { Object.defineProperty((value: any), '_debugInfo', { configurable: false, enumerable: false, writable: true, - value: debugInfo, + value: [asyncInfo], }); } } else { // $FlowFixMe[method-unbinding] - chunk._debugInfo.push.apply(chunk._debugInfo, debugInfo); + chunk._debugInfo.push(asyncInfo); } } function resolveChunkDebugInfo( + response: Response, streamState: StreamState, chunk: SomeChunk<any>, ): void { if (__DEV__ && enableAsyncDebugInfo) { - // Add the currently resolving chunk's debug info representing the stream - // to the Promise that was waiting on the stream, or its underlying value. - const debugInfo: ReactDebugInfo = [{awaited: streamState._debugInfo}]; - if (chunk.status === PENDING || chunk.status === BLOCKED) { - const boundAddDebugInfo = addDebugInfo.bind(null, chunk, debugInfo); - chunk.then(boundAddDebugInfo, boundAddDebugInfo); - } else { - addDebugInfo(chunk, debugInfo); + // Only include stream information after a macrotask. Any chunk processed + // before that is considered cached data. + if (response._debugIOStarted) { + // Add the currently resolving chunk's debug info representing the stream + // to the Promise that was waiting on the stream, or its underlying value. + const asyncInfo: ReactAsyncInfo = {awaited: streamState._debugInfo}; + if (chunk.status === PENDING || chunk.status === BLOCKED) { + const boundAddAsyncInfo = addAsyncInfo.bind(null, chunk, asyncInfo); + chunk.then(boundAddAsyncInfo, boundAddAsyncInfo); + } else { + addAsyncInfo(chunk, asyncInfo); + } } } } @@ -2837,12 +2859,12 @@ function resolveModel( model, ); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } else { if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } resolveModelChunk(response, chunk, model); } @@ -2869,7 +2891,7 @@ function resolveText( } const newChunk = createInitializedTextChunk(response, text); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } @@ -2895,7 +2917,7 @@ function resolveBuffer( } const newChunk = createInitializedBufferChunk(response, buffer); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } @@ -2942,7 +2964,7 @@ function resolveModule( blockedChunk.status = BLOCKED; } if (__DEV__) { - resolveChunkDebugInfo(streamState, blockedChunk); + resolveChunkDebugInfo(response, streamState, blockedChunk); } promise.then( () => resolveModuleChunk(response, blockedChunk, clientReference), @@ -2952,12 +2974,12 @@ function resolveModule( if (!chunk) { const newChunk = createResolvedModuleChunk(response, clientReference); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } else { if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } // This can't actually happen because we don't have any forward // references to modules. @@ -2978,13 +3000,13 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>( if (!chunk) { const newChunk = createInitializedStreamChunk(response, stream, controller); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); return; } if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } if (chunk.status !== PENDING) { // We already resolved. We didn't expect to see this. @@ -3034,6 +3056,10 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>( resolvedChunk.reason = controller; if (resolveListeners !== null) { wakeChunk(resolveListeners, chunk.value, (chunk: any)); + } else { + if (__DEV__) { + moveDebugInfoFromChunkToInnerValue(resolvedChunk, stream); + } } } @@ -3433,12 +3459,12 @@ function resolvePostponeDev( postponeInstance, ); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } else { if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } triggerErrorOnChunk(response, chunk, postponeInstance); } @@ -3467,12 +3493,12 @@ function resolveErrorModel( errorWithDigest, ); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } else { if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } triggerErrorOnChunk(response, chunk, errorWithDigest); } diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index 40ee3971298..d52003be1d7 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -3035,18 +3035,6 @@ describe('ReactFlightDOMBrowser', () => { { "time": 0, }, - { - "awaited": { - "byteSize": 0, - "end": 0, - "name": "RSC stream", - "owner": null, - "start": 0, - "value": { - "value": "stream", - }, - }, - }, ] `); } diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index 44b3256afe8..a47c9b086a1 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -1248,11 +1248,6 @@ describe('ReactFlightDOMEdge', () => { owner: greetInfo, }), {time: 14}, - expect.objectContaining({ - awaited: expect.objectContaining({ - name: 'RSC stream', - }), - }), ]); } // The owner that created the span was the outer server component. diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 587f38008f1..84008f6757a 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -2325,9 +2325,15 @@ function visitAsyncNode( return null; } visited.add(node); + if (node.end >= 0 && node.end <= request.timeOrigin) { + // This was already resolved when we started this render. It must have been either something + // that's part of a start up sequence or externally cached data. We exclude that information. + // The technique for debugging the effects of uncached data on the render is to simply uncache it. + return null; + } let previousIONode = null; // First visit anything that blocked this sequence to start in the first place. - if (node.previous !== null && node.end > request.timeOrigin) { + if (node.previous !== null) { previousIONode = visitAsyncNode( request, task, @@ -2349,12 +2355,6 @@ function visitAsyncNode( return previousIONode; } case PROMISE_NODE: { - if (node.end <= request.timeOrigin) { - // This was already resolved when we started this render. It must have been either something - // that's part of a start up sequence or externally cached data. We exclude that information. - // The technique for debugging the effects of uncached data on the render is to simply uncache it. - return previousIONode; - } const awaited = node.awaited; let match: void | null | PromiseNode | IONode = previousIONode; const promise = node.promise.deref(); @@ -2437,11 +2437,7 @@ function visitAsyncNode( } else if (ioNode !== null) { const startTime: number = node.start; const endTime: number = node.end; - if (endTime <= request.timeOrigin) { - // This was already resolved when we started this render. It must have been either something - // that's part of a start up sequence or externally cached data. We exclude that information. - return null; - } else if (startTime < cutOff) { + if (startTime < cutOff) { // We started awaiting this node before we started rendering this sequence. // This means that this particular await was never part of the current sequence. // If we have another await higher up in the chain it might have a more actionable stack diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index acc73ed223a..00c6f785035 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -1051,18 +1051,6 @@ describe('ReactFlightAsyncDebugInfo', () => { { "time": 0, }, - { - "awaited": { - "byteSize": 0, - "end": 0, - "name": "RSC stream", - "owner": null, - "start": 0, - "value": { - "value": "stream", - }, - }, - }, ] `); } @@ -1126,9 +1114,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1095, + 1083, 109, - 1071, + 1059, 50, ], ], @@ -1154,18 +1142,6 @@ describe('ReactFlightAsyncDebugInfo', () => { { "time": 0, }, - { - "awaited": { - "byteSize": 0, - "end": 0, - "name": "RSC stream", - "owner": null, - "start": 0, - "value": { - "value": "stream", - }, - }, - }, ] `); } @@ -1222,9 +1198,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1191, + 1167, 109, - 1174, + 1150, 63, ], ], @@ -1249,9 +1225,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1281,9 +1257,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1300,17 +1276,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1176, + 1152, 13, - 1175, + 1151, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1182, + 1158, 24, - 1181, + 1157, 5, ], ], @@ -1337,9 +1313,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1348,17 +1324,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1176, + 1152, 13, - 1175, + 1151, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1182, + 1158, 24, - 1181, + 1157, 5, ], ], @@ -1391,9 +1367,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1410,17 +1386,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1177, + 1153, 13, - 1175, + 1151, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1182, + 1158, 18, - 1181, + 1157, 5, ], ], @@ -1447,9 +1423,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1458,17 +1434,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1177, + 1153, 13, - 1175, + 1151, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1182, + 1158, 18, - 1181, + 1157, 5, ], ], @@ -1568,9 +1544,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1532, + 1508, 40, - 1515, + 1491, 62, ], [ @@ -1600,9 +1576,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1532, + 1508, 40, - 1515, + 1491, 62, ], [ @@ -1627,17 +1603,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1517, + 1493, 13, - 1516, + 1492, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1527, + 1503, 13, - 1526, + 1502, 5, ], ], @@ -1656,9 +1632,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1532, + 1508, 40, - 1515, + 1491, 62, ], [ @@ -1675,17 +1651,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1517, + 1493, 13, - 1516, + 1492, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1527, + 1503, 13, - 1526, + 1502, 5, ], ], @@ -1705,9 +1681,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1528, + 1504, 60, - 1526, + 1502, 5, ], ], @@ -1729,9 +1705,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1532, + 1508, 40, - 1515, + 1491, 62, ], [ @@ -1756,17 +1732,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1517, + 1493, 13, - 1516, + 1492, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1527, + 1503, 13, - 1526, + 1502, 5, ], ], @@ -1785,9 +1761,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1528, + 1504, 60, - 1526, + 1502, 5, ], ], @@ -1796,9 +1772,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Child", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1522, + 1498, 28, - 1521, + 1497, 5, ], ], @@ -1881,9 +1857,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1845, + 1821, 40, - 1829, + 1805, 57, ], [ @@ -1913,9 +1889,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1845, + 1821, 40, - 1829, + 1805, 57, ], [ @@ -1940,17 +1916,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1831, + 1807, 13, - 1830, + 1806, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1840, + 1816, 23, - 1839, + 1815, 5, ], ], @@ -1969,9 +1945,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1845, + 1821, 40, - 1829, + 1805, 57, ], [ @@ -1988,17 +1964,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1831, + 1807, 13, - 1830, + 1806, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1840, + 1816, 23, - 1839, + 1815, 5, ], ], @@ -2018,9 +1994,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1841, + 1817, 60, - 1839, + 1815, 5, ], ], @@ -2039,9 +2015,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1845, + 1821, 40, - 1829, + 1805, 57, ], [ @@ -2066,17 +2042,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1831, + 1807, 13, - 1830, + 1806, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1840, + 1816, 23, - 1839, + 1815, 5, ], ], @@ -2090,9 +2066,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1841, + 1817, 60, - 1839, + 1815, 5, ], ], @@ -2177,9 +2153,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2209,9 +2185,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2236,17 +2212,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2131, + 2107, 13, - 2129, + 2105, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2136, + 2112, 13, - 2135, + 2111, 5, ], ], @@ -2265,9 +2241,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2284,17 +2260,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2131, + 2107, 13, - 2129, + 2105, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2136, + 2112, 13, - 2135, + 2111, 5, ], ], @@ -2316,9 +2292,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2343,25 +2319,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2125, + 2101, 13, - 2124, + 2100, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2130, + 2106, 15, - 2129, + 2105, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2136, + 2112, 13, - 2135, + 2111, 5, ], ], @@ -2380,9 +2356,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2399,25 +2375,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2125, + 2101, 13, - 2124, + 2100, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2130, + 2106, 15, - 2129, + 2105, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2136, + 2112, 13, - 2135, + 2111, 5, ], ], @@ -2439,9 +2415,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2466,9 +2442,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2126, + 2102, 13, - 2124, + 2100, 5, ], ], @@ -2487,9 +2463,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2506,9 +2482,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2126, + 2102, 13, - 2124, + 2100, 5, ], ], @@ -2581,9 +2557,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2550, + 2526, 109, - 2539, + 2515, 58, ], ], @@ -2605,9 +2581,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2550, + 2526, 109, - 2539, + 2515, 58, ], ], @@ -2624,17 +2600,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2541, + 2517, 14, - 2540, + 2516, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2523, 20, - 2546, + 2522, 5, ], ], @@ -2653,9 +2629,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2550, + 2526, 109, - 2539, + 2515, 58, ], ], @@ -2664,17 +2640,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2541, + 2517, 23, - 2540, + 2516, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2523, 20, - 2546, + 2522, 5, ], ], @@ -2753,9 +2729,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2717, + 2693, 40, - 2705, + 2681, 56, ], [ @@ -2785,9 +2761,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2717, + 2693, 40, - 2705, + 2681, 56, ], [ @@ -2812,9 +2788,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2713, + 2689, 20, - 2712, + 2688, 5, ], ], @@ -2833,9 +2809,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2717, + 2693, 40, - 2705, + 2681, 56, ], [ @@ -2852,9 +2828,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2713, + 2689, 20, - 2712, + 2688, 5, ], ], @@ -2947,9 +2923,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -2979,9 +2955,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -2998,17 +2974,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2892, + 2868, 15, - 2891, + 2867, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2901, + 2877, 19, - 2900, + 2876, 5, ], ], @@ -3027,9 +3003,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -3046,17 +3022,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2892, + 2868, 15, - 2891, + 2867, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2901, + 2877, 19, - 2900, + 2876, 5, ], ], @@ -3078,9 +3054,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -3097,9 +3073,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2901, + 2877, 25, - 2900, + 2876, 5, ], ], @@ -3118,9 +3094,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -3137,9 +3113,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2901, + 2877, 25, - 2900, + 2876, 5, ], ], @@ -3215,9 +3191,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3182, + 3158, 40, - 3170, + 3146, 36, ], ], @@ -3239,9 +3215,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3182, + 3158, 40, - 3170, + 3146, 36, ], ], @@ -3250,9 +3226,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3174, + 3150, 7, - 3172, + 3148, 5, ], ], @@ -3271,9 +3247,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3182, + 3158, 40, - 3170, + 3146, 36, ], ], @@ -3282,9 +3258,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3176, + 3152, 7, - 3172, + 3148, 5, ], ], @@ -3409,9 +3385,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3327, + 3303, 20, - 3326, + 3302, 5, ], ], @@ -3422,18 +3398,6 @@ describe('ReactFlightAsyncDebugInfo', () => { { "time": 0, }, - { - "awaited": { - "byteSize": 0, - "end": 0, - "name": "RSC stream", - "owner": null, - "start": 0, - "value": { - "value": "stream", - }, - }, - }, ] `); } From 5f2b571878ec3b5884f5739915a974b98d7384d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 14 Oct 2025 09:34:57 -0400 Subject: [PATCH 074/276] [DevTools] Filter out built-in stack frames (#34828) Treat fake eval anonymous stacks as built-in. Hide built-in stack frames unless they're used to call into a non-ignored stack frame. The two main things to fix here is that 1) we're showing a linkified stack for fake anonymous and 2) we're showing only built-ins when the stack is completely internal. Meaning framework code is all noise. --- .../views/Components/StackTraceView.css | 10 ++++++--- .../views/Components/StackTraceView.js | 22 ++++++++++++------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css index 20603ae7ccd..574ceb02369 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css @@ -2,13 +2,17 @@ padding: 0.25rem; } -.CallSite, .IgnoredCallSite { +.CallSite { display: block; padding-left: 1rem; } -.IgnoredCallSite { - opacity: 0.5; +.IgnoredCallSite, .BuiltInCallSite { + display: none; +} + +.CallSite + .BuiltInCallSite { + display: block; } .Link { diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js index 57b5c4eef04..d3d797f7810 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js @@ -60,16 +60,22 @@ export function CallSiteView({ symbolicatedCallSite !== null ? symbolicatedCallSite.location : callSite; const ignored = symbolicatedCallSite !== null ? symbolicatedCallSite.ignored : false; - if (ignored) { - // TODO: Make an option to be able to toggle the display of ignore listed rows. - // Ideally this UI should be higher than a single Stack Trace so that there's not - // multiple buttons in a single inspection taking up space. - return null; - } + // TODO: Make an option to be able to toggle the display of ignore listed rows. + // Ideally this UI should be higher than a single Stack Trace so that there's not + // multiple buttons in a single inspection taking up space. + + const isBuiltIn = url === '' || url.startsWith('<anonymous>'); // This looks like a fake anonymous through eval. return ( - <div className={ignored ? styles.IgnoredCallSite : styles.CallSite}> + <div + className={ + ignored + ? styles.IgnoredCallSite + : isBuiltIn + ? styles.BuiltInCallSite + : styles.CallSite + }> {functionName || virtualFunctionName} - {url !== '' && ( + {!isBuiltIn && ( <> {' @ '} <span From e7984651e4f123d8112f5abab39782ee70d8f4aa Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Tue, 14 Oct 2025 15:07:27 -0400 Subject: [PATCH 075/276] [playground] Allow accordion tabs to open on error (#34844) There was a bug where the other output passes (aside from the "Output" tab) were unable to open on compiler error. This PR still allows for the "Output" tab to automatically open on error, but also allows other tabs to be opened. https://github.com/user-attachments/assets/157bf5d6-c289-46fd-bafb-073c2e0ff52b --- .../playground/components/AccordionWindow.tsx | 5 +---- .../playground/components/Editor/Output.tsx | 22 +++++++++++++++---- .../playground/components/TabbedWindow.tsx | 8 ++----- 3 files changed, 21 insertions(+), 14 deletions(-) diff --git a/compiler/apps/playground/components/AccordionWindow.tsx b/compiler/apps/playground/components/AccordionWindow.tsx index 311bf2590dc..a239bb13465 100644 --- a/compiler/apps/playground/components/AccordionWindow.tsx +++ b/compiler/apps/playground/components/AccordionWindow.tsx @@ -22,7 +22,6 @@ export default function AccordionWindow(props: { tabsOpen: Set<string>; setTabsOpen: (newTab: Set<string>) => void; changedPasses: Set<string>; - isFailure: boolean; }): React.ReactElement { return ( <div className="flex-1 min-w-[550px] sm:min-w-0"> @@ -36,7 +35,6 @@ export default function AccordionWindow(props: { tabsOpen={props.tabsOpen} setTabsOpen={props.setTabsOpen} hasChanged={props.changedPasses.has(name)} - isFailure={props.isFailure} /> ); })} @@ -51,7 +49,6 @@ function AccordionWindowItem({ tabsOpen, setTabsOpen, hasChanged, - isFailure, }: { name: string; tabs: TabsRecord; @@ -61,7 +58,7 @@ function AccordionWindowItem({ isFailure: boolean; }): React.ReactElement { const id = useId(); - const isShow = isFailure ? name === 'Output' : tabsOpen.has(name); + const isShow = tabsOpen.has(name); const transitionName = `accordion-window-item-${id}`; diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx index 8c22ca35fc9..573ded92fc9 100644 --- a/compiler/apps/playground/components/Editor/Output.tsx +++ b/compiler/apps/playground/components/Editor/Output.tsx @@ -27,6 +27,8 @@ import { useState, Suspense, unstable_ViewTransition as ViewTransition, + unstable_addTransitionType as addTransitionType, + startTransition, } from 'react'; import AccordionWindow from '../AccordionWindow'; import TabbedWindow from '../TabbedWindow'; @@ -35,6 +37,7 @@ import {BabelFileResult} from '@babel/core'; import { CONFIG_PANEL_TRANSITION, TOGGLE_INTERNALS_TRANSITION, + EXPAND_ACCORDION_TRANSITION, } from '../../lib/transitionTypes'; import {LRUCache} from 'lru-cache'; @@ -265,8 +268,22 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element { * Update the active tab back to the output or errors tab when the compilation state * changes between success/failure. */ - + const [previousOutputKind, setPreviousOutputKind] = useState( + compilerOutput.kind, + ); const isFailure = compilerOutput.kind !== 'ok'; + + if (compilerOutput.kind !== previousOutputKind) { + setPreviousOutputKind(compilerOutput.kind); + if (isFailure) { + startTransition(() => { + addTransitionType(EXPAND_ACCORDION_TRANSITION); + setTabsOpen(prev => new Set(prev).add('Output')); + setActiveTab('Output'); + }); + } + } + const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold let lastResult: string = ''; for (const [passName, results] of compilerOutput.results) { @@ -295,8 +312,6 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element { tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} - // Display the Output tab on compilation failure - activeTabOverride={isFailure ? 'Output' : undefined} /> </ViewTransition> ); @@ -315,7 +330,6 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element { tabsOpen={tabsOpen} tabs={tabs} changedPasses={changedPasses} - isFailure={isFailure} /> </ViewTransition> ); diff --git a/compiler/apps/playground/components/TabbedWindow.tsx b/compiler/apps/playground/components/TabbedWindow.tsx index ceeb122dd33..30b7caa127f 100644 --- a/compiler/apps/playground/components/TabbedWindow.tsx +++ b/compiler/apps/playground/components/TabbedWindow.tsx @@ -17,15 +17,11 @@ export default function TabbedWindow({ tabs, activeTab, onTabChange, - activeTabOverride, }: { tabs: Map<string, React.ReactNode>; activeTab: string; onTabChange: (tab: string) => void; - activeTabOverride?: string; }): React.ReactElement { - const currentActiveTab = activeTabOverride ? activeTabOverride : activeTab; - const id = useId(); const transitionName = `tab-highlight-${id}`; @@ -41,7 +37,7 @@ export default function TabbedWindow({ <div className="flex flex-col h-full max-w-full"> <div className="flex p-2 flex-shrink-0"> {Array.from(tabs.keys()).map(tab => { - const isActive = currentActiveTab === tab; + const isActive = activeTab === tab; return ( <button key={tab} @@ -77,7 +73,7 @@ export default function TabbedWindow({ })} </div> <div className="flex-1 overflow-hidden w-full h-full"> - {tabs.get(currentActiveTab)} + {tabs.get(activeTab)} </div> </div> </div> From 6cfc9c1ff3138ba0d107b9e6249f47032c4da02d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:12:26 -0400 Subject: [PATCH 076/276] [DevTools] Don't measure fallbacks when suspended (#34850) We already do this in the update pass. That's what `shouldMeasureSuspenseNode` does. We also don't update measurements when we're inside an offscreen tree. However, we didn't check if the boundary itself was in a suspended state when in the `measureUnchangedSuspenseNodesRecursively` path. This caused boundaries to disappear when their fallback didn't have a rect (including their timeline entries). --- .../src/backend/fiber/renderer.js | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 688f1b473bf..6ff78a0ba68 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -3262,14 +3262,22 @@ export function attach( // We don't update rects inside disconnected subtrees. return; } - const nextRects = measureInstance(suspenseNode.instance); - const prevRects = suspenseNode.rects; - if (areEqualRects(prevRects, nextRects)) { - return; // Unchanged + const instance = suspenseNode.instance; + + const isSuspendedSuspenseComponent = + (instance.kind === FIBER_INSTANCE || + instance.kind === FILTERED_FIBER_INSTANCE) && + instance.data.tag === SuspenseComponent && + instance.data.memoizedState !== null; + if (isSuspendedSuspenseComponent) { + // This boundary itself was suspended and we don't measure those since that would measure + // the fallback. We want to keep a ghost of the rectangle of the content not currently shown. + return; } - // The rect has changed. While the bailed out root wasn't in a disconnected subtree, + + // While this boundary wasn't suspended and the bailed out root and wasn't in a disconnected subtree, // it's possible that this node was in one. So we need to check if we're offscreen. - let parent = suspenseNode.instance.parent; + let parent = instance.parent; while (parent !== null) { if ( (parent.kind === FIBER_INSTANCE || @@ -3285,6 +3293,13 @@ export function attach( } parent = parent.parent; } + + const nextRects = measureInstance(suspenseNode.instance); + const prevRects = suspenseNode.rects; + if (areEqualRects(prevRects, nextRects)) { + return; // Unchanged + } + // We changed inside a visible tree. // Since this boundary changed, it's possible it also affected its children so lets // measure them as well. From 751edd6e2cd2cb44aa302ffa667a0693e84e579d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:24:45 -0400 Subject: [PATCH 077/276] [DevTools] Measure text nodes (#34851) We can't measure Text nodes directly but we can measure a Range around them. This is useful since it's common, at least in examples, to use text nodes as children of a Suspense boundary. Especially fallbacks. --- .../src/backend/fiber/renderer.js | 21 +++++++++++++++++-- .../src/backend/views/Highlighter/Overlay.js | 7 +++++-- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 6ff78a0ba68..6e4426d3ee9 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2251,7 +2251,10 @@ export function attach( if (typeof instance !== 'object' || instance === null) { return null; } - if (typeof instance.getClientRects === 'function') { + if ( + typeof instance.getClientRects === 'function' || + instance.nodeType === 3 + ) { // DOM const doc = instance.ownerDocument; if (instance === doc.documentElement) { @@ -2273,7 +2276,21 @@ export function attach( const win = doc && doc.defaultView; const scrollX = win ? win.scrollX : 0; const scrollY = win ? win.scrollY : 0; - const rects = instance.getClientRects(); + let rects; + if (instance.nodeType === 3) { + // Text nodes cannot be measured directly but we can measure a Range. + if (typeof doc.createRange !== 'function') { + return null; + } + const range = doc.createRange(); + if (typeof range.getClientRects !== 'function') { + return null; + } + range.selectNodeContents(instance); + rects = range.getClientRects(); + } else { + rects = instance.getClientRects(); + } for (let i = 0; i < rects.length; i++) { const rect = rects[i]; result.push({ diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js index fdd059cc234..e55bdb4298c 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js @@ -187,10 +187,13 @@ export default class Overlay { } } - inspect(nodes: $ReadOnlyArray<HTMLElement>, name?: ?string) { + inspect(nodes: $ReadOnlyArray<HTMLElement | Text>, name?: ?string) { // We can't get the size of text nodes or comment nodes. React as of v15 // heavily uses comment nodes to delimit text. - const elements = nodes.filter(node => node.nodeType === Node.ELEMENT_NODE); + // TODO: We actually can measure text nodes. We should. + const elements: $ReadOnlyArray<HTMLElement> = (nodes.filter( + node => node.nodeType === Node.ELEMENT_NODE, + ): any); while (this.rects.length > elements.length) { const rect = this.rects.pop(); From 5747cadf44c0895a891f8c17489b8516829ef6ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:25:46 -0400 Subject: [PATCH 078/276] [DevTools] Don't hide overflow rectangles (#34852) I get the wish to click the shadow but not all child boundaries are within the bounds of the outer Suspense boundary's node. Sometimes they overflow naturally and if we make it overflow hidden we hide the boundaries. Maybe it would be ok if they're actually clipped by the real DOM but right now it covers up boundaries that should be there. Additionally, there's also a common case where the parent boundary shrinks when suspending the children. That then causes the suspended child boundaries to be clipped so that you can't restore them. Maybe the virtual boundary shouldn't shrink in this case. --- .../src/devtools/views/SuspenseTab/SuspenseRects.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index ba862051d95..bfc53d8b848 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -19,11 +19,6 @@ .SuspenseRectsBoundaryChildren { pointer-events: none; - /** - * So that the shadow of Boundaries within is clipped off. - * Otherwise it would look like this boundary is further elevated. - */ - overflow: hidden; } .SuspenseRectsScaledRect[data-visible='false'] > .SuspenseRectsBoundaryChildren { From 6773248311fca29669283e1059f11c9009f8f51b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:26:07 -0400 Subject: [PATCH 079/276] [DevTools] Track whether a boundary is currently suspended and make transparent (#34853) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This makes the rects that are currently in a suspended state appear ghostly so that you can see where along the timeline you are in the rects screen. <img width="451" height="407" alt="Screenshot 2025-10-14 at 11 43 20 PM" src="https://github.com/user-attachments/assets/f89e362b-a0d5-46e3-8171-564909715cd1" /> --- .../src/backend/fiber/renderer.js | 58 +++++++++++++++---- .../src/backend/legacy/renderer.js | 1 + .../src/devtools/store.js | 8 ++- .../views/Profiler/CommitTreeBuilder.js | 12 ++-- .../views/SuspenseTab/SuspenseRects.css | 4 ++ .../views/SuspenseTab/SuspenseRects.js | 6 +- .../src/frontend/types.js | 1 + packages/react-devtools-shared/src/utils.js | 10 ++-- 8 files changed, 76 insertions(+), 24 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 6e4426d3ee9..b7fe41b96c5 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2139,8 +2139,8 @@ export function attach( // Regular operations pendingOperations.length + // All suspender changes are batched in a single message. - // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders]] - (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 2 : 0), + // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, isSuspended]] + (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 3 : 0), ); // Identify which renderer this update is coming from. @@ -2225,6 +2225,14 @@ export function attach( } operations[i++] = fiberIdWithChanges; operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0; + const instance = suspense.instance; + const isSuspended = + // TODO: Track if other SuspenseNode like SuspenseList rows are suspended. + (instance.kind === FIBER_INSTANCE || + instance.kind === FILTERED_FIBER_INSTANCE) && + instance.data.tag === SuspenseComponent && + instance.data.memoizedState !== null; + operations[i++] = isSuspended ? 1 : 0; operations[i++] = suspense.environments.size; suspense.environments.forEach((count, env) => { operations[i++] = getStringID(env); @@ -2657,9 +2665,15 @@ export function attach( const fiber = fiberInstance.data; const props = fiber.memoizedProps; // TODO: Compute a fallback name based on Owner, key etc. - const name = props === null ? null : props.name || null; + const name = + fiber.tag !== SuspenseComponent || props === null + ? null + : props.name || null; const nameStringID = getStringID(name); + const isSuspended = + fiber.tag === SuspenseComponent && fiber.memoizedState !== null; + if (__DEBUG__) { console.log('recordSuspenseMount()', suspenseInstance); } @@ -2670,6 +2684,7 @@ export function attach( pushOperation(fiberID); pushOperation(parentID); pushOperation(nameStringID); + pushOperation(isSuspended ? 1 : 0); const rects = suspenseInstance.rects; if (rects === null) { @@ -5038,15 +5053,24 @@ export function attach( const nextIsSuspended = isSuspendedOffscreen(nextFiber); if (isLegacySuspense) { - if ( - fiberInstance !== null && - fiberInstance.suspenseNode !== null && - (prevFiber.stateNode === null) !== (nextFiber.stateNode === null) - ) { - trackThrownPromisesFromRetryCache( - fiberInstance.suspenseNode, - nextFiber.stateNode, - ); + if (fiberInstance !== null && fiberInstance.suspenseNode !== null) { + const suspenseNode = fiberInstance.suspenseNode; + if ( + (prevFiber.stateNode === null) !== + (nextFiber.stateNode === null) + ) { + trackThrownPromisesFromRetryCache( + suspenseNode, + nextFiber.stateNode, + ); + } + if ( + (prevFiber.memoizedState === null) !== + (nextFiber.memoizedState === null) + ) { + // Toggle suspended state. + recordSuspenseSuspenders(suspenseNode); + } } } // The logic below is inspired by the code paths in updateSuspenseComponent() @@ -5194,6 +5218,14 @@ export function attach( ); } + if ( + (prevFiber.memoizedState === null) !== + (nextFiber.memoizedState === null) + ) { + // Toggle suspended state. + recordSuspenseSuspenders(suspenseNode); + } + shouldMeasureSuspenseNode = false; updateFlags |= updateSuspenseChildrenRecursively( nextContentFiber, @@ -5220,6 +5252,8 @@ export function attach( } trackThrownPromisesFromRetryCache(suspenseNode, nextFiber.stateNode); + // Toggle suspended state. + recordSuspenseSuspenders(suspenseNode); mountSuspenseChildrenRecursively( nextContentFiber, diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 46709c9a804..1262a8d4647 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -417,6 +417,7 @@ export function attach( pushOperation(id); pushOperation(parentID); pushOperation(getStringID(null)); // name + pushOperation(0); // isSuspended // TODO: Measure rect of root pushOperation(-1); } else { diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index eeb6da60f8a..86961f5bd91 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1552,7 +1552,8 @@ export default class Store extends EventEmitter<{ const id = operations[i + 1]; const parentID = operations[i + 2]; const nameStringID = operations[i + 3]; - const numRects = ((operations[i + 4]: any): number); + const isSuspended = operations[i + 4] === 1; + const numRects = ((operations[i + 5]: any): number); let name = stringTable[nameStringID]; if (this._idToSuspense.has(id)) { @@ -1579,7 +1580,7 @@ export default class Store extends EventEmitter<{ } } - i += 5; + i += 6; let rects: SuspenseNode['rects']; if (numRects === -1) { rects = null; @@ -1625,6 +1626,7 @@ export default class Store extends EventEmitter<{ name, rects, hasUniqueSuspenders: false, + isSuspended: isSuspended, }); hasSuspenseTreeChanged = true; @@ -1801,6 +1803,7 @@ export default class Store extends EventEmitter<{ for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const id = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; const environmentNames = []; for ( @@ -1832,6 +1835,7 @@ export default class Store extends EventEmitter<{ } suspense.hasUniqueSuspenders = hasUniqueSuspenders; + suspense.isSuspended = isSuspended; // TODO: Recompute the environment names. } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js index 28be5f9e1c7..4addf109166 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js @@ -378,7 +378,8 @@ function updateTree( const fiberID = operations[i + 1]; const parentID = operations[i + 2]; const nameStringID = operations[i + 3]; - const numRects = operations[i + 4]; + const isSuspended = operations[i + 4]; + const numRects = operations[i + 5]; const name = stringTable[nameStringID]; if (__DEBUG__) { @@ -388,16 +389,16 @@ function updateTree( } else { rects = '[' + - operations.slice(i + 5, i + 5 + numRects * 4).join(',') + + operations.slice(i + 6, i + 6 + numRects * 4).join(',') + ']'; } debug( 'Add suspense', - `node ${fiberID} (name=${JSON.stringify(name)}, rects={${rects}}) under ${parentID}`, + `node ${fiberID} (name=${JSON.stringify(name)}, rects={${rects}}) under ${parentID} suspended ${isSuspended}`, ); } - i += 5 + (numRects === -1 ? 0 : numRects * 4); + i += 6 + (numRects === -1 ? 0 : numRects * 4); break; } @@ -459,12 +460,13 @@ function updateTree( for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const suspenseNodeId = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; i += environmentNamesLength; if (__DEBUG__) { debug( 'Suspender changes', - `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} with ${String(environmentNamesLength)} environments`, + `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, ); } } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index bfc53d8b848..591d908735e 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -44,6 +44,10 @@ outline-width: 0; } +.SuspenseRectsScaledRect[data-suspended='true'] { + opacity: 0.3; +} + /* highlight this boundary */ .SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect { background-color: var(--color-background-hover); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index f949631be84..5f07bb61001 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -35,11 +35,13 @@ function ScaledRect({ className, rect, visible, + suspended, ...props }: { className: string, rect: Rect, visible: boolean, + suspended: boolean, ... }): React$Node { const viewBox = useContext(ViewBox); @@ -53,6 +55,7 @@ function ScaledRect({ {...props} className={styles.SuspenseRectsScaledRect + ' ' + className} data-visible={visible} + data-suspended={suspended} style={{ width, height, @@ -145,7 +148,8 @@ function SuspenseRects({ <ScaledRect rect={boundingBox} className={styles.SuspenseRectsBoundary} - visible={visible}> + visible={visible} + suspended={suspense.isSuspended}> <ViewBox.Provider value={boundingBox}> {visible && suspense.rects !== null && diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js index 7762af43e00..2a012ce33a1 100644 --- a/packages/react-devtools-shared/src/frontend/types.js +++ b/packages/react-devtools-shared/src/frontend/types.js @@ -200,6 +200,7 @@ export type SuspenseNode = { name: string | null, rects: null | Array<Rect>, hasUniqueSuspenders: boolean, + isSuspended: boolean, }; // Serialized version of ReactIOInfo diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 007db77f220..29ff6d566bd 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -340,9 +340,10 @@ export function printOperationsArray(operations: Array<number>) { const fiberID = operations[i + 1]; const parentID = operations[i + 2]; const nameStringID = operations[i + 3]; - const numRects = operations[i + 4]; + const isSuspended = operations[i + 4]; + const numRects = operations[i + 5]; - i += 5; + i += 6; const name = stringTable[nameStringID]; let rects: string; @@ -368,7 +369,7 @@ export function printOperationsArray(operations: Array<number>) { } logs.push( - `Add suspense node ${fiberID} (${String(name)},rects={${rects}}) under ${parentID}`, + `Add suspense node ${fiberID} (${String(name)},rects={${rects}}) under ${parentID} suspended ${isSuspended}`, ); break; } @@ -431,10 +432,11 @@ export function printOperationsArray(operations: Array<number>) { for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const id = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; i += environmentNamesLength; logs.push( - `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} with ${String(environmentNamesLength)} environments`, + `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, ); } From 77b2f909f6261ec2c5de75dbe76287ec6fead0d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:26:46 -0400 Subject: [PATCH 080/276] [DevTools] Attempt at a better "unique suspender" text (#34854) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Nobody knows what this terminology means. Also, this tooltip component sucks: <img width="634" height="137" alt="Screenshot 2025-10-15 at 12 04 49 AM" src="https://github.com/user-attachments/assets/a1c33650-7c7d-441f-8f8b-0ea7ebea9351" /> --- .../src/devtools/views/SuspenseTab/SuspenseTab.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index f7b63fa2c62..9ade19c3307 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -85,7 +85,9 @@ function ToggleUniqueSuspenders() { <Toggle isChecked={uniqueSuspendersOnly} onChange={handleToggleUniqueSuspenders} - title={'Only include boundaries with unique suspenders'}> + title={ + 'Filter Suspense which does not suspend, or if the parent also suspend on the same.' + }> <ButtonIcon type={uniqueSuspendersOnly ? 'filter-on' : 'filter-off'} /> </Toggle> ); From 1873ad7960da8fd8d497d03da8050ad88b8bcacf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 11:42:03 -0400 Subject: [PATCH 081/276] [DevTools] The bridge event types should only be defined in one direction (#34859) This revealed that a lot of the event types were defined on the wrong end of the bridge. It was also a problem that events with the same name couldn't have different arguments. --- packages/react-devtools-shared/src/bridge.js | 21 +++++++++---------- .../Components/InspectHostNodesToggle.js | 2 +- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index b6229192c23..3162dc215ff 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -217,10 +217,15 @@ export type BackendEvents = { selectElement: [number], shutdown: [], stopInspectingHost: [boolean], - syncSelectionFromBuiltinElementsPanel: [], syncSelectionToBuiltinElementsPanel: [], unsupportedRendererVersion: [], + extensionComponentsPanelShown: [], + extensionComponentsPanelHidden: [], + + resumeElementPolling: [], + pauseElementPolling: [], + // React Native style editor plug-in. isNativeStyleEditorSupported: [ {isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>}, @@ -240,8 +245,6 @@ type FrontendEvents = { clearWarningsForElementID: [ElementAndRendererID], copyElementPath: [CopyElementPathParams], deletePath: [DeletePath], - extensionComponentsPanelShown: [], - extensionComponentsPanelHidden: [], getBackendVersion: [], getBridgeProtocol: [], getIfHasUnsupportedRendererVersion: [], @@ -265,7 +268,7 @@ type FrontendEvents = { shutdown: [], startInspectingHost: [], startProfiling: [StartProfilingParams], - stopInspectingHost: [boolean], + stopInspectingHost: [], scrollToHostInstance: [ScrollToHostInstance], stopProfiling: [], storeAsGlobal: [StoreAsGlobalParams], @@ -275,6 +278,8 @@ type FrontendEvents = { viewAttributeSource: [ViewAttributeSourceParams], viewElementSource: [ElementAndRendererID], + syncSelectionFromBuiltinElementsPanel: [], + // React Native style editor plug-in. NativeStyleEditor_measure: [ElementAndRendererID], NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams], @@ -295,19 +300,13 @@ type FrontendEvents = { overrideProps: [OverrideValue], overrideState: [OverrideValue], - resumeElementPolling: [], - pauseElementPolling: [], - getHookSettings: [], }; class Bridge< OutgoingEvents: Object, IncomingEvents: Object, -> extends EventEmitter<{ - ...IncomingEvents, - ...OutgoingEvents, -}> { +> extends EventEmitter<IncomingEvents> { _isShutdown: boolean = false; _messageQueue: Array<any> = []; _scheduledFlush: boolean = false; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js index 2f2b9e9e91d..17a7b049cc9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js @@ -26,7 +26,7 @@ export default function InspectHostNodesToggle(): React.Node { logEvent({event_name: 'inspect-element-button-clicked'}); bridge.send('startInspectingHost'); } else { - bridge.send('stopInspectingHost', false); + bridge.send('stopInspectingHost'); } }, [bridge], From e096403c595d67b689473908a52979c76bbefb9e Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Wed, 15 Oct 2025 09:45:06 -0700 Subject: [PATCH 082/276] [compiler] Infer types for properties after holes in array patterns (#34847) In InferTypes when we infer types for properties during destructuring, we were breaking out of the loop when we encounter a hole in the array. Instead we should just skip that element and continue inferring later properties. Closes #34748 --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34847). * #34855 * __->__ #34847 --- .../src/TypeInference/InferTypes.ts | 2 +- ...setState-in-render-unbound-state.expect.md | 41 ++++++++++++++ ...nvalid-setState-in-render-unbound-state.js | 13 +++++ .../fixtures/compiler/holey-array.expect.md | 35 ------------ .../fixtures/compiler/holey-array.js | 11 ---- ...use-memo-transition-no-ispending.expect.md | 52 ++++++++++++++++++ ...eserve-use-memo-transition-no-ispending.js | 15 +++++ .../preserve-use-memo-unused-state.expect.md | 55 +++++++++++++++++++ .../preserve-use-memo-unused-state.js | 15 +++++ 9 files changed, 192 insertions(+), 47 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts b/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts index 1c4443e5a49..55974db14ce 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts @@ -393,7 +393,7 @@ function* generateInstructionTypes( shapeId: BuiltInArrayId, }); } else { - break; + continue; } } } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md new file mode 100644 index 00000000000..423076cc3a4 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md @@ -0,0 +1,41 @@ + +## Input + +```javascript +function Component(props) { + // Intentionally don't bind state, this repros a bug where we didn't + // infer the type of destructured properties after a hole in the array + let [, setState] = useState(); + setState(1); + return props.foo; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: ['TodoAdd'], + isComponent: 'TodoAdd', +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: Calling setState during render may trigger an infinite loop + +Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState). + +error.invalid-setState-in-render-unbound-state.ts:5:2 + 3 | // infer the type of destructured properties after a hole in the array + 4 | let [, setState] = useState(); +> 5 | setState(1); + | ^^^^^^^^ Found setState() in render + 6 | return props.foo; + 7 | } + 8 | +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js new file mode 100644 index 00000000000..58e2837692a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js @@ -0,0 +1,13 @@ +function Component(props) { + // Intentionally don't bind state, this repros a bug where we didn't + // infer the type of destructured properties after a hole in the array + let [, setState] = useState(); + setState(1); + return props.foo; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: ['TodoAdd'], + isComponent: 'TodoAdd', +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md deleted file mode 100644 index 160699b115b..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md +++ /dev/null @@ -1,35 +0,0 @@ - -## Input - -```javascript -function t(props) { - let [, setstate] = useState(); - setstate(1); - return props.foo; -} - -export const FIXTURE_ENTRYPOINT = { - fn: t, - params: ['TodoAdd'], - isComponent: 'TodoAdd', -}; - -``` - -## Code - -```javascript -function t(props) { - const [, setstate] = useState(); - setstate(1); - return props.foo; -} - -export const FIXTURE_ENTRYPOINT = { - fn: t, - params: ["TodoAdd"], - isComponent: "TodoAdd", -}; - -``` - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js deleted file mode 100644 index d76b88f5791..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js +++ /dev/null @@ -1,11 +0,0 @@ -function t(props) { - let [, setstate] = useState(); - setstate(1); - return props.foo; -} - -export const FIXTURE_ENTRYPOINT = { - fn: t, - params: ['TodoAdd'], - isComponent: 'TodoAdd', -}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md new file mode 100644 index 00000000000..c5bfe197c3a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md @@ -0,0 +1,52 @@ + +## Input + +```javascript +// @validatePreserveExistingMemoizationGuarantees +import {useCallback, useTransition} from 'react'; + +function useFoo() { + const [, /* isPending intentionally not captured */ start] = useTransition(); + + return useCallback(() => { + start(); + }, []); +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees +import { useCallback, useTransition } from "react"; + +function useFoo() { + const $ = _c(1); + const [, start] = useTransition(); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = () => { + start(); + }; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; + +``` + +### Eval output +(kind: ok) "[[ function params=0 ]]" \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js new file mode 100644 index 00000000000..d7560197f03 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js @@ -0,0 +1,15 @@ +// @validatePreserveExistingMemoizationGuarantees +import {useCallback, useTransition} from 'react'; + +function useFoo() { + const [, /* isPending intentionally not captured */ start] = useTransition(); + + return useCallback(() => { + start(); + }, []); +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md new file mode 100644 index 00000000000..84441267558 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md @@ -0,0 +1,55 @@ + +## Input + +```javascript +// @validatePreserveExistingMemoizationGuarantees +import {useCallback, useTransition} from 'react'; + +function useFoo() { + const [, /* state value intentionally not captured */ setState] = useState(); + + return useCallback(() => { + setState(x => x + 1); + }, []); +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees +import { useCallback, useTransition } from "react"; + +function useFoo() { + const $ = _c(1); + const [, setState] = useState(); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = () => { + setState(_temp); + }; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} +function _temp(x) { + return x + 1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; + +``` + +### Eval output +(kind: exception) useState is not defined \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js new file mode 100644 index 00000000000..e270d4f0192 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js @@ -0,0 +1,15 @@ +// @validatePreserveExistingMemoizationGuarantees +import {useCallback, useTransition} from 'react'; + +function useFoo() { + const [, /* state value intentionally not captured */ setState] = useState(); + + return useCallback(() => { + setState(x => x + 1); + }, []); +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; From 0fbb9b368393a85c728806e16630712bdafdd6b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 13:43:43 -0400 Subject: [PATCH 083/276] [DevTools] Don't highlight on timeline (#34861) I find it very frustrating that the highlight covers up the content that I'm trying to review when stepping through the timeline. It also triggered on keyboard navigation due to the focus which was annoying. We could highlight something in the rects instead potentially. --- .../views/SuspenseTab/SuspenseScrubber.js | 4 ++-- .../views/SuspenseTab/SuspenseTimeline.js | 21 ++++--------------- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js index 53d20b6467c..f1998aff4b1 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js @@ -31,9 +31,9 @@ export default function SuspenseScrubber({ max: number, value: number, highlight: number, - onBlur: () => void, + onBlur?: () => void, onChange: (index: number) => void, - onFocus: () => void, + onFocus?: () => void, onHoverSegment: (index: number) => void, onHoverLeave: () => void, }): React$Node { diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index 8ebb06899d6..9b708121342 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -11,7 +11,7 @@ import * as React from 'react'; import {useContext, useEffect} from 'react'; import {BridgeContext} from '../context'; import {TreeDispatcherContext} from '../Components/TreeContext'; -import {useHighlightHostInstance, useScrollToHostInstance} from '../hooks'; +import {useScrollToHostInstance} from '../hooks'; import { SuspenseTreeDispatcherContext, SuspenseTreeStateContext, @@ -25,8 +25,6 @@ function SuspenseTimelineInput() { const bridge = useContext(BridgeContext); const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); - const {highlightHostInstance, clearHighlightHostInstance} = - useHighlightHostInstance(); const scrollToHostInstance = useScrollToHostInstance(); const {timeline, timelineIndex, hoveredTimelineIndex, playing, autoScroll} = @@ -37,7 +35,6 @@ function SuspenseTimelineInput() { function switchSuspenseNode(nextTimelineIndex: number) { const nextSelectedSuspenseID = timeline[nextTimelineIndex]; - highlightHostInstance(nextSelectedSuspenseID); treeDispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: nextSelectedSuspenseID, @@ -52,23 +49,14 @@ function SuspenseTimelineInput() { switchSuspenseNode(pendingTimelineIndex); } - function handleBlur() { - clearHighlightHostInstance(); - } - function handleFocus() { switchSuspenseNode(timelineIndex); } function handleHoverSegment(hoveredValue: number) { - const suspenseID = timeline[hoveredValue]; - if (suspenseID === undefined) { - throw new Error( - `Suspense node not found for value ${hoveredValue} in timeline.`, - ); - } - highlightHostInstance(suspenseID); + // TODO: Consider highlighting the rect instead. } + function handleUnhoverSegment() {} function skipPrevious() { const nextSelectedSuspenseID = timeline[timelineIndex - 1]; @@ -180,11 +168,10 @@ function SuspenseTimelineInput() { max={max} value={timelineIndex} highlight={hoveredTimelineIndex} - onBlur={handleBlur} onChange={handleChange} onFocus={handleFocus} onHoverSegment={handleHoverSegment} - onHoverLeave={clearHighlightHostInstance} + onHoverLeave={handleUnhoverSegment} /> </div> </> From 903366b8b1ee4206020492c6e8140645c0cb563e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 13:43:55 -0400 Subject: [PATCH 084/276] [DevTools] Don't select on hover (#34860) We should only persist a selection once you click. Currently, we persist the selection if you just hover which means you lose your selection immediately when just starting to inspect. That's not what Chrome Elements tab does - it selects on click. --- .../src/backend/views/Highlighter/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 6fd93d3519c..894c4fba944 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -366,8 +366,6 @@ export default function setupHighlighter( // Don't pass the name explicitly. // It will be inferred from DOM tag and Fiber owner. showOverlay([target], null, agent, false); - - selectElementForNode(target); } function onPointerUp(event: MouseEvent) { From 85f415e33b95d65aaa29f92268b31d33060628ac Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Wed, 15 Oct 2025 16:23:31 -0700 Subject: [PATCH 085/276] =?UTF-8?q?[compiler]=20Fix=20fbt=20for=20the=20?= =?UTF-8?q?=E2=88=9Eth=20time=20(#34865)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We now do a single pass over the HIR, building up two data structures: * One tracks values that are known macro tags or macro calls. * One tracks operands of macro-related instructions so that we can later group them. After building up these data structures, we do a pass over the latter structure. For each macro call instruction, we recursively traverse its operands to ensure they're in the same scope. Thus, something like `fbt('hello' + fbt.param(foo(), "..."))` will correctly merge the fbt call, the `+` binary expression, the `fbt.param()` call, and `foo()` into a single scope. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34865). * #34855 * __->__ #34865 --- .../MemoizeFbtAndMacroOperandsInSameScope.ts | 195 ++++++++++-------- .../error.todo-fbt-param-nested-fbt.expect.md | 56 ----- ...preserve-whitespace-two-subtrees.expect.md | 34 +-- .../fbt/repro-fbt-param-nested-fbt.expect.md | 111 ++++++++++ ...d-fbt.js => repro-fbt-param-nested-fbt.js} | 0 ...ro-separately-memoized-fbt-param.expect.md | 78 +++++++ .../repro-separately-memoized-fbt-param.js | 22 ++ ...idx-method-no-outlining-wildcard.expect.md | 5 +- .../idx-method-no-outlining.expect.md | 5 +- 9 files changed, 341 insertions(+), 165 deletions(-) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/{error.todo-fbt-param-nested-fbt.js => repro-fbt-param-nested-fbt.js} (100%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts index 022890c1f25..4ae9978b589 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts @@ -7,14 +7,17 @@ import { HIRFunction, + Identifier, IdentifierId, + InstructionValue, makeInstructionId, MutableRange, Place, - ReactiveValue, + ReactiveScope, } from '../HIR'; import {Macro, MacroMethod} from '../HIR/Environment'; -import {eachReactiveValueOperand} from './visitors'; +import {eachInstructionValueOperand} from '../HIR/visitors'; +import {Iterable_some} from '../Utils/utils'; /** * This pass supports the `fbt` translation system (https://facebook.github.io/fbt/) @@ -48,24 +51,49 @@ export function memoizeFbtAndMacroOperandsInSameScope( ...Array.from(FBT_TAGS).map((tag): Macro => [tag, []]), ...(fn.env.config.customMacros ?? []), ]); - const fbtValues: Set<IdentifierId> = new Set(); + /** + * Set of all identifiers that load fbt or other macro functions or their nested + * properties, as well as values known to be the results of invoking macros + */ + const macroTagsCalls: Set<IdentifierId> = new Set(); + /** + * Mapping of lvalue => list of operands for all expressions where either + * the lvalue is a known fbt/macro call and/or the operands transitively + * contain fbt/macro calls. + * + * This is the key data structure that powers the scope merging: we start + * at the lvalues and merge operands into the lvalue's scope. + */ + const macroValues: Map<Identifier, Array<Identifier>> = new Map(); + // Tracks methods loaded from macros, like fbt.param or idx.foo const macroMethods = new Map<IdentifierId, Array<Array<MacroMethod>>>(); - while (true) { - let vsize = fbtValues.size; - let msize = macroMethods.size; - visit(fn, fbtMacroTags, fbtValues, macroMethods); - if (vsize === fbtValues.size && msize === macroMethods.size) { - break; + + visit(fn, fbtMacroTags, macroTagsCalls, macroMethods, macroValues); + + for (const root of macroValues.keys()) { + const scope = root.scope; + if (scope == null) { + continue; + } + // Merge the operands into the same scope if this is a known macro invocation + if (!macroTagsCalls.has(root.id)) { + continue; } + mergeScopes(root, scope, macroValues, macroTagsCalls); } - return fbtValues; + + return macroTagsCalls; } export const FBT_TAGS: Set<string> = new Set([ 'fbt', 'fbt:param', + 'fbt:enum', + 'fbt:plural', 'fbs', 'fbs:param', + 'fbs:enum', + 'fbs:plural', ]); export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([ 'fbt:param', @@ -75,10 +103,22 @@ export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([ function visit( fn: HIRFunction, fbtMacroTags: Set<Macro>, - fbtValues: Set<IdentifierId>, + macroTagsCalls: Set<IdentifierId>, macroMethods: Map<IdentifierId, Array<Array<MacroMethod>>>, + macroValues: Map<Identifier, Array<Identifier>>, ): void { for (const [, block] of fn.body.blocks) { + for (const phi of block.phis) { + const macroOperands: Array<Identifier> = []; + for (const operand of phi.operands.values()) { + if (macroValues.has(operand.identifier)) { + macroOperands.push(operand.identifier); + } + } + if (macroOperands.length !== 0) { + macroValues.set(phi.place.identifier, macroOperands); + } + } for (const instruction of block.instructions) { const {lvalue, value} = instruction; if (lvalue === null) { @@ -93,13 +133,13 @@ function visit( * We don't distinguish between tag names and strings, so record * all `fbt` string literals in case they are used as a jsx tag. */ - fbtValues.add(lvalue.identifier.id); + macroTagsCalls.add(lvalue.identifier.id); } else if ( value.kind === 'LoadGlobal' && matchesExactTag(value.binding.name, fbtMacroTags) ) { // Record references to `fbt` as a global - fbtValues.add(lvalue.identifier.id); + macroTagsCalls.add(lvalue.identifier.id); } else if ( value.kind === 'LoadGlobal' && matchTagRoot(value.binding.name, fbtMacroTags) !== null @@ -121,84 +161,66 @@ function visit( if (method.length > 1) { newMethods.push(method.slice(1)); } else { - fbtValues.add(lvalue.identifier.id); + macroTagsCalls.add(lvalue.identifier.id); } } } if (newMethods.length > 0) { macroMethods.set(lvalue.identifier.id, newMethods); } - } else if (isFbtCallExpression(fbtValues, value)) { - const fbtScope = lvalue.identifier.scope; - if (fbtScope === null) { - continue; - } - - /* - * if the JSX element's tag was `fbt`, mark all its operands - * to ensure that they end up in the same scope as the jsx element - * itself. - */ - for (const operand of eachReactiveValueOperand(value)) { - operand.identifier.scope = fbtScope; - - // Expand the jsx element's range to account for its operands - expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange); - fbtValues.add(operand.identifier.id); - } } else if ( - isFbtJsxExpression(fbtMacroTags, fbtValues, value) || - isFbtJsxChild(fbtValues, lvalue, value) + value.kind === 'PropertyLoad' && + macroTagsCalls.has(value.object.identifier.id) ) { - const fbtScope = lvalue.identifier.scope; - if (fbtScope === null) { - continue; - } - - /* - * if the JSX element's tag was `fbt`, mark all its operands - * to ensure that they end up in the same scope as the jsx element - * itself. - */ - for (const operand of eachReactiveValueOperand(value)) { - operand.identifier.scope = fbtScope; - - // Expand the jsx element's range to account for its operands - expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange); - - /* - * NOTE: we add the operands as fbt values so that they are also - * grouped with this expression - */ - fbtValues.add(operand.identifier.id); - } - } else if (fbtValues.has(lvalue.identifier.id)) { - const fbtScope = lvalue.identifier.scope; - if (fbtScope === null) { - return; - } - - for (const operand of eachReactiveValueOperand(value)) { - if ( - operand.identifier.name !== null && - operand.identifier.name.kind === 'named' - ) { - /* - * named identifiers were already locals, we only have to force temporaries - * into the same scope - */ - continue; + macroTagsCalls.add(lvalue.identifier.id); + } else if ( + isFbtJsxExpression(fbtMacroTags, macroTagsCalls, value) || + isFbtJsxChild(macroTagsCalls, lvalue, value) || + isFbtCallExpression(macroTagsCalls, value) + ) { + macroTagsCalls.add(lvalue.identifier.id); + macroValues.set( + lvalue.identifier, + Array.from( + eachInstructionValueOperand(value), + operand => operand.identifier, + ), + ); + } else if ( + Iterable_some(eachInstructionValueOperand(value), operand => + macroValues.has(operand.identifier), + ) + ) { + const macroOperands: Array<Identifier> = []; + for (const operand of eachInstructionValueOperand(value)) { + if (macroValues.has(operand.identifier)) { + macroOperands.push(operand.identifier); } - operand.identifier.scope = fbtScope; - - // Expand the jsx element's range to account for its operands - expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange); } + macroValues.set(lvalue.identifier, macroOperands); } } } } +function mergeScopes( + root: Identifier, + scope: ReactiveScope, + macroValues: Map<Identifier, Array<Identifier>>, + macroTagsCalls: Set<IdentifierId>, +): void { + const operands = macroValues.get(root); + if (operands == null) { + return; + } + for (const operand of operands) { + operand.scope = scope; + expandFbtScopeRange(scope.range, operand.mutableRange); + macroTagsCalls.add(operand.id); + mergeScopes(operand, scope, macroValues, macroTagsCalls); + } +} + function matchesExactTag(s: string, tags: Set<Macro>): boolean { return Array.from(tags).some(macro => typeof macro === 'string' @@ -229,39 +251,40 @@ function matchTagRoot( } function isFbtCallExpression( - fbtValues: Set<IdentifierId>, - value: ReactiveValue, + macroTagsCalls: Set<IdentifierId>, + value: InstructionValue, ): boolean { return ( (value.kind === 'CallExpression' && - fbtValues.has(value.callee.identifier.id)) || - (value.kind === 'MethodCall' && fbtValues.has(value.property.identifier.id)) + macroTagsCalls.has(value.callee.identifier.id)) || + (value.kind === 'MethodCall' && + macroTagsCalls.has(value.property.identifier.id)) ); } function isFbtJsxExpression( fbtMacroTags: Set<Macro>, - fbtValues: Set<IdentifierId>, - value: ReactiveValue, + macroTagsCalls: Set<IdentifierId>, + value: InstructionValue, ): boolean { return ( value.kind === 'JsxExpression' && ((value.tag.kind === 'Identifier' && - fbtValues.has(value.tag.identifier.id)) || + macroTagsCalls.has(value.tag.identifier.id)) || (value.tag.kind === 'BuiltinTag' && matchesExactTag(value.tag.name, fbtMacroTags))) ); } function isFbtJsxChild( - fbtValues: Set<IdentifierId>, + macroTagsCalls: Set<IdentifierId>, lvalue: Place | null, - value: ReactiveValue, + value: InstructionValue, ): boolean { return ( (value.kind === 'JsxExpression' || value.kind === 'JsxFragment') && lvalue !== null && - fbtValues.has(lvalue.identifier.id) + macroTagsCalls.has(lvalue.identifier.id) ); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md deleted file mode 100644 index eb8073282ef..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md +++ /dev/null @@ -1,56 +0,0 @@ - -## Input - -```javascript -import fbt from 'fbt'; -import {Stringify} from 'shared-runtime'; - -/** - * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. - * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: - * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier - * --- - * t3 - * --- - */ -function Component({firstname, lastname}) { - 'use memo'; - return ( - <Stringify> - {fbt( - [ - 'Name: ', - fbt.param('firstname', <Stringify key={0} name={firstname} />), - ', ', - fbt.param( - 'lastname', - <Stringify key={0} name={lastname}> - {fbt('(inner fbt)', 'Inner fbt value')} - </Stringify> - ), - ], - 'Name' - )} - </Stringify> - ); -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{firstname: 'first', lastname: 'last'}], - sequentialRenders: [{firstname: 'first', lastname: 'last'}], -}; - -``` - - -## Error - -``` -Line 19 Column 11: fbt: unsupported babel node: Identifier ---- -t3 ---- -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md index 1acfd65d165..c1a1a5891b3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md @@ -37,27 +37,31 @@ import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; function Foo(t0) { - const $ = _c(3); + const $ = _c(7); const { name1, name2 } = t0; let t1; if ($[0] !== name1 || $[1] !== name2) { + let t2; + if ($[3] !== name1) { + t2 = <b>{name1}</b>; + $[3] = name1; + $[4] = t2; + } else { + t2 = $[4]; + } + let t3; + if ($[5] !== name2) { + t3 = <b>{name2}</b>; + $[5] = name2; + $[6] = t3; + } else { + t3 = $[6]; + } t1 = fbt._( "{user1} and {user2} accepted your PR!", [ - fbt._param( - "user1", - - <span key={name1}> - <b>{name1}</b> - </span>, - ), - fbt._param( - "user2", - - <span key={name2}> - <b>{name2}</b> - </span>, - ), + fbt._param("user1", <span key={name1}>{t2}</span>), + fbt._param("user2", <span key={name2}>{t3}</span>), ], { hk: "2PxMie" }, ); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md new file mode 100644 index 00000000000..5ad089e1341 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md @@ -0,0 +1,111 @@ + +## Input + +```javascript +import fbt from 'fbt'; +import {Stringify} from 'shared-runtime'; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component({firstname, lastname}) { + 'use memo'; + return ( + <Stringify> + {fbt( + [ + 'Name: ', + fbt.param('firstname', <Stringify key={0} name={firstname} />), + ', ', + fbt.param( + 'lastname', + <Stringify key={0} name={lastname}> + {fbt('(inner fbt)', 'Inner fbt value')} + </Stringify> + ), + ], + 'Name' + )} + </Stringify> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstname: 'first', lastname: 'last'}], + sequentialRenders: [{firstname: 'first', lastname: 'last'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import fbt from "fbt"; +import { Stringify } from "shared-runtime"; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component(t0) { + "use memo"; + const $ = _c(5); + const { firstname, lastname } = t0; + let t1; + if ($[0] !== firstname || $[1] !== lastname) { + t1 = fbt._( + "Name: {firstname}, {lastname}", + [ + fbt._param( + "firstname", + + <Stringify key={0} name={firstname} />, + ), + fbt._param( + "lastname", + + <Stringify key={0} name={lastname}> + {fbt._("(inner fbt)", null, { hk: "36qNwF" })} + </Stringify>, + ), + ], + { hk: "3AiIf8" }, + ); + $[0] = firstname; + $[1] = lastname; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[3] !== t1) { + t2 = <Stringify>{t1}</Stringify>; + $[3] = t1; + $[4] = t2; + } else { + t2 = $[4]; + } + return t2; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ firstname: "first", lastname: "last" }], + sequentialRenders: [{ firstname: "first", lastname: "last" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"children":"Name: , "}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js similarity index 100% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md new file mode 100644 index 00000000000..b8d3ba638ee --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md @@ -0,0 +1,78 @@ + +## Input + +```javascript +import {fbt} from 'fbt'; +import {useState} from 'react'; + +const MIN = 10; + +function Component() { + const [count, setCount] = useState(0); + + return fbt( + 'Expected at least ' + + fbt.param('min', MIN, {number: true}) + + ' items, but got ' + + fbt.param('count', count, {number: true}) + + ' items.', + 'Error description' + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { fbt } from "fbt"; +import { useState } from "react"; + +const MIN = 10; + +function Component() { + const $ = _c(2); + const [count] = useState(0); + let t0; + if ($[0] !== count) { + t0 = fbt._( + { "*": { "*": "Expected at least {min} items, but got {count} items." } }, + [ + fbt._param( + "min", + + MIN, + [0], + ), + fbt._param( + "count", + + count, + [0], + ), + ], + { hk: "36gbz8" }, + ); + $[0] = count; + $[1] = t0; + } else { + t0 = $[1]; + } + return t0; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{}], +}; + +``` + +### Eval output +(kind: ok) Expected at least 10 items, but got 0 items. \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js new file mode 100644 index 00000000000..cacd332534b --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js @@ -0,0 +1,22 @@ +import {fbt} from 'fbt'; +import {useState} from 'react'; + +const MIN = 10; + +function Component() { + const [count, setCount] = useState(0); + + return fbt( + 'Expected at least ' + + fbt.param('min', MIN, {number: true}) + + ' items, but got ' + + fbt.param('count', count, {number: true}) + + ' items.', + 'Error description' + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md index 59875c8d2a8..455c416d840 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md @@ -73,7 +73,7 @@ function Component(props) { const groupName4 = t3; let t4; if ($[8] !== props) { - t4 = idx.hello_world.b.c(props, _temp3); + t4 = idx.hello_world.b.c(props, (__3) => __3.group.label); $[8] = props; $[9] = t4; } else { @@ -108,9 +108,6 @@ function Component(props) { } return t5; } -function _temp3(__3) { - return __3.group.label; -} function _temp2(__0) { return __0.group.label; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md index 9c748d84beb..cc5a4200a94 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md @@ -49,7 +49,7 @@ function Component(props) { const groupName2 = t1; let t2; if ($[4] !== props) { - t2 = idx.a.b(props, _temp2); + t2 = idx.a.b(props, (__1) => __1.group.label); $[4] = props; $[5] = t2; } else { @@ -74,9 +74,6 @@ function Component(props) { } return t3; } -function _temp2(__1) { - return __1.group.label; -} function _temp(_) { return _.group.label; } From 7385d1f61ac6fedb1473ee5aafb2c39d1a620a4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 10:49:23 -0400 Subject: [PATCH 086/276] [DevTools] Add inspection button to Suspense tab (#34867) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add inspection button to Suspense tab which lets you select only among Suspense nodes. It highlights all the DOM nodes in the root of the Suspense node instead of just the DOM element you hover. The name is inferred. <img width="1172" height="841" alt="Screenshot 2025-10-15 at 8 03 34 PM" src="https://github.com/user-attachments/assets/f04d965b-ef6e-4196-9ba0-51626148fa1a" /> --- .../src/__tests__/store-test.js | 2 +- .../src/backend/agent.js | 100 ++++++------------ .../src/backend/fiber/renderer.js | 46 +++++++- .../src/backend/flight/renderer.js | 3 + .../src/backend/legacy/renderer.js | 3 + .../src/backend/types.js | 1 + .../src/backend/views/Highlighter/index.js | 44 ++++++-- packages/react-devtools-shared/src/bridge.js | 2 +- .../Components/InspectHostNodesToggle.js | 8 +- .../devtools/views/SuspenseTab/SuspenseTab.js | 9 ++ 10 files changed, 140 insertions(+), 78 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 3638852c20b..c02d8130c30 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -1546,7 +1546,7 @@ describe('Store', () => { ▸ <Wrapper> `); - const deepestedNodeID = agent.getIDForHostInstance(ref.current); + const deepestedNodeID = agent.getIDForHostInstance(ref.current).id; await act(() => store.toggleIsCollapsed(deepestedNodeID, false)); expect(store).toMatchInlineSnapshot(` diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index fce8fe626d4..42fbbc9648a 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -455,7 +455,10 @@ export default class Agent extends EventEmitter<{ return renderer.getInstanceAndStyle(id); } - getIDForHostInstance(target: HostInstance): number | null { + getIDForHostInstance( + target: HostInstance, + onlySuspenseNodes?: boolean, + ): null | {id: number, rendererID: number} { if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') { // In React Native or non-DOM we simply pick any renderer that has a match. for (const rendererID in this._rendererInterfaces) { @@ -463,9 +466,14 @@ export default class Agent extends EventEmitter<{ (rendererID: any) ]: any): RendererInterface); try { - const match = renderer.getElementIDForHostInstance(target); - if (match != null) { - return match; + const id = onlySuspenseNodes + ? renderer.getSuspenseNodeIDForHostInstance(target) + : renderer.getElementIDForHostInstance(target); + if (id !== null) { + return { + id: id, + rendererID: +rendererID, + }; } } catch (error) { // Some old React versions might throw if they can't find a match. @@ -478,6 +486,7 @@ export default class Agent extends EventEmitter<{ // that is registered if there isn't an exact match. let bestMatch: null | Element = null; let bestRenderer: null | RendererInterface = null; + let bestRendererID: number = 0; // Find the nearest ancestor which is mounted by a React. for (const rendererID in this._rendererInterfaces) { const renderer = ((this._rendererInterfaces[ @@ -491,6 +500,7 @@ export default class Agent extends EventEmitter<{ // Exact match we can exit early. bestMatch = nearestNode; bestRenderer = renderer; + bestRendererID = +rendererID; break; } if (bestMatch === null || bestMatch.contains(nearestNode)) { @@ -498,12 +508,21 @@ export default class Agent extends EventEmitter<{ // so the new match is a deeper and therefore better match. bestMatch = nearestNode; bestRenderer = renderer; + bestRendererID = +rendererID; } } } if (bestRenderer != null && bestMatch != null) { try { - return bestRenderer.getElementIDForHostInstance(bestMatch); + const id = onlySuspenseNodes + ? bestRenderer.getSuspenseNodeIDForHostInstance(bestMatch) + : bestRenderer.getElementIDForHostInstance(bestMatch); + if (id !== null) { + return { + id, + rendererID: bestRendererID, + }; + } } catch (error) { // Some old React versions might throw if they can't find a match. // If so we should ignore it... @@ -514,65 +533,14 @@ export default class Agent extends EventEmitter<{ } getComponentNameForHostInstance(target: HostInstance): string | null { - // We duplicate this code from getIDForHostInstance to avoid an object allocation. - if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') { - // In React Native or non-DOM we simply pick any renderer that has a match. - for (const rendererID in this._rendererInterfaces) { - const renderer = ((this._rendererInterfaces[ - (rendererID: any) - ]: any): RendererInterface); - try { - const id = renderer.getElementIDForHostInstance(target); - if (id) { - return renderer.getDisplayNameForElementID(id); - } - } catch (error) { - // Some old React versions might throw if they can't find a match. - // If so we should ignore it... - } - } - return null; - } else { - // In the DOM we use a smarter mechanism to find the deepest a DOM node - // that is registered if there isn't an exact match. - let bestMatch: null | Element = null; - let bestRenderer: null | RendererInterface = null; - // Find the nearest ancestor which is mounted by a React. - for (const rendererID in this._rendererInterfaces) { - const renderer = ((this._rendererInterfaces[ - (rendererID: any) - ]: any): RendererInterface); - const nearestNode: null | Element = renderer.getNearestMountedDOMNode( - (target: any), - ); - if (nearestNode !== null) { - if (nearestNode === target) { - // Exact match we can exit early. - bestMatch = nearestNode; - bestRenderer = renderer; - break; - } - if (bestMatch === null || bestMatch.contains(nearestNode)) { - // If this is the first match or the previous match contains the new match, - // so the new match is a deeper and therefore better match. - bestMatch = nearestNode; - bestRenderer = renderer; - } - } - } - if (bestRenderer != null && bestMatch != null) { - try { - const id = bestRenderer.getElementIDForHostInstance(bestMatch); - if (id) { - return bestRenderer.getDisplayNameForElementID(id); - } - } catch (error) { - // Some old React versions might throw if they can't find a match. - // If so we should ignore it... - } - } - return null; + const match = this.getIDForHostInstance(target); + if (match !== null) { + const renderer = ((this._rendererInterfaces[ + (match.rendererID: any) + ]: any): RendererInterface); + return renderer.getDisplayNameForElementID(match.id); } + return null; } getBackendVersion: () => void = () => { @@ -971,9 +939,9 @@ export default class Agent extends EventEmitter<{ }; selectNode(target: HostInstance): void { - const id = this.getIDForHostInstance(target); - if (id !== null) { - this._bridge.send('selectElement', id); + const match = this.getIDForHostInstance(target); + if (match !== null) { + this._bridge.send('selectElement', match.id); } } diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index b7fe41b96c5..47902a44382 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -5793,7 +5793,28 @@ export function attach( return null; } if (devtoolsInstance.kind === FIBER_INSTANCE) { - return getDisplayNameForFiber(devtoolsInstance.data); + const fiber = devtoolsInstance.data; + if (fiber.tag === HostRoot) { + // The only reason you'd inspect a HostRoot is to show it as a SuspenseNode. + return 'Initial Paint'; + } + if (fiber.tag === SuspenseComponent || fiber.tag === ActivityComponent) { + // For Suspense and Activity components, we can show a better name + // by using the name prop or their owner. + const props = fiber.memoizedProps; + if (props.name != null) { + return props.name; + } + const owner = getUnfilteredOwner(fiber); + if (owner != null) { + if (typeof owner.tag === 'number') { + return getDisplayNameForFiber((owner: any)); + } else { + return owner.name || ''; + } + } + } + return getDisplayNameForFiber(fiber); } else { return devtoolsInstance.data.name || ''; } @@ -5834,6 +5855,28 @@ export function attach( return null; } + function getSuspenseNodeIDForHostInstance( + publicInstance: HostInstance, + ): number | null { + const instance = publicInstanceToDevToolsInstanceMap.get(publicInstance); + if (instance !== undefined) { + // Pick nearest unfiltered SuspenseNode instance. + let suspenseInstance = instance; + while ( + suspenseInstance.suspenseNode === null || + suspenseInstance.kind === FILTERED_FIBER_INSTANCE + ) { + if (suspenseInstance.parent === null) { + // We shouldn't get here since we'll always have a suspenseNode at the root. + return null; + } + suspenseInstance = suspenseInstance.parent; + } + return suspenseInstance.id; + } + return null; + } + function getElementAttributeByPath( id: number, path: Array<string | number>, @@ -8630,6 +8673,7 @@ export function attach( getDisplayNameForElementID, getNearestMountedDOMNode, getElementIDForHostInstance, + getSuspenseNodeIDForHostInstance, getInstanceAndStyle, getOwnersList, getPathForElement, diff --git a/packages/react-devtools-shared/src/backend/flight/renderer.js b/packages/react-devtools-shared/src/backend/flight/renderer.js index d0dc9094334..e26525a0d60 100644 --- a/packages/react-devtools-shared/src/backend/flight/renderer.js +++ b/packages/react-devtools-shared/src/backend/flight/renderer.js @@ -169,6 +169,9 @@ export function attach( getElementIDForHostInstance() { return null; }, + getSuspenseNodeIDForHostInstance() { + return null; + }, getInstanceAndStyle() { return { instance: null, diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 1262a8d4647..ccd9cdac3e0 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -1269,6 +1269,9 @@ export function attach( getDisplayNameForElementID, getNearestMountedDOMNode, getElementIDForHostInstance, + getSuspenseNodeIDForHostInstance(id: number): null { + return null; + }, getInstanceAndStyle, findHostInstancesForElementID: (id: number) => { const hostInstance = findHostInstanceForInternalID(id); diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 1052dc9d75b..67d6a5f834b 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -427,6 +427,7 @@ export type RendererInterface = { getComponentStack?: GetComponentStack, getNearestMountedDOMNode: (component: Element) => Element | null, getElementIDForHostInstance: GetElementIDForHostInstance, + getSuspenseNodeIDForHostInstance: GetElementIDForHostInstance, getDisplayNameForElementID: GetDisplayNameForElementID, getInstanceAndStyle(id: number): InstanceAndStyle, getProfilingData(): ProfilingDataBackend, diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 894c4fba944..b67b3964ed5 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -20,6 +20,7 @@ import type {RendererInterface} from '../../types'; // That is done by the React Native Inspector component. let iframesListeningTo: Set<HTMLIFrameElement> = new Set(); +let inspectOnlySuspenseNodes = false; export default function setupHighlighter( bridge: BackendBridge, @@ -33,7 +34,8 @@ export default function setupHighlighter( bridge.addListener('startInspectingHost', startInspectingHost); bridge.addListener('stopInspectingHost', stopInspectingHost); - function startInspectingHost() { + function startInspectingHost(onlySuspenseNodes: boolean) { + inspectOnlySuspenseNodes = onlySuspenseNodes; registerListenersOnWindow(window); } @@ -363,9 +365,37 @@ export default function setupHighlighter( } } - // Don't pass the name explicitly. - // It will be inferred from DOM tag and Fiber owner. - showOverlay([target], null, agent, false); + if (inspectOnlySuspenseNodes) { + // For Suspense nodes we want to highlight not the actual target but the nodes + // that are the root of the Suspense node. + // TODO: Consider if we should just do the same for other elements because the + // hovered node might just be one child of many in the Component. + const match = agent.getIDForHostInstance( + target, + inspectOnlySuspenseNodes, + ); + if (match !== null) { + const renderer = agent.rendererInterfaces[match.rendererID]; + if (renderer == null) { + console.warn( + `Invalid renderer id "${match.rendererID}" for element "${match.id}"`, + ); + return; + } + highlightHostInstance({ + displayName: renderer.getDisplayNameForElementID(match.id), + hideAfterTimeout: false, + id: match.id, + openBuiltinElementsPanel: false, + rendererID: match.rendererID, + scrollIntoView: false, + }); + } + } else { + // Don't pass the name explicitly. + // It will be inferred from DOM tag and Fiber owner. + showOverlay([target], null, agent, false); + } } function onPointerUp(event: MouseEvent) { @@ -374,9 +404,9 @@ export default function setupHighlighter( } const selectElementForNode = (node: HTMLElement) => { - const id = agent.getIDForHostInstance(node); - if (id !== null) { - bridge.send('selectElement', id); + const match = agent.getIDForHostInstance(node, inspectOnlySuspenseNodes); + if (match !== null) { + bridge.send('selectElement', match.id); } }; diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index 3162dc215ff..683b3419202 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -266,7 +266,7 @@ type FrontendEvents = { savedPreferences: [SavedPreferencesParams], setTraceUpdatesEnabled: [boolean], shutdown: [], - startInspectingHost: [], + startInspectingHost: [boolean], startProfiling: [StartProfilingParams], stopInspectingHost: [], scrollToHostInstance: [ScrollToHostInstance], diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js index 17a7b049cc9..1b8fd54dc5c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js @@ -14,7 +14,11 @@ import Toggle from '../Toggle'; import ButtonIcon from '../ButtonIcon'; import {logEvent} from 'react-devtools-shared/src/Logger'; -export default function InspectHostNodesToggle(): React.Node { +export default function InspectHostNodesToggle({ + onlySuspenseNodes, +}: { + onlySuspenseNodes?: boolean, +}): React.Node { const [isInspecting, setIsInspecting] = useState(false); const bridge = useContext(BridgeContext); @@ -24,7 +28,7 @@ export default function InspectHostNodesToggle(): React.Node { if (isChecked) { logEvent({event_name: 'inspect-element-button-clicked'}); - bridge.send('startInspectingHost'); + bridge.send('startInspectingHost', !!onlySuspenseNodes); } else { bridge.send('stopInspectingHost'); } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index 9ade19c3307..1344faf0a29 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -14,6 +14,7 @@ import { useLayoutEffect, useReducer, useRef, + Fragment, } from 'react'; import { @@ -21,6 +22,7 @@ import { localStorageSetItem, } from 'react-devtools-shared/src/storage'; import ButtonIcon, {type IconType} from '../ButtonIcon'; +import InspectHostNodesToggle from '../Components/InspectHostNodesToggle'; import InspectedElementErrorBoundary from '../Components/InspectedElementErrorBoundary'; import InspectedElement from '../Components/InspectedElement'; import portaledContent from '../portaledContent'; @@ -156,6 +158,7 @@ function ToggleInspectedElement({ } function SuspenseTab(_: {}) { + const store = useContext(StoreContext); const {hideSettings} = useContext(OptionsContext); const [state, dispatch] = useReducer<LayoutState, null, LayoutAction>( layoutReducer, @@ -367,6 +370,12 @@ function SuspenseTab(_: {}) { ) : ( <ToggleTreeList dispatch={dispatch} state={state} /> )} + {store.supportsClickToInspect && ( + <Fragment> + <InspectHostNodesToggle onlySuspenseNodes={true} /> + <div className={styles.VRule} /> + </Fragment> + )} <div className={styles.SuspenseBreadcrumbs}> <SuspenseBreadcrumbs /> </div> From 7bd8716acdd9a484e81addcaa923e0a69e61d533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 10:49:37 -0400 Subject: [PATCH 087/276] [DevTools] Don't try to load anonymous or empty urls (#34869) This triggers unnecessary fetches. --- .../parseHookNames/loadSourceAndMetadata.js | 32 ++++++++++--------- .../src/symbolicateSource.js | 3 ++ 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js index 6d3f1223f6f..7c40cabf97f 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js @@ -475,23 +475,25 @@ function loadSourceFiles( const fetchPromise = dedupedFetchPromises.get(runtimeSourceURL) || - fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => { - // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps, - // because then we need to parse the full source file as an AST. - if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) { - throw Error('Source code too large to parse'); - } + (runtimeSourceURL && !runtimeSourceURL.startsWith('<anonymous') + ? fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => { + // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps, + // because then we need to parse the full source file as an AST. + if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) { + throw Error('Source code too large to parse'); + } - if (__DEBUG__) { - console.groupCollapsed( - `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`, - ); - console.log(runtimeSourceCode); - console.groupEnd(); - } + if (__DEBUG__) { + console.groupCollapsed( + `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`, + ); + console.log(runtimeSourceCode); + console.groupEnd(); + } - return runtimeSourceCode; - }); + return runtimeSourceCode; + }) + : Promise.reject(new Error('Empty url'))); dedupedFetchPromises.set(runtimeSourceURL, fetchPromise); setterPromises.push( diff --git a/packages/react-devtools-shared/src/symbolicateSource.js b/packages/react-devtools-shared/src/symbolicateSource.js index 092b1f8187a..ebcf161dc96 100644 --- a/packages/react-devtools-shared/src/symbolicateSource.js +++ b/packages/react-devtools-shared/src/symbolicateSource.js @@ -52,6 +52,9 @@ export async function symbolicateSource( lineNumber: number, // 1-based columnNumber: number, // 1-based ): Promise<SourceMappedLocation | null> { + if (!sourceURL || sourceURL.startsWith('<anonymous')) { + return null; + } const resource = await fetchFileWithCaching(sourceURL).catch(() => null); if (resource == null) { return null; From 4e0074737826a1296eb028c53ce4f6b6db8d09ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 10:50:18 -0400 Subject: [PATCH 088/276] [DevTools] Don't pluralize if already plural (#34870) In a demo today, `cookies()` showed up as `cookieses`. While adorable, is wrong. --- .../src/devtools/views/utils.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js index 3b0de4118a2..a2d254bc27d 100644 --- a/packages/react-devtools-shared/src/devtools/views/utils.js +++ b/packages/react-devtools-shared/src/devtools/views/utils.js @@ -205,6 +205,27 @@ export function pluralize(word: string): string { return word; } + // Bail out if it's already plural. + switch (word) { + case 'men': + case 'women': + case 'children': + case 'feet': + case 'teeth': + case 'mice': + case 'people': + return word; + } + + if ( + /(ches|shes|ses|xes|zes)$/i.test(word) || + /[^s]ies$/i.test(word) || + /ves$/i.test(word) || + /[^s]s$/i.test(word) + ) { + return word; + } + switch (word) { case 'man': return 'men'; From 03ba0c76e15967fe0ac0413e9a8a55eb55f9e55f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 10:50:41 -0400 Subject: [PATCH 089/276] [DevTools] Include some sub-pixel precision in rects (#34873) Currently the sub-pixel precision is lost which can lead to things not lining up properly and being slightly off or overlapping. We need some sub-pixel precision. Ideally we'd just keep the floating point as is. I'm not sure why the operations is limited to integers. We don't send it as a typed array anyway it seems which would ideally be more optimal. Even if we did, we haven't defined a precision for the protocol. Is it 32bit integer? 64bit? If it's 64bit we can fit a float anyway. Ideally it would be more variable precision like just pushing into a typed array directly with the option to write whatever precision we want. --- .../src/backend/fiber/renderer.js | 16 ++++++++-------- .../react-devtools-shared/src/devtools/store.js | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 47902a44382..de178909b29 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2693,10 +2693,10 @@ export function attach( pushOperation(rects.length); for (let i = 0; i < rects.length; ++i) { const rect = rects[i]; - pushOperation(Math.round(rect.x)); - pushOperation(Math.round(rect.y)); - pushOperation(Math.round(rect.width)); - pushOperation(Math.round(rect.height)); + pushOperation(Math.round(rect.x * 1000)); + pushOperation(Math.round(rect.y * 1000)); + pushOperation(Math.round(rect.width * 1000)); + pushOperation(Math.round(rect.height * 1000)); } } } @@ -2765,10 +2765,10 @@ export function attach( pushOperation(rects.length); for (let i = 0; i < rects.length; ++i) { const rect = rects[i]; - pushOperation(Math.round(rect.x)); - pushOperation(Math.round(rect.y)); - pushOperation(Math.round(rect.width)); - pushOperation(Math.round(rect.height)); + pushOperation(Math.round(rect.x * 1000)); + pushOperation(Math.round(rect.y * 1000)); + pushOperation(Math.round(rect.width * 1000)); + pushOperation(Math.round(rect.height * 1000)); } } } diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 86961f5bd91..f1aa61bfe9b 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1587,10 +1587,10 @@ export default class Store extends EventEmitter<{ } else { rects = []; for (let rectIndex = 0; rectIndex < numRects; rectIndex++) { - const x = operations[i + 0]; - const y = operations[i + 1]; - const width = operations[i + 2]; - const height = operations[i + 3]; + const x = operations[i + 0] / 1000; + const y = operations[i + 1] / 1000; + const width = operations[i + 2] / 1000; + const height = operations[i + 3] / 1000; rects.push({x, y, width, height}); i += 4; } @@ -1763,10 +1763,10 @@ export default class Store extends EventEmitter<{ } else { nextRects = []; for (let rectIndex = 0; rectIndex < numRects; rectIndex++) { - const x = operations[i + 0]; - const y = operations[i + 1]; - const width = operations[i + 2]; - const height = operations[i + 3]; + const x = operations[i + 0] / 1000; + const y = operations[i + 1] / 1000; + const width = operations[i + 2] / 1000; + const height = operations[i + 3] / 1000; nextRects.push({x, y, width, height}); From d8aa94b0f4f22aadd4762b7ca1c690d3d85ae776 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Thu, 16 Oct 2025 18:00:41 +0200 Subject: [PATCH 090/276] Only capture stacks for up to 10 frames for Owner Stacks (#34864) --- packages/react/src/jsx/ReactJSXElement.js | 73 ++++++++++++++++++----- 1 file changed, 57 insertions(+), 16 deletions(-) diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js index a77c4c3cdbf..e23c998da51 100644 --- a/packages/react/src/jsx/ReactJSXElement.js +++ b/packages/react/src/jsx/ReactJSXElement.js @@ -57,6 +57,14 @@ function getOwner() { return null; } +// v8 (Chromium, Node.js) defaults to 10 +// SpiderMonkey (Firefox) does not support Error.stackTraceLimit +// JSC (Safari) defaults to 100 +// The lower the limit, the more likely we'll not reach react_stack_bottom_frame +// The higher the limit, the slower Error() is when not inspecting with a debugger. +// When inspecting with a debugger, Error.stackTraceLimit has no impact on Error() performance (in v8). +const ownerStackTraceLimit = 10; + /** @noinline */ function UnknownOwner() { /** @noinline */ @@ -352,15 +360,24 @@ export function jsxProdSignatureRunningInDevWithDynamicChildren( const trackActualOwner = __DEV__ && ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit; + let debugStackDEV = false; + if (__DEV__) { + if (trackActualOwner) { + const previousStackTraceLimit = Error.stackTraceLimit; + Error.stackTraceLimit = ownerStackTraceLimit; + debugStackDEV = Error('react-stack-top-frame'); + Error.stackTraceLimit = previousStackTraceLimit; + } else { + debugStackDEV = unknownOwnerDebugStack; + } + } + return jsxDEVImpl( type, config, maybeKey, isStaticChildren, - __DEV__ && - (trackActualOwner - ? Error('react-stack-top-frame') - : unknownOwnerDebugStack), + debugStackDEV, __DEV__ && (trackActualOwner ? createTask(getTaskName(type)) @@ -379,15 +396,23 @@ export function jsxProdSignatureRunningInDevWithStaticChildren( const trackActualOwner = __DEV__ && ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit; + let debugStackDEV = false; + if (__DEV__) { + if (trackActualOwner) { + const previousStackTraceLimit = Error.stackTraceLimit; + Error.stackTraceLimit = ownerStackTraceLimit; + debugStackDEV = Error('react-stack-top-frame'); + Error.stackTraceLimit = previousStackTraceLimit; + } else { + debugStackDEV = unknownOwnerDebugStack; + } + } return jsxDEVImpl( type, config, maybeKey, isStaticChildren, - __DEV__ && - (trackActualOwner - ? Error('react-stack-top-frame') - : unknownOwnerDebugStack), + debugStackDEV, __DEV__ && (trackActualOwner ? createTask(getTaskName(type)) @@ -408,15 +433,23 @@ export function jsxDEV(type, config, maybeKey, isStaticChildren) { const trackActualOwner = __DEV__ && ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit; + let debugStackDEV = false; + if (__DEV__) { + if (trackActualOwner) { + const previousStackTraceLimit = Error.stackTraceLimit; + Error.stackTraceLimit = ownerStackTraceLimit; + debugStackDEV = Error('react-stack-top-frame'); + Error.stackTraceLimit = previousStackTraceLimit; + } else { + debugStackDEV = unknownOwnerDebugStack; + } + } return jsxDEVImpl( type, config, maybeKey, isStaticChildren, - __DEV__ && - (trackActualOwner - ? Error('react-stack-top-frame') - : unknownOwnerDebugStack), + debugStackDEV, __DEV__ && (trackActualOwner ? createTask(getTaskName(type)) @@ -667,15 +700,23 @@ export function createElement(type, config, children) { const trackActualOwner = __DEV__ && ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit; + let debugStackDEV = false; + if (__DEV__) { + if (trackActualOwner) { + const previousStackTraceLimit = Error.stackTraceLimit; + Error.stackTraceLimit = ownerStackTraceLimit; + debugStackDEV = Error('react-stack-top-frame'); + Error.stackTraceLimit = previousStackTraceLimit; + } else { + debugStackDEV = unknownOwnerDebugStack; + } + } return ReactElement( type, key, props, getOwner(), - __DEV__ && - (trackActualOwner - ? Error('react-stack-top-frame') - : unknownOwnerDebugStack), + debugStackDEV, __DEV__ && (trackActualOwner ? createTask(getTaskName(type)) From dc1becd8937b5ff4e188fe5e9e5552740ef915e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 12:16:04 -0400 Subject: [PATCH 091/276] [DevTools] Remove steps title from scrubber (#34878) The hover now has a reach tooltip for the "environment" instead. --- .../src/devtools/views/SuspenseTab/SuspenseTimeline.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index 9b708121342..4712397632c 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -160,9 +160,7 @@ function SuspenseTimelineInput() { onClick={skipForward}> <ButtonIcon type={'skip-next'} /> </Button> - <div - className={styles.SuspenseTimelineInput} - title={timelineIndex + '/' + max}> + <div className={styles.SuspenseTimelineInput}> <SuspenseScrubber min={min} max={max} From 93f8593289538b0be7b0eefec85e9a6ca8f56738 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 12:16:16 -0400 Subject: [PATCH 092/276] [DevTools] Adjust the rects size by one pixel smaller (#34876) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This ensures that the outline of a previous rectangle lines up on the same pixel as the next rectangle so that they appear consecutive. <img width="244" height="51" alt="Screenshot 2025-10-16 at 11 35 32 AM" src="https://github.com/user-attachments/assets/75ffde6f-8cc6-49c1-8855-3953569546b4" /> I don't love this implementation. There's probably a smarter way. Was trying to avoid adding another element. --- .../src/devtools/views/SuspenseTab/SuspenseRects.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 5f07bb61001..c2a13191650 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -36,12 +36,14 @@ function ScaledRect({ rect, visible, suspended, + adjust, ...props }: { className: string, rect: Rect, visible: boolean, suspended: boolean, + adjust?: boolean, ... }): React$Node { const viewBox = useContext(ViewBox); @@ -57,8 +59,9 @@ function ScaledRect({ data-visible={visible} data-suspended={suspended} style={{ - width, - height, + // Shrink one pixel so that the bottom outline will line up with the top outline of the next one. + width: adjust ? 'calc(' + width + ' - 1px)' : width, + height: adjust ? 'calc(' + height + ' - 1px)' : height, top: y, left: x, }} @@ -160,6 +163,7 @@ function SuspenseRects({ className={styles.SuspenseRectsRect} rect={rect} data-highlighted={selected} + adjust={true} onClick={handleClick} onDoubleClick={handleDoubleClick} onPointerOver={handlePointerOver} From ed1351c4fb92f84657a0c1a2af5ccef2484f7bd7 Mon Sep 17 00:00:00 2001 From: "Henry Q. Dineen" <henryqdineen@users.noreply.github.com> Date: Thu, 16 Oct 2025 12:46:55 -0400 Subject: [PATCH 093/276] [compiler] improve zod v3 backwards compat (#34877) ## Summary When upgrading to `babel-plugin-react-compiler@1.0.0` in a project that uses `zod@3` we are running into TypeScript errors like: ``` node_modules/babel-plugin-react-compiler/dist/index.d.ts:435:10 - error TS2694: Namespace '"/REDACTED/node_modules/zod/v3/external"' has no exported member 'core'. 435 }, z.core.$strip>>>; ~~~~ ``` This problem seems to be related to d6eb735938bc67b41ad723206ea395ba4d761139, which introduced zod v3/v4 compatibility. Since `zod` is bundled into the compiler source this does not cause runtime issues and only manifests as TypeScript errors. My proposed solution is this PR is to use zod's [subpath versioning strategy](https://zod.dev/v4/versioning?id=versioning-in-zod-4) which allows you to support v3 and v4 APIs on both major versions. Changes in this PR include: - Updated `zod` import paths to `zod/v4` - Bumped min `zod` version to `^3.25.0` for zod which guarantees the `zod/v4` subpath is available. - Updated `zod-validation-error` import paths to `zod-validation-error/v4` - Bumped min `zod-validation-error ` version to `^3.5.0` - Updated `externals` tsup configuration where appropriate. Once the compiler drops zod v3 support we could optionally remove the `/v4` subpath from the imports. ## How did you test this change? Not totally sure the best way to test. I ran `NODE_ENV=production yarn workspace babel-plugin-react-compiler run build --dts` and diffed the `dist/` folder between my change and `v1.0.0` and it looks correct. We have a `patch-package` patch to workaround this for now and it works as expected. ```diff diff --git a/node_modules/babel-plugin-react-compiler/dist/index.d.ts b/node_modules/babel-plugin-react-compiler/dist/index.d.ts index 81c3f3d..daafc2c 100644 --- a/node_modules/babel-plugin-react-compiler/dist/index.d.ts +++ b/node_modules/babel-plugin-react-compiler/dist/index.d.ts @@ -1,7 +1,7 @@ import * as BabelCore from '@babel/core'; import { NodePath as NodePath$1 } from '@babel/core'; import * as t from '@babel/types'; -import { z } from 'zod'; +import { z } from 'zod/v4'; import { NodePath, Scope } from '@babel/traverse'; interface Result<T, E> { ``` Co-authored-by: Henry Q. Dineen <henryqdineen@gmail.com> --- .../babel-plugin-react-compiler/package.json | 4 ++-- .../src/Entrypoint/Options.ts | 4 ++-- .../src/HIR/Environment.ts | 4 ++-- .../babel-plugin-react-compiler/src/HIR/HIR.ts | 2 +- .../src/HIR/TypeSchema.ts | 2 +- .../src/Utils/TestUtils.ts | 2 +- .../eslint-plugin-react-compiler/package.json | 4 ++-- .../eslint-plugin-react-compiler/tsup.config.ts | 9 ++++++++- .../packages/react-compiler-healthcheck/package.json | 4 ++-- .../react-compiler-healthcheck/tsup.config.ts | 2 ++ compiler/packages/react-mcp-server/package.json | 2 +- compiler/packages/react-mcp-server/src/index.ts | 2 +- compiler/packages/snap/package.json | 4 +++- compiler/packages/snap/src/sprout/evaluator.ts | 4 ++-- compiler/yarn.lock | 12 ++++++------ packages/eslint-plugin-react-hooks/package.json | 4 ++-- scripts/rollup/bundles.js | 2 ++ yarn.lock | 10 +++++----- 18 files changed, 45 insertions(+), 32 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/package.json b/compiler/packages/babel-plugin-react-compiler/package.json index 8d3f1c8ae68..7647bcab1ca 100644 --- a/compiler/packages/babel-plugin-react-compiler/package.json +++ b/compiler/packages/babel-plugin-react-compiler/package.json @@ -52,8 +52,8 @@ "react-dom": "0.0.0-experimental-4beb1fd8-20241118", "ts-jest": "^29.1.1", "ts-node": "^10.9.2", - "zod": "^3.22.4 || ^4.0.0", - "zod-validation-error": "^3.0.3 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "resolutions": { "./**/@babel/parser": "7.7.4", diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts index 450972a4607..2a117b46617 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts @@ -6,7 +6,7 @@ */ import * as t from '@babel/types'; -import {z} from 'zod'; +import {z} from 'zod/v4'; import { CompilerDiagnostic, CompilerError, @@ -20,7 +20,7 @@ import { tryParseExternalFunction, } from '../HIR/Environment'; import {hasOwnProperty} from '../Utils/utils'; -import {fromZodError} from 'zod-validation-error'; +import {fromZodError} from 'zod-validation-error/v4'; import {CompilerPipelineValue} from './Pipeline'; const PanicThresholdOptionsSchema = z.enum([ diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index 7889e13c2f8..a31ef1c336e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -6,8 +6,8 @@ */ import * as t from '@babel/types'; -import {ZodError, z} from 'zod'; -import {fromZodError} from 'zod-validation-error'; +import {ZodError, z} from 'zod/v4'; +import {fromZodError} from 'zod-validation-error/v4'; import {CompilerError} from '../CompilerError'; import {Logger, ProgramContext} from '../Entrypoint'; import {Err, Ok, Result} from '../Utils/Result'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts index 4d2d4ed80d6..41e957a5467 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts @@ -16,7 +16,7 @@ import {assertExhaustive} from '../Utils/utils'; import {Environment, ReactFunctionType} from './Environment'; import type {HookKind} from './ObjectShape'; import {Type, makeType} from './Types'; -import {z} from 'zod'; +import {z} from 'zod/v4'; import type {AliasingEffect} from '../Inference/AliasingEffects'; import {isReservedWord} from '../Utils/Keyword'; import {Err, Ok, Result} from '../Utils/Result'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts index 42c7d2d89dc..eeaaebf7a39 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts @@ -6,7 +6,7 @@ */ import {isValidIdentifier} from '@babel/types'; -import {z} from 'zod'; +import {z} from 'zod/v4'; import {Effect, ValueKind} from '..'; import { EffectSchema, diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts index b28879f369a..e84c1e57aae 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import {fromZodError} from 'zod-validation-error'; +import {fromZodError} from 'zod-validation-error/v4'; import {CompilerError} from '../CompilerError'; import { CompilationMode, diff --git a/compiler/packages/eslint-plugin-react-compiler/package.json b/compiler/packages/eslint-plugin-react-compiler/package.json index 6c95bf495c6..3dd77d0e8bf 100644 --- a/compiler/packages/eslint-plugin-react-compiler/package.json +++ b/compiler/packages/eslint-plugin-react-compiler/package.json @@ -15,8 +15,8 @@ "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "hermes-parser": "^0.25.1", - "zod": "^3.22.4 || ^4.0.0", - "zod-validation-error": "^3.0.3 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "devDependencies": { "@babel/preset-env": "^7.22.4", diff --git a/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts b/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts index 4b4f5264394..716c2ffff35 100644 --- a/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts +++ b/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts @@ -10,7 +10,14 @@ import {defineConfig} from 'tsup'; export default defineConfig({ entry: ['./src/index.ts'], outDir: './dist', - external: ['@babel/core', 'hermes-parser', 'zod', 'zod-validation-error'], + external: [ + '@babel/core', + 'hermes-parser', + 'zod', + 'zod/v4', + 'zod-validation-error', + 'zod-validation-error/v4', + ], splitting: false, sourcemap: false, dts: false, diff --git a/compiler/packages/react-compiler-healthcheck/package.json b/compiler/packages/react-compiler-healthcheck/package.json index 61825b73d83..5c3d2f412d9 100644 --- a/compiler/packages/react-compiler-healthcheck/package.json +++ b/compiler/packages/react-compiler-healthcheck/package.json @@ -17,8 +17,8 @@ "fast-glob": "^3.3.2", "ora": "5.4.1", "yargs": "^17.7.2", - "zod": "^3.22.4 || ^4.0.0", - "zod-validation-error": "^3.0.3 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "devDependencies": {}, "engines": { diff --git a/compiler/packages/react-compiler-healthcheck/tsup.config.ts b/compiler/packages/react-compiler-healthcheck/tsup.config.ts index 7addc79bf90..7d2c738dc71 100644 --- a/compiler/packages/react-compiler-healthcheck/tsup.config.ts +++ b/compiler/packages/react-compiler-healthcheck/tsup.config.ts @@ -18,7 +18,9 @@ export default defineConfig({ 'ora', 'yargs', 'zod', + 'zod/v4', 'zod-validation-error', + 'zod-validation-error/v4', ], splitting: false, sourcemap: false, diff --git a/compiler/packages/react-mcp-server/package.json b/compiler/packages/react-mcp-server/package.json index 4d744c1d667..07dc378de12 100644 --- a/compiler/packages/react-mcp-server/package.json +++ b/compiler/packages/react-mcp-server/package.json @@ -24,7 +24,7 @@ "html-to-text": "^9.0.5", "prettier": "^3.3.3", "puppeteer": "^24.7.2", - "zod": "^3.22.4 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0" }, "devDependencies": { "@types/html-to-text": "^9.0.4", diff --git a/compiler/packages/react-mcp-server/src/index.ts b/compiler/packages/react-mcp-server/src/index.ts index 9c47346b3c7..e5bd794107d 100644 --- a/compiler/packages/react-mcp-server/src/index.ts +++ b/compiler/packages/react-mcp-server/src/index.ts @@ -7,7 +7,7 @@ import {McpServer} from '@modelcontextprotocol/sdk/server/mcp.js'; import {StdioServerTransport} from '@modelcontextprotocol/sdk/server/stdio.js'; -import {z} from 'zod'; +import {z} from 'zod/v4'; import {compile, type PrintedCompilerPipelineValue} from './compiler'; import { CompilerPipelineValue, diff --git a/compiler/packages/snap/package.json b/compiler/packages/snap/package.json index 60530f01dd4..085422ab830 100644 --- a/compiler/packages/snap/package.json +++ b/compiler/packages/snap/package.json @@ -37,7 +37,9 @@ "react": "0.0.0-experimental-4beb1fd8-20241118", "react-dom": "0.0.0-experimental-4beb1fd8-20241118", "readline": "^1.3.0", - "yargs": "^17.7.1" + "yargs": "^17.7.1", + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "devDependencies": { "@babel/core": "^7.19.1", diff --git a/compiler/packages/snap/src/sprout/evaluator.ts b/compiler/packages/snap/src/sprout/evaluator.ts index 8af8487d011..ba44f01b0aa 100644 --- a/compiler/packages/snap/src/sprout/evaluator.ts +++ b/compiler/packages/snap/src/sprout/evaluator.ts @@ -9,8 +9,8 @@ import {render} from '@testing-library/react'; import {JSDOM} from 'jsdom'; import React, {MutableRefObject} from 'react'; import util from 'util'; -import {z} from 'zod'; -import {fromZodError} from 'zod-validation-error'; +import {z} from 'zod/v4'; +import {fromZodError} from 'zod-validation-error/v4'; import {initFbt, toJSON} from './shared-runtime'; /** diff --git a/compiler/yarn.lock b/compiler/yarn.lock index daafc705fdc..764200c2ce9 100644 --- a/compiler/yarn.lock +++ b/compiler/yarn.lock @@ -11505,17 +11505,17 @@ zod-to-json-schema@^3.24.1: resolved "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.5.tgz" integrity sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g== -"zod-validation-error@^3.0.3 || ^4.0.0": +"zod-validation-error@^3.5.0 || ^4.0.0": version "4.0.2" resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918" integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ== -"zod@^3.22.4 || ^4.0.0": - version "4.1.11" - resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.11.tgz#4aab62f76cfd45e6c6166519ba31b2ea019f75f5" - integrity sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg== - zod@^3.23.8, zod@^3.24.1: version "3.24.3" resolved "https://registry.npmjs.org/zod/-/zod-3.24.3.tgz" integrity sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg== + +"zod@^3.25.0 || ^4.0.0": + version "4.1.12" + resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0" + integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ== diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index a22448f11c7..9a8f8ac353f 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -42,8 +42,8 @@ "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "hermes-parser": "^0.25.1", - "zod": "^3.22.4 || ^4.0.0", - "zod-validation-error": "^3.0.3 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "devDependencies": { "@babel/eslint-parser": "^7.11.4", diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index c66b43797f1..0a7b17ec2cc 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -1255,7 +1255,9 @@ const bundles = [ '@babel/core', 'hermes-parser', 'zod', + 'zod/v4', 'zod-validation-error', + 'zod-validation-error/v4', 'crypto', 'util', ], diff --git a/yarn.lock b/yarn.lock index 73519b9f695..ad8a3f0085c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18245,12 +18245,12 @@ zip-stream@^2.1.2: compress-commons "^2.1.1" readable-stream "^3.4.0" -"zod-validation-error@^3.0.3 || ^4.0.0": +"zod-validation-error@^3.5.0 || ^4.0.0": version "4.0.2" resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918" integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ== -"zod@^3.22.4 || ^4.0.0": - version "4.1.11" - resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.11.tgz#4aab62f76cfd45e6c6166519ba31b2ea019f75f5" - integrity sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg== +"zod@^3.25.0 || ^4.0.0": + version "4.1.12" + resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0" + integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ== From 5418d8bdc12ae00859029bcd2abc9eb65e8f4fb4 Mon Sep 17 00:00:00 2001 From: Ricky <rickhanlonii@gmail.com> Date: Thu, 16 Oct 2025 13:40:26 -0400 Subject: [PATCH 094/276] Fix changelog link (#34879) Closes https://github.com/reactjs/react.dev/issues/8081 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21704e3e29f..85d8f541245 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ Read the [React 19.2 release post](https://react.dev/blog/2025/10/01/react-19-2) - [`<Activity>`](https://react.dev/reference/react/Activity): A new API to hide and restore the UI and internal state of its children. - [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) is a React Hook that lets you extract non-reactive logic into an [Effect Event](https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event). - [`cacheSignal`](https://react.dev/reference/react/cacheSignal) (for RSCs) lets your know when the `cache()` lifetime is over. -- [React Performance tracks](https://react.dev/reference/developer-tooling/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools +- [React Performance tracks](https://react.dev/reference/dev-tools/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools ### New React DOM Features From 2381ecc290c588f6366bdcf377529668bb3cc360 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Eirinha?= <joao.eirinha@datadoghq.com> Date: Thu, 16 Oct 2025 19:18:01 +0100 Subject: [PATCH 095/276] [ESLint] Disallow passing effect event down when inlined as a prop (#34820) ## Summary Fixes https://github.com/facebook/react/issues/34793. We are allowing passing down effect events when they are inlined as a prop. ``` <Child onClick={useEffectEvent(...)} /> ``` This seems like a case that someone not familiar with `useEffectEvent`'s purpose could fall for so this PR introduces logic to disallow its usage. An alternative implementation would be to modify the name and function of `recordAllUseEffectEventFunctions` to record all `useEffectEvent` instances either assigned to a variable or not, but this seems clearer. Or we could also specifically disallow its usage inside JSX. Feel free to suggest any improvements. ## How did you test this change? - Added a new test in `packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js`. All tests pass. --- .../__tests__/ESLintRulesOfHooks-test.js | 19 ++++++++++++++ .../src/rules/RulesOfHooks.ts | 26 ++++++++++++++++++- 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js index 3e89624c6d3..05bdb1e71ed 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js @@ -1555,6 +1555,17 @@ const allTests = { `, errors: [useEffectEventError('onClick', false)], }, + { + code: normalizeIndent` + // Invalid because useEffectEvent is being passed down + function MyComponent({ theme }) { + return <Child onClick={useEffectEvent(() => { + showNotification(theme); + })} />; + } + `, + errors: [{...useEffectEventError(null, false), line: 4}], + }, { code: normalizeIndent` // This should error even though it shares an identifier name with the below @@ -1726,6 +1737,14 @@ function classError(hook) { } function useEffectEventError(fn, called) { + if (fn === null) { + return { + message: + `React Hook "useEffectEvent" can only be called at the top level of your component.` + + ` It cannot be passed down.`, + }; + } + return { message: `\`${fn}\` is a function created with React Hook "useEffectEvent", and can only be called from ` + diff --git a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts index ba398d850de..4e49e96bfe6 100644 --- a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts +++ b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts @@ -171,7 +171,15 @@ function isUseEffectEventIdentifier(node: Node): boolean { return node.type === 'Identifier' && node.name === 'useEffectEvent'; } -function useEffectEventError(fn: string, called: boolean): string { +function useEffectEventError(fn: string | null, called: boolean): string { + // no function identifier, i.e. it is not assigned to a variable + if (fn === null) { + return ( + `React Hook "useEffectEvent" can only be called at the top level of your component.` + + ` It cannot be passed down.` + ); + } + return ( `\`${fn}\` is a function created with React Hook "useEffectEvent", and can only be called from ` + 'Effects and Effect Events in the same component.' + @@ -772,6 +780,22 @@ const rule = { // comparison later when we exit lastEffect = node; } + + // Specifically disallow <Child onClick={useEffectEvent(...)} /> because this + // case can't be caught by `recordAllUseEffectEventFunctions` as it isn't assigned to a variable + if ( + isUseEffectEventIdentifier(nodeWithoutNamespace) && + node.parent?.type !== 'VariableDeclarator' && + // like in other hooks, calling useEffectEvent at component's top level without assignment is valid + node.parent?.type !== 'ExpressionStatement' + ) { + const message = useEffectEventError(null, false); + + context.report({ + node, + message, + }); + } }, Identifier(node) { From 0e32da71c7540f50ef6bb4bf084043678daae28b Mon Sep 17 00:00:00 2001 From: Damjan Petrovic <146435419+pet210702@users.noreply.github.com> Date: Thu, 16 Oct 2025 20:20:21 +0200 Subject: [PATCH 096/276] Add MIT license header to feature flag utility script (#34833) Added the standard Meta Platforms, Inc. MIT license notice to the top of the feature flag comparison script to ensure compliance with repository licensing requirements and for code consistency. **No functional or logic changes were made to the code.** --- scripts/flags/flags.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/scripts/flags/flags.js b/scripts/flags/flags.js index 1130ce80bb0..a02b4d84b34 100644 --- a/scripts/flags/flags.js +++ b/scripts/flags/flags.js @@ -1,3 +1,9 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ 'use strict'; const babel = require('@babel/register'); From 7f5ea1bf67a1a920919ebe2ae6657bdebe505aa0 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Thu, 16 Oct 2025 13:05:18 -0700 Subject: [PATCH 097/276] [compiler] More useMemo validation (#34868) Two additional validations for useMemo: * Disallow reassigning to values declared outside the useMemo callback (always on) * Disallow unused useMemo calls (part of the validateNoVoidUseMemo feature flag, which in turn is off by default) We should probably enable this flag though! --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34868). * #34855 * #34882 * __->__ #34868 --- .../src/Inference/DropManualMemoization.ts | 6 +- .../src/Validation/ValidateUseMemo.ts | 91 ++++++++++++++++++- ...lid-reassign-variable-in-usememo.expect.md | 38 ++++++++ ...or.invalid-reassign-variable-in-usememo.js | 10 ++ .../error.invalid-unused-usememo.expect.md | 35 +++++++ .../compiler/error.invalid-unused-usememo.js | 7 ++ .../error.useMemo-no-return-value.expect.md | 4 +- .../__tests__/PluginTest-test.ts | 2 +- 8 files changed, 182 insertions(+), 11 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts index f86747618dd..d31cd1446b9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts @@ -458,9 +458,9 @@ export function dropManualMemoization( reason: 'useMemo() callbacks must return a value', description: `This ${ manualMemo.loadInstr.value.kind === 'PropertyLoad' - ? 'React.useMemo' - : 'useMemo' - } callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects`, + ? 'React.useMemo()' + : 'useMemo()' + } callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`, suggestions: null, }).withDetails({ kind: 'error', diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts index de74af93b6d..0fdfeaab3ea 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts @@ -10,7 +10,16 @@ import { CompilerError, ErrorCategory, } from '../CompilerError'; -import {FunctionExpression, HIRFunction, IdentifierId} from '../HIR'; +import { + FunctionExpression, + HIRFunction, + IdentifierId, + SourceLocation, +} from '../HIR'; +import { + eachInstructionValueOperand, + eachTerminalOperand, +} from '../HIR/visitors'; import {Result} from '../Utils/Result'; export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { @@ -18,8 +27,19 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { const useMemos = new Set<IdentifierId>(); const react = new Set<IdentifierId>(); const functions = new Map<IdentifierId, FunctionExpression>(); + const unusedUseMemos = new Map<IdentifierId, SourceLocation>(); for (const [, block] of fn.body.blocks) { for (const {lvalue, value} of block.instructions) { + if (unusedUseMemos.size !== 0) { + /** + * Most of the time useMemo results are referenced immediately. Don't bother + * scanning instruction operands for useMemos unless there is an as-yet-unused + * useMemo. + */ + for (const operand of eachInstructionValueOperand(value)) { + unusedUseMemos.delete(operand.identifier.id); + } + } switch (value.kind) { case 'LoadGlobal': { if (value.binding.name === 'useMemo') { @@ -45,10 +65,8 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { case 'CallExpression': { // Is the function being called useMemo, with at least 1 argument? const callee = - value.kind === 'CallExpression' - ? value.callee.identifier.id - : value.property.identifier.id; - const isUseMemo = useMemos.has(callee); + value.kind === 'CallExpression' ? value.callee : value.property; + const isUseMemo = useMemos.has(callee.identifier.id); if (!isUseMemo || value.args.length === 0) { continue; } @@ -104,10 +122,73 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { ); } + validateNoContextVariableAssignment(body.loweredFunc.func, errors); + + if (fn.env.config.validateNoVoidUseMemo) { + unusedUseMemos.set(lvalue.identifier.id, callee.loc); + } break; } } } + if (unusedUseMemos.size !== 0) { + for (const operand of eachTerminalOperand(block.terminal)) { + unusedUseMemos.delete(operand.identifier.id); + } + } + } + if (unusedUseMemos.size !== 0) { + /** + * Basic check for unused memos, where the result of the call is never referenced. This runs + * before DCE so it's more of an AST-level check that something, _anything_, cares about the value. + * + * This is easy to defeat with e.g. `const _ = useMemo(...)` but it at least gives us something to teach. + * Even a DCE-based version could be bypassed with `noop(useMemo(...))`. + */ + for (const loc of unusedUseMemos.values()) { + errors.pushDiagnostic( + CompilerDiagnostic.create({ + category: ErrorCategory.VoidUseMemo, + reason: 'Unused useMemo()', + description: `This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects`, + suggestions: null, + }).withDetails({ + kind: 'error', + loc, + message: 'useMemo() result is unused', + }), + ); + } } return errors.asResult(); } + +function validateNoContextVariableAssignment( + fn: HIRFunction, + errors: CompilerError, +): void { + for (const block of fn.body.blocks.values()) { + for (const instr of block.instructions) { + const value = instr.value; + switch (value.kind) { + case 'StoreContext': { + errors.pushDiagnostic( + CompilerDiagnostic.create({ + category: ErrorCategory.UseMemo, + reason: + 'useMemo() callbacks may not reassign variables declared outside of the callback', + description: + 'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function', + suggestions: null, + }).withDetails({ + kind: 'error', + loc: value.lvalue.place.loc, + message: 'Cannot reassign variable', + }), + ); + break; + } + } + } + } +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md new file mode 100644 index 00000000000..ba35168bcfe --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md @@ -0,0 +1,38 @@ + +## Input + +```javascript +function Component() { + let x; + const y = useMemo(() => { + let z; + x = []; + z = true; + return z; + }, []); + return [x, y]; +} + +``` + + +## Error + +``` +Found 1 error: + +Error: useMemo() callbacks may not reassign variables declared outside of the callback + +useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function. + +error.invalid-reassign-variable-in-usememo.ts:5:4 + 3 | const y = useMemo(() => { + 4 | let z; +> 5 | x = []; + | ^ Cannot reassign variable + 6 | z = true; + 7 | return z; + 8 | }, []); +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js new file mode 100644 index 00000000000..885ba4b52d5 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js @@ -0,0 +1,10 @@ +function Component() { + let x; + const y = useMemo(() => { + let z; + x = []; + z = true; + return z; + }, []); + return [x, y]; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md new file mode 100644 index 00000000000..3c84a0dda33 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md @@ -0,0 +1,35 @@ + +## Input + +```javascript +// @validateNoVoidUseMemo +function Component() { + useMemo(() => { + return []; + }, []); + return <div />; +} + +``` + + +## Error + +``` +Found 1 error: + +Error: Unused useMemo() + +This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects. + +error.invalid-unused-usememo.ts:3:2 + 1 | // @validateNoVoidUseMemo + 2 | function Component() { +> 3 | useMemo(() => { + | ^^^^^^^ useMemo() result is unused + 4 | return []; + 5 | }, []); + 6 | return <div />; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js new file mode 100644 index 00000000000..1983cd061a6 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js @@ -0,0 +1,7 @@ +// @validateNoVoidUseMemo +function Component() { + useMemo(() => { + return []; + }, []); + return <div />; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md index fb595964066..9b62c5364b6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md @@ -28,7 +28,7 @@ Found 2 errors: Error: useMemo() callbacks must return a value -This useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects. +This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects. error.useMemo-no-return-value.ts:3:16 1 | // @validateNoVoidUseMemo @@ -45,7 +45,7 @@ error.useMemo-no-return-value.ts:3:16 Error: useMemo() callbacks must return a value -This React.useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects. +This React.useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects. error.useMemo-no-return-value.ts:6:17 4 | console.log('computing'); diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts index 6efd069aafa..89eb2ab22f6 100644 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts +++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts @@ -120,7 +120,7 @@ testRule('plugin-recommended', TestRecommendedRules, { return <Child x={state} />; }`, - errors: [makeTestCaseError('useMemo() callbacks must return a value')], + errors: [makeTestCaseError('Unused useMemo()')], }, { name: 'Pipeline errors are reported', From 1324e1bb1f867e8b2108ca52a1d4e2d4ef56d2d9 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Thu, 16 Oct 2025 13:08:57 -0700 Subject: [PATCH 098/276] [compiler] Cleanup and enable validateNoVoidUseMemo (#34882) This is a great validation, so let's enable by default. Changes: * Move the validation logic into ValidateUseMemo alongside the new check that the useMemo result is used * Update the lint description * Make the void memo errors lint-only, they don't require us to skip compilation (as evidenced by the fact that we've had this validation off) --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34882). * #34855 * __->__ #34882 --- .../src/CompilerError.ts | 2 +- .../src/HIR/Environment.ts | 2 +- .../src/Inference/DropManualMemoization.ts | 48 -------------- .../src/Validation/ValidateUseMemo.ts | 37 ++++++++++- .../error.invalid-unused-usememo.expect.md | 35 ---------- .../error.useMemo-no-return-value.expect.md | 64 ------------------- .../compiler/invalid-unused-usememo.expect.md | 41 ++++++++++++ ...d-usememo.js => invalid-unused-usememo.js} | 2 +- .../invalid-useMemo-no-return-value.expect.md | 59 +++++++++++++++++ ....js => invalid-useMemo-no-return-value.js} | 2 +- .../invalid-useMemo-return-empty.expect.md | 33 ++++++++++ ...pty.js => invalid-useMemo-return-empty.js} | 1 + .../fixtures/compiler/repro.expect.md | 3 +- .../src/__tests__/fixtures/compiler/repro.js | 1 + .../compiler/useMemo-nested-ifs.expect.md | 11 +++- .../fixtures/compiler/useMemo-nested-ifs.js | 1 + .../compiler/useMemo-return-empty.expect.md | 22 ------- .../__tests__/PluginTest-test.ts | 10 ++- 18 files changed, 195 insertions(+), 179 deletions(-) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.invalid-unused-usememo.js => invalid-unused-usememo.js} (67%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.useMemo-no-return-value.js => invalid-useMemo-no-return-value.js} (85%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{useMemo-return-empty.js => invalid-useMemo-return-empty.js} (82%) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.expect.md diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts index 1c077edd8d8..3c131ea653e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts @@ -988,7 +988,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'void-use-memo', description: - 'Validates that useMemos always return a value. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.', + 'Validates that useMemos always return a value and that the result of the useMemo is used by the component/hook. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.', preset: LintRulePreset.RecommendedLatest, }; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index a31ef1c336e..4ec4a4a795f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -659,7 +659,7 @@ export const EnvironmentConfigSchema = z.object({ * Invalid: * useMemo(() => { ... }, [...]); */ - validateNoVoidUseMemo: z.boolean().default(false), + validateNoVoidUseMemo: z.boolean().default(true), /** * Validates that Components/Hooks are always defined at module level. This prevents scope diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts index d31cd1446b9..0876424e28c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts @@ -438,40 +438,6 @@ export function dropManualMemoization( continue; } - /** - * Bailout on void return useMemos. This is an anti-pattern where code might be using - * useMemo like useEffect: running arbirtary side-effects synced to changes in specific - * values. - */ - if ( - func.env.config.validateNoVoidUseMemo && - manualMemo.kind === 'useMemo' - ) { - const funcToCheck = sidemap.functions.get( - fnPlace.identifier.id, - )?.value; - if (funcToCheck !== undefined && funcToCheck.loweredFunc.func) { - if (!hasNonVoidReturn(funcToCheck.loweredFunc.func)) { - errors.pushDiagnostic( - CompilerDiagnostic.create({ - category: ErrorCategory.VoidUseMemo, - reason: 'useMemo() callbacks must return a value', - description: `This ${ - manualMemo.loadInstr.value.kind === 'PropertyLoad' - ? 'React.useMemo()' - : 'useMemo()' - } callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`, - suggestions: null, - }).withDetails({ - kind: 'error', - loc: instr.value.loc, - message: 'useMemo() callbacks must return a value', - }), - ); - } - } - } - instr.value = getManualMemoizationReplacement( fnPlace, instr.value.loc, @@ -629,17 +595,3 @@ function findOptionalPlaces(fn: HIRFunction): Set<IdentifierId> { } return optionals; } - -function hasNonVoidReturn(func: HIRFunction): boolean { - for (const [, block] of func.body.blocks) { - if (block.terminal.kind === 'return') { - if ( - block.terminal.returnVariant === 'Explicit' || - block.terminal.returnVariant === 'Implicit' - ) { - return true; - } - } - } - return false; -} diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts index 0fdfeaab3ea..05a4b4b91f5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts @@ -24,6 +24,7 @@ import {Result} from '../Utils/Result'; export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { const errors = new CompilerError(); + const voidMemoErrors = new CompilerError(); const useMemos = new Set<IdentifierId>(); const react = new Set<IdentifierId>(); const functions = new Map<IdentifierId, FunctionExpression>(); @@ -125,7 +126,22 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { validateNoContextVariableAssignment(body.loweredFunc.func, errors); if (fn.env.config.validateNoVoidUseMemo) { - unusedUseMemos.set(lvalue.identifier.id, callee.loc); + if (!hasNonVoidReturn(body.loweredFunc.func)) { + voidMemoErrors.pushDiagnostic( + CompilerDiagnostic.create({ + category: ErrorCategory.VoidUseMemo, + reason: 'useMemo() callbacks must return a value', + description: `This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`, + suggestions: null, + }).withDetails({ + kind: 'error', + loc: body.loc, + message: 'useMemo() callbacks must return a value', + }), + ); + } else { + unusedUseMemos.set(lvalue.identifier.id, callee.loc); + } } break; } @@ -146,10 +162,10 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { * Even a DCE-based version could be bypassed with `noop(useMemo(...))`. */ for (const loc of unusedUseMemos.values()) { - errors.pushDiagnostic( + voidMemoErrors.pushDiagnostic( CompilerDiagnostic.create({ category: ErrorCategory.VoidUseMemo, - reason: 'Unused useMemo()', + reason: 'useMemo() result is unused', description: `This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects`, suggestions: null, }).withDetails({ @@ -160,6 +176,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { ); } } + fn.env.logErrors(voidMemoErrors.asResult()); return errors.asResult(); } @@ -192,3 +209,17 @@ function validateNoContextVariableAssignment( } } } + +function hasNonVoidReturn(func: HIRFunction): boolean { + for (const [, block] of func.body.blocks) { + if (block.terminal.kind === 'return') { + if ( + block.terminal.returnVariant === 'Explicit' || + block.terminal.returnVariant === 'Implicit' + ) { + return true; + } + } + } + return false; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md deleted file mode 100644 index 3c84a0dda33..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md +++ /dev/null @@ -1,35 +0,0 @@ - -## Input - -```javascript -// @validateNoVoidUseMemo -function Component() { - useMemo(() => { - return []; - }, []); - return <div />; -} - -``` - - -## Error - -``` -Found 1 error: - -Error: Unused useMemo() - -This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects. - -error.invalid-unused-usememo.ts:3:2 - 1 | // @validateNoVoidUseMemo - 2 | function Component() { -> 3 | useMemo(() => { - | ^^^^^^^ useMemo() result is unused - 4 | return []; - 5 | }, []); - 6 | return <div />; -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md deleted file mode 100644 index 9b62c5364b6..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md +++ /dev/null @@ -1,64 +0,0 @@ - -## Input - -```javascript -// @validateNoVoidUseMemo -function Component() { - const value = useMemo(() => { - console.log('computing'); - }, []); - const value2 = React.useMemo(() => { - console.log('computing'); - }, []); - return ( - <div> - {value} - {value2} - </div> - ); -} - -``` - - -## Error - -``` -Found 2 errors: - -Error: useMemo() callbacks must return a value - -This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects. - -error.useMemo-no-return-value.ts:3:16 - 1 | // @validateNoVoidUseMemo - 2 | function Component() { -> 3 | const value = useMemo(() => { - | ^^^^^^^^^^^^^^^ -> 4 | console.log('computing'); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 5 | }, []); - | ^^^^^^^^^ useMemo() callbacks must return a value - 6 | const value2 = React.useMemo(() => { - 7 | console.log('computing'); - 8 | }, []); - -Error: useMemo() callbacks must return a value - -This React.useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects. - -error.useMemo-no-return-value.ts:6:17 - 4 | console.log('computing'); - 5 | }, []); -> 6 | const value2 = React.useMemo(() => { - | ^^^^^^^^^^^^^^^^^^^^^ -> 7 | console.log('computing'); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 8 | }, []); - | ^^^^^^^^^ useMemo() callbacks must return a value - 9 | return ( - 10 | <div> - 11 | {value} -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md new file mode 100644 index 00000000000..a2aba4c7b91 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md @@ -0,0 +1,41 @@ + +## Input + +```javascript +// @validateNoVoidUseMemo @loggerTestOnly +function Component() { + useMemo(() => { + return []; + }, []); + return <div />; +} + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo @loggerTestOnly +function Component() { + const $ = _c(1); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = <div />; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + +``` + +## Logs + +``` +{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() result is unused","description":"This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":2,"index":67},"end":{"line":3,"column":9,"index":74},"filename":"invalid-unused-usememo.ts","identifierName":"useMemo"},"message":"useMemo() result is unused"}]}},"fnLoc":null} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":42},"end":{"line":7,"column":1,"index":127},"filename":"invalid-unused-usememo.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0} +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js similarity index 67% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js index 1983cd061a6..e254424949b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js @@ -1,4 +1,4 @@ -// @validateNoVoidUseMemo +// @validateNoVoidUseMemo @loggerTestOnly function Component() { useMemo(() => { return []; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md new file mode 100644 index 00000000000..24e62dad2be --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md @@ -0,0 +1,59 @@ + +## Input + +```javascript +// @validateNoVoidUseMemo @loggerTestOnly +function Component() { + const value = useMemo(() => { + console.log('computing'); + }, []); + const value2 = React.useMemo(() => { + console.log('computing'); + }, []); + return ( + <div> + {value} + {value2} + </div> + ); +} + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo @loggerTestOnly +function Component() { + const $ = _c(1); + + console.log("computing"); + + console.log("computing"); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = ( + <div> + {undefined} + {undefined} + </div> + ); + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + +``` + +## Logs + +``` +{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":24,"index":89},"end":{"line":5,"column":3,"index":130},"filename":"invalid-useMemo-no-return-value.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null} +{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":6,"column":31,"index":168},"end":{"line":8,"column":3,"index":209},"filename":"invalid-useMemo-no-return-value.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":42},"end":{"line":15,"column":1,"index":283},"filename":"invalid-useMemo-no-return-value.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0} +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js similarity index 85% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js index 0ce35e12f4f..781560fefa9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js @@ -1,4 +1,4 @@ -// @validateNoVoidUseMemo +// @validateNoVoidUseMemo @loggerTestOnly function Component() { const value = useMemo(() => { console.log('computing'); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md new file mode 100644 index 00000000000..c6737d78a1b --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md @@ -0,0 +1,33 @@ + +## Input + +```javascript +// @loggerTestOnly +function component(a) { + let x = useMemo(() => { + mutate(a); + }, []); + return x; +} + +``` + +## Code + +```javascript +// @loggerTestOnly +function component(a) { + mutate(a); +} + +``` + +## Logs + +``` +{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":18,"index":61},"end":{"line":5,"column":3,"index":87},"filename":"invalid-useMemo-return-empty.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":19},"end":{"line":7,"column":1,"index":107},"filename":"invalid-useMemo-return-empty.ts"},"fnName":"component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":1,"prunedMemoValues":0} +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js similarity index 82% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js index 0d9b54d989b..d70bd138113 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js @@ -1,3 +1,4 @@ +// @loggerTestOnly function component(a) { let x = useMemo(() => { mutate(a); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md index d3fe3045c02..9ca367e8a8e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @validateNoVoidUseMemo:false function Component(props) { const item = props.item; const thumbnails = []; @@ -22,7 +23,7 @@ function Component(props) { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo:false function Component(props) { const $ = _c(6); const item = props.item; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js index 9f5d7852668..de3026e4e58 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js @@ -1,3 +1,4 @@ +// @validateNoVoidUseMemo:false function Component(props) { const item = props.item; const thumbnails = []; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md index f7b3605f4d5..e0525518c96 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md @@ -6,6 +6,7 @@ function Component(props) { const x = useMemo(() => { if (props.cond) { if (props.cond) { + return props.value; } } }, [props.cond]); @@ -24,10 +25,18 @@ export const FIXTURE_ENTRYPOINT = { ```javascript function Component(props) { - if (props.cond) { + let t0; + bb0: { if (props.cond) { + if (props.cond) { + t0 = props.value; + break bb0; + } } + t0 = undefined; } + const x = t0; + return x; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js index f9b329e1290..d122dcc7a3e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js @@ -2,6 +2,7 @@ function Component(props) { const x = useMemo(() => { if (props.cond) { if (props.cond) { + return props.value; } } }, [props.cond]); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.expect.md deleted file mode 100644 index be20ee39bd4..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.expect.md +++ /dev/null @@ -1,22 +0,0 @@ - -## Input - -```javascript -function component(a) { - let x = useMemo(() => { - mutate(a); - }, []); - return x; -} - -``` - -## Code - -```javascript -function component(a) { - mutate(a); -} - -``` - \ No newline at end of file diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts index 89eb2ab22f6..e0063bc0a2c 100644 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts +++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts @@ -120,7 +120,15 @@ testRule('plugin-recommended', TestRecommendedRules, { return <Child x={state} />; }`, - errors: [makeTestCaseError('Unused useMemo()')], + errors: [ + makeTestCaseError('useMemo() callbacks must return a value'), + makeTestCaseError( + 'Calling setState from useMemo may trigger an infinite loop', + ), + makeTestCaseError( + 'Calling setState from useMemo may trigger an infinite loop', + ), + ], }, { name: 'Pipeline errors are reported', From adbc32de32bc52f9014cedb5ff5a502be35aff51 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Fri, 17 Oct 2025 11:37:28 -0700 Subject: [PATCH 099/276] [compiler] More fbt compatibility (#34887) In my previous PR I fixed some cases but broke others. So, new approach. Two phase algorithm: * First pass is forward data flow to determine all usages of macros. This is necessary because many of Meta's macros have variants that can be accessed via properties, eg you can do `macro(...)` but also `macro.variant(...)`. * Second pass is backwards data flow to find macro invocations (JSX and calls) and then merge their operands into the same scope as the macro call. Note that this required updating PromoteUsedTemporaries to avoid promoting macro calls that have interposing instructions between their creation and usage. Macro calls in general are pure so it should be safe to reorder them. In addition, we're now more precise about `<fb:plural>`, `<fbt:param>`, `fbt.plural()` and `fbt.param()`, which don't actually require all their arguments to be inlined. The whole point is that the plural/param value is an arbitrary value (along with a string name). So we no longer transitively inline the arguments, we just make sure that they don't get inadvertently promoted to named variables. One caveat: we actually don't do anything to treat macro functions as non-mutating, so `fbt.plural()` and friends (function form) may still sometimes group arguments just due to mutability inference. In a follow-up, i'll work to infer the types of nested macro functions as non-mutating. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34887). * #34900 * __->__ #34887 --- .../src/HIR/Environment.ts | 12 +- .../MemoizeFbtAndMacroOperandsInSameScope.ts | 432 +++++++++--------- .../src/Utils/TestUtils.ts | 11 +- ...bt-param-with-leading-whitespace.expect.md | 12 +- ...t-param-with-trailing-whitespace.expect.md | 12 +- ...preserve-whitespace-two-subtrees.expect.md | 35 +- ...btparam-with-jsx-element-content.expect.md | 16 +- ...fbtparam-with-jsx-fragment-value.expect.md | 17 +- .../recursively-merge-scopes-jsx.expect.md | 109 +++++ .../fbt/recursively-merge-scopes-jsx.js | 35 ++ .../repro-fbt-param-nested-fbt-jsx.expect.md | 128 ++++++ .../fbt/repro-fbt-param-nested-fbt-jsx.js | 42 ++ .../fbt/repro-fbt-param-nested-fbt.expect.md | 41 +- .../fbt/repro-fbt-param-nested-fbt.js | 17 +- ...idx-method-no-outlining-wildcard.expect.md | 10 +- .../idx-method-no-outlining.expect.md | 5 +- 16 files changed, 640 insertions(+), 294 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index 4ec4a4a795f..bdbfb20a59a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -83,21 +83,11 @@ export type ExternalFunction = z.infer<typeof ExternalFunctionSchema>; export const USE_FIRE_FUNCTION_NAME = 'useFire'; export const EMIT_FREEZE_GLOBAL_GATING = '__DEV__'; -export const MacroMethodSchema = z.union([ - z.object({type: z.literal('wildcard')}), - z.object({type: z.literal('name'), name: z.string()}), -]); - -// Would like to change this to drop the string option, but breaks compatibility with existing configs -export const MacroSchema = z.union([ - z.string(), - z.tuple([z.string(), z.array(MacroMethodSchema)]), -]); +export const MacroSchema = z.string(); export type CompilerMode = 'all_features' | 'no_inferred_memo'; export type Macro = z.infer<typeof MacroSchema>; -export type MacroMethod = z.infer<typeof MacroMethodSchema>; const HookSchema = z.object({ /* diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts index 4ae9978b589..0ce05a823e9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts @@ -7,7 +7,6 @@ import { HIRFunction, - Identifier, IdentifierId, InstructionValue, makeInstructionId, @@ -15,9 +14,35 @@ import { Place, ReactiveScope, } from '../HIR'; -import {Macro, MacroMethod} from '../HIR/Environment'; +import {Macro} from '../HIR/Environment'; import {eachInstructionValueOperand} from '../HIR/visitors'; -import {Iterable_some} from '../Utils/utils'; + +/** + * Whether a macro requires its arguments to be transitively inlined (eg fbt) + * or just avoid having the top-level values be converted to variables (eg fbt.param) + */ +enum InlineLevel { + Transitive = 'Transitive', + Shallow = 'Shallow', +} +type MacroDefinition = { + level: InlineLevel; + properties: Map<string, MacroDefinition> | null; +}; + +const SHALLOW_MACRO: MacroDefinition = { + level: InlineLevel.Shallow, + properties: null, +}; +const TRANSITIVE_MACRO: MacroDefinition = { + level: InlineLevel.Transitive, + properties: null, +}; +const FBT_MACRO: MacroDefinition = { + level: InlineLevel.Transitive, + properties: new Map([['*', SHALLOW_MACRO]]), +}; +FBT_MACRO.properties!.set('enum', FBT_MACRO); /** * This pass supports the `fbt` translation system (https://facebook.github.io/fbt/) @@ -42,250 +67,210 @@ import {Iterable_some} from '../Utils/utils'; * ## User-defined macro-like function * * Users can also specify their own functions to be treated similarly to fbt via the - * `customMacros` environment configuration. + * `customMacros` environment configuration. By default, user-supplied custom macros + * have their arguments transitively inlined. */ export function memoizeFbtAndMacroOperandsInSameScope( fn: HIRFunction, ): Set<IdentifierId> { - const fbtMacroTags = new Set<Macro>([ - ...Array.from(FBT_TAGS).map((tag): Macro => [tag, []]), - ...(fn.env.config.customMacros ?? []), + const macroKinds = new Map<Macro, MacroDefinition>([ + ...Array.from(FBT_TAGS.entries()), + ...(fn.env.config.customMacros ?? []).map( + name => [name, TRANSITIVE_MACRO] as [Macro, MacroDefinition], + ), ]); /** - * Set of all identifiers that load fbt or other macro functions or their nested - * properties, as well as values known to be the results of invoking macros + * Forward data-flow analysis to identify all macro tags, including + * things like `fbt.foo.bar(...)` */ - const macroTagsCalls: Set<IdentifierId> = new Set(); + const macroTags = populateMacroTags(fn, macroKinds); + /** - * Mapping of lvalue => list of operands for all expressions where either - * the lvalue is a known fbt/macro call and/or the operands transitively - * contain fbt/macro calls. - * - * This is the key data structure that powers the scope merging: we start - * at the lvalues and merge operands into the lvalue's scope. + * Reverse data-flow analysis to merge arguments to macro *invocations* + * based on the kind of the macro */ - const macroValues: Map<Identifier, Array<Identifier>> = new Map(); - // Tracks methods loaded from macros, like fbt.param or idx.foo - const macroMethods = new Map<IdentifierId, Array<Array<MacroMethod>>>(); - - visit(fn, fbtMacroTags, macroTagsCalls, macroMethods, macroValues); - - for (const root of macroValues.keys()) { - const scope = root.scope; - if (scope == null) { - continue; - } - // Merge the operands into the same scope if this is a known macro invocation - if (!macroTagsCalls.has(root.id)) { - continue; - } - mergeScopes(root, scope, macroValues, macroTagsCalls); - } + const macroValues = mergeMacroArguments(fn, macroTags, macroKinds); - return macroTagsCalls; + return macroValues; } -export const FBT_TAGS: Set<string> = new Set([ - 'fbt', - 'fbt:param', - 'fbt:enum', - 'fbt:plural', - 'fbs', - 'fbs:param', - 'fbs:enum', - 'fbs:plural', +const FBT_TAGS: Map<string, MacroDefinition> = new Map([ + ['fbt', FBT_MACRO], + ['fbt:param', SHALLOW_MACRO], + ['fbt:enum', FBT_MACRO], + ['fbt:plural', SHALLOW_MACRO], + ['fbs', FBT_MACRO], + ['fbs:param', SHALLOW_MACRO], + ['fbs:enum', FBT_MACRO], + ['fbs:plural', SHALLOW_MACRO], ]); export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([ 'fbt:param', 'fbs:param', ]); -function visit( +function populateMacroTags( fn: HIRFunction, - fbtMacroTags: Set<Macro>, - macroTagsCalls: Set<IdentifierId>, - macroMethods: Map<IdentifierId, Array<Array<MacroMethod>>>, - macroValues: Map<Identifier, Array<Identifier>>, -): void { - for (const [, block] of fn.body.blocks) { - for (const phi of block.phis) { - const macroOperands: Array<Identifier> = []; - for (const operand of phi.operands.values()) { - if (macroValues.has(operand.identifier)) { - macroOperands.push(operand.identifier); - } - } - if (macroOperands.length !== 0) { - macroValues.set(phi.place.identifier, macroOperands); - } - } - for (const instruction of block.instructions) { - const {lvalue, value} = instruction; - if (lvalue === null) { - continue; - } - if ( - value.kind === 'Primitive' && - typeof value.value === 'string' && - matchesExactTag(value.value, fbtMacroTags) - ) { - /* - * We don't distinguish between tag names and strings, so record - * all `fbt` string literals in case they are used as a jsx tag. - */ - macroTagsCalls.add(lvalue.identifier.id); - } else if ( - value.kind === 'LoadGlobal' && - matchesExactTag(value.binding.name, fbtMacroTags) - ) { - // Record references to `fbt` as a global - macroTagsCalls.add(lvalue.identifier.id); - } else if ( - value.kind === 'LoadGlobal' && - matchTagRoot(value.binding.name, fbtMacroTags) !== null - ) { - const methods = matchTagRoot(value.binding.name, fbtMacroTags)!; - macroMethods.set(lvalue.identifier.id, methods); - } else if ( - value.kind === 'PropertyLoad' && - macroMethods.has(value.object.identifier.id) - ) { - const methods = macroMethods.get(value.object.identifier.id)!; - const newMethods = []; - for (const method of methods) { - if ( - method.length > 0 && - (method[0].type === 'wildcard' || - (method[0].type === 'name' && method[0].name === value.property)) - ) { - if (method.length > 1) { - newMethods.push(method.slice(1)); - } else { - macroTagsCalls.add(lvalue.identifier.id); + macroKinds: Map<Macro, MacroDefinition>, +): Map<IdentifierId, MacroDefinition> { + const macroTags = new Map<IdentifierId, MacroDefinition>(); + for (const block of fn.body.blocks.values()) { + for (const instr of block.instructions) { + const {lvalue, value} = instr; + switch (value.kind) { + case 'Primitive': { + if (typeof value.value === 'string') { + const macroDefinition = macroKinds.get(value.value); + if (macroDefinition != null) { + /* + * We don't distinguish between tag names and strings, so record + * all `fbt` string literals in case they are used as a jsx tag. + */ + macroTags.set(lvalue.identifier.id, macroDefinition); } } + break; } - if (newMethods.length > 0) { - macroMethods.set(lvalue.identifier.id, newMethods); + case 'LoadGlobal': { + let macroDefinition = macroKinds.get(value.binding.name); + if (macroDefinition != null) { + macroTags.set(lvalue.identifier.id, macroDefinition); + } + break; } - } else if ( - value.kind === 'PropertyLoad' && - macroTagsCalls.has(value.object.identifier.id) - ) { - macroTagsCalls.add(lvalue.identifier.id); - } else if ( - isFbtJsxExpression(fbtMacroTags, macroTagsCalls, value) || - isFbtJsxChild(macroTagsCalls, lvalue, value) || - isFbtCallExpression(macroTagsCalls, value) - ) { - macroTagsCalls.add(lvalue.identifier.id); - macroValues.set( - lvalue.identifier, - Array.from( - eachInstructionValueOperand(value), - operand => operand.identifier, - ), - ); - } else if ( - Iterable_some(eachInstructionValueOperand(value), operand => - macroValues.has(operand.identifier), - ) - ) { - const macroOperands: Array<Identifier> = []; - for (const operand of eachInstructionValueOperand(value)) { - if (macroValues.has(operand.identifier)) { - macroOperands.push(operand.identifier); + case 'PropertyLoad': { + if (typeof value.property === 'string') { + const macroDefinition = macroTags.get(value.object.identifier.id); + if (macroDefinition != null) { + const propertyDefinition = + macroDefinition.properties != null + ? (macroDefinition.properties.get(value.property) ?? + macroDefinition.properties.get('*')) + : null; + const propertyMacro = propertyDefinition ?? macroDefinition; + macroTags.set(lvalue.identifier.id, propertyMacro); + } } + break; } - macroValues.set(lvalue.identifier, macroOperands); } } } + return macroTags; } -function mergeScopes( - root: Identifier, - scope: ReactiveScope, - macroValues: Map<Identifier, Array<Identifier>>, - macroTagsCalls: Set<IdentifierId>, -): void { - const operands = macroValues.get(root); - if (operands == null) { - return; - } - for (const operand of operands) { - operand.scope = scope; - expandFbtScopeRange(scope.range, operand.mutableRange); - macroTagsCalls.add(operand.id); - mergeScopes(operand, scope, macroValues, macroTagsCalls); - } -} - -function matchesExactTag(s: string, tags: Set<Macro>): boolean { - return Array.from(tags).some(macro => - typeof macro === 'string' - ? s === macro - : macro[1].length === 0 && macro[0] === s, - ); -} - -function matchTagRoot( - s: string, - tags: Set<Macro>, -): Array<Array<MacroMethod>> | null { - const methods: Array<Array<MacroMethod>> = []; - for (const macro of tags) { - if (typeof macro === 'string') { - continue; +function mergeMacroArguments( + fn: HIRFunction, + macroTags: Map<IdentifierId, MacroDefinition>, + macroKinds: Map<Macro, MacroDefinition>, +): Set<IdentifierId> { + const macroValues = new Set<IdentifierId>(macroTags.keys()); + for (const block of Array.from(fn.body.blocks.values()).reverse()) { + for (let i = block.instructions.length - 1; i >= 0; i--) { + const instr = block.instructions[i]!; + const {lvalue, value} = instr; + switch (value.kind) { + case 'DeclareContext': + case 'DeclareLocal': + case 'Destructure': + case 'LoadContext': + case 'LoadLocal': + case 'PostfixUpdate': + case 'PrefixUpdate': + case 'StoreContext': + case 'StoreLocal': { + // Instructions that never need to be merged + break; + } + case 'CallExpression': + case 'MethodCall': { + const scope = lvalue.identifier.scope; + if (scope == null) { + continue; + } + const callee = + value.kind === 'CallExpression' ? value.callee : value.property; + const macroDefinition = + macroTags.get(callee.identifier.id) ?? + macroTags.get(lvalue.identifier.id); + if (macroDefinition != null) { + visitOperands( + macroDefinition, + scope, + lvalue, + value, + macroValues, + macroTags, + ); + } + break; + } + case 'JsxExpression': { + const scope = lvalue.identifier.scope; + if (scope == null) { + continue; + } + let macroDefinition; + if (value.tag.kind === 'Identifier') { + macroDefinition = macroTags.get(value.tag.identifier.id); + } else { + macroDefinition = macroKinds.get(value.tag.name); + } + macroDefinition ??= macroTags.get(lvalue.identifier.id); + if (macroDefinition != null) { + visitOperands( + macroDefinition, + scope, + lvalue, + value, + macroValues, + macroTags, + ); + } + break; + } + default: { + const scope = lvalue.identifier.scope; + if (scope == null) { + continue; + } + const macroDefinition = macroTags.get(lvalue.identifier.id); + if (macroDefinition != null) { + visitOperands( + macroDefinition, + scope, + lvalue, + value, + macroValues, + macroTags, + ); + } + break; + } + } } - const [tag, rest] = macro; - if (tag === s && rest.length > 0) { - methods.push(rest); + for (const phi of block.phis) { + const scope = phi.place.identifier.scope; + if (scope == null) { + continue; + } + const macroDefinition = macroTags.get(phi.place.identifier.id); + if ( + macroDefinition == null || + macroDefinition.level === InlineLevel.Shallow + ) { + continue; + } + macroValues.add(phi.place.identifier.id); + for (const operand of phi.operands.values()) { + operand.identifier.scope = scope; + expandFbtScopeRange(scope.range, operand.identifier.mutableRange); + macroTags.set(operand.identifier.id, macroDefinition); + macroValues.add(operand.identifier.id); + } } } - if (methods.length > 0) { - return methods; - } else { - return null; - } -} - -function isFbtCallExpression( - macroTagsCalls: Set<IdentifierId>, - value: InstructionValue, -): boolean { - return ( - (value.kind === 'CallExpression' && - macroTagsCalls.has(value.callee.identifier.id)) || - (value.kind === 'MethodCall' && - macroTagsCalls.has(value.property.identifier.id)) - ); -} - -function isFbtJsxExpression( - fbtMacroTags: Set<Macro>, - macroTagsCalls: Set<IdentifierId>, - value: InstructionValue, -): boolean { - return ( - value.kind === 'JsxExpression' && - ((value.tag.kind === 'Identifier' && - macroTagsCalls.has(value.tag.identifier.id)) || - (value.tag.kind === 'BuiltinTag' && - matchesExactTag(value.tag.name, fbtMacroTags))) - ); -} - -function isFbtJsxChild( - macroTagsCalls: Set<IdentifierId>, - lvalue: Place | null, - value: InstructionValue, -): boolean { - return ( - (value.kind === 'JsxExpression' || value.kind === 'JsxFragment') && - lvalue !== null && - macroTagsCalls.has(lvalue.identifier.id) - ); + return macroValues; } function expandFbtScopeRange( @@ -298,3 +283,22 @@ function expandFbtScopeRange( ); } } + +function visitOperands( + macroDefinition: MacroDefinition, + scope: ReactiveScope, + lvalue: Place, + value: InstructionValue, + macroValues: Set<IdentifierId>, + macroTags: Map<IdentifierId, MacroDefinition>, +): void { + macroValues.add(lvalue.identifier.id); + for (const operand of eachInstructionValueOperand(value)) { + if (macroDefinition.level === InlineLevel.Transitive) { + operand.identifier.scope = scope; + expandFbtScopeRange(scope.range, operand.identifier.mutableRange); + macroTags.set(operand.identifier.id, macroDefinition); + } + macroValues.add(operand.identifier.id); + } +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts index e84c1e57aae..a574ecc1652 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts @@ -135,16 +135,7 @@ function parseConfigPragmaEnvironmentForTest( } else if (val) { const parsedVal = tryParseTestPragmaValue(val).unwrap(); if (key === 'customMacros' && typeof parsedVal === 'string') { - const valSplit = parsedVal.split('.'); - const props = []; - for (const elt of valSplit.slice(1)) { - if (elt === '*') { - props.push({type: 'wildcard'}); - } else if (elt.length > 0) { - props.push({type: 'name', name: elt}); - } - } - maybeConfig[key] = [[valSplit[0], props]]; + maybeConfig[key] = [parsedVal.split('.')[0]]; continue; } maybeConfig[key] = parsedVal; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md index ac9bc2ce28a..96cea12a623 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md @@ -44,15 +44,23 @@ import fbt from "fbt"; import { identity } from "shared-runtime"; function Component(props) { - const $ = _c(3); + const $ = _c(5); let t0; if ($[0] !== props.count || $[1] !== props.option) { + let t1; + if ($[3] !== props.count) { + t1 = identity(props.count); + $[3] = props.count; + $[4] = t1; + } else { + t1 = $[4]; + } t0 = ( <span> {fbt._( { "*": "{count} votes for {option}", _1: "1 vote for {option}" }, [ - fbt._plural(identity(props.count), "count"), + fbt._plural(t1, "count"), fbt._param( "option", diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md index 9b4c29607d9..e5f465df169 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md @@ -44,15 +44,23 @@ import fbt from "fbt"; import { identity } from "shared-runtime"; function Component(props) { - const $ = _c(3); + const $ = _c(5); let t0; if ($[0] !== props.count || $[1] !== props.option) { + let t1; + if ($[3] !== props.count) { + t1 = identity(props.count); + $[3] = props.count; + $[4] = t1; + } else { + t1 = $[4]; + } t0 = ( <span> {fbt._( { "*": "{count} votes for {option}", _1: "1 vote for {option}" }, [ - fbt._plural(identity(props.count), "count"), + fbt._plural(t1, "count"), fbt._param( "option", diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md index c1a1a5891b3..c421ccbe810 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md @@ -37,7 +37,7 @@ import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; function Foo(t0) { - const $ = _c(7); + const $ = _c(13); const { name1, name2 } = t0; let t1; if ($[0] !== name1 || $[1] !== name2) { @@ -50,19 +50,34 @@ function Foo(t0) { t2 = $[4]; } let t3; - if ($[5] !== name2) { - t3 = <b>{name2}</b>; - $[5] = name2; - $[6] = t3; + if ($[5] !== name1 || $[6] !== t2) { + t3 = <span key={name1}>{t2}</span>; + $[5] = name1; + $[6] = t2; + $[7] = t3; } else { - t3 = $[6]; + t3 = $[7]; + } + let t4; + if ($[8] !== name2) { + t4 = <b>{name2}</b>; + $[8] = name2; + $[9] = t4; + } else { + t4 = $[9]; + } + let t5; + if ($[10] !== name2 || $[11] !== t4) { + t5 = <span key={name2}>{t4}</span>; + $[10] = name2; + $[11] = t4; + $[12] = t5; + } else { + t5 = $[12]; } t1 = fbt._( "{user1} and {user2} accepted your PR!", - [ - fbt._param("user1", <span key={name1}>{t2}</span>), - fbt._param("user2", <span key={name2}>{t3}</span>), - ], + [fbt._param("user1", t3), fbt._param("user2", t5)], { hk: "2PxMie" }, ); $[0] = name1; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md index 56ffb70cb0a..66141f7f8d7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md @@ -29,20 +29,24 @@ import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; function Component(t0) { - const $ = _c(4); + const $ = _c(6); const { name, data, icon } = t0; let t1; if ($[0] !== data || $[1] !== icon || $[2] !== name) { + let t2; + if ($[4] !== name) { + t2 = <Text type="h4">{name}</Text>; + $[4] = name; + $[5] = t2; + } else { + t2 = $[5]; + } t1 = ( <Text type="body4"> {fbt._( "{item author}{icon}{=m2}", [ - fbt._param( - "item author", - - <Text type="h4">{name}</Text>, - ), + fbt._param("item author", t2), fbt._param( "icon", diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md index 0ed51660b98..c9a43bb075e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md @@ -27,16 +27,21 @@ import fbt from "fbt"; import { identity } from "shared-runtime"; function Component(props) { - const $ = _c(2); + const $ = _c(4); let t0; if ($[0] !== props.text) { + const t1 = identity(props.text); + let t2; + if ($[2] !== t1) { + t2 = <>{t1}</>; + $[2] = t1; + $[3] = t2; + } else { + t2 = $[3]; + } t0 = ( <Foo - value={fbt._( - "{value}%", - [fbt._param("value", <>{identity(props.text)}</>)], - { hk: "10F5Cc" }, - )} + value={fbt._("{value}%", [fbt._param("value", t2)], { hk: "10F5Cc" })} /> ); $[0] = props.text; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md new file mode 100644 index 00000000000..93a9b869f67 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md @@ -0,0 +1,109 @@ + +## Input + +```javascript +// @flow +import {fbt} from 'fbt'; + +function Example({x}) { + // "Inner Text" needs to be visible to fbt: the <Bar> element cannot + // be memoized separately + return ( + <fbt desc="Description"> + Outer Text + <Foo key="b" x={x}> + <Bar key="a">Inner Text</Bar> + </Foo> + </fbt> + ); +} + +function Foo({x, children}) { + 'use no memo'; + return ( + <> + <div>{x}</div> + <span>{children}</span> + </> + ); +} + +function Bar({children}) { + 'use no memo'; + return children; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Example, + params: [{x: 'Hello'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { fbt } from "fbt"; + +function Example(t0) { + const $ = _c(2); + const { x } = t0; + let t1; + if ($[0] !== x) { + t1 = fbt._( + "Outer Text {=m1}", + [ + fbt._implicitParam( + "=m1", + + <Foo key="b" x={x}> + {fbt._( + "{=m1}", + [ + fbt._implicitParam( + "=m1", + <Bar key="a"> + {fbt._("Inner Text", null, { hk: "32YB0l" })} + </Bar>, + ), + ], + { hk: "23dJsI" }, + )} + </Foo>, + ), + ], + { hk: "2RVA7V" }, + ); + $[0] = x; + $[1] = t1; + } else { + t1 = $[1]; + } + return t1; +} + +function Foo({ x, children }) { + "use no memo"; + return ( + <> + <div>{x}</div> + <span>{children}</span> + </> + ); +} + +function Bar({ children }) { + "use no memo"; + return children; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Example, + params: [{ x: "Hello" }], +}; + +``` + +### Eval output +(kind: ok) Outer Text <div>Hello</div><span>Inner Text</span> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js new file mode 100644 index 00000000000..f89289fb039 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js @@ -0,0 +1,35 @@ +// @flow +import {fbt} from 'fbt'; + +function Example({x}) { + // "Inner Text" needs to be visible to fbt: the <Bar> element cannot + // be memoized separately + return ( + <fbt desc="Description"> + Outer Text + <Foo key="b" x={x}> + <Bar key="a">Inner Text</Bar> + </Foo> + </fbt> + ); +} + +function Foo({x, children}) { + 'use no memo'; + return ( + <> + <div>{x}</div> + <span>{children}</span> + </> + ); +} + +function Bar({children}) { + 'use no memo'; + return children; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Example, + params: [{x: 'Hello'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md new file mode 100644 index 00000000000..10a2a9ae131 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md @@ -0,0 +1,128 @@ + +## Input + +```javascript +import fbt from 'fbt'; +import {Stringify, identity} from 'shared-runtime'; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component({firstname, lastname}) { + 'use memo'; + return ( + <div> + {fbt( + [ + 'Name: ', + fbt.param('firstname', <Stringify key={0} name={firstname} />), + ', ', + fbt.param( + 'lastname', + identity( + fbt( + '(inner)' + + fbt.param('lastname', <Stringify key={1} name={lastname} />), + 'Inner fbt value' + ) + ) + ), + ], + 'Name' + )} + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstname: 'first', lastname: 'last'}], + sequentialRenders: [{firstname: 'first', lastname: 'last'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import fbt from "fbt"; +import { Stringify, identity } from "shared-runtime"; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component(t0) { + "use memo"; + const $ = _c(9); + const { firstname, lastname } = t0; + let t1; + if ($[0] !== firstname || $[1] !== lastname) { + let t2; + if ($[3] !== firstname) { + t2 = <Stringify key={0} name={firstname} />; + $[3] = firstname; + $[4] = t2; + } else { + t2 = $[4]; + } + let t3; + if ($[5] !== lastname) { + t3 = <Stringify key={1} name={lastname} />; + $[5] = lastname; + $[6] = t3; + } else { + t3 = $[6]; + } + t1 = fbt._( + "Name: {firstname}, {lastname}", + [ + fbt._param("firstname", t2), + fbt._param( + "lastname", + identity( + fbt._("(inner){lastname}", [fbt._param("lastname", t3)], { + hk: "1Kdxyo", + }), + ), + ), + ], + { hk: "3AiIf8" }, + ); + $[0] = firstname; + $[1] = lastname; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[7] !== t1) { + t2 = <div>{t1}</div>; + $[7] = t1; + $[8] = t2; + } else { + t2 = $[8]; + } + return t2; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ firstname: "first", lastname: "last" }], + sequentialRenders: [{ firstname: "first", lastname: "last" }], +}; + +``` + +### Eval output +(kind: ok) <div>Name: <div>{"name":"first"}</div>, (inner)<div>{"name":"last"}</div></div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js new file mode 100644 index 00000000000..07efb4e03a8 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js @@ -0,0 +1,42 @@ +import fbt from 'fbt'; +import {Stringify, identity} from 'shared-runtime'; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component({firstname, lastname}) { + 'use memo'; + return ( + <div> + {fbt( + [ + 'Name: ', + fbt.param('firstname', <Stringify key={0} name={firstname} />), + ', ', + fbt.param( + 'lastname', + identity( + fbt( + '(inner)' + + fbt.param('lastname', <Stringify key={1} name={lastname} />), + 'Inner fbt value' + ) + ) + ), + ], + 'Name' + )} + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstname: 'first', lastname: 'last'}], + sequentialRenders: [{firstname: 'first', lastname: 'last'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md index 5ad089e1341..063e45e04e3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md @@ -3,7 +3,7 @@ ```javascript import fbt from 'fbt'; -import {Stringify} from 'shared-runtime'; +import {identity} from 'shared-runtime'; /** * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. @@ -16,22 +16,25 @@ import {Stringify} from 'shared-runtime'; function Component({firstname, lastname}) { 'use memo'; return ( - <Stringify> + <div> {fbt( [ 'Name: ', - fbt.param('firstname', <Stringify key={0} name={firstname} />), + fbt.param('firstname', identity(firstname)), ', ', fbt.param( 'lastname', - <Stringify key={0} name={lastname}> - {fbt('(inner fbt)', 'Inner fbt value')} - </Stringify> + identity( + fbt( + '(inner)' + fbt.param('lastname', identity(lastname)), + 'Inner fbt value' + ) + ) ), ], 'Name' )} - </Stringify> + </div> ); } @@ -48,7 +51,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; -import { Stringify } from "shared-runtime"; +import { identity } from "shared-runtime"; /** * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. @@ -70,14 +73,24 @@ function Component(t0) { fbt._param( "firstname", - <Stringify key={0} name={firstname} />, + identity(firstname), ), fbt._param( "lastname", - <Stringify key={0} name={lastname}> - {fbt._("(inner fbt)", null, { hk: "36qNwF" })} - </Stringify>, + identity( + fbt._( + "(inner){lastname}", + [ + fbt._param( + "lastname", + + identity(lastname), + ), + ], + { hk: "1Kdxyo" }, + ), + ), ), ], { hk: "3AiIf8" }, @@ -90,7 +103,7 @@ function Component(t0) { } let t2; if ($[3] !== t1) { - t2 = <Stringify>{t1}</Stringify>; + t2 = <div>{t1}</div>; $[3] = t1; $[4] = t2; } else { @@ -108,4 +121,4 @@ export const FIXTURE_ENTRYPOINT = { ``` ### Eval output -(kind: ok) <div>{"children":"Name: , "}</div> \ No newline at end of file +(kind: ok) <div>Name: first, (inner)last</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js index 14e3278e395..38465a62804 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js @@ -1,5 +1,5 @@ import fbt from 'fbt'; -import {Stringify} from 'shared-runtime'; +import {identity} from 'shared-runtime'; /** * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. @@ -12,22 +12,25 @@ import {Stringify} from 'shared-runtime'; function Component({firstname, lastname}) { 'use memo'; return ( - <Stringify> + <div> {fbt( [ 'Name: ', - fbt.param('firstname', <Stringify key={0} name={firstname} />), + fbt.param('firstname', identity(firstname)), ', ', fbt.param( 'lastname', - <Stringify key={0} name={lastname}> - {fbt('(inner fbt)', 'Inner fbt value')} - </Stringify> + identity( + fbt( + '(inner)' + fbt.param('lastname', identity(lastname)), + 'Inner fbt value' + ) + ) ), ], 'Name' )} - </Stringify> + </div> ); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md index 455c416d840..e004ef246ab 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md @@ -37,7 +37,7 @@ function Component(props) { const $ = _c(16); let t0; if ($[0] !== props) { - t0 = idx(props, _temp); + t0 = idx(props, (_) => _.group.label); $[0] = props; $[1] = t0; } else { @@ -46,7 +46,7 @@ function Component(props) { const groupName1 = t0; let t1; if ($[2] !== props) { - t1 = idx.a(props, _temp2); + t1 = idx.a(props, (__0) => __0.group.label); $[2] = props; $[3] = t1; } else { @@ -108,12 +108,6 @@ function Component(props) { } return t5; } -function _temp2(__0) { - return __0.group.label; -} -function _temp(_) { - return _.group.label; -} ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md index cc5a4200a94..e98fb191ce7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md @@ -31,7 +31,7 @@ function Component(props) { const $ = _c(10); let t0; if ($[0] !== props) { - t0 = idx(props, _temp); + t0 = idx(props, (_) => _.group.label); $[0] = props; $[1] = t0; } else { @@ -74,9 +74,6 @@ function Component(props) { } return t3; } -function _temp(_) { - return _.group.label; -} ``` \ No newline at end of file From c35f6a3041816613e704772ca9dafb26568d9f89 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Fri, 17 Oct 2025 11:59:17 -0700 Subject: [PATCH 100/276] [compiler] Optimize props spread for common cases (#34900) As part of the new inference model we updated to (correctly) treat destructuring spread as creating a new mutable object. This had the unfortunate side-effect of reducing precision on destructuring of props, though: ```js function Component({x, ...rest}) { const z = rest.z; identity(z); return <Stringify x={x} z={z} />; } ``` Memoized as the following, where we don't realize that `z` is actually frozen: ```js function Component(t0) { const $ = _c(6); let x; let z; if ($[0] !== t0) { const { x: t1, ...rest } = t0; x = t1; z = rest.z; identity(z); ... ``` #34341 was our first thought of how to do this (thanks @poteto for exploring this idea!). But during review it became clear that it was a bit more complicated than I had thought. So this PR explores a more conservative alternative. The idea is: * Track known sources of frozen values: component props, hook params, and hook return values. * Find all object spreads where the rvalue is a known frozen value. * Look at how such objects are used, and if they are only used to access properties (PropertyLoad/Destructure), pass to hooks, or pass to jsx then we can be very confident the object is not mutated. We consider any such objects to be frozen, even though technically spread creates a new object. See new fixtures for more examples. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34900). * __->__ #34900 * #34887 --- .../Inference/InferMutationAliasingEffects.ts | 164 +++++++++++++++++- .../nonmutated-spread-hook-return.expect.md | 63 +++++++ .../compiler/nonmutated-spread-hook-return.js | 13 ++ .../nonmutated-spread-props-jsx.expect.md | 57 ++++++ .../compiler/nonmutated-spread-props-jsx.js | 10 ++ ...d-spread-props-local-indirection.expect.md | 63 +++++++ ...nmutated-spread-props-local-indirection.js | 13 ++ .../nonmutated-spread-props.expect.md | 61 +++++++ .../compiler/nonmutated-spread-props.js | 12 ++ 9 files changed, 455 insertions(+), 1 deletion(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts index d2f2ba61d69..94be2100f57 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts @@ -19,6 +19,7 @@ import { Environment, FunctionExpression, GeneratedSource, + getHookKind, HIRFunction, Hole, IdentifierId, @@ -198,6 +199,7 @@ export function inferMutationAliasingEffects( isFunctionExpression, fn, hoistedContextDeclarations, + findNonMutatedDestructureSpreads(fn), ); let iterationCount = 0; @@ -287,15 +289,18 @@ class Context { isFuctionExpression: boolean; fn: HIRFunction; hoistedContextDeclarations: Map<DeclarationId, Place | null>; + nonMutatingSpreads: Set<IdentifierId>; constructor( isFunctionExpression: boolean, fn: HIRFunction, hoistedContextDeclarations: Map<DeclarationId, Place | null>, + nonMutatingSpreads: Set<IdentifierId>, ) { this.isFuctionExpression = isFunctionExpression; this.fn = fn; this.hoistedContextDeclarations = hoistedContextDeclarations; + this.nonMutatingSpreads = nonMutatingSpreads; } cacheApplySignature( @@ -322,6 +327,161 @@ class Context { } } +/** + * Finds objects created via ObjectPattern spread destructuring + * (`const {x, ...spread} = ...`) where a) the rvalue is known frozen and + * b) the spread value cannot possibly be directly mutated. The idea is that + * for this set of values, we can treat the spread object as frozen. + * + * The primary use case for this is props spreading: + * + * ``` + * function Component({prop, ...otherProps}) { + * const transformedProp = transform(prop, otherProps.foo); + * // pass `otherProps` down: + * return <Foo {...otherProps} prop={transformedProp} />; + * } + * ``` + * + * Here we know that since `otherProps` cannot be mutated, we don't have to treat + * it as mutable: `otherProps.foo` only reads a value that must be frozen, so it + * can be treated as frozen too. + */ +function findNonMutatedDestructureSpreads(fn: HIRFunction): Set<IdentifierId> { + const knownFrozen = new Set<IdentifierId>(); + if (fn.fnType === 'Component') { + const [props] = fn.params; + if (props != null && props.kind === 'Identifier') { + knownFrozen.add(props.identifier.id); + } + } else { + for (const param of fn.params) { + if (param.kind === 'Identifier') { + knownFrozen.add(param.identifier.id); + } + } + } + + // Map of temporaries to identifiers for spread objects + const candidateNonMutatingSpreads = new Map<IdentifierId, IdentifierId>(); + for (const block of fn.body.blocks.values()) { + if (candidateNonMutatingSpreads.size !== 0) { + for (const phi of block.phis) { + for (const operand of phi.operands.values()) { + const spread = candidateNonMutatingSpreads.get(operand.identifier.id); + if (spread != null) { + candidateNonMutatingSpreads.delete(spread); + } + } + } + } + for (const instr of block.instructions) { + const {lvalue, value} = instr; + switch (value.kind) { + case 'Destructure': { + if ( + !knownFrozen.has(value.value.identifier.id) || + !( + value.lvalue.kind === InstructionKind.Let || + value.lvalue.kind === InstructionKind.Const + ) || + value.lvalue.pattern.kind !== 'ObjectPattern' + ) { + continue; + } + for (const item of value.lvalue.pattern.properties) { + if (item.kind !== 'Spread') { + continue; + } + candidateNonMutatingSpreads.set( + item.place.identifier.id, + item.place.identifier.id, + ); + } + break; + } + case 'LoadLocal': { + const spread = candidateNonMutatingSpreads.get( + value.place.identifier.id, + ); + if (spread != null) { + candidateNonMutatingSpreads.set(lvalue.identifier.id, spread); + } + break; + } + case 'StoreLocal': { + const spread = candidateNonMutatingSpreads.get( + value.value.identifier.id, + ); + if (spread != null) { + candidateNonMutatingSpreads.set(lvalue.identifier.id, spread); + candidateNonMutatingSpreads.set( + value.lvalue.place.identifier.id, + spread, + ); + } + break; + } + case 'JsxFragment': + case 'JsxExpression': { + // Passing objects created with spread to jsx can't mutate them + break; + } + case 'PropertyLoad': { + // Properties must be frozen since the original value was frozen + break; + } + case 'CallExpression': + case 'MethodCall': { + const callee = + value.kind === 'CallExpression' ? value.callee : value.property; + if (getHookKind(fn.env, callee.identifier) != null) { + // Hook calls have frozen arguments, and non-ref returns are frozen + if (!isRefOrRefValue(lvalue.identifier)) { + knownFrozen.add(lvalue.identifier.id); + } + } else { + // Non-hook calls check their operands, since they are potentially mutable + if (candidateNonMutatingSpreads.size !== 0) { + // Otherwise any reference to the spread object itself may mutate + for (const operand of eachInstructionValueOperand(value)) { + const spread = candidateNonMutatingSpreads.get( + operand.identifier.id, + ); + if (spread != null) { + candidateNonMutatingSpreads.delete(spread); + } + } + } + } + break; + } + default: { + if (candidateNonMutatingSpreads.size !== 0) { + // Otherwise any reference to the spread object itself may mutate + for (const operand of eachInstructionValueOperand(value)) { + const spread = candidateNonMutatingSpreads.get( + operand.identifier.id, + ); + if (spread != null) { + candidateNonMutatingSpreads.delete(spread); + } + } + } + } + } + } + } + + const nonMutatingSpreads = new Set<IdentifierId>(); + for (const [key, value] of candidateNonMutatingSpreads) { + if (key === value) { + nonMutatingSpreads.add(key); + } + } + return nonMutatingSpreads; +} + function inferParam( param: Place | SpreadPattern, initialState: InferenceState, @@ -2054,7 +2214,9 @@ function computeSignatureForInstruction( kind: 'Create', into: place, reason: ValueReason.Other, - value: ValueKind.Mutable, + value: context.nonMutatingSpreads.has(place.identifier.id) + ? ValueKind.Frozen + : ValueKind.Mutable, }); effects.push({ kind: 'Capture', diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md new file mode 100644 index 00000000000..9a4f0c179f9 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md @@ -0,0 +1,63 @@ + +## Input + +```javascript +import {identity, Stringify, useIdentity} from 'shared-runtime'; + +function Component(props) { + const {x, ...rest} = useIdentity(props); + const z = rest.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, Stringify, useIdentity } from "shared-runtime"; + +function Component(props) { + const $ = _c(6); + const t0 = useIdentity(props); + let rest; + let x; + if ($[0] !== t0) { + ({ x, ...rest } = t0); + $[0] = t0; + $[1] = rest; + $[2] = x; + } else { + rest = $[1]; + x = $[2]; + } + const z = rest.z; + identity(z); + let t1; + if ($[3] !== x || $[4] !== z) { + t1 = <Stringify x={x} z={z} />; + $[3] = x; + $[4] = z; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: "Hello", z: "World" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"x":"Hello","z":"World"}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js new file mode 100644 index 00000000000..c4447f7be6e --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js @@ -0,0 +1,13 @@ +import {identity, Stringify, useIdentity} from 'shared-runtime'; + +function Component(props) { + const {x, ...rest} = useIdentity(props); + const z = rest.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md new file mode 100644 index 00000000000..5335705c5d8 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md @@ -0,0 +1,57 @@ + +## Input + +```javascript +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + return <Stringify {...rest} x={x} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, Stringify } from "shared-runtime"; + +function Component(t0) { + const $ = _c(6); + let rest; + let x; + if ($[0] !== t0) { + ({ x, ...rest } = t0); + $[0] = t0; + $[1] = rest; + $[2] = x; + } else { + rest = $[1]; + x = $[2]; + } + let t1; + if ($[3] !== rest || $[4] !== x) { + t1 = <Stringify {...rest} x={x} />; + $[3] = rest; + $[4] = x; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: "Hello", z: "World" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"z":"World","x":"Hello"}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js new file mode 100644 index 00000000000..d9f24264d69 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js @@ -0,0 +1,10 @@ +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + return <Stringify {...rest} x={x} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md new file mode 100644 index 00000000000..7a435adcaad --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md @@ -0,0 +1,63 @@ + +## Input + +```javascript +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + const restAlias = rest; + const z = restAlias.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, Stringify } from "shared-runtime"; + +function Component(t0) { + const $ = _c(6); + let rest; + let x; + if ($[0] !== t0) { + ({ x, ...rest } = t0); + $[0] = t0; + $[1] = rest; + $[2] = x; + } else { + rest = $[1]; + x = $[2]; + } + const restAlias = rest; + const z = restAlias.z; + identity(z); + let t1; + if ($[3] !== x || $[4] !== z) { + t1 = <Stringify x={x} z={z} />; + $[3] = x; + $[4] = z; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: "Hello", z: "World" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"x":"Hello","z":"World"}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js new file mode 100644 index 00000000000..b1d26ab7f72 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js @@ -0,0 +1,13 @@ +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + const restAlias = rest; + const z = restAlias.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md new file mode 100644 index 00000000000..a8b1c2d747f --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md @@ -0,0 +1,61 @@ + +## Input + +```javascript +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + const z = rest.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, Stringify } from "shared-runtime"; + +function Component(t0) { + const $ = _c(6); + let rest; + let x; + if ($[0] !== t0) { + ({ x, ...rest } = t0); + $[0] = t0; + $[1] = rest; + $[2] = x; + } else { + rest = $[1]; + x = $[2]; + } + const z = rest.z; + identity(z); + let t1; + if ($[3] !== x || $[4] !== z) { + t1 = <Stringify x={x} z={z} />; + $[3] = x; + $[4] = z; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: "Hello", z: "World" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"x":"Hello","z":"World"}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js new file mode 100644 index 00000000000..d3e83d560c2 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js @@ -0,0 +1,12 @@ +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + const z = rest.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; From dc485c7303f0d7d10fdbd2ccd4a020574e679840 Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Fri, 17 Oct 2025 22:13:52 +0200 Subject: [PATCH 101/276] [Flight] Fix detached `ArrayBuffer` error when streaming typed arrays (#34849) Using `renderToReadableStream` in Node.js with binary data from `fs.readFileSync` (or `Buffer.allocUnsafe`) could cause downstream consumers (like compression middleware) to fail with "Cannot perform Construct on a detached ArrayBuffer". The issue occurs because Node.js uses an 8192-byte Buffer pool for small allocations (< 4KB). When React's `VIEW_SIZE` was 2KB, files between ~2KB and 4KB would be passed through as views of pooled buffers rather than copied into `currentView`. ByteStreams (`type: 'bytes'`) detach ArrayBuffers during transfer, which corrupts the shared Buffer pool and causes subsequent Buffer operations to fail. Increasing `VIEW_SIZE` from 2KB to 4KB ensures all chunks smaller than 4KB are copied into `currentView` (which uses a dedicated 4KB buffer outside the pool), while chunks 4KB or larger don't use the pool anyway. Thus no pooled buffers are ever exposed to ByteStream detachment. This adds 2KB memory per active stream, copies chunks in the 2-4KB range instead of passing them as views (small CPU cost), and buffers up to 2KB more data before flushing. However, it avoids duplicating large binary data (which copying everything would require, like the Edge entry point currently does in `typedArrayToBinaryChunk`). Related issues: - https://github.com/vercel/next.js/issues/84753 - https://github.com/vercel/next.js/issues/84858 --- .../src/__tests__/ReactFlightDOMNode-test.js | 39 +++++++++++++++++-- .../src/ReactServerStreamConfigEdge.js | 15 +++---- .../src/ReactServerStreamConfigNode.js | 6 ++- 3 files changed, 47 insertions(+), 13 deletions(-) diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js index f63f8233311..d59f298f994 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js @@ -10,11 +10,11 @@ 'use strict'; +import fs from 'fs'; +import os from 'os'; +import path from 'path'; import {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate'; -global.ReadableStream = - require('web-streams-polyfill/ponyfill/es6').ReadableStream; - let clientExports; let webpackMap; let webpackModules; @@ -1136,4 +1136,37 @@ describe('ReactFlightDOMNode', () => { 'Switched to client rendering because the server rendering errored:\n\nssr-throw', ); }); + + // This is a regression test for a specific issue where byte Web Streams are + // detaching ArrayBuffers, which caused downstream issues (e.g. "Cannot + // perform Construct on a detached ArrayBuffer") for chunks that are using + // Node's internal Buffer pool. + it('should not corrupt the Node.js Buffer pool by detaching ArrayBuffers when using Web Streams', async () => { + // Create a temp file smaller than 4KB to ensure it uses the Buffer pool. + const file = path.join(os.tmpdir(), 'test.bin'); + fs.writeFileSync(file, Buffer.alloc(4095)); + const fileChunk = fs.readFileSync(file); + fs.unlinkSync(file); + + // Verify this chunk uses the Buffer pool (8192 bytes for files < 4KB). + expect(fileChunk.buffer.byteLength).toBe(8192); + + const readable = await serverAct(() => + ReactServerDOMServer.renderToReadableStream(fileChunk, webpackMap), + ); + + // Create a Web Streams WritableStream that tries to use Buffer operations. + const writable = new WritableStream({ + write(chunk) { + // Only write one byte to ensure Node.js is not creating a new Buffer + // pool. Typically, library code (e.g. a compression middleware) would + // call Buffer.from(chunk) or similar, instead of allocating a new + // Buffer directly. With that, the test file could only be ~2600 bytes. + Buffer.allocUnsafe(1); + }, + }); + + // Must not throw an error. + await readable.pipeTo(writable); + }); }); diff --git a/packages/react-server/src/ReactServerStreamConfigEdge.js b/packages/react-server/src/ReactServerStreamConfigEdge.js index dbe6d6f90ca..90affdc6b8a 100644 --- a/packages/react-server/src/ReactServerStreamConfigEdge.js +++ b/packages/react-server/src/ReactServerStreamConfigEdge.js @@ -37,7 +37,11 @@ export function flushBuffered(destination: Destination) { // transform streams. https://github.com/whatwg/streams/issues/960 } -const VIEW_SIZE = 2048; +// Chunks larger than VIEW_SIZE are written directly, without copying into the +// internal view buffer. This must be at least half of Node's internal Buffer +// pool size (8192) to avoid corrupting the pool when using +// renderToReadableStream, which uses a byte stream that detaches ArrayBuffers. +const VIEW_SIZE = 4096; let currentView = null; let writtenBytes = 0; @@ -147,14 +151,7 @@ export function typedArrayToBinaryChunk( // If we passed through this straight to enqueue we wouldn't have to convert it but since // we need to copy the buffer in that case, we need to convert it to copy it. // When we copy it into another array using set() it needs to be a Uint8Array. - const buffer = new Uint8Array( - content.buffer, - content.byteOffset, - content.byteLength, - ); - // We clone large chunks so that we can transfer them when we write them. - // Others get copied into the target buffer. - return content.byteLength > VIEW_SIZE ? buffer.slice() : buffer; + return new Uint8Array(content.buffer, content.byteOffset, content.byteLength); } export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number { diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js index 3fb69841172..90609da2c45 100644 --- a/packages/react-server/src/ReactServerStreamConfigNode.js +++ b/packages/react-server/src/ReactServerStreamConfigNode.js @@ -38,7 +38,11 @@ export function flushBuffered(destination: Destination) { } } -const VIEW_SIZE = 2048; +// Chunks larger than VIEW_SIZE are written directly, without copying into the +// internal view buffer. This must be at least half of Node's internal Buffer +// pool size (8192) to avoid corrupting the pool when using +// renderToReadableStream, which uses a byte stream that detaches ArrayBuffers. +const VIEW_SIZE = 4096; let currentView = null; let writtenBytes = 0; let destinationHasCapacity = true; From ef88c588d51366d16c5323dba4bd197aeb85e4ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:51:02 -0400 Subject: [PATCH 102/276] [DevTools] Tweak the rects design and create multi-environment color scheme (#34880) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit <img width="1011" height="811" alt="Screenshot 2025-10-16 at 2 20 46 PM" src="https://github.com/user-attachments/assets/6dea3962-d369-4823-b44f-2c62b566c8f1" /> The selection is now clearer with a wider outline which spans the bounding box if there are multi rects. The color now gets darked changes on hover with a slight animation. The colors are now mixed from constants defined which are consistently used in the rects, the time span in the "suspended by" side bar and the scrubber. I also have constants defined for "server" and "other" debug environments which will be used in a follow up. --- .../src/devtools/constants.js | 20 ++++++-- .../InspectedElementSharedStyles.css | 4 +- .../views/SuspenseTab/SuspenseRects.css | 51 +++++++++++++++---- .../views/SuspenseTab/SuspenseRects.js | 12 ++++- .../views/SuspenseTab/SuspenseScrubber.css | 10 ++-- 5 files changed, 74 insertions(+), 23 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js index cfb73713b08..5c90501d70f 100644 --- a/packages/react-devtools-shared/src/devtools/constants.js +++ b/packages/react-devtools-shared/src/devtools/constants.js @@ -136,8 +136,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-timeline-text-dim-color': '#ccc', '--color-timeline-react-work-border': '#eeeeee', '--color-timebar-background': '#f6f6f6', - '--color-timespan-background': '#62bc6a', - '--color-timespan-background-errored': '#d57066', '--color-search-match': 'yellow', '--color-search-match-current': '#f7923b', '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)', @@ -156,6 +154,14 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#fd4d69', + '--color-suspense': '#0088fa', + '--color-transition': '#6a51b2', + '--color-suspense-server': '#62bc6a', + '--color-transition-server': '#3f7844', + '--color-suspense-other': '#f3ce49', + '--color-transition-other': '#917b2c', + '--color-suspense-errored': '#d57066', + // The styles below should be kept in sync with 'root.css' // They are repeated there because they're used by e.g. tooltips or context menus // which get rendered outside of the DOM subtree (where normal theme/styles are written). @@ -290,8 +296,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-timeline-text-dim-color': '#555b66', '--color-timeline-react-work-border': '#3d424a', '--color-timebar-background': '#1d2129', - '--color-timespan-background': '#62bc6a', - '--color-timespan-background-errored': '#d57066', '--color-search-match': 'yellow', '--color-search-match-current': '#f7923b', '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)', @@ -311,6 +315,14 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#ee1638', + '--color-suspense': '#61dafb', + '--color-transition': '#6a51b2', + '--color-suspense-server': '#62bc6a', + '--color-transition-server': '#3f7844', + '--color-suspense-other': '#f3ce49', + '--color-transition-other': '#917b2c', + '--color-suspense-errored': '#d57066', + // The styles below should be kept in sync with 'root.css' // They are repeated there because they're used by e.g. tooltips or context menus // which get rendered outside of the DOM subtree (where normal theme/styles are written). diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css index 413554008fa..6c56aec6899 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css @@ -128,13 +128,13 @@ .TimeBarSpan, .TimeBarSpanErrored { position: absolute; border-radius: 0.125rem; - background-color: var(--color-timespan-background); + background-color: var(--color-suspense); width: 100%; height: 100%; } .TimeBarSpanErrored { - background-color: var(--color-timespan-background-errored); + background-color: var(--color-suspense-errored); } .SmallHeader { diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 591d908735e..16d385d7523 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -1,12 +1,20 @@ .SuspenseRectsContainer { padding: .25rem; cursor: pointer; - outline: 1px solid var(--color-component-name); + outline-color: var(--color-transition); + outline-style: solid; + outline-width: 1px; border-radius: 0.25rem; + background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); +} + +.SuspenseRectsContainer:hover:not(:has(.SuspenseRectsBoundary:hover))[data-highlighted='false'] { + outline-width: 1px; } .SuspenseRectsContainer[data-highlighted='true'] { - background: var(--color-dimmest); + outline-style: solid; + outline-width: 4px; } .SuspenseRectsViewBox { @@ -15,6 +23,11 @@ .SuspenseRectsBoundary { pointer-events: all; + border-radius: 0.125rem; +} + +.SuspenseRectsBoundary[data-visible='false'] { + background-color: transparent; } .SuspenseRectsBoundaryChildren { @@ -28,15 +41,18 @@ .SuspenseRectsRect { box-shadow: var(--elevation-4); pointer-events: all; + cursor: pointer; + border-radius: 0.125rem; + background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 25%); + backdrop-filter: grayscale(100%); + transition: background-color 0.2s ease-in; + outline-color: var(--color-suspense); outline-style: solid; outline-width: 1px; - border-radius: 0.125rem; - cursor: pointer; } .SuspenseRectsScaledRect { position: absolute; - outline-color: var(--color-background-selected); } .SuspenseRectsScaledRect[data-visible='false'] { @@ -44,15 +60,28 @@ outline-width: 0; } -.SuspenseRectsScaledRect[data-suspended='true'] { - opacity: 0.3; +.SuspenseRectsBoundary[data-suspended='true'] { + opacity: 0.33; } /* highlight this boundary */ -.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect { - background-color: var(--color-background-hover); +.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect { + background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 50%); + transition: background-color 0.2s ease-out; +} + +.SuspenseRectsBoundary[data-selected='true'] { + box-shadow: var(--elevation-4); +} + +.SuspenseRectOutline { + outline-color: var(--color-suspense); + outline-style: solid; + outline-width: 4px; + border-radius: 0.125rem; + pointer-events: none; } -.SuspenseRectsRect[data-highlighted='true'] { - background-color: var(--color-selected-tree-highlight-active); +.SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect { + box-shadow: none; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index c2a13191650..4a45187d7fd 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -36,6 +36,7 @@ function ScaledRect({ rect, visible, suspended, + selected, adjust, ...props }: { @@ -43,6 +44,7 @@ function ScaledRect({ rect: Rect, visible: boolean, suspended: boolean, + selected?: boolean, adjust?: boolean, ... }): React$Node { @@ -58,6 +60,7 @@ function ScaledRect({ className={styles.SuspenseRectsScaledRect + ' ' + className} data-visible={visible} data-suspended={suspended} + data-selected={selected} style={{ // Shrink one pixel so that the bottom outline will line up with the top outline of the next one. width: adjust ? 'calc(' + width + ' - 1px)' : width, @@ -152,6 +155,7 @@ function SuspenseRects({ rect={boundingBox} className={styles.SuspenseRectsBoundary} visible={visible} + selected={selected} suspended={suspense.isSuspended}> <ViewBox.Provider value={boundingBox}> {visible && @@ -162,7 +166,6 @@ function SuspenseRects({ key={index} className={styles.SuspenseRectsRect} rect={rect} - data-highlighted={selected} adjust={true} onClick={handleClick} onDoubleClick={handleDoubleClick} @@ -182,6 +185,13 @@ function SuspenseRects({ })} </ScaledRect> )} + {selected ? ( + <ScaledRect + className={styles.SuspenseRectOutline} + rect={boundingBox} + adjust={true} + /> + ) : null} </ViewBox.Provider> </ScaledRect> ); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css index 932a23103f1..93740531a21 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css @@ -40,22 +40,22 @@ .SuspenseScrubberBead { flex: 1; height: 0.5rem; - background: var(--color-background-selected); border-radius: 0.5rem; - background: var(--color-selected-tree-highlight-active); - transition: all 0.3s ease-in-out; + background: color-mix(in srgb, var(--color-suspense) 10%, transparent); + transition: all 0.3s ease-in; } .SuspenseScrubberBeadSelected { height: 1rem; - background: var(--color-background-selected); + background: var(--color-suspense); } .SuspenseScrubberBeadTransition { - background: var(--color-component-name); + background: var(--color-transition); } .SuspenseScrubberStepHighlight > .SuspenseScrubberBead, .SuspenseScrubberStep:hover > .SuspenseScrubberBead { height: 0.75rem; + transition: all 0.3s ease-out; } From 724e7bfb40ad4f08b7f59f23db22e5fa7eda965a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:52:07 -0400 Subject: [PATCH 103/276] [DevTools] Repeat the "name" if there's no short description in groups (#34894) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It looks weird when the row is blank when there's no short description for the entry in a group. <img width="328" height="436" alt="Screenshot 2025-10-17 at 12 25 30 AM" src="https://github.com/user-attachments/assets/12f5c55f-a37f-4b6d-913e-f763cec6b211" /> --- .../devtools/views/Components/InspectedElementSuspendedBy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index fa2b6a95bed..9078d3c3bea 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -169,7 +169,7 @@ function SuspendedByRow({ type={isOpen ? 'expanded' : 'collapsed'} /> <span className={styles.CollapsableHeaderTitle}> - {skipName ? shortDescription : name} + {skipName && shortDescription !== '' ? shortDescription : name} </span> {skipName || shortDescription === '' ? null : ( <> From f970d5ff325b49d3e675c9e72025834ddc86879d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:52:26 -0400 Subject: [PATCH 104/276] [DevTools] Highlight the rect when the corresponding timeline bean is hovered (#34881) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34880. In #34861 I removed the highlight of the real view when hovering the timeline since it was disruptive to stepping through the visuals. This makes it so that when we hover the timeline we highlight the rect with the subtle hover effect added in #34880. We can now just use the one shared state for this and don't need the CSS psuedo-selectors. <img width="603" height="813" alt="Screenshot 2025-10-16 at 3 11 17 PM" src="https://github.com/user-attachments/assets/a018b5ce-dd4d-4e77-ad47-b4ea068f1976" /> --- .../views/SuspenseTab/SuspenseRects.css | 6 +++--- .../views/SuspenseTab/SuspenseRects.js | 19 +++++++++++++++---- .../views/SuspenseTab/SuspenseScrubber.css | 3 +-- .../views/SuspenseTab/SuspenseTimeline.js | 15 ++++++++++++--- 4 files changed, 31 insertions(+), 12 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 16d385d7523..69a4022307e 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -8,8 +8,8 @@ background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); } -.SuspenseRectsContainer:hover:not(:has(.SuspenseRectsBoundary:hover))[data-highlighted='false'] { - outline-width: 1px; +.SuspenseRectsContainer[data-hovered='true'] { + background-color: color-mix(in srgb, var(--color-transition) 15%, transparent); } .SuspenseRectsContainer[data-highlighted='true'] { @@ -65,7 +65,7 @@ } /* highlight this boundary */ -.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect { +.SuspenseRectsBoundary[data-hovered='true'] > .SuspenseRectsRect { background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 50%); transition: background-color 0.2s ease-out; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 4a45187d7fd..fcbb5f5f74e 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -37,6 +37,7 @@ function ScaledRect({ visible, suspended, selected, + hovered, adjust, ...props }: { @@ -45,6 +46,7 @@ function ScaledRect({ visible: boolean, suspended: boolean, selected?: boolean, + hovered?: boolean, adjust?: boolean, ... }): React$Node { @@ -61,6 +63,7 @@ function ScaledRect({ data-visible={visible} data-suspended={suspended} data-selected={selected} + data-hovered={hovered} style={{ // Shrink one pixel so that the bottom outline will line up with the top outline of the next one. width: adjust ? 'calc(' + width + ' - 1px)' : width, @@ -80,7 +83,9 @@ function SuspenseRects({ const store = useContext(StoreContext); const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); - const {uniqueSuspendersOnly} = useContext(SuspenseTreeStateContext); + const {uniqueSuspendersOnly, timeline, hoveredTimelineIndex} = useContext( + SuspenseTreeStateContext, + ); const {inspectedElementID} = useContext(TreeStateContext); @@ -148,6 +153,9 @@ function SuspenseRects({ // TODO: Use the nearest Suspense boundary const selected = inspectedElementID === suspenseID; + const hovered = + hoveredTimelineIndex > -1 && timeline[hoveredTimelineIndex] === suspenseID; + const boundingBox = getBoundingBox(suspense.rects); return ( @@ -156,7 +164,8 @@ function SuspenseRects({ className={styles.SuspenseRectsBoundary} visible={visible} selected={selected} - suspended={suspense.isSuspended}> + suspended={suspense.isSuspended} + hovered={hovered}> <ViewBox.Provider value={boundingBox}> {visible && suspense.rects !== null && @@ -317,7 +326,7 @@ function SuspenseRectsContainer(): React$Node { const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); // TODO: This relies on a full re-render of all children when the Suspense tree changes. - const {roots} = useContext(SuspenseTreeStateContext); + const {roots, hoveredTimelineIndex} = useContext(SuspenseTreeStateContext); // TODO: bbox does not consider uniqueSuspendersOnly filter const boundingBox = getDocumentBoundingRect(store, roots); @@ -361,13 +370,15 @@ function SuspenseRectsContainer(): React$Node { } const isRootSelected = roots.includes(inspectedElementID); + const isRootHovered = hoveredTimelineIndex === 0; return ( <div className={styles.SuspenseRectsContainer} onClick={handleClick} onDoubleClick={handleDoubleClick} - data-highlighted={isRootSelected}> + data-highlighted={isRootSelected} + data-hovered={isRootHovered}> <ViewBox.Provider value={boundingBox}> <div className={styles.SuspenseRectsViewBox} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css index 93740531a21..7ccb92b78bb 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css @@ -54,8 +54,7 @@ background: var(--color-transition); } -.SuspenseScrubberStepHighlight > .SuspenseScrubberBead, -.SuspenseScrubberStep:hover > .SuspenseScrubberBead { +.SuspenseScrubberStepHighlight > .SuspenseScrubberBead { height: 0.75rem; transition: all 0.3s ease-out; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index 4712397632c..af50a8c689c 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -53,10 +53,19 @@ function SuspenseTimelineInput() { switchSuspenseNode(timelineIndex); } - function handleHoverSegment(hoveredValue: number) { - // TODO: Consider highlighting the rect instead. + function handleHoverSegment(hoveredIndex: number) { + const nextSelectedSuspenseID = timeline[hoveredIndex]; + suspenseTreeDispatch({ + type: 'HOVER_TIMELINE_FOR_ID', + payload: nextSelectedSuspenseID, + }); + } + function handleUnhoverSegment() { + suspenseTreeDispatch({ + type: 'HOVER_TIMELINE_FOR_ID', + payload: -1, + }); } - function handleUnhoverSegment() {} function skipPrevious() { const nextSelectedSuspenseID = timeline[timelineIndex - 1]; From 423c44b88611afd9bf332fd1a91b5afdca8a48be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:53:30 -0400 Subject: [PATCH 105/276] [DevTools] Don't highlight the root rect if no roots has unique suspenders (#34885) Stacked on #34881. We don't paint suspense boundaries if there are no suspenders. This does the same with the root. The root is still selectable so you can confirm but there's no affordance drawing attention to click the root. This could happen if you don't use the built-ins of React to load things like scripts and css. It would never happen in something like Next.js where code and CSS is loaded through React-native like RSC. However, it could also happen in the Activity scoped case when all resources are always loaded early. --- .../views/SuspenseTab/SuspenseRects.css | 19 +++++++++------ .../views/SuspenseTab/SuspenseRects.js | 23 +++++++++++++++++-- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 69a4022307e..db0a84d8d87 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -1,22 +1,27 @@ .SuspenseRectsContainer { padding: .25rem; - cursor: pointer; - outline-color: var(--color-transition); + outline-color: transparent; outline-style: solid; outline-width: 1px; border-radius: 0.25rem; - background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); -} - -.SuspenseRectsContainer[data-hovered='true'] { - background-color: color-mix(in srgb, var(--color-transition) 15%, transparent); } .SuspenseRectsContainer[data-highlighted='true'] { + outline-color: var(--color-transition); outline-style: solid; outline-width: 4px; } +.SuspenseRectsRoot { + cursor: pointer; + outline-color: var(--color-transition); + background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); +} + +.SuspenseRectsRoot[data-hovered='true'] { + background-color: color-mix(in srgb, var(--color-transition) 15%, transparent); +} + .SuspenseRectsViewBox { position: relative; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index fcbb5f5f74e..8b171ae31a4 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -326,7 +326,9 @@ function SuspenseRectsContainer(): React$Node { const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); // TODO: This relies on a full re-render of all children when the Suspense tree changes. - const {roots, hoveredTimelineIndex} = useContext(SuspenseTreeStateContext); + const {roots, hoveredTimelineIndex, uniqueSuspendersOnly} = useContext( + SuspenseTreeStateContext, + ); // TODO: bbox does not consider uniqueSuspendersOnly filter const boundingBox = getDocumentBoundingRect(store, roots); @@ -372,9 +374,26 @@ function SuspenseRectsContainer(): React$Node { const isRootSelected = roots.includes(inspectedElementID); const isRootHovered = hoveredTimelineIndex === 0; + let hasRootSuspenders = false; + if (!uniqueSuspendersOnly) { + hasRootSuspenders = true; + } else { + for (let i = 0; i < roots.length; i++) { + const rootID = roots[i]; + const root = store.getSuspenseByID(rootID); + if (root !== null && root.hasUniqueSuspenders) { + hasRootSuspenders = true; + break; + } + } + } + return ( <div - className={styles.SuspenseRectsContainer} + className={ + styles.SuspenseRectsContainer + + (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') + } onClick={handleClick} onDoubleClick={handleDoubleClick} data-highlighted={isRootSelected} From a0833446991a913349309861338da6ab68b637a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:54:53 -0400 Subject: [PATCH 106/276] [DevTools] Compute environment names for the timeline (#34892) Stacked on #34885. This refactors the timeline to store not just an id but a complex object for each step. This will later represent a group of boundaries. Each timeline step is assigned an environment name. We pick the last environment name (assumed to have resolved last) from the union of the parent and child environment names. I.e. a child step is considered to be blocked by the parent so if a child isn't blocked on any environment name it still gets marked as the parent's environment name. In a follow up, I'd like to reorder the document order timeline based on environment names to favor loading everything in one environment before the next. --- .../src/devtools/store.js | 119 +++++++++++------- .../views/SuspenseTab/SuspenseRects.js | 3 +- .../views/SuspenseTab/SuspenseTimeline.js | 10 +- .../views/SuspenseTab/SuspenseTreeContext.js | 79 +++++++----- .../src/frontend/types.js | 6 + packages/react-devtools-shared/src/utils.js | 15 +++ 6 files changed, 155 insertions(+), 77 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index f1aa61bfe9b..b75e30d9c47 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -34,6 +34,7 @@ import { shallowDiffers, utfDecodeStringWithRanges, parseElementDisplayNameFromBackend, + unionOfTwoArrays, } from '../utils'; import {localStorageGetItem, localStorageSetItem} from '../storage'; import {__DEBUG__} from '../constants'; @@ -51,6 +52,7 @@ import type { ComponentFilter, ElementType, SuspenseNode, + SuspenseTimelineStep, Rect, } from 'react-devtools-shared/src/frontend/types'; import type { @@ -895,13 +897,10 @@ export default class Store extends EventEmitter<{ */ getSuspendableDocumentOrderSuspense( uniqueSuspendersOnly: boolean, - ): $ReadOnlyArray<SuspenseNode['id']> { + ): $ReadOnlyArray<SuspenseTimelineStep> { + const target: Array<SuspenseTimelineStep> = []; const roots = this.roots; - if (roots.length === 0) { - return []; - } - - const list: SuspenseNode['id'][] = []; + let rootStep: null | SuspenseTimelineStep = null; for (let i = 0; i < roots.length; i++) { const rootID = roots[i]; const root = this.getElementByID(rootID); @@ -912,44 +911,76 @@ export default class Store extends EventEmitter<{ const suspense = this.getSuspenseByID(rootID); if (suspense !== null) { - if (list.length === 0) { - // start with an arbitrary root that will allow inspection of the Screen - list.push(suspense.id); - } - - const stack = [suspense]; - while (stack.length > 0) { - const current = stack.pop(); - if (current === undefined) { - continue; - } - // Ignore any suspense boundaries that has no visual representation as this is not - // part of the visible loading sequence. - // TODO: Consider making visible meta data and other side-effects get virtual rects. - const hasRects = - current.rects !== null && - current.rects.length > 0 && - current.rects.some(isNonZeroRect); - if ( - hasRects && - (!uniqueSuspendersOnly || current.hasUniqueSuspenders) && - // Roots are already included as part of the Screen - current.id !== rootID - ) { - list.push(current.id); - } - // Add children in reverse order to maintain document order - for (let j = current.children.length - 1; j >= 0; j--) { - const childSuspense = this.getSuspenseByID(current.children[j]); - if (childSuspense !== null) { - stack.push(childSuspense); - } - } + const environments = suspense.environments; + const environmentName = + environments.length > 0 + ? environments[environments.length - 1] + : null; + if (rootStep === null) { + // Arbitrarily use the first root as the root step id. + rootStep = { + id: suspense.id, + environment: environmentName, + }; + target.push(rootStep); + } else if (rootStep.environment === null) { + // If any root has an environment name, then let's use it. + rootStep.environment = environmentName; } + this.pushTimelineStepsInDocumentOrder( + suspense.children, + target, + uniqueSuspendersOnly, + environments, + ); } } - return list; + return target; + } + + pushTimelineStepsInDocumentOrder( + children: Array<SuspenseNode['id']>, + target: Array<SuspenseTimelineStep>, + uniqueSuspendersOnly: boolean, + parentEnvironments: Array<string>, + ): void { + for (let i = 0; i < children.length; i++) { + const child = this.getSuspenseByID(children[i]); + if (child === null) { + continue; + } + // Ignore any suspense boundaries that has no visual representation as this is not + // part of the visible loading sequence. + // TODO: Consider making visible meta data and other side-effects get virtual rects. + const hasRects = + child.rects !== null && + child.rects.length > 0 && + child.rects.some(isNonZeroRect); + const childEnvironments = child.environments; + // Since children are blocked on the parent, they're also blocked by the parent environments. + // Only if we discover a novel environment do we add that and it becomes the name we use. + const unionEnvironments = unionOfTwoArrays( + parentEnvironments, + childEnvironments, + ); + const environmentName = + unionEnvironments.length > 0 + ? unionEnvironments[unionEnvironments.length - 1] + : null; + if (hasRects && (!uniqueSuspendersOnly || child.hasUniqueSuspenders)) { + target.push({ + id: child.id, + environment: environmentName, + }); + } + this.pushTimelineStepsInDocumentOrder( + child.children, + target, + uniqueSuspendersOnly, + unionEnvironments, + ); + } } getRendererIDForElement(id: number): number | null { @@ -1627,6 +1658,7 @@ export default class Store extends EventEmitter<{ rects, hasUniqueSuspenders: false, isSuspended: isSuspended, + environments: [], }); hasSuspenseTreeChanged = true; @@ -1812,7 +1844,10 @@ export default class Store extends EventEmitter<{ envIndex++ ) { const environmentNameStringID = operations[i++]; - environmentNames.push(stringTable[environmentNameStringID]); + const environmentName = stringTable[environmentNameStringID]; + if (environmentName != null) { + environmentNames.push(environmentName); + } } const suspense = this._idToSuspense.get(id); @@ -1836,7 +1871,7 @@ export default class Store extends EventEmitter<{ suspense.hasUniqueSuspenders = hasUniqueSuspenders; suspense.isSuspended = isSuspended; - // TODO: Recompute the environment names. + suspense.environments = environmentNames; } hasSuspenseTreeChanged = true; diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 8b171ae31a4..c19360567ae 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -154,7 +154,8 @@ function SuspenseRects({ const selected = inspectedElementID === suspenseID; const hovered = - hoveredTimelineIndex > -1 && timeline[hoveredTimelineIndex] === suspenseID; + hoveredTimelineIndex > -1 && + timeline[hoveredTimelineIndex].id === suspenseID; const boundingBox = getBoundingBox(suspense.rects); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index af50a8c689c..f230cfb549a 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -34,7 +34,7 @@ function SuspenseTimelineInput() { const max = timeline.length > 0 ? timeline.length - 1 : 0; function switchSuspenseNode(nextTimelineIndex: number) { - const nextSelectedSuspenseID = timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = timeline[nextTimelineIndex].id; treeDispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: nextSelectedSuspenseID, @@ -54,7 +54,7 @@ function SuspenseTimelineInput() { } function handleHoverSegment(hoveredIndex: number) { - const nextSelectedSuspenseID = timeline[hoveredIndex]; + const nextSelectedSuspenseID = timeline[hoveredIndex].id; suspenseTreeDispatch({ type: 'HOVER_TIMELINE_FOR_ID', payload: nextSelectedSuspenseID, @@ -68,7 +68,7 @@ function SuspenseTimelineInput() { } function skipPrevious() { - const nextSelectedSuspenseID = timeline[timelineIndex - 1]; + const nextSelectedSuspenseID = timeline[timelineIndex - 1].id; treeDispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: nextSelectedSuspenseID, @@ -80,7 +80,7 @@ function SuspenseTimelineInput() { } function skipForward() { - const nextSelectedSuspenseID = timeline[timelineIndex + 1]; + const nextSelectedSuspenseID = timeline[timelineIndex + 1].id; treeDispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: nextSelectedSuspenseID, @@ -106,7 +106,7 @@ function SuspenseTimelineInput() { // anything suspended in the root. The step after that should have one less // thing suspended. I.e. the first suspense boundary should be unsuspended // when it's selected. This also lets you show everything in the last step. - const suspendedSet = timeline.slice(timelineIndex + 1); + const suspendedSet = timeline.slice(timelineIndex + 1).map(step => step.id); bridge.send('overrideSuspenseMilestone', { suspendedSet, }); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js index 484a336c349..b1ba98acfb5 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js @@ -7,7 +7,10 @@ * @flow */ import type {ReactContext} from 'shared/ReactTypes'; -import type {SuspenseNode} from 'react-devtools-shared/src/frontend/types'; +import type { + SuspenseNode, + SuspenseTimelineStep, +} from 'react-devtools-shared/src/frontend/types'; import type Store from '../../store'; import * as React from 'react'; @@ -25,7 +28,7 @@ export type SuspenseTreeState = { lineage: $ReadOnlyArray<SuspenseNode['id']> | null, roots: $ReadOnlyArray<SuspenseNode['id']>, selectedSuspenseID: SuspenseNode['id'] | null, - timeline: $ReadOnlyArray<SuspenseNode['id']>, + timeline: $ReadOnlyArray<SuspenseTimelineStep>, timelineIndex: number | -1, hoveredTimelineIndex: number | -1, uniqueSuspendersOnly: boolean, @@ -49,7 +52,7 @@ type ACTION_SELECT_SUSPENSE_BY_ID = { type ACTION_SET_SUSPENSE_TIMELINE = { type: 'SET_SUSPENSE_TIMELINE', payload: [ - $ReadOnlyArray<SuspenseNode['id']>, + $ReadOnlyArray<SuspenseTimelineStep>, // The next Suspense ID to select in the timeline SuspenseNode['id'] | null, // Whether this timeline includes only unique suspenders @@ -111,7 +114,7 @@ function getInitialState(store: Store): SuspenseTreeState { store.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly); const timelineIndex = timeline.length - 1; const selectedSuspenseID = - timelineIndex === -1 ? null : timeline[timelineIndex]; + timelineIndex === -1 ? null : timeline[timelineIndex].id; const lineage = selectedSuspenseID !== null ? store.getSuspenseLineage(selectedSuspenseID) @@ -164,16 +167,18 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedSuspenseID = null; } - let selectedTimelineID = - state.timeline === null + const selectedTimelineStep = + state.timeline === null || state.timelineIndex === -1 ? null : state.timeline[state.timelineIndex]; - while ( - selectedTimelineID !== null && - removedIDs.has(selectedTimelineID) - ) { - // $FlowExpectedError[incompatible-type] - selectedTimelineID = removedIDs.get(selectedTimelineID); + let selectedTimelineID: null | number = null; + if (selectedTimelineStep !== null) { + selectedTimelineID = selectedTimelineStep.id; + // $FlowFixMe + while (removedIDs.has(selectedTimelineID)) { + // $FlowFixMe + selectedTimelineID = removedIDs.get(selectedTimelineID); + } } // TODO: Handle different timeline modes (e.g. random order) @@ -181,20 +186,25 @@ function SuspenseTreeContextController({children}: Props): React.Node { state.uniqueSuspendersOnly, ); - let nextTimelineIndex = - selectedTimelineID === null || nextTimeline.length === 0 - ? -1 - : nextTimeline.indexOf(selectedTimelineID); + let nextTimelineIndex = -1; + if (selectedTimelineID !== null && nextTimeline.length !== 0) { + for (let i = 0; i < nextTimeline.length; i++) { + if (nextTimeline[i].id === selectedTimelineID) { + nextTimelineIndex = i; + break; + } + } + } if ( nextTimeline.length > 0 && (nextTimelineIndex === -1 || state.autoSelect) ) { nextTimelineIndex = nextTimeline.length - 1; - selectedSuspenseID = nextTimeline[nextTimelineIndex]; + selectedSuspenseID = nextTimeline[nextTimelineIndex].id; } if (selectedSuspenseID === null && nextTimeline.length > 0) { - selectedSuspenseID = nextTimeline[nextTimeline.length - 1]; + selectedSuspenseID = nextTimeline[nextTimeline.length - 1].id; } const nextLineage = @@ -256,12 +266,12 @@ function SuspenseTreeContextController({children}: Props): React.Node { nextMilestoneIndex = nextTimeline.indexOf(previousMilestoneID); if (nextMilestoneIndex === -1 && nextTimeline.length > 0) { nextMilestoneIndex = nextTimeline.length - 1; - nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex]; + nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex].id; nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID); } } else if (nextRootID !== null) { nextMilestoneIndex = nextTimeline.length - 1; - nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex]; + nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex].id; nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID); } @@ -276,7 +286,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { } case 'SUSPENSE_SET_TIMELINE_INDEX': { const nextTimelineIndex = action.payload; - const nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; const nextLineage = store.getSuspenseLineage( nextSelectedSuspenseID, ); @@ -301,7 +311,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { ) { return state; } - const nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; const nextLineage = store.getSuspenseLineage( nextSelectedSuspenseID, ); @@ -329,7 +339,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { ) { // If we're restarting at the end. Then loop around and start again from the beginning. nextTimelineIndex = 0; - nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID); } @@ -352,7 +362,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { if (nextTimelineIndex > state.timeline.length - 1) { return state; } - const nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; const nextLineage = store.getSuspenseLineage( nextSelectedSuspenseID, ); @@ -369,8 +379,14 @@ function SuspenseTreeContextController({children}: Props): React.Node { } case 'TOGGLE_TIMELINE_FOR_ID': { const suspenseID = action.payload; - const timelineIndexForSuspenseID = - state.timeline.indexOf(suspenseID); + + let timelineIndexForSuspenseID = -1; + for (let i = 0; i < state.timeline.length; i++) { + if (state.timeline[i].id === suspenseID) { + timelineIndexForSuspenseID = i; + break; + } + } if (timelineIndexForSuspenseID === -1) { // This boundary is no longer in the timeline. return state; @@ -387,7 +403,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { timelineIndexForSuspenseID : // Otherwise, if we're currently showing it, jump to right before to hide it. timelineIndexForSuspenseID - 1; - const nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; const nextLineage = store.getSuspenseLineage( nextSelectedSuspenseID, ); @@ -403,8 +419,13 @@ function SuspenseTreeContextController({children}: Props): React.Node { } case 'HOVER_TIMELINE_FOR_ID': { const suspenseID = action.payload; - const timelineIndexForSuspenseID = - state.timeline.indexOf(suspenseID); + let timelineIndexForSuspenseID = -1; + for (let i = 0; i < state.timeline.length; i++) { + if (state.timeline[i].id === suspenseID) { + timelineIndexForSuspenseID = i; + break; + } + } return { ...state, hoveredTimelineIndex: timelineIndexForSuspenseID, diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js index 2a012ce33a1..4eed49e6bac 100644 --- a/packages/react-devtools-shared/src/frontend/types.js +++ b/packages/react-devtools-shared/src/frontend/types.js @@ -193,6 +193,11 @@ export type Rect = { height: number, }; +export type SuspenseTimelineStep = { + id: SuspenseNode['id'], // TODO: Will become a group. + environment: null | string, +}; + export type SuspenseNode = { id: Element['id'], parentID: SuspenseNode['id'] | 0, @@ -201,6 +206,7 @@ export type SuspenseNode = { rects: null | Array<Rect>, hasUniqueSuspenders: boolean, isSuspended: boolean, + environments: Array<string>, }; // Serialized version of ReactIOInfo diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 29ff6d566bd..6d31888cd9d 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -1305,3 +1305,18 @@ export function onReloadAndProfileFlagsReset(): void { sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY); sessionStorageRemoveItem(SESSION_STORAGE_RECORD_TIMELINE_KEY); } + +export function unionOfTwoArrays<T>(a: Array<T>, b: Array<T>): Array<T> { + let result = a; + for (let i = 0; i < b.length; i++) { + const value = b[i]; + if (a.indexOf(value) === -1) { + if (result === a) { + // Lazily copy + result = a.slice(0); + } + result.push(value); + } + } + return result; +} From 3a669170e96a63a4ce3a44f78401fb9f4f803510 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 19:03:15 -0400 Subject: [PATCH 107/276] [DevTools] Assign a different color and label based on environment (#34893) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34892. In the timeline scrubber each timeline entry gets a label and color assigned based on the environment computed for that step. In the rects, we find the timeline step that this boundary is part of and use that environment to assign a color. This is slightly different than picking from the boundary itself since it takes into account parent boundaries. In the "suspended by" section we color each entry individually based on the environment that spawned the I/O. <img width="790" height="813" alt="Screenshot 2025-10-17 at 12 18 56 AM" src="https://github.com/user-attachments/assets/c902b1fb-0992-4e24-8e94-a97ca8507551" /> --- .../src/devtools/constants.js | 8 ++--- .../Components/InspectedElementSuspendedBy.js | 23 ++++++++++++-- .../SuspenseTab/SuspenseEnvironmentColors.css | 14 +++++++++ .../SuspenseTab/SuspenseEnvironmentColors.js | 20 +++++++++++++ .../views/SuspenseTab/SuspenseRects.js | 28 +++++++++++++---- .../views/SuspenseTab/SuspenseScrubber.js | 30 ++++++++++++------- .../views/SuspenseTab/SuspenseTimeline.js | 1 + 7 files changed, 102 insertions(+), 22 deletions(-) create mode 100644 packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css create mode 100644 packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js index 5c90501d70f..d093a798bcd 100644 --- a/packages/react-devtools-shared/src/devtools/constants.js +++ b/packages/react-devtools-shared/src/devtools/constants.js @@ -154,8 +154,8 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#fd4d69', - '--color-suspense': '#0088fa', - '--color-transition': '#6a51b2', + '--color-suspense-default': '#0088fa', + '--color-transition-default': '#6a51b2', '--color-suspense-server': '#62bc6a', '--color-transition-server': '#3f7844', '--color-suspense-other': '#f3ce49', @@ -315,8 +315,8 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#ee1638', - '--color-suspense': '#61dafb', - '--color-transition': '#6a51b2', + '--color-suspense-default': '#61dafb', + '--color-transition-default': '#6a51b2', '--color-suspense-server': '#62bc6a', '--color-transition-server': '#3f7844', '--color-suspense-other': '#f3ce49', diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index 9078d3c3bea..78c137deaf3 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -22,6 +22,8 @@ import OwnerView from './OwnerView'; import {meta} from '../../../hydration'; import useInferredName from '../useInferredName'; +import {getClassNameForEnvironment} from '../SuspenseTab/SuspenseEnvironmentColors.js'; + import type { InspectedElement, SerializedAsyncInfo, @@ -181,7 +183,12 @@ function SuspendedByRow({ </> )} <div className={styles.CollapsableHeaderFiller} /> - <div className={styles.TimeBarContainer}> + <div + className={ + styles.TimeBarContainer + + ' ' + + getClassNameForEnvironment(ioInfo.env) + }> <div className={ !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored @@ -341,6 +348,7 @@ type GroupProps = { inspectedElement: InspectedElement, store: Store, name: string, + environment: null | string, suspendedBy: Array<{ index: number, value: SerializedAsyncInfo, @@ -355,6 +363,7 @@ function SuspendedByGroup({ inspectedElement, store, name, + environment, suspendedBy, minTime, maxTime, @@ -407,7 +416,12 @@ function SuspendedByGroup({ <span className={styles.CollapsableHeaderTitle}>{pluralizedName}</span> <div className={styles.CollapsableHeaderFiller} /> {isOpen ? null : ( - <div className={styles.TimeBarContainer}> + <div + className={ + styles.TimeBarContainer + + ' ' + + getClassNameForEnvironment(environment) + }> <div className={ !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored @@ -502,17 +516,21 @@ export default function InspectedElementSuspendedBy({ const groups = []; let currentGroup = null; let currentGroupName = null; + let currentGroupEnv = null; for (let i = 0; i < sortedSuspendedBy.length; i++) { const entry = sortedSuspendedBy[i]; const name = entry.value.awaited.name; + const env = entry.value.awaited.env; if ( currentGroupName !== name || + currentGroupEnv !== env || !name || name === 'Promise' || currentGroup === null ) { // Create a new group. currentGroupName = name; + currentGroupEnv = env; currentGroup = []; groups.push(currentGroup); } @@ -591,6 +609,7 @@ export default function InspectedElementSuspendedBy({ <SuspendedByGroup key={entries[0].index} name={entries[0].value.awaited.name} + environment={entries[0].value.awaited.env} suspendedBy={entries} bridge={bridge} element={element} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css new file mode 100644 index 00000000000..a56bc80ee9b --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css @@ -0,0 +1,14 @@ +.SuspenseEnvironmentDefault { + --color-suspense: var(--color-suspense-default); + --color-transition: var(--color-transition-default); +} + +.SuspenseEnvironmentServer { + --color-suspense: var(--color-suspense-server); + --color-transition: var(--color-transition-server); +} + +.SuspenseEnvironmentOther { + --color-suspense: var(--color-suspense-other); + --color-transition: var(--color-transition-other); +} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js new file mode 100644 index 00000000000..579a9093acb --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js @@ -0,0 +1,20 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import styles from './SuspenseEnvironmentColors.css'; + +export function getClassNameForEnvironment(environment: null | string): string { + if (environment === null) { + return styles.SuspenseEnvironmentDefault; + } + if (environment === 'Server') { + return styles.SuspenseEnvironmentServer; + } + return styles.SuspenseEnvironmentOther; +} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index c19360567ae..e6beca7c229 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -30,6 +30,7 @@ import { SuspenseTreeStateContext, SuspenseTreeDispatcherContext, } from './SuspenseTreeContext'; +import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js'; function ScaledRect({ className, @@ -157,12 +158,25 @@ function SuspenseRects({ hoveredTimelineIndex > -1 && timeline[hoveredTimelineIndex].id === suspenseID; + let environment: null | string = null; + for (let i = 0; i < timeline.length; i++) { + const timelineStep = timeline[i]; + if (timelineStep.id === suspenseID) { + environment = timelineStep.environment; + break; + } + } + const boundingBox = getBoundingBox(suspense.rects); return ( <ScaledRect rect={boundingBox} - className={styles.SuspenseRectsBoundary} + className={ + styles.SuspenseRectsBoundary + + ' ' + + getClassNameForEnvironment(environment) + } visible={visible} selected={selected} suspended={suspense.isSuspended} @@ -327,9 +341,8 @@ function SuspenseRectsContainer(): React$Node { const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); // TODO: This relies on a full re-render of all children when the Suspense tree changes. - const {roots, hoveredTimelineIndex, uniqueSuspendersOnly} = useContext( - SuspenseTreeStateContext, - ); + const {roots, timeline, hoveredTimelineIndex, uniqueSuspendersOnly} = + useContext(SuspenseTreeStateContext); // TODO: bbox does not consider uniqueSuspendersOnly filter const boundingBox = getDocumentBoundingRect(store, roots); @@ -389,11 +402,16 @@ function SuspenseRectsContainer(): React$Node { } } + const rootEnvironment = + timeline.length === 0 ? null : timeline[0].environment; + return ( <div className={ styles.SuspenseRectsContainer + - (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') + (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') + + ' ' + + getClassNameForEnvironment(rootEnvironment) } onClick={handleClick} onDoubleClick={handleDoubleClick} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js index f1998aff4b1..2c7e1bc1cdd 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js @@ -7,6 +7,8 @@ * @flow */ +import type {SuspenseTimelineStep} from 'react-devtools-shared/src/frontend/types'; + import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent'; import * as React from 'react'; @@ -14,11 +16,14 @@ import {useRef} from 'react'; import styles from './SuspenseScrubber.css'; +import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js'; + import Tooltip from '../Components/reach-ui/tooltip'; export default function SuspenseScrubber({ min, max, + timeline, value, highlight, onBlur, @@ -29,6 +34,7 @@ export default function SuspenseScrubber({ }: { min: number, max: number, + timeline: $ReadOnlyArray<SuspenseTimelineStep>, value: number, highlight: number, onBlur?: () => void, @@ -54,17 +60,18 @@ export default function SuspenseScrubber({ } const steps = []; for (let index = min; index <= max; index++) { + const environment = timeline[index].environment; + const label = + index === min + ? // The first step in the timeline is always a Transition (Initial Paint). + 'Initial Paint' + + (environment === null ? '' : ' (' + environment + ')') + : // TODO: Consider adding the name of this specific boundary if this step has only one. + environment === null + ? 'Suspense' + : environment; steps.push( - <Tooltip - key={index} - label={ - index === min - ? // The first step in the timeline is always a Transition (Initial Paint). - // TODO: Support multiple environments. - 'Initial Paint' - : // TODO: Consider adding the name of this specific boundary if this step has only one. - 'Suspense' - }> + <Tooltip key={index} label={label}> <div className={ styles.SuspenseScrubberStep + @@ -79,9 +86,10 @@ export default function SuspenseScrubber({ styles.SuspenseScrubberBead + (index === min ? // The first step in the timeline is always a Transition (Initial Paint). - // TODO: Support multiple environments. ' ' + styles.SuspenseScrubberBeadTransition : '') + + ' ' + + getClassNameForEnvironment(environment) + (index <= value ? ' ' + styles.SuspenseScrubberBeadSelected : '') } /> diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index f230cfb549a..89f349ae6ea 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -173,6 +173,7 @@ function SuspenseTimelineInput() { <SuspenseScrubber min={min} max={max} + timeline={timeline} value={timelineIndex} highlight={hoveredTimelineIndex} onChange={handleChange} From 40c7a7f6cac62bd6721328524cc787475ce026eb Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Sat, 18 Oct 2025 12:54:05 +0200 Subject: [PATCH 108/276] [DevTools] Use same Suspense naming heuristics when reconnecting (#34898) --- .../src/__tests__/store-test.js | 57 +++++++++++++++++++ .../src/backend/fiber/renderer.js | 2 +- .../src/devtools/store.js | 11 +--- .../src/devtools/utils.js | 6 +- .../views/SuspenseTab/SuspenseBreadcrumbs.js | 2 +- .../views/SuspenseTab/SuspenseRects.js | 2 +- 6 files changed, 64 insertions(+), 16 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index c02d8130c30..07e82040497 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -3243,4 +3243,61 @@ describe('Store', () => { <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}> `); }); + + // @reactVersion >= 19.0 + it('guesses a Suspense name based on the owner', async () => { + let resolve; + const promise = new Promise(_resolve => { + resolve = _resolve; + }); + function Inner() { + return ( + <React.Suspense fallback={<p>Loading inner</p>}> + <p>{promise}</p> + </React.Suspense> + ); + } + + function Outer({children}) { + return ( + <React.Suspense fallback={<p>Loading outer</p>}> + <p>{promise}</p> + {children} + </React.Suspense> + ); + } + + await actAsync(() => { + render( + <Outer> + <Inner /> + </Outer>, + ); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <Outer> + <Suspense> + [suspense-root] rects={[{x:1,y:2,width:13,height:1}]} + <Suspense name="Outer" rects={null}> + `); + + console.log('...........................'); + + await actAsync(() => { + resolve('loaded'); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <Outer> + ▾ <Suspense> + ▾ <Inner> + <Suspense> + [suspense-root] rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]} + <Suspense name="Outer" rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}> + <Suspense name="Inner" rects={[{x:1,y:2,width:6,height:1}]}> + `); + }); }); diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index de178909b29..4dd4a619cb4 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2664,7 +2664,7 @@ export function attach( const fiber = fiberInstance.data; const props = fiber.memoizedProps; - // TODO: Compute a fallback name based on Owner, key etc. + // The frontend will guess a name based on heuristics (e.g. owner) if no explicit name is given. const name = fiber.tag !== SuspenseComponent || props === null ? null diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index b75e30d9c47..aaf0584a4c5 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1646,10 +1646,6 @@ export default class Store extends EventEmitter<{ parentSuspense.children.push(id); } - if (name === null) { - name = 'Unknown'; - } - this._idToSuspense.set(id, { id, parentID, @@ -2170,13 +2166,12 @@ export default class Store extends EventEmitter<{ throw error; } - _guessSuspenseName(element: Element): string { + _guessSuspenseName(element: Element): string | null { const owner = this._idToElement.get(element.ownerID); - let name = 'Unknown'; if (owner !== undefined && owner.displayName !== null) { - name = owner.displayName; + return owner.displayName; } - return name; + return null; } } diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js index d5078679f44..640f0d19b57 100644 --- a/packages/react-devtools-shared/src/devtools/utils.js +++ b/packages/react-devtools-shared/src/devtools/utils.js @@ -63,11 +63,7 @@ function printRects(rects: SuspenseNode['rects']): string { } function printSuspense(suspense: SuspenseNode): string { - let name = ''; - if (suspense.name !== null) { - name = ` name="${suspense.name}"`; - } - + const name = ` name="${suspense.name || 'Unknown'}"`; const printedRects = printRects(suspense.rects); return `<Suspense${name}${printedRects}>`; diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js index d7112ec7d3a..b27e0f59875 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js @@ -72,7 +72,7 @@ export default function SuspenseBreadcrumbs(): React$Node { className={styles.SuspenseBreadcrumbsButton} onClick={handleClick.bind(null, id)} type="button"> - {node === null ? 'Unknown' : node.name} + {node === null ? 'Unknown' : node.name || 'Unknown'} </button> </li> ); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index e6beca7c229..67a6bf27739 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -196,7 +196,7 @@ function SuspenseRects({ onPointerOver={handlePointerOver} onPointerLeave={handlePointerLeave} // Reach-UI tooltip will go out of bounds of parent scroll container. - title={suspense.name} + title={suspense.name || 'Unknown'} /> ); })} From ec7d9a7249e84e841fbe1e4c22e1be2c0c15dae4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 11:56:25 -0700 Subject: [PATCH 109/276] Resolve the .default export of a React.lazy as the canonical value (#34906) For debug purposes this is the value that the `React.lazy` resolves to. It also lets us look at that value for descriptions like its name. --- packages/react/src/ReactLazy.js | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js index 55b1690b7ca..47f37afbae2 100644 --- a/packages/react/src/ReactLazy.js +++ b/packages/react/src/ReactLazy.js @@ -20,6 +20,8 @@ import {enableAsyncDebugInfo} from 'shared/ReactFeatureFlags'; import {REACT_LAZY_TYPE} from 'shared/ReactSymbols'; +import noop from 'shared/noop'; + const Uninitialized = -1; const Pending = 0; const Resolved = 1; @@ -67,12 +69,20 @@ export type LazyComponent<T, P> = { function lazyInitializer<T>(payload: Payload<T>): T { if (payload._status === Uninitialized) { + let resolveDebugValue: (void | T) => void = (null: any); + let rejectDebugValue: mixed => void = (null: any); if (__DEV__ && enableAsyncDebugInfo) { const ioInfo = payload._ioInfo; if (ioInfo != null) { // Mark when we first kicked off the lazy request. // $FlowFixMe[cannot-write] ioInfo.start = ioInfo.end = performance.now(); + // Stash a Promise for introspection of the value later. + // $FlowFixMe[cannot-write] + ioInfo.value = new Promise((resolve, reject) => { + resolveDebugValue = resolve; + rejectDebugValue = reject; + }); } } const ctor = payload._result; @@ -92,12 +102,20 @@ function lazyInitializer<T>(payload: Payload<T>): T { const resolved: ResolvedPayload<T> = (payload: any); resolved._status = Resolved; resolved._result = moduleObject; - if (__DEV__) { + if (__DEV__ && enableAsyncDebugInfo) { const ioInfo = payload._ioInfo; if (ioInfo != null) { // Mark the end time of when we resolved. // $FlowFixMe[cannot-write] ioInfo.end = performance.now(); + // Surface the default export as the resolved "value" for debug purposes. + const debugValue = + moduleObject == null ? undefined : moduleObject.default; + resolveDebugValue(debugValue); + // $FlowFixMe + ioInfo.value.status = 'fulfilled'; + // $FlowFixMe + ioInfo.value.value = debugValue; } // Make the thenable introspectable if (thenable.status === undefined) { @@ -124,6 +142,14 @@ function lazyInitializer<T>(payload: Payload<T>): T { // Mark the end time of when we rejected. // $FlowFixMe[cannot-write] ioInfo.end = performance.now(); + // Hide unhandled rejections. + // $FlowFixMe + ioInfo.value.then(noop, noop); + rejectDebugValue(error); + // $FlowFixMe + ioInfo.value.status = 'rejected'; + // $FlowFixMe + ioInfo.value.reason = error; } // Make the thenable introspectable if (thenable.status === undefined) { @@ -139,9 +165,6 @@ function lazyInitializer<T>(payload: Payload<T>): T { if (__DEV__ && enableAsyncDebugInfo) { const ioInfo = payload._ioInfo; if (ioInfo != null) { - // Stash the thenable for introspection of the value later. - // $FlowFixMe[cannot-write] - ioInfo.value = thenable; const displayName = thenable.displayName; if (typeof displayName === 'string') { // $FlowFixMe[cannot-write] From bf11d2fb2f01174974b7e1fa5b1c01d34936724b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 11:56:40 -0700 Subject: [PATCH 110/276] [DevTools] Infer name from stack if it's the generic "lazy" name (#34907) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34906. Infer name from stack if it's the generic "lazy" name. It might be wrapped in an abstraction. E.g. `next/dynamic`. Also use the function name as a description of a resolved function value. <img width="310" height="166" alt="Screenshot 2025-10-18 at 10 42 05 AM" src="https://github.com/user-attachments/assets/c63170b9-2b19-4f30-be7a-6429bb3ef3d9" /> --- .../react-devtools-shared/src/devtools/views/useInferredName.js | 2 +- packages/shared/ReactIODescription.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/useInferredName.js b/packages/react-devtools-shared/src/devtools/views/useInferredName.js index f0822e126d7..2c93ded4691 100644 --- a/packages/react-devtools-shared/src/devtools/views/useInferredName.js +++ b/packages/react-devtools-shared/src/devtools/views/useInferredName.js @@ -16,7 +16,7 @@ export default function useInferredName( const fetchFileWithCaching = useContext(FetchFileWithCachingContext); const name = asyncInfo.awaited.name; let inferNameFromStack = null; - if (!name || name === 'Promise') { + if (!name || name === 'Promise' || name === 'lazy') { // If all we have is a generic name, we can try to infer a better name from // the stack. We only do this if the stack has more than one frame since // otherwise it's likely to just be the name of the component which isn't better. diff --git a/packages/shared/ReactIODescription.js b/packages/shared/ReactIODescription.js index e1a0fce2c4d..6d7bf648fc8 100644 --- a/packages/shared/ReactIODescription.js +++ b/packages/shared/ReactIODescription.js @@ -13,6 +13,8 @@ export function getIODescription(value: mixed): string { } try { switch (typeof value) { + case 'function': + return value.name || ''; case 'object': // Test the object for a bunch of common property names that are useful identifiers. // While we only have the return value here, it should ideally be a name that From 58bdc0bb967098f14562cd76af0668f2056459a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 11:56:56 -0700 Subject: [PATCH 111/276] [Flight] Ignore bound-anonymous-fn resources as they're not considered I/O (#34911) When you create a snapshot from an AsyncLocalStorage in Node.js, that creates a new bound AsyncResource which everything runs inside of. https://github.com/nodejs/node/blob/3437e1c4bd529e51d96ea581b6435bbeb77ef524/lib/internal/async_local_storage/async_hooks.js#L61-L67 This resource is itself tracked by our async debug tracking as I/O. We can't really distinguish these in general from other AsyncResources which are I/O. However, by default they're given the name `"bound-anonymous-fn"` if you pass it an anonymous function or in the case of a snapshot, that's built-in: https://github.com/nodejs/node/blob/3437e1c4bd529e51d96ea581b6435bbeb77ef524/lib/async_hooks.js#L262-L263 We can at least assume that these are non-I/O. If you want to ensure that a bound resource is not considered I/O, you can ensure your function isn't assigned a name or give it this explicit name. The other issue here is that, the sequencing here is that we track the callsite of the `.snapshot()` or `.bind()` call as the trigger. So if that was outside of render for example, then it would be considered non-I/O. However, this might miss stuff if you resolve promises inside the `.run()` of the snapshot if the `.run()` call itself was spawned by I/O which should be tracked. Time will tell if those patterns appear. However, in cases like nested renders (e.g. Next.js's "use cache") then restoring it as if it was outside the parent render is what you do want. --- .../src/ReactFlightServerConfigDebugNode.js | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/react-server/src/ReactFlightServerConfigDebugNode.js b/packages/react-server/src/ReactFlightServerConfigDebugNode.js index a78297ad83f..e79c19cc73a 100644 --- a/packages/react-server/src/ReactFlightServerConfigDebugNode.js +++ b/packages/react-server/src/ReactFlightServerConfigDebugNode.js @@ -142,10 +142,28 @@ export function initAsyncDebugInfo(): void { }: UnresolvedPromiseNode); } } else if ( - type !== 'Microtask' && - type !== 'TickObject' && - type !== 'Immediate' + // bound-anonymous-fn is the default name for snapshots and .bind() without a name. + // This isn't I/O by itself but likely just a continuation. If the bound function + // has a name, we might treat it as I/O but we can't tell the difference. + type === 'bound-anonymous-fn' || + // queueMicroTask, process.nextTick and setImmediate aren't considered new I/O + // for our purposes but just continuation of existing I/O. + type === 'Microtask' || + type === 'TickObject' || + type === 'Immediate' ) { + // Treat the trigger as the node to carry along the sequence. + // For "bound-anonymous-fn" this will be the callsite of the .bind() which may not + // be the best if the callsite of the .run() call is within I/O which should be + // tracked. It might be better to track the execution context of "before()" as the + // execution context for anything spawned from within the run(). Basically as if + // it wasn't an AsyncResource at all. + if (trigger === undefined) { + return; + } + node = trigger; + } else { + // New I/O if (trigger === undefined) { // We have begun a new I/O sequence. const owner = resolveOwner(); @@ -181,13 +199,6 @@ export function initAsyncDebugInfo(): void { // Otherwise, this is just a continuation of the same I/O sequence. node = trigger; } - } else { - // Ignore nextTick and microtasks as they're not considered I/O operations. - // we just treat the trigger as the node to carry along the sequence. - if (trigger === undefined) { - return; - } - node = trigger; } pendingOperations.set(asyncId, node); }, From 2cfb221937eac48209d01d5dda5664de473b1953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 13:38:33 -0700 Subject: [PATCH 112/276] [Flight] Allow passing DEV only startTime as an option (#34912) When you use the `createFromFetch` API we assume that the start time of the request is the same time as when you call `createFromFetch` but in principle you could use it with a Promise that starts earlier and just happens to resolve to a `Response`. When you use `createFromReadableStream` that is almost definitely the case. E.g. you might have started it way earlier and you don't call `createFromReadableStream` until you get the headers back (the fetch promise resolves). This adds an option to pass in the start time for debug purposes if you started the request before starting to parse it. --- packages/react-client/src/ReactFlightClient.js | 6 +++++- packages/react-markup/src/ReactMarkupServer.js | 3 +++ .../src/client/ReactFlightDOMClientBrowser.js | 4 ++++ .../src/client/ReactFlightDOMClientNode.js | 4 ++++ .../src/client/ReactFlightDOMClientBrowser.js | 4 ++++ .../src/client/ReactFlightDOMClientEdge.js | 4 ++++ .../src/client/ReactFlightDOMClientNode.js | 4 ++++ .../src/client/ReactFlightDOMClientBrowser.js | 4 ++++ .../src/client/ReactFlightDOMClientEdge.js | 4 ++++ .../src/client/ReactFlightDOMClientNode.js | 4 ++++ .../src/client/ReactFlightDOMClientBrowser.js | 4 ++++ .../src/client/ReactFlightDOMClientEdge.js | 4 ++++ .../src/client/ReactFlightDOMClientNode.js | 4 ++++ 13 files changed, 52 insertions(+), 1 deletion(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 1c2151362d8..8bcabfb5563 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -2561,6 +2561,7 @@ function ResponseInstance( findSourceMapURL: void | FindSourceMapURLCallback, // DEV-only replayConsole: boolean, // DEV-only environmentName: void | string, // DEV-only + debugStartTime: void | number, // DEV-only debugChannel: void | DebugChannel, // DEV-only ) { const chunks: Map<number, SomeChunk<any>> = new Map(); @@ -2621,7 +2622,8 @@ function ResponseInstance( // Note: createFromFetch allows this to be marked at the start of the fetch // where as if you use createFromReadableStream from the body of the fetch // then the start time is when the headers resolved. - this._debugStartTime = performance.now(); + this._debugStartTime = + debugStartTime == null ? performance.now() : debugStartTime; this._debugIOStarted = false; // We consider everything before the first setTimeout task to be cached data // and is not considered I/O required to load the stream. @@ -2669,6 +2671,7 @@ export function createResponse( findSourceMapURL: void | FindSourceMapURLCallback, // DEV-only replayConsole: boolean, // DEV-only environmentName: void | string, // DEV-only + debugStartTime: void | number, // DEV-only debugChannel: void | DebugChannel, // DEV-only ): WeakResponse { return getWeakResponse( @@ -2684,6 +2687,7 @@ export function createResponse( findSourceMapURL, replayConsole, environmentName, + debugStartTime, debugChannel, ), ); diff --git a/packages/react-markup/src/ReactMarkupServer.js b/packages/react-markup/src/ReactMarkupServer.js index 0b35404cb80..6f1e35e6156 100644 --- a/packages/react-markup/src/ReactMarkupServer.js +++ b/packages/react-markup/src/ReactMarkupServer.js @@ -91,6 +91,9 @@ export function experimental_renderToHTML( undefined, undefined, false, + undefined, + undefined, + undefined, ); const streamState = createFlightStreamState(flightResponse, null); const flightDestination = { diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js index cfc8dcf5f1b..371f08abc9a 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js @@ -52,6 +52,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, }; function createDebugCallbackFromWritableStream( @@ -103,6 +104,9 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js index 2bf32729472..78dce936158 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js @@ -57,6 +57,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -112,6 +113,9 @@ function createFromNodeStream<T>( __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js index 2f71ce2fa95..0f0141e6409 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js @@ -129,6 +129,9 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } @@ -205,6 +208,7 @@ export type Options = { temporaryReferences?: TemporaryReferenceSet, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, }; export function createFromReadableStream<T>( diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js index f9c63ccbc33..5c8d1023b23 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js @@ -79,6 +79,7 @@ export type Options = { temporaryReferences?: TemporaryReferenceSet, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -107,6 +108,9 @@ function createResponseFromOptions(options?: Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js index b874bcd7d44..fbc633a1753 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js @@ -52,6 +52,7 @@ export type Options = { encodeFormAction?: EncodeFormActionCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -103,6 +104,9 @@ export function createFromNodeStream<T>( __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js index b4b84f1c41b..b3d31bd1bbb 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js @@ -51,6 +51,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, }; function createDebugCallbackFromWritableStream( @@ -102,6 +103,9 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js index b994841be18..5517e0f73cf 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js @@ -79,6 +79,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -109,6 +110,9 @@ function createResponseFromOptions(options: Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js index f174f10c0b8..6d117929df0 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js @@ -60,6 +60,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -114,6 +115,9 @@ function createFromNodeStream<T>( __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js index b4b84f1c41b..b3d31bd1bbb 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js @@ -51,6 +51,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, }; function createDebugCallbackFromWritableStream( @@ -102,6 +103,9 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js index 63dae495455..bc4caac767f 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js @@ -79,6 +79,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -109,6 +110,9 @@ function createResponseFromOptions(options: Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js index f174f10c0b8..6d117929df0 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js @@ -60,6 +60,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -114,6 +115,9 @@ function createFromNodeStream<T>( __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); From b485f7cf64118fc8729181f46fe5e2edd47bea43 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Mon, 20 Oct 2025 00:47:27 +0200 Subject: [PATCH 113/276] [DevTools] Don't attach filtered IO to grandparent Suspense (#34916) --- packages/react-devtools-shared/src/backend/fiber/renderer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 4dd4a619cb4..4a61fba6525 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2862,7 +2862,10 @@ export function attach( let parentInstance = reconcilingParent; while ( parentInstance.kind === FILTERED_FIBER_INSTANCE && - parentInstance.parent !== null + parentInstance.parent !== null && + // We can't move past the parent Suspense node. + // The Suspense node holding async info must be a parent of the devtools instance (or the instance itself) + parentInstance !== parentSuspenseNode.instance ) { parentInstance = parentInstance.parent; } From f6a4882859e6e894a39e9216d01005212855689e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 19:17:45 -0700 Subject: [PATCH 114/276] [DevTools] Show the Suspense boundary name in the rect if there's no overlap (#34918) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This shows the title in the top corner of the rect if there's enough space. The complex bit here is that it can be noisy if too many boundaries occupy the same space to overlap or partially overlap. This uses an R-tree to store all the rects to find overlapping boundaries to cut the available space to draw inside the rect. We use this to compute the rectangle within the rect which doesn't have any overlapping boundaries. The roots don't count as overlapping. Similarly, a parent rect is not consider overlapping a child. However, if two sibling boundaries occupy the same space, no title will be drawn. <img width="734" height="813" alt="Screenshot 2025-10-19 at 5 34 49 PM" src="https://github.com/user-attachments/assets/2b848b9c-3b78-48e5-9476-dd59a7baf6bf" /> We might also consider drawing the "Initial Paint" title at the root but that's less interesting. It's interesting in the beginning before you know about the special case at the root but after that it's just always the same value so just adds noise. --- packages/react-devtools-shared/package.json | 3 +- .../src/devtools/store.js | 59 +++++- .../views/SuspenseTab/SuspenseRects.css | 20 +- .../views/SuspenseTab/SuspenseRects.js | 108 +++++++++- scripts/flow/environment.js | 188 ++++++++++++++++++ scripts/jest/config.build-devtools.js | 2 +- yarn.lock | 98 ++------- 7 files changed, 387 insertions(+), 91 deletions(-) diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json index 543ac37e976..721cc9954b3 100644 --- a/packages/react-devtools-shared/package.json +++ b/packages/react-devtools-shared/package.json @@ -23,6 +23,7 @@ "json5": "^2.2.3", "local-storage-fallback": "^4.1.1", "react-virtualized-auto-sizer": "^1.0.23", - "react-window": "^1.8.10" + "react-window": "^1.8.10", + "rbush": "4.0.1" } } diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index aaf0584a4c5..9377fa01dfe 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -62,6 +62,31 @@ import type { import UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError'; import type {DevToolsHookSettings} from '../backend/types'; +import RBush from 'rbush'; + +// Custom version which works with our Rect data structure. +class RectRBush extends RBush<Rect> { + toBBox(rect: Rect): { + minX: number, + minY: number, + maxX: number, + maxY: number, + } { + return { + minX: rect.x, + minY: rect.y, + maxX: rect.x + rect.width, + maxY: rect.y + rect.height, + }; + } + compareMinX(a: Rect, b: Rect): number { + return a.x - b.x; + } + compareMinY(a: Rect, b: Rect): number { + return a.y - b.y; + } +} + const debug = (methodName: string, ...args: Array<string>) => { if (__DEBUG__) { console.log( @@ -194,6 +219,9 @@ export default class Store extends EventEmitter<{ // Renderer ID is needed to support inspection fiber props, state, and hooks. _rootIDToRendererID: Map<Element['id'], number> = new Map(); + // Stores all the SuspenseNode rects in an R-tree to make it fast to find overlaps. + _rtree: RBush<Rect> = new RectRBush(); + // These options may be initially set by a configuration option when constructing the Store. _supportsInspectMatchingDOMElement: boolean = false; _supportsClickToInspect: boolean = false; @@ -1622,7 +1650,12 @@ export default class Store extends EventEmitter<{ const y = operations[i + 1] / 1000; const width = operations[i + 2] / 1000; const height = operations[i + 3] / 1000; - rects.push({x, y, width, height}); + const rect = {x, y, width, height}; + if (parentID !== 0) { + // Track all rects except the root. + this._rtree.insert(rect); + } + rects.push(rect); i += 4; } } @@ -1680,13 +1713,20 @@ export default class Store extends EventEmitter<{ i += 1; - const {children, parentID} = suspense; + const {children, parentID, rects} = suspense; if (children.length > 0) { this._throwAndEmitError( Error(`Suspense node "${id}" was removed before its children.`), ); } + if (rects !== null && parentID !== 0) { + // Delete all the existing rects from the R-tree + for (let j = 0; j < rects.length; j++) { + this._rtree.remove(rects[j]); + } + } + this._idToSuspense.delete(id); removedSuspenseIDs.set(id, parentID); @@ -1785,6 +1825,14 @@ export default class Store extends EventEmitter<{ break; } + const prevRects = suspense.rects; + if (prevRects !== null && suspense.parentID !== 0) { + // Delete all the existing rects from the R-tree + for (let j = 0; j < prevRects.length; j++) { + this._rtree.remove(prevRects[j]); + } + } + let nextRects: SuspenseNode['rects']; if (numRects === -1) { nextRects = null; @@ -1796,7 +1844,12 @@ export default class Store extends EventEmitter<{ const width = operations[i + 2] / 1000; const height = operations[i + 3] / 1000; - nextRects.push({x, y, width, height}); + const rect = {x, y, width, height}; + if (suspense.parentID !== 0) { + // Track all rects except the root. + this._rtree.insert(rect); + } + nextRects.push(rect); i += 4; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index db0a84d8d87..d8dd990850a 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -39,6 +39,24 @@ pointer-events: none; } +.SuspenseRectsTitle { + pointer-events: none; + color: var(--color-text); + overflow: hidden; + text-overflow: ellipsis; + font-size: var(--font-size-sans-small); + line-height: var(--font-size-sans-small); + padding: .25rem; + container-type: size; + container-name: title; +} + +@container title (width < 30px) or (height < 12px) { + .SuspenseRectsTitle > span { + display: none; + } +} + .SuspenseRectsScaledRect[data-visible='false'] > .SuspenseRectsBoundaryChildren { overflow: initial; } @@ -75,7 +93,7 @@ transition: background-color 0.2s ease-out; } -.SuspenseRectsBoundary[data-selected='true'] { +.SuspenseRectsBoundary[data-selected='true'][data-visible='true'] { box-shadow: var(--elevation-4); } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 67a6bf27739..d5f44eeb32b 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -31,6 +31,7 @@ import { SuspenseTreeDispatcherContext, } from './SuspenseTreeContext'; import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js'; +import type RBush from 'rbush'; function ScaledRect({ className, @@ -78,8 +79,10 @@ function ScaledRect({ function SuspenseRects({ suspenseID, + parentRects, }: { suspenseID: SuspenseNode['id'], + parentRects: null | Array<Rect>, }): React$Node { const store = useContext(StoreContext); const treeDispatch = useContext(TreeDispatcherContext); @@ -167,7 +170,20 @@ function SuspenseRects({ } } - const boundingBox = getBoundingBox(suspense.rects); + const rects = suspense.rects; + const boundingBox = getBoundingBox(rects); + + // Next we'll try to find a rect within one of our rects that isn't intersecting with + // other rects. + // TODO: This should probably be memoized based on if any changes to the rtree has been made. + const titleBox: null | Rect = + rects === null ? null : findTitleBox(store._rtree, rects, parentRects); + const nextRects = + rects === null || rects.length === 0 + ? parentRects + : parentRects === null || parentRects.length === 0 + ? rects + : parentRects.concat(rects); return ( <ScaledRect @@ -205,11 +221,22 @@ function SuspenseRects({ className={styles.SuspenseRectsBoundaryChildren} rect={boundingBox}> {suspense.children.map(childID => { - return <SuspenseRects key={childID} suspenseID={childID} />; + return ( + <SuspenseRects + key={childID} + suspenseID={childID} + parentRects={nextRects} + /> + ); })} </ScaledRect> )} - {selected ? ( + {titleBox && suspense.name && visible ? ( + <ScaledRect className={styles.SuspenseRectsTitle} rect={titleBox}> + <span>{suspense.name}</span> + </ScaledRect> + ) : null} + {selected && visible ? ( <ScaledRect className={styles.SuspenseRectOutline} rect={boundingBox} @@ -320,6 +347,77 @@ function getDocumentBoundingRect( }; } +function findTitleBox( + rtree: RBush<Rect>, + rects: Array<Rect>, + parentRects: null | Array<Rect>, +): null | Rect { + for (let i = 0; i < rects.length; i++) { + const rect = rects[i]; + if (rect.width < 20 || rect.height < 10) { + // Skip small rects. They're likely not able to be contain anything useful anyway. + continue; + } + // Find all overlapping rects elsewhere in the tree to limit our rect. + const overlappingRects = rtree.search({ + minX: rect.x, + minY: rect.y, + maxX: rect.x + rect.width, + maxY: rect.y + rect.height, + }); + if ( + overlappingRects.length === 0 || + (overlappingRects.length === 1 && overlappingRects[0] === rect) + ) { + // There are no overlapping rects that isn't our own rect, so we can just use + // the full space of the rect. + return rect; + } + // We have some overlapping rects but they might not overlap everything. Let's + // shrink it up toward the top left corner until it has no more overlap. + const minX = rect.x; + const minY = rect.y; + let maxX = rect.x + rect.width; + let maxY = rect.y + rect.height; + for (let j = 0; j < overlappingRects.length; j++) { + const overlappingRect = overlappingRects[j]; + if (overlappingRect === rect) { + continue; + } + const x = overlappingRect.x; + const y = overlappingRect.y; + if (y < maxY && x < maxX) { + if ( + parentRects !== null && + parentRects.indexOf(overlappingRect) !== -1 + ) { + // This rect overlaps but it's part of a parent boundary. We let + // title content render if it's on top and not a sibling. + continue; + } + // This rect cuts into the remaining space. Let's figure out if we're + // better off cutting on the x or y axis to maximize remaining space. + const remainderX = x - minX; + const remainderY = y - minY; + if (remainderX > remainderY) { + maxX = x; + } else { + maxY = y; + } + } + } + if (maxX > minX && maxY > minY) { + return { + x: minX, + y: minY, + width: maxX - minX, + height: maxY - minY, + }; + } + } + return null; +} + function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node { const store = useContext(StoreContext); const root = store.getSuspenseByID(rootID); @@ -329,7 +427,9 @@ function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node { } return root.children.map(childID => { - return <SuspenseRects key={childID} suspenseID={childID} />; + return ( + <SuspenseRects key={childID} suspenseID={childID} parentRects={null} /> + ); }); } diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js index 5556fad1a00..f201c2e0e85 100644 --- a/scripts/flow/environment.js +++ b/scripts/flow/environment.js @@ -456,3 +456,191 @@ declare class NavigationDestination { getState(): mixed; } + +// Ported from definitely-typed +declare module 'rbush' { + declare interface BBox { + minX: number; + minY: number; + maxX: number; + maxY: number; + } + + declare export default class RBush<T> { + /** + * Constructs an `RBush`, a high-performance 2D spatial index for points and + * rectangles. Based on an optimized __R-tree__ data structure with + * __bulk-insertion__ support. + * + * @param maxEntries An optional argument to RBush defines the maximum + * number of entries in a tree node. `9` (used by default) + * is a reasonable choice for most applications. Higher + * value means faster insertion and slower search, and + * vice versa. + */ + constructor(maxEntries?: number): void; + + /** + * Inserts an item. To insert many items at once, use `load()`. + * + * @param item The item to insert. + */ + insert(item: T): RBush<T>; + + /** + * Bulk-inserts the given items into the tree. + * + * Bulk insertion is usually ~2-3 times faster than inserting items one by + * one. After bulk loading (bulk insertion into an empty tree), subsequent + * query performance is also ~20-30% better. + * + * Note that when you do bulk insertion into an existing tree, it bulk-loads + * the given data into a separate tree and inserts the smaller tree into the + * larger tree. This means that bulk insertion works very well for clustered + * data (where items in one update are close to each other), but makes query + * performance worse if the data is scattered. + * + * @param items The items to load. + */ + load(items: $ReadOnlyArray<T>): RBush<T>; + + /** + * Removes a previously inserted item, comparing by reference. + * + * To remove all items, use `clear()`. + * + * @param item The item to remove. + * @param equals A custom function that allows comparing by value instead. + * Useful when you have only a copy of the object you need + * removed (e.g. loaded from server). + */ + remove(item: T, equals?: (a: T, b: T) => boolean): RBush<T>; + + /** + * Removes all items. + */ + clear(): RBush<T>; + + /** + * Returns an array of data items (points or rectangles) that the given + * bounding box intersects. + * + * Note that the search method accepts a bounding box in `{minX, minY, maxX, + * maxY}` format regardless of the data format. + * + * @param box The bounding box in which to search. + */ + search(box: BBox): T[]; + + /** + * Returns all items contained in the tree. + */ + all(): T[]; + + /** + * Returns `true` if there are any items intersecting the given bounding + * box, otherwise `false`. + * + * @param box The bounding box in which to search. + */ + collides(box: BBox): boolean; + + /** + * Returns the bounding box for the provided item. + * + * By default, `RBush` assumes the format of data points to be an object + * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a + * custom item format by overriding `toBBox()`, `compareMinX()`, and + * `compareMinY()`. + * + * @example + * class MyRBush<T> extends RBush<T> { + * toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; } + * compareMinX(a, b) { return a.x - b.x; } + * compareMinY(a, b) { return a.y - b.y; } + * } + * const tree = new MyRBush<[number, number]>(); + * tree.insert([20, 50]); // accepts [x, y] points + * + * @param item The item whose bounding box should be returned. + */ + toBBox(item: T): BBox; + + /** + * Compares the minimum x coordinate of two items. Returns -1 if `a`'s + * x-coordinate is smaller, 1 if `b`'s x coordinate is smaller, or 0 if + * they're equal. + * + * By default, `RBush` assumes the format of data points to be an object + * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a + * custom item format by overriding `toBBox()`, `compareMinX()`, and + * `compareMinY()`. + * + * @example + * class MyRBush<T> extends RBush<T> { + * toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; } + * compareMinX(a, b) { return a.x - b.x; } + * compareMinY(a, b) { return a.y - b.y; } + * } + * const tree = new MyRBush<[number, number]>(); + * tree.insert([20, 50]); // accepts [x, y] points + * + * @param a The first item to compare. + * @param b The second item to compare. + */ + compareMinX(a: T, b: T): number; + + /** + * Compares the minimum y coordinate of two items. Returns -1 if `a`'s + * x-coordinate is smaller, 1 if `b`'s x coordinate is smaller, or 0 if + * they're equal. + * + * By default, `RBush` assumes the format of data points to be an object + * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a + * custom item format by overriding `toBBox()`, `compareMinX()`, and + * `compareMinY()`. + * + * @example + * class MyRBush<T> extends RBush<T> { + * toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; } + * compareMinX(a, b) { return a.x - b.x; } + * compareMinY(a, b) { return a.y - b.y; } + * } + * const tree = new MyRBush<[number, number]>(); + * tree.insert([20, 50]); // accepts [x, y] points + * + * @param a The first item to compare. + * @param b The second item to compare. + */ + compareMinY(a: T, b: T): number; + + /** + * Exports the tree's contents as a JSON object. + * + * Importing and exporting as JSON allows you to use RBush on both the + * server (using Node.js) and the browser combined, e.g. first indexing the + * data on the server and and then importing the resulting tree data on the + * client for searching. + * + * Note that the `maxEntries` option from the constructor must be the same + * in both trees for export/import to work properly. + */ + toJSON(): any; + + /** + * Imports previously exported data into the tree (i.e., data that was + * emitted by `toJSON()`). + * + * Importing and exporting as JSON allows you to use RBush on both the + * server (using Node.js) and the browser combined, e.g. first indexing the + * data on the server and and then importing the resulting tree data on the + * client for searching. + * + * Note that the `maxEntries` option from the constructor must be the same + * in both trees for export/import to work properly. + * + * @param data The previously exported JSON data. + */ + fromJSON(data: any): RBush<T>; + } +} diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js index 9baf33a39b1..3f03b50c3a8 100644 --- a/scripts/jest/config.build-devtools.js +++ b/scripts/jest/config.build-devtools.js @@ -63,7 +63,7 @@ module.exports = Object.assign({}, baseConfig, { testPathIgnorePatterns: ['/node_modules/', '-test.internal.js$'], // Exclude the build output from transforms transformIgnorePatterns: [ - '/node_modules/', + '/node_modules/(?!(rbush|quickselect)/)', '<rootDir>/build/', '/__compiled__/', '/__untransformed__/', diff --git a/yarn.lock b/yarn.lock index ad8a3f0085c..2543e4d1760 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8271,7 +8271,7 @@ eslint-utils@^2.0.0, eslint-utils@^2.1.0: dependencies: eslint-visitor-keys "^1.1.0" -"eslint-v7@npm:eslint@^7.7.0": +"eslint-v7@npm:eslint@^7.7.0", eslint@^7.7.0: version "7.32.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d" integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA== @@ -8470,52 +8470,6 @@ eslint@8.57.0: strip-ansi "^6.0.1" text-table "^0.2.0" -eslint@^7.7.0: - version "7.32.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d" - integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA== - dependencies: - "@babel/code-frame" "7.12.11" - "@eslint/eslintrc" "^0.4.3" - "@humanwhocodes/config-array" "^0.5.0" - ajv "^6.10.0" - chalk "^4.0.0" - cross-spawn "^7.0.2" - debug "^4.0.1" - doctrine "^3.0.0" - enquirer "^2.3.5" - escape-string-regexp "^4.0.0" - eslint-scope "^5.1.1" - eslint-utils "^2.1.0" - eslint-visitor-keys "^2.0.0" - espree "^7.3.1" - esquery "^1.4.0" - esutils "^2.0.2" - fast-deep-equal "^3.1.3" - file-entry-cache "^6.0.1" - functional-red-black-tree "^1.0.1" - glob-parent "^5.1.2" - globals "^13.6.0" - ignore "^4.0.6" - import-fresh "^3.0.0" - imurmurhash "^0.1.4" - is-glob "^4.0.0" - js-yaml "^3.13.1" - json-stable-stringify-without-jsonify "^1.0.1" - levn "^0.4.1" - lodash.merge "^4.6.2" - minimatch "^3.0.4" - natural-compare "^1.4.0" - optionator "^0.9.1" - progress "^2.0.0" - regexpp "^3.1.0" - semver "^7.2.1" - strip-ansi "^6.0.0" - strip-json-comments "^3.1.0" - table "^6.0.9" - text-table "^0.2.0" - v8-compile-cache "^2.0.3" - espree@10.0.1, espree@^10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/espree/-/espree-10.0.1.tgz#600e60404157412751ba4a6f3a2ee1a42433139f" @@ -14317,7 +14271,7 @@ prepend-http@^2.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= -"prettier-2@npm:prettier@^2": +"prettier-2@npm:prettier@^2", prettier@^2.5.1: version "2.8.8" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== @@ -14332,11 +14286,6 @@ prettier@^1.19.1: resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== -prettier@^2.5.1: - version "2.8.8" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" - integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== - pretty-format@^29.4.1: version "29.4.1" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.4.1.tgz#0da99b532559097b8254298da7c75a0785b1751c" @@ -14602,6 +14551,11 @@ quick-tmp@0.0.0: first-match "0.0.1" osenv "0.0.3" +quickselect@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-3.0.0.tgz#a37fc953867d56f095a20ac71c6d27063d2de603" + integrity sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g== + random-seed@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/random-seed/-/random-seed-0.3.0.tgz#d945f2e1f38f49e8d58913431b8bf6bb937556cd" @@ -14639,6 +14593,13 @@ raw-loader@^3.1.0: loader-utils "^1.1.0" schema-utils "^2.0.1" +rbush@4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/rbush/-/rbush-4.0.1.tgz#1f55afa64a978f71bf9e9a99bc14ff84f3cb0d6d" + integrity sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ== + dependencies: + quickselect "^3.0.0" + rc@1.2.8, rc@^1.0.1, rc@^1.1.6, rc@^1.2.8: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" @@ -16211,7 +16172,7 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -16246,15 +16207,6 @@ string-width@^4.0.0: is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.0" -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -16315,7 +16267,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -16343,13 +16295,6 @@ strip-ansi@^5.1.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -17958,7 +17903,7 @@ workerize-loader@^2.0.2: dependencies: loader-utils "^2.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -17976,15 +17921,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 1440f4f42d59a7de4559dac972b62d9be771d1d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 22:52:50 -0700 Subject: [PATCH 115/276] [DevTools] BuiltInCallSite should have padding-left (#34922) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We don't normally show this but when we do, it should have the same padding as other callsites. <img width="313" height="241" alt="Screenshot 2025-10-19 at 10 46 22 PM" src="https://github.com/user-attachments/assets/7f72149e-d748-4b71-8291-889038d676e7" /> --- .../src/devtools/views/Components/StackTraceView.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css index 574ceb02369..bd13a89c6c9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css @@ -2,7 +2,7 @@ padding: 0.25rem; } -.CallSite { +.CallSite, .BuiltInCallSite { display: block; padding-left: 1rem; } From 21272a680f07cb69873eb3668e7baaebfcf05606 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 23:42:38 -0700 Subject: [PATCH 116/276] Lower case "rsc stream" debug info (#34921) This is an aesthetic thing. Most simple I/O entries are things like "script", "stylesheet", "fetch" etc. which are all a single word and lower case. The "RSC stream" name sticks out and draws unnecessary attention to itself where as it's really the least interesting to look at. I don't love the name because I'm not sure how to explain it. It's really mainly the byte size of the payload itself without considering things like server awaits things which will have their own cause. So I'm trying to communicate the download size of the stream of downloading the `.rsc` file or the `"rsc stream"`. --- packages/internal-test-utils/debugInfo.js | 4 ++-- .../react-client/src/ReactFlightClient.js | 2 +- .../src/backend/fiber/renderer.js | 10 ++++++-- .../ReactFlightAsyncDebugInfo-test.js | 24 +++++++++---------- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/internal-test-utils/debugInfo.js b/packages/internal-test-utils/debugInfo.js index 7b9c730ba65..75183ce4b6b 100644 --- a/packages/internal-test-utils/debugInfo.js +++ b/packages/internal-test-utils/debugInfo.js @@ -64,7 +64,7 @@ function normalizeIOInfo(config: DebugInfoConfig, ioInfo) { if (promise) { promise.then(); // init if (promise.status === 'fulfilled') { - if (ioInfo.name === 'RSC stream') { + if (ioInfo.name === 'rsc stream') { copy.byteSize = 0; copy.value = { value: 'stream', @@ -117,7 +117,7 @@ export function getDebugInfo(config: DebugInfoConfig, obj) { for (let i = 0; i < debugInfo.length; i++) { if ( debugInfo[i].awaited && - debugInfo[i].awaited.name === 'RSC stream' && + debugInfo[i].awaited.name === 'rsc stream' && config.ignoreRscStreamInfo ) { // Ignore RSC stream I/O info. diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 8bcabfb5563..c7506a13e59 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -2721,7 +2721,7 @@ export function createStreamState( (debugValuePromise: any).status = 'fulfilled'; (debugValuePromise: any).value = streamDebugValue; streamState._debugInfo = { - name: 'RSC stream', + name: 'rsc stream', start: response._debugStartTime, end: response._debugStartTime, // will be updated once we finish a chunk byteSize: 0, // will be updated as we resolve a data chunk diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 4a61fba6525..fe8722da568 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -6171,7 +6171,10 @@ export function attach( } } const newIO = asyncInfo.awaited; - if (newIO.name === 'RSC stream' && newIO.value != null) { + if ( + (newIO.name === 'RSC stream' || newIO.name === 'rsc stream') && + newIO.value != null + ) { const streamPromise = newIO.value; // Special case RSC stream entries to pick the last entry keyed by the stream. const existingEntry = streamEntries.get(streamPromise); @@ -6230,7 +6233,10 @@ export function attach( continue; } foundIOEntries.add(ioInfo); - if (ioInfo.name === 'RSC stream' && ioInfo.value != null) { + if ( + (ioInfo.name === 'RSC stream' || ioInfo.name === 'rsc stream') && + ioInfo.value != null + ) { const streamPromise = ioInfo.value; // Special case RSC stream entries to pick the last entry keyed by the stream. const existingEntry = streamEntries.get(streamPromise); diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index 00c6f785035..db1d7af3a6b 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -459,7 +459,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -867,7 +867,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -985,7 +985,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -1460,7 +1460,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "byteSize": 0, "end": 0, "env": "Server", - "name": "RSC stream", + "name": "rsc stream", "start": 0, "value": { "value": "stream", @@ -1475,7 +1475,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -1789,7 +1789,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2083,7 +2083,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2499,7 +2499,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2665,7 +2665,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2845,7 +2845,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -3130,7 +3130,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -3275,7 +3275,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { From 02c80f0d8702cb894f6ef9748e7b18ffdd388a55 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 20 Oct 2025 13:39:42 +0100 Subject: [PATCH 117/276] [DevTools] fix: dont ship source maps for css in prod builds (#34913) This has been causing some issues with the submission review on Firefox store: we use OS-level paths in these source maps, which makes the build artifact different from the one that's been submitted. Also saves ~100Kb for main.js artifact. --- .../src/main/cloneStyleTags.js | 33 +++++++++++++++---- .../src/main/index.js | 2 +- .../webpack.config.js | 2 +- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/packages/react-devtools-extensions/src/main/cloneStyleTags.js b/packages/react-devtools-extensions/src/main/cloneStyleTags.js index dd84e01fc9e..caad2a361ca 100644 --- a/packages/react-devtools-extensions/src/main/cloneStyleTags.js +++ b/packages/react-devtools-extensions/src/main/cloneStyleTags.js @@ -1,5 +1,14 @@ -function cloneStyleTags() { - const linkTags = []; +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +export function cloneStyleTags(): Array<HTMLLinkElement | HTMLStyleElement> { + const tags: Array<HTMLLinkElement | HTMLStyleElement> = []; // eslint-disable-next-line no-for-of-loops/no-for-of-loops for (const linkTag of document.getElementsByTagName('link')) { @@ -11,11 +20,23 @@ function cloneStyleTags() { newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue); } - linkTags.push(newLinkTag); + tags.push(newLinkTag); } } - return linkTags; -} + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const styleTag of document.getElementsByTagName('style')) { + const newStyleTag = document.createElement('style'); + + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const attribute of styleTag.attributes) { + newStyleTag.setAttribute(attribute.nodeName, attribute.nodeValue); + } -export default cloneStyleTags; + newStyleTag.textContent = styleTag.textContent; + + tags.push(newStyleTag); + } + + return tags; +} diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js index cec9fd6df45..bc948d1e6d6 100644 --- a/packages/react-devtools-extensions/src/main/index.js +++ b/packages/react-devtools-extensions/src/main/index.js @@ -33,7 +33,7 @@ import { import {viewAttributeSource} from './sourceSelection'; import {startReactPolling} from './reactPolling'; -import cloneStyleTags from './cloneStyleTags'; +import {cloneStyleTags} from './cloneStyleTags'; import fetchFileWithCaching from './fetchFileWithCaching'; import injectBackendManager from './injectBackendManager'; import registerEventsLogger from './registerEventsLogger'; diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index 4592363c64a..191eabc47cb 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -285,7 +285,7 @@ module.exports = { { loader: 'css-loader', options: { - sourceMap: true, + sourceMap: __DEV__, modules: true, localIdentName: '[local]___[hash:base64:5]', }, From aaad0ea055ce0c10b263db8505338cb1eedb86de Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 20 Oct 2025 16:14:47 +0100 Subject: [PATCH 118/276] [DevTools] chore: read from build/COMMIT_SHA fle as fallback for commit hash (#34915) This eliminates the gap in a reproducer for the React DevTools browser extension from the source code that we submit to Firefox extension stores. We use the commit hash as part of the Backend version, here: https://github.com/facebook/react/blob/2cfb221937eac48209d01d5dda5664de473b1953/packages/react-devtools-extensions/utils.js#L26-L38 The problem is that we archive the source code for Mozilla extension store reviews and there is no git. But since we still download the React sources from the CI, we could reuse the hash from `build/COMMIT_HASH` file. --- packages/react-devtools-extensions/utils.js | 24 ++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js index 3b06bb71f7d..9f02e98d198 100644 --- a/packages/react-devtools-extensions/utils.js +++ b/packages/react-devtools-extensions/utils.js @@ -6,7 +6,7 @@ */ const {execSync} = require('child_process'); -const {readFileSync} = require('fs'); +const {existsSync, readFileSync} = require('fs'); const {resolve} = require('path'); const GITHUB_URL = 'https://github.com/facebook/react'; @@ -18,8 +18,26 @@ function getGitCommit() { .trim(); } catch (error) { // Mozilla runs this command from a git archive. - // In that context, there is no Git revision. - return null; + // In that context, there is no Git context. + // Using the commit hash specified to download-experimental-build.js script as a fallback. + + // Try to read from build/COMMIT_SHA file + const commitShaPath = resolve(__dirname, '..', '..', 'build', 'COMMIT_SHA'); + if (!existsSync(commitShaPath)) { + throw new Error( + 'Could not find build/COMMIT_SHA file. Did you run scripts/release/download-experimental-build.js script?', + ); + } + + try { + const commitHash = readFileSync(commitShaPath, 'utf8').trim(); + // Return short hash (first 7 characters) to match abbreviated commit hash format + return commitHash.slice(0, 7); + } catch (readError) { + throw new Error( + `Failed to read build/COMMIT_SHA file: ${readError.message}`, + ); + } } } From 2bcbf254f168ddec567156f802d19315e64e4aa8 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Mon, 20 Oct 2025 08:42:04 -0700 Subject: [PATCH 119/276] [compiler] Fix false positive for useMemo reassigning context vars (#34904) Within a function expression local variables may use StoreContext for local context variables, so the reassignment check here was firing too often. We should only report an error for variables that are declared outside the function, ie part of its `context`. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34904). * #34903 * __->__ #34904 --- .../src/Validation/ValidateUseMemo.ts | 31 +++++++------ .../reassign-variable-in-usememo.expect.md | 45 +++++++++++++++++++ .../compiler/reassign-variable-in-usememo.js | 12 +++++ 3 files changed, 74 insertions(+), 14 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts index 05a4b4b91f5..2bccda3a2e9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts @@ -184,25 +184,28 @@ function validateNoContextVariableAssignment( fn: HIRFunction, errors: CompilerError, ): void { + const context = new Set(fn.context.map(place => place.identifier.id)); for (const block of fn.body.blocks.values()) { for (const instr of block.instructions) { const value = instr.value; switch (value.kind) { case 'StoreContext': { - errors.pushDiagnostic( - CompilerDiagnostic.create({ - category: ErrorCategory.UseMemo, - reason: - 'useMemo() callbacks may not reassign variables declared outside of the callback', - description: - 'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function', - suggestions: null, - }).withDetails({ - kind: 'error', - loc: value.lvalue.place.loc, - message: 'Cannot reassign variable', - }), - ); + if (context.has(value.lvalue.place.identifier.id)) { + errors.pushDiagnostic( + CompilerDiagnostic.create({ + category: ErrorCategory.UseMemo, + reason: + 'useMemo() callbacks may not reassign variables declared outside of the callback', + description: + 'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function', + suggestions: null, + }).withDetails({ + kind: 'error', + loc: value.lvalue.place.loc, + message: 'Cannot reassign variable', + }), + ); + } break; } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md new file mode 100644 index 00000000000..29dc3afcd6f --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md @@ -0,0 +1,45 @@ + +## Input + +```javascript +// @flow +export hook useItemLanguage(items) { + return useMemo(() => { + let language: ?string = null; + items.forEach(item => { + if (item.language != null) { + language = item.language; + } + }); + return language; + }, [items]); +} + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +export function useItemLanguage(items) { + const $ = _c(2); + let language; + if ($[0] !== items) { + language = null; + items.forEach((item) => { + if (item.language != null) { + language = item.language; + } + }); + $[0] = items; + $[1] = language; + } else { + language = $[1]; + } + return language; +} + +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js new file mode 100644 index 00000000000..4ed89bfc643 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js @@ -0,0 +1,12 @@ +// @flow +export hook useItemLanguage(items) { + return useMemo(() => { + let language: ?string = null; + items.forEach(item => { + if (item.language != null) { + language = item.language; + } + }); + return language; + }, [items]); +} From 1d3664665b4e52bd1daee775e1e95feb563799d9 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Mon, 20 Oct 2025 19:33:47 +0200 Subject: [PATCH 120/276] [DevTools] Text layout fixes for stack traces with badges (#34925) --- .../src/devtools/views/Components/StackTraceView.css | 9 ++++++--- .../src/devtools/views/Components/StackTraceView.js | 6 ++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css index bd13a89c6c9..98200ee9dfd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css @@ -3,8 +3,9 @@ } .CallSite, .BuiltInCallSite { - display: block; + display: flex; padding-left: 1rem; + white-space-collapse: preserve; } .IgnoredCallSite, .BuiltInCallSite { @@ -20,13 +21,15 @@ white-space: pre; overflow: hidden; text-overflow: ellipsis; - flex: 1; cursor: pointer; border-radius: 0.125rem; - padding: 0px 2px; } .Link:hover { background-color: var(--color-background-hover); } +.ElementBadges { + margin-left: 0.25rem; +} + diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js index d3d797f7810..a3cf91f14b7 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js @@ -86,8 +86,10 @@ export function CallSiteView({ </span> </> )} - - <ElementBadges environmentName={environmentName} /> + <ElementBadges + className={styles.ElementBadges} + environmentName={environmentName} + /> </div> ); } From 3cde211b0cb1c707114c27d7fd23683d02086e31 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 20 Oct 2025 18:39:28 +0100 Subject: [PATCH 121/276] React DevTools 7.0.0 -> 7.0.1 (#34926) Full list of changes: * Text layout fixes for stack traces with badges ([eps1lon](https://github.com/eps1lon) in [#34925](https://github.com/facebook/react/pull/34925)) * chore: read from build/COMMIT_SHA fle as fallback for commit hash ([hoxyq](https://github.com/hoxyq) in [#34915](https://github.com/facebook/react/pull/34915)) * fix: dont ship source maps for css in prod builds ([hoxyq](https://github.com/hoxyq) in [#34913](https://github.com/facebook/react/pull/34913)) * Lower case "rsc stream" debug info ([sebmarkbage](https://github.com/sebmarkbage) in [#34921](https://github.com/facebook/react/pull/34921)) * BuiltInCallSite should have padding-left ([sebmarkbage](https://github.com/sebmarkbage) in [#34922](https://github.com/facebook/react/pull/34922)) * Show the Suspense boundary name in the rect if there's no overlap ([sebmarkbage](https://github.com/sebmarkbage) in [#34918](https://github.com/facebook/react/pull/34918)) * Don't attach filtered IO to grandparent Suspense ([eps1lon](https://github.com/eps1lon) in [#34916](https://github.com/facebook/react/pull/34916)) * Infer name from stack if it's the generic "lazy" name ([sebmarkbage](https://github.com/sebmarkbage) in [#34907](https://github.com/facebook/react/pull/34907)) * Use same Suspense naming heuristics when reconnecting ([eps1lon](https://github.com/eps1lon) in [#34898](https://github.com/facebook/react/pull/34898)) * Assign a different color and label based on environment ([sebmarkbage](https://github.com/sebmarkbage) in [#34893](https://github.com/facebook/react/pull/34893)) * Compute environment names for the timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34892](https://github.com/facebook/react/pull/34892)) * Don't highlight the root rect if no roots has unique suspenders ([sebmarkbage](https://github.com/sebmarkbage) in [#34885](https://github.com/facebook/react/pull/34885)) * Highlight the rect when the corresponding timeline bean is hovered ([sebmarkbage](https://github.com/sebmarkbage) in [#34881](https://github.com/facebook/react/pull/34881)) * Repeat the "name" if there's no short description in groups ([sebmarkbage](https://github.com/sebmarkbage) in [#34894](https://github.com/facebook/react/pull/34894)) * Tweak the rects design and create multi-environment color scheme ([sebmarkbage](https://github.com/sebmarkbage) in [#34880](https://github.com/facebook/react/pull/34880)) * Adjust the rects size by one pixel smaller ([sebmarkbage](https://github.com/sebmarkbage) in [#34876](https://github.com/facebook/react/pull/34876)) * Remove steps title from scrubber ([sebmarkbage](https://github.com/sebmarkbage) in [#34878](https://github.com/facebook/react/pull/34878)) * Include some sub-pixel precision in rects ([sebmarkbage](https://github.com/sebmarkbage) in [#34873](https://github.com/facebook/react/pull/34873)) * Don't pluralize if already plural ([sebmarkbage](https://github.com/sebmarkbage) in [#34870](https://github.com/facebook/react/pull/34870)) * Don't try to load anonymous or empty urls ([sebmarkbage](https://github.com/sebmarkbage) in [#34869](https://github.com/facebook/react/pull/34869)) * Add inspection button to Suspense tab ([sebmarkbage](https://github.com/sebmarkbage) in [#34867](https://github.com/facebook/react/pull/34867)) * Don't select on hover ([sebmarkbage](https://github.com/sebmarkbage) in [#34860](https://github.com/facebook/react/pull/34860)) * Don't highlight on timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34861](https://github.com/facebook/react/pull/34861)) * The bridge event types should only be defined in one direction ([sebmarkbage](https://github.com/sebmarkbage) in [#34859](https://github.com/facebook/react/pull/34859)) * Attempt at a better "unique suspender" text ([sebmarkbage](https://github.com/sebmarkbage) in [#34854](https://github.com/facebook/react/pull/34854)) * Track whether a boundary is currently suspended and make transparent ([sebmarkbage](https://github.com/sebmarkbage) in [#34853](https://github.com/facebook/react/pull/34853)) * Don't hide overflow rectangles ([sebmarkbage](https://github.com/sebmarkbage) in [#34852](https://github.com/facebook/react/pull/34852)) * Measure text nodes ([sebmarkbage](https://github.com/sebmarkbage) in [#34851](https://github.com/facebook/react/pull/34851)) * Don't measure fallbacks when suspended ([sebmarkbage](https://github.com/sebmarkbage) in [#34850](https://github.com/facebook/react/pull/34850)) * Filter out built-in stack frames ([sebmarkbage](https://github.com/sebmarkbage) in [#34828](https://github.com/facebook/react/pull/34828)) * Exclude Suspense boundaries in hidden Activity ([eps1lon](https://github.com/eps1lon) in [#34756](https://github.com/facebook/react/pull/34756)) * Group consecutive suspended by rows by the same name ([sebmarkbage](https://github.com/sebmarkbage) in [#34830](https://github.com/facebook/react/pull/34830)) * Preserve the original index when sorting suspended by ([sebmarkbage](https://github.com/sebmarkbage) in [#34829](https://github.com/facebook/react/pull/34829)) * Don't show the root as being non-compliant ([sebmarkbage](https://github.com/sebmarkbage) in [#34827](https://github.com/facebook/react/pull/34827)) * Ignore suspense boundaries, without visual representation, in the timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34824](https://github.com/facebook/react/pull/34824)) * Explicitly say which id to scroll to and only once ([sebmarkbage](https://github.com/sebmarkbage) in [#34823](https://github.com/facebook/react/pull/34823)) * devtools: fix ellipsis truncation for key values ([sophiebits](https://github.com/sophiebits) in [#34796](https://github.com/facebook/react/pull/34796)) * fix(devtools): remove duplicated "Display density" field in General settings ([Anatole-Godard](https://github.com/Anatole-Godard) in [#34792](https://github.com/facebook/react/pull/34792)) * Gate SuspenseTab ([hoxyq](https://github.com/hoxyq) in [#34754](https://github.com/facebook/react/pull/34754)) * Release `<ViewTransition />` to Canary ([eps1lon](https://github.com/eps1lon) in [#34712](https://github.com/facebook/react/pull/34712)) --- packages/react-devtools-core/package.json | 2 +- packages/react-devtools-extensions/chrome/manifest.json | 4 ++-- packages/react-devtools-extensions/edge/manifest.json | 4 ++-- packages/react-devtools-extensions/firefox/manifest.json | 2 +- packages/react-devtools-inline/package.json | 2 +- packages/react-devtools-timeline/package.json | 2 +- packages/react-devtools/CHANGELOG.md | 9 +++++++++ packages/react-devtools/package.json | 4 ++-- 8 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json index c8facd1a24d..54b89e72e8a 100644 --- a/packages/react-devtools-core/package.json +++ b/packages/react-devtools-core/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-core", - "version": "7.0.0", + "version": "7.0.1", "description": "Use react-devtools outside of the browser", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 0b5285e91a9..9bb0ab1177a 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/packages/react-devtools-extensions/chrome/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Chrome Developer Tools.", - "version": "7.0.0", - "version_name": "7.0.0", + "version": "7.0.1", + "version_name": "7.0.1", "minimum_chrome_version": "114", "icons": { "16": "icons/16-production.png", diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json index 342af4abb3a..55b7248f255 100644 --- a/packages/react-devtools-extensions/edge/manifest.json +++ b/packages/react-devtools-extensions/edge/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.", - "version": "7.0.0", - "version_name": "7.0.0", + "version": "7.0.1", + "version_name": "7.0.1", "minimum_chrome_version": "114", "icons": { "16": "icons/16-production.png", diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index bc12ac0fcde..f401708c217 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Firefox Developer Tools.", - "version": "7.0.0", + "version": "7.0.1", "browser_specific_settings": { "gecko": { "id": "@react-devtools", diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index 0363530cd10..cc5fc51a6ef 100644 --- a/packages/react-devtools-inline/package.json +++ b/packages/react-devtools-inline/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-inline", - "version": "7.0.0", + "version": "7.0.1", "description": "Embed react-devtools within a website", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json index 2f54399ce25..5e4df835526 100644 --- a/packages/react-devtools-timeline/package.json +++ b/packages/react-devtools-timeline/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "react-devtools-timeline", - "version": "7.0.0", + "version": "7.0.1", "license": "MIT", "dependencies": { "@elg/speedscope": "1.9.0-a6f84db", diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md index 0fc637b9946..6c3ab1baf07 100644 --- a/packages/react-devtools/CHANGELOG.md +++ b/packages/react-devtools/CHANGELOG.md @@ -4,6 +4,15 @@ --- +### 7.0.1 +October 20, 2025 + +* Various UI improvements to experimental Suspense tab ([sebmarkbage](https://github.com/sebmarkbage) & [eps1lon](https://github.com/eps1lon)) +* devtools: fix ellipsis truncation for key values ([sophiebits](https://github.com/sophiebits) in [#34796](https://github.com/facebook/react/pull/34796)) +* fix(devtools): remove duplicated "Display density" field in General settings ([Anatole-Godard](https://github.com/Anatole-Godard) in [#34792](https://github.com/facebook/react/pull/34792)) + +--- + ### 7.0.0 Oct 2, 2025 diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json index ea8bab1c95e..3d1a1bda2f3 100644 --- a/packages/react-devtools/package.json +++ b/packages/react-devtools/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools", - "version": "7.0.0", + "version": "7.0.1", "description": "Use react-devtools outside of the browser", "license": "MIT", "repository": { @@ -26,7 +26,7 @@ "electron": "^23.1.2", "internal-ip": "^6.2.0", "minimist": "^1.2.3", - "react-devtools-core": "7.0.0", + "react-devtools-core": "7.0.1", "update-notifier": "^2.1.0" } } From 031595d720955723a0dab67068abc3db759cbc69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 20 Oct 2025 11:54:27 -0700 Subject: [PATCH 122/276] [DevTools] Title color tweak (#34927) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit <img width="521" height="365" alt="Screenshot 2025-10-20 at 11 53 50 AM" src="https://github.com/user-attachments/assets/1a073c09-d440-4498-b2b3-c0dcb2272c96" /> --- .../src/devtools/views/SuspenseTab/SuspenseRects.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index d8dd990850a..0af7baf51a6 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -41,17 +41,18 @@ .SuspenseRectsTitle { pointer-events: none; - color: var(--color-text); + color: color-mix(in srgb, var(--color-suspense) 50%, var(--color-text)); overflow: hidden; text-overflow: ellipsis; + font-family: var(--font-family-sans); font-size: var(--font-size-sans-small); - line-height: var(--font-size-sans-small); - padding: .25rem; + line-height: var(--line-height-data); + padding: 0 .25rem; container-type: size; container-name: title; } -@container title (width < 30px) or (height < 12px) { +@container title (width < 30px) or (height < 18px) { .SuspenseRectsTitle > span { display: none; } From ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518 Mon Sep 17 00:00:00 2001 From: Nathan <nathanmarks@users.noreply.github.com> Date: Mon, 20 Oct 2025 16:52:11 -0400 Subject: [PATCH 123/276] [compiler] loosen computed key restriction for compiler (#34902) We have a whole ton of compiler errors due to us using a helper to return breakpoints for CSS-in-js, which results in code like: ``` const styles = { [responsive.up('xl')]: { ... } } ``` this results in TONS of bailouts due to `(BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression`. I was looking into what it would take to fix it and why we don't allow it, and following the paper trail is seems like the gotchas have been fixed with the new mutability aliasing model that is fully rolled out. It looks like this is the same pattern/issue that was fixed (see https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.js and the old bug in https://github.com/facebook/react/blob/d58c07b563a79bd706531278cb4afec6292b84a8/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.expect.md). @josephsavona can you confirm if that's the case and if we're able to drop this restriction now? (or alternatively, is there another case we can ignore?) --- .../src/HIR/BuildHIR.ts | 14 ---- ...after-construction-sequence-expr.expect.md | 41 ------------ ...dified-during-after-construction.expect.md | 41 ------------ ...te-key-while-constructing-object.expect.md | 40 ----------- ...ject-expression-member-expr-call.expect.md | 42 ------------ ...after-construction-sequence-expr.expect.md | 56 ++++++++++++++++ ...uring-after-construction-sequence-expr.js} | 3 +- ...dified-during-after-construction.expect.md | 55 +++++++++++++++ ...key-modified-during-after-construction.js} | 1 + ...te-key-while-constructing-object.expect.md | 67 +++++++++++++++++++ ...y-mutate-key-while-constructing-object.js} | 0 ...ject-expression-member-expr-call.expect.md | 54 +++++++++++++++ ... => object-expression-member-expr-call.js} | 0 13 files changed, 235 insertions(+), 179 deletions(-) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js => object-expression-computed-key-modified-during-after-construction-sequence-expr.js} (79%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-object-expression-computed-key-modified-during-after-construction.js => object-expression-computed-key-modified-during-after-construction.js} (86%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-object-expression-computed-key-mutate-key-while-constructing-object.js => object-expression-computed-key-mutate-key-while-constructing-object.js} (100%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-object-expression-member-expr-call.js => object-expression-member-expr-call.js} (100%) diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts index 0ae338f5c78..f6872da1117 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts @@ -1568,20 +1568,6 @@ function lowerObjectPropertyKey( name: key.node.value, }; } else if (property.node.computed && key.isExpression()) { - if (!key.isIdentifier() && !key.isMemberExpression()) { - /* - * NOTE: allowing complex key expressions can trigger a bug where a mutation is made conditional - * see fixture - * error.object-expression-computed-key-modified-during-after-construction.js - */ - builder.errors.push({ - reason: `(BuildHIR::lowerExpression) Expected Identifier, got ${key.type} key in ObjectExpression`, - category: ErrorCategory.Todo, - loc: key.node.loc ?? null, - suggestions: null, - }); - return null; - } const place = lowerExpressionToTemporary(builder, key); return { kind: 'computed', diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md deleted file mode 100644 index bebdd9dcc94..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md +++ /dev/null @@ -1,41 +0,0 @@ - -## Input - -```javascript -import {identity, mutate, mutateAndReturn} from 'shared-runtime'; - -function Component(props) { - const key = {}; - const context = { - [(mutate(key), key)]: identity([props.value]), - }; - mutate(key); - return context; -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{value: 42}], -}; - -``` - - -## Error - -``` -Found 1 error: - -Todo: (BuildHIR::lowerExpression) Expected Identifier, got SequenceExpression key in ObjectExpression - -error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.ts:6:6 - 4 | const key = {}; - 5 | const context = { -> 6 | [(mutate(key), key)]: identity([props.value]), - | ^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got SequenceExpression key in ObjectExpression - 7 | }; - 8 | mutate(key); - 9 | return context; -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md deleted file mode 100644 index 215e5200a92..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md +++ /dev/null @@ -1,41 +0,0 @@ - -## Input - -```javascript -import {identity, mutate, mutateAndReturn} from 'shared-runtime'; - -function Component(props) { - const key = {}; - const context = { - [mutateAndReturn(key)]: identity([props.value]), - }; - mutate(key); - return context; -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{value: 42}], -}; - -``` - - -## Error - -``` -Found 1 error: - -Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - -error.todo-object-expression-computed-key-modified-during-after-construction.ts:6:5 - 4 | const key = {}; - 5 | const context = { -> 6 | [mutateAndReturn(key)]: identity([props.value]), - | ^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - 7 | }; - 8 | mutate(key); - 9 | return context; -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md deleted file mode 100644 index abe4153e220..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md +++ /dev/null @@ -1,40 +0,0 @@ - -## Input - -```javascript -import {identity, mutate, mutateAndReturn} from 'shared-runtime'; - -function Component(props) { - const key = {}; - const context = { - [mutateAndReturn(key)]: identity([props.value]), - }; - return context; -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{value: 42}], -}; - -``` - - -## Error - -``` -Found 1 error: - -Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - -error.todo-object-expression-computed-key-mutate-key-while-constructing-object.ts:6:5 - 4 | const key = {}; - 5 | const context = { -> 6 | [mutateAndReturn(key)]: identity([props.value]), - | ^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - 7 | }; - 8 | return context; - 9 | } -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md deleted file mode 100644 index 560f40b9917..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md +++ /dev/null @@ -1,42 +0,0 @@ - -## Input - -```javascript -import {identity, mutate, mutateAndReturn} from 'shared-runtime'; - -function Component(props) { - const obj = {mutateAndReturn}; - const key = {}; - const context = { - [obj.mutateAndReturn(key)]: identity([props.value]), - }; - mutate(key); - return context; -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{value: 42}], -}; - -``` - - -## Error - -``` -Found 1 error: - -Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - -error.todo-object-expression-member-expr-call.ts:7:5 - 5 | const key = {}; - 6 | const context = { -> 7 | [obj.mutateAndReturn(key)]: identity([props.value]), - | ^^^^^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - 8 | }; - 9 | mutate(key); - 10 | return context; -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md new file mode 100644 index 00000000000..d46db9c8de1 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md @@ -0,0 +1,56 @@ + +## Input + +```javascript +import {identity, mutate, mutateAndReturn} from 'shared-runtime'; + +function Component(props) { + const key = {}; + const context = { + [(mutate(key), key)]: identity([props.value]), + }; + mutate(key); + return [context, key]; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], + sequentialRenders: [{value: 42}, {value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, mutate, mutateAndReturn } from "shared-runtime"; + +function Component(props) { + const $ = _c(2); + let t0; + if ($[0] !== props.value) { + const key = {}; + const context = { [(mutate(key), key)]: identity([props.value]) }; + mutate(key); + t0 = [context, key]; + $[0] = props.value; + $[1] = t0; + } else { + t0 = $[1]; + } + return t0; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], + sequentialRenders: [{ value: 42 }, { value: 42 }], +}; + +``` + +### Eval output +(kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}] +[{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}] \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js similarity index 79% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js index 59437a9ffde..183c03cf916 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js @@ -6,10 +6,11 @@ function Component(props) { [(mutate(key), key)]: identity([props.value]), }; mutate(key); - return context; + return [context, key]; } export const FIXTURE_ENTRYPOINT = { fn: Component, params: [{value: 42}], + sequentialRenders: [{value: 42}, {value: 42}], }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md new file mode 100644 index 00000000000..1d671aa36cf --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md @@ -0,0 +1,55 @@ + +## Input + +```javascript +import {identity, mutate, mutateAndReturn} from 'shared-runtime'; + +function Component(props) { + const key = {}; + const context = { + [mutateAndReturn(key)]: identity([props.value]), + }; + mutate(key); + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], + sequentialRenders: [{value: 42}, {value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, mutate, mutateAndReturn } from "shared-runtime"; + +function Component(props) { + const $ = _c(2); + let context; + if ($[0] !== props.value) { + const key = {}; + context = { [mutateAndReturn(key)]: identity([props.value]) }; + mutate(key); + $[0] = props.value; + $[1] = context; + } else { + context = $[1]; + } + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], + sequentialRenders: [{ value: 42 }, { value: 42 }], +}; + +``` + +### Eval output +(kind: ok) {"[object Object]":[42]} +{"[object Object]":[42]} \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js similarity index 86% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js index 86d9cd7fd9b..0176850e981 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js @@ -12,4 +12,5 @@ function Component(props) { export const FIXTURE_ENTRYPOINT = { fn: Component, params: [{value: 42}], + sequentialRenders: [{value: 42}, {value: 42}], }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md new file mode 100644 index 00000000000..4c4b45967e2 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md @@ -0,0 +1,67 @@ + +## Input + +```javascript +import {identity, mutate, mutateAndReturn} from 'shared-runtime'; + +function Component(props) { + const key = {}; + const context = { + [mutateAndReturn(key)]: identity([props.value]), + }; + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, mutate, mutateAndReturn } from "shared-runtime"; + +function Component(props) { + const $ = _c(5); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + const key = {}; + + t0 = mutateAndReturn(key); + $[0] = t0; + } else { + t0 = $[0]; + } + let t1; + if ($[1] !== props.value) { + t1 = identity([props.value]); + $[1] = props.value; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[3] !== t1) { + t2 = { [t0]: t1 }; + $[3] = t1; + $[4] = t2; + } else { + t2 = $[4]; + } + const context = t2; + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], +}; + +``` + +### Eval output +(kind: ok) {"[object Object]":[42]} \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.js similarity index 100% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md new file mode 100644 index 00000000000..ac6cb97b086 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md @@ -0,0 +1,54 @@ + +## Input + +```javascript +import {identity, mutate, mutateAndReturn} from 'shared-runtime'; + +function Component(props) { + const obj = {mutateAndReturn}; + const key = {}; + const context = { + [obj.mutateAndReturn(key)]: identity([props.value]), + }; + mutate(key); + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, mutate, mutateAndReturn } from "shared-runtime"; + +function Component(props) { + const $ = _c(2); + let context; + if ($[0] !== props.value) { + const obj = { mutateAndReturn }; + const key = {}; + context = { [obj.mutateAndReturn(key)]: identity([props.value]) }; + mutate(key); + $[0] = props.value; + $[1] = context; + } else { + context = $[1]; + } + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], +}; + +``` + +### Eval output +(kind: ok) {"[object Object]":[42]} \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.js similarity index 100% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.js From 613cf80f263663f2c9923324ca41591c230c20ad Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Tue, 21 Oct 2025 13:51:44 +0100 Subject: [PATCH 124/276] [DevTools] chore: add useSyncExternalStore examples to shell (#34932) Few examples of using `useSyncExternalStore` that can be useful for debugging hook tree reconstruction logic and hook names parsing feature. --- .../InspectableElements.js | 2 + .../UseSyncExternalStore.js | 133 ++++++++++++++++++ 2 files changed, 135 insertions(+) create mode 100644 packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js diff --git a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js index 95f104925b9..34f46774b18 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js @@ -20,6 +20,7 @@ import SimpleValues from './SimpleValues'; import SymbolKeys from './SymbolKeys'; import UseMemoCache from './UseMemoCache'; import UseEffectEvent from './UseEffectEvent'; +import UseSyncExternalStore from './UseSyncExternalStore'; // TODO Add Immutable JS example @@ -38,6 +39,7 @@ export default function InspectableElements(): React.Node { <SymbolKeys /> <UseMemoCache /> <UseEffectEvent /> + <UseSyncExternalStore /> </Fragment> ); } diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js b/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js new file mode 100644 index 00000000000..decb10b2db2 --- /dev/null +++ b/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js @@ -0,0 +1,133 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import * as React from 'react'; + +const {useState, useEffect, useSyncExternalStore} = React; + +// Create a simple external store for demonstratio +function createStore<T>(initialValue: T): { + subscribe: (cb: () => void) => () => any, + getSnapshot: () => T, + setValue: (newValue: T) => void, +} { + let value = initialValue; + const subscribers = new Set<() => void>(); + + return { + subscribe(callback) { + subscribers.add(callback); + return () => subscribers.delete(callback); + }, + getSnapshot() { + return value; + }, + setValue(newValue) { + value = newValue; + subscribers.forEach(callback => callback()); + }, + }; +} + +const counterStore = createStore(0); +const themeStore = createStore('light'); + +export default function UseSyncExternalStore(): React.Node { + return ( + <> + <h2>useSyncExternalStore()</h2> + <SingleHookCase /> + <HookTreeCase /> + <MultipleStoresCase /> + </> + ); +} + +function SingleHookCase(): React.Node { + const count = useSyncExternalStore( + counterStore.subscribe, + counterStore.getSnapshot, + ); + + return ( + <div> + <h3>Single hook case</h3> + <p>Count: {count}</p> + <button onClick={() => counterStore.setValue(count + 1)}> + Increment + </button> + <button onClick={() => counterStore.setValue(count - 1)}> + Decrement + </button> + </div> + ); +} + +function useCounter() { + const count = useSyncExternalStore( + counterStore.subscribe, + counterStore.getSnapshot, + ); + const [localState, setLocalState] = useState(0); + + useEffect(() => { + // Some effect + }, [count]); + + return {count, localState, setLocalState}; +} + +function HookTreeCase(): React.Node { + const {count, localState, setLocalState} = useCounter(); + + return ( + <div> + <h3>Hook tree case</h3> + <p>External count: {count}</p> + <p>Local state: {localState}</p> + <button onClick={() => counterStore.setValue(count + 1)}> + Increment External + </button> + <button onClick={() => setLocalState(localState + 1)}> + Increment Local + </button> + </div> + ); +} + +function useTheme() { + const theme = useSyncExternalStore( + themeStore.subscribe, + themeStore.getSnapshot, + ); + + return theme; +} + +function MultipleStoresCase() { + const count = useSyncExternalStore( + counterStore.subscribe, + counterStore.getSnapshot, + ); + const theme = useTheme(); + + return ( + <div style={{background: theme === 'dark' ? '#333' : '#fff'}}> + <h3>Multiple stores case</h3> + <p>Count: {count}</p> + <p>Theme: {theme}</p> + <button + onClick={() => + themeStore.setValue(theme === 'light' ? 'dark' : 'light') + }> + Toggle Theme + </button> + </div> + ); +} From 39c6545cef85b5251e519080fd315bff728d87de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C5=82a=C5=BCej=20Kustra?= <46095609+blazejkustra@users.noreply.github.com> Date: Tue, 21 Oct 2025 14:59:20 +0200 Subject: [PATCH 125/276] Fix indices of hooks in devtools when using useSyncExternalStore (#34547) ## Summary This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook. It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes. Before: https://github.com/user-attachments/assets/0db72a4e-21f7-44c7-ba02-669a272631e5 After: https://github.com/user-attachments/assets/4da71392-0396-408d-86a7-6fbc82d8c4f5 ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). ```ts function Test() { // 1 React.useSyncExternalStore( () => {}, () => {}, () => {}, ); // 2 const [state, setState] = useState('test'); return ( <> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red'}}> {state} </div> </> ); } ``` --- .../src/backend/fiber/renderer.js | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index fe8722da568..9de9037690c 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -1913,6 +1913,20 @@ export function attach( return false; } + function isUseSyncExternalStoreHook(hookObject: any): boolean { + const queue = hookObject.queue; + if (!queue) { + return false; + } + + const boundHasOwnProperty = hasOwnProperty.bind(queue); + return ( + boundHasOwnProperty('value') && + boundHasOwnProperty('getSnapshot') && + typeof queue.getSnapshot === 'function' + ); + } + function isHookThatCanScheduleUpdate(hookObject: any) { const queue = hookObject.queue; if (!queue) { @@ -1929,12 +1943,7 @@ export function attach( return true; } - // Detect useSyncExternalStore() - return ( - boundHasOwnProperty('value') && - boundHasOwnProperty('getSnapshot') && - typeof queue.getSnapshot === 'function' - ); + return isUseSyncExternalStoreHook(hookObject); } function didStatefulHookChange(prev: any, next: any): boolean { @@ -1955,10 +1964,18 @@ export function attach( const indices = []; let index = 0; + while (next !== null) { if (didStatefulHookChange(prev, next)) { indices.push(index); } + + // useSyncExternalStore creates 2 internal hooks, but we only count it as 1 user-facing hook + if (isUseSyncExternalStoreHook(next)) { + next = next.next; + prev = prev.next; + } + next = next.next; prev = prev.next; index++; From 71b3a03cc936c8eb30a6e6108abf5550f5037f71 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Tue, 21 Oct 2025 10:57:18 -0400 Subject: [PATCH 126/276] [forgive] Various fixes to prepare for internal sync (#34928) Fixes a few small things: - Update imports to reference root babel-plugin-react-compiler rather than from `[...]/src/...` - Remove unused cosmiconfig options parsing for now - Update type exports in babel-plugin-react-compiler accordingly --- .../babel-plugin-react-compiler/src/index.ts | 3 + compiler/packages/react-forgive/package.json | 3 +- .../react-forgive/server/package.json | 1 - .../server/src/compiler/compat.ts | 2 +- .../server/src/compiler/index.ts | 2 +- .../server/src/compiler/options.ts | 25 ------ .../react-forgive/server/src/index.ts | 14 ++- .../src/requests/autodepsdecorations.ts | 2 +- .../packages/react-forgive/server/yarn.lock | 86 +------------------ 9 files changed, 15 insertions(+), 123 deletions(-) delete mode 100644 compiler/packages/react-forgive/server/src/compiler/options.ts diff --git a/compiler/packages/babel-plugin-react-compiler/src/index.ts b/compiler/packages/babel-plugin-react-compiler/src/index.ts index d2abd744d6b..ca5b6534301 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/index.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/index.ts @@ -29,10 +29,13 @@ export { ProgramContext, tryFindDirectiveEnablingMemoization as findDirectiveEnablingMemoization, findDirectiveDisablingMemoization, + defaultOptions, type CompilerPipelineValue, type Logger, type LoggerEvent, type PluginOptions, + type AutoDepsDecorationsEvent, + type CompileSuccessEvent, } from './Entrypoint'; export { Effect, diff --git a/compiler/packages/react-forgive/package.json b/compiler/packages/react-forgive/package.json index 0bf48e232ec..fc7d71095c5 100644 --- a/compiler/packages/react-forgive/package.json +++ b/compiler/packages/react-forgive/package.json @@ -36,13 +36,14 @@ }, "scripts": { "build": "yarn run compile", + "build:compiler": "yarn workspace babel-plugin-react-compiler build --dts", "compile": "rimraf dist && concurrently -n server,client \"scripts/build.mjs -t server\" \"scripts/build.mjs -t client\"", "dev": "yarn run package && yarn run install-ext", "install-ext": "code --install-extension react-forgive-0.0.0.vsix", "lint": "echo 'no tests'", "package": "rm -f react-forgive-0.0.0.vsix && vsce package --yarn", "postinstall": "cd client && yarn install && cd ../server && yarn install && cd ..", - "pretest": "yarn run compile && yarn run lint", + "pretest": "yarn run build:compiler && yarn run compile && yarn run lint", "test": "vscode-test", "vscode:prepublish": "yarn run compile", "watch": "scripts/build.mjs --watch" diff --git a/compiler/packages/react-forgive/server/package.json b/compiler/packages/react-forgive/server/package.json index fb6f4feebd7..c9125860720 100644 --- a/compiler/packages/react-forgive/server/package.json +++ b/compiler/packages/react-forgive/server/package.json @@ -18,7 +18,6 @@ "@babel/parser": "^7.26.0", "@babel/plugin-syntax-typescript": "^7.25.9", "@babel/types": "^7.26.0", - "cosmiconfig": "^9.0.0", "prettier": "^3.3.3", "vscode-languageserver": "^9.0.1", "vscode-languageserver-textdocument": "^1.0.12" diff --git a/compiler/packages/react-forgive/server/src/compiler/compat.ts b/compiler/packages/react-forgive/server/src/compiler/compat.ts index 10271cbdcdc..f467f70ba13 100644 --- a/compiler/packages/react-forgive/server/src/compiler/compat.ts +++ b/compiler/packages/react-forgive/server/src/compiler/compat.ts @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import {SourceLocation} from 'babel-plugin-react-compiler/src'; +import {type SourceLocation} from 'babel-plugin-react-compiler'; import {type Range} from 'vscode-languageserver'; export function babelLocationToRange(loc: SourceLocation): Range | null { diff --git a/compiler/packages/react-forgive/server/src/compiler/index.ts b/compiler/packages/react-forgive/server/src/compiler/index.ts index fe192c62132..b474253f71e 100644 --- a/compiler/packages/react-forgive/server/src/compiler/index.ts +++ b/compiler/packages/react-forgive/server/src/compiler/index.ts @@ -9,7 +9,7 @@ import type * as BabelCore from '@babel/core'; import {parseAsync, transformFromAstAsync} from '@babel/core'; import BabelPluginReactCompiler, { type PluginOptions, -} from 'babel-plugin-react-compiler/src'; +} from 'babel-plugin-react-compiler'; import * as babelParser from 'prettier/plugins/babel.js'; import estreeParser from 'prettier/plugins/estree'; import * as typescriptParser from 'prettier/plugins/typescript'; diff --git a/compiler/packages/react-forgive/server/src/compiler/options.ts b/compiler/packages/react-forgive/server/src/compiler/options.ts deleted file mode 100644 index 226be799d3a..00000000000 --- a/compiler/packages/react-forgive/server/src/compiler/options.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { - parsePluginOptions, - type PluginOptions, -} from 'babel-plugin-react-compiler/src'; -import {cosmiconfigSync} from 'cosmiconfig'; - -export function resolveReactConfig(projectPath: string): PluginOptions | null { - const explorerSync = cosmiconfigSync('react', { - searchStrategy: 'project', - cache: true, - }); - const result = explorerSync.search(projectPath); - if (result != null) { - return parsePluginOptions(result.config); - } else { - return null; - } -} diff --git a/compiler/packages/react-forgive/server/src/index.ts b/compiler/packages/react-forgive/server/src/index.ts index fd4ffd99886..7552337cbc7 100644 --- a/compiler/packages/react-forgive/server/src/index.ts +++ b/compiler/packages/react-forgive/server/src/index.ts @@ -20,13 +20,12 @@ import { TextDocumentSyncKind, } from 'vscode-languageserver/node'; import {compile, lastResult} from './compiler'; -import {type PluginOptions} from 'babel-plugin-react-compiler/src'; -import {resolveReactConfig} from './compiler/options'; import { type CompileSuccessEvent, type LoggerEvent, + type PluginOptions, defaultOptions, -} from 'babel-plugin-react-compiler/src/Entrypoint/Options'; +} from 'babel-plugin-react-compiler'; import {babelLocationToRange, getRangeFirstCharacter} from './compiler/compat'; import { type AutoDepsDecorationsLSPEvent, @@ -64,8 +63,7 @@ type CodeActionLSPEvent = { }; connection.onInitialize((_params: InitializeParams) => { - // TODO(@poteto) get config fr - compilerOptions = resolveReactConfig('.') ?? defaultOptions; + compilerOptions = defaultOptions; compilerOptions = { ...compilerOptions, environment: { @@ -76,21 +74,21 @@ connection.onInitialize((_params: InitializeParams) => { importSpecifierName: 'useEffect', source: 'react', }, - numRequiredArgs: 1, + autodepsIndex: 1, }, { function: { importSpecifierName: 'useSpecialEffect', source: 'shared-runtime', }, - numRequiredArgs: 2, + autodepsIndex: 2, }, { function: { importSpecifierName: 'default', source: 'useEffectWrapper', }, - numRequiredArgs: 1, + autodepsIndex: 1, }, ], }, diff --git a/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts b/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts index 77a568662e4..c9c9e8ca013 100644 --- a/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts +++ b/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import {type AutoDepsDecorationsEvent} from 'babel-plugin-react-compiler/src/Entrypoint'; +import {type AutoDepsDecorationsEvent} from 'babel-plugin-react-compiler'; import {type Position} from 'vscode-languageserver-textdocument'; import {RequestType} from 'vscode-languageserver/node'; import {type Range, sourceLocationToRange} from '../utils/range'; diff --git a/compiler/packages/react-forgive/server/yarn.lock b/compiler/packages/react-forgive/server/yarn.lock index b72063294ff..ee346ce7d3a 100644 --- a/compiler/packages/react-forgive/server/yarn.lock +++ b/compiler/packages/react-forgive/server/yarn.lock @@ -10,7 +10,7 @@ "@jridgewell/gen-mapping" "^0.3.5" "@jridgewell/trace-mapping" "^0.3.24" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2": +"@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2": version "7.26.2" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== @@ -188,11 +188,6 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -argparse@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" - integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== - browserslist@^4.24.0: version "4.24.3" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.3.tgz#5fc2725ca8fb3c1432e13dac278c7cc103e026d2" @@ -203,11 +198,6 @@ browserslist@^4.24.0: node-releases "^2.0.19" update-browserslist-db "^1.1.1" -callsites@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" - integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== - caniuse-lite@^1.0.30001688: version "1.0.30001690" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz#f2d15e3aaf8e18f76b2b8c1481abde063b8104c8" @@ -218,16 +208,6 @@ convert-source-map@^2.0.0: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== -cosmiconfig@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d" - integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg== - dependencies: - env-paths "^2.2.1" - import-fresh "^3.3.0" - js-yaml "^4.1.0" - parse-json "^5.2.0" - debug@^4.1.0, debug@^4.3.1: version "4.4.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a" @@ -240,18 +220,6 @@ electron-to-chromium@^1.5.73: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz#cb886b504a6467e4c00bea3317edb38393c53413" integrity sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw== -env-paths@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2" - integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A== - -error-ex@^1.3.1: - version "1.3.2" - resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" - integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g== - dependencies: - is-arrayish "^0.2.1" - escalade@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" @@ -267,51 +235,21 @@ globals@^11.1.0: resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== -import-fresh@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" - integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw== - dependencies: - parent-module "^1.0.0" - resolve-from "^4.0.0" - -is-arrayish@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" - integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg== - js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== -js-yaml@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602" - integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA== - dependencies: - argparse "^2.0.1" - jsesc@^3.0.2: version "3.1.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d" integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== -json-parse-even-better-errors@^2.3.0: - version "2.3.1" - resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d" - integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w== - json5@^2.2.3: version "2.2.3" resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== -lines-and-columns@^1.1.6: - version "1.2.4" - resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" - integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== - lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" @@ -329,23 +267,6 @@ node-releases@^2.0.19: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314" integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw== -parent-module@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" - integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g== - dependencies: - callsites "^3.0.0" - -parse-json@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd" - integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg== - dependencies: - "@babel/code-frame" "^7.0.0" - error-ex "^1.3.1" - json-parse-even-better-errors "^2.3.0" - lines-and-columns "^1.1.6" - picocolors@^1.0.0, picocolors@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" @@ -356,11 +277,6 @@ prettier@^3.3.3: resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f" integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ== -resolve-from@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" - integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== - semver@^6.3.1: version "6.3.1" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" From 6b344c7c5359d0113389ef92d0a6a4d5cbb76677 Mon Sep 17 00:00:00 2001 From: Karl Horky <karl.horky@gmail.com> Date: Wed, 22 Oct 2025 18:31:09 +0200 Subject: [PATCH 127/276] Switch to `export =` to fix eslint-plugin-react-hooks types (#34949)  ## Summary  Resolve the type error with the types, according to [Are the types wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%407.0.0), as an additional - Last attempt: https://github.com/facebook/react/pull/34746 - Original issue: https://github.com/facebook/react/issues/34745 ## How did you test this change? I edited `node_modules/eslint-plugin-react-hooks/index.d.ts` in my `"module": "Node16"` + `"type": "module"` project and my error went away: - https://github.com/facebook/react/issues/34801#issuecomment-3433053067 cc @poteto @michaelfaith @andrewbranch  --- packages/eslint-plugin-react-hooks/npm/index.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-react-hooks/npm/index.d.ts b/packages/eslint-plugin-react-hooks/npm/index.d.ts index c883d6f8adf..7516dc1e846 100644 --- a/packages/eslint-plugin-react-hooks/npm/index.d.ts +++ b/packages/eslint-plugin-react-hooks/npm/index.d.ts @@ -5,4 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -export {default} from './cjs/eslint-plugin-react-hooks'; +import reactHooks from './cjs/eslint-plugin-react-hooks'; + +export = reactHooks; From bbb7a1fdf741eed6b7adcd48a441259819d664cc Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Wed, 22 Oct 2025 13:18:44 -0400 Subject: [PATCH 128/276] [eprh] Type `configs.flat` more strictly (#34950) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Addresses #34801 where `configs.flat` is possibly undefined as it was typed as a record of arbitrary string keys. <img width="990" height="125" alt="Screenshot 2025-10-22 at 1 16 44 PM" src="https://github.com/user-attachments/assets/8b0d37b9-d7b0-4fc0-aa62-1b0968dae75f" /> --- packages/eslint-plugin-react-hooks/src/index.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts index 6d72c1daa57..924299d8989 100644 --- a/packages/eslint-plugin-react-hooks/src/index.ts +++ b/packages/eslint-plugin-react-hooks/src/index.ts @@ -71,7 +71,10 @@ const configs = { plugins, rules: recommendedLatestRuleConfigs, }, - flat: {} as Record<string, ReactHooksFlatConfig>, + flat: {} as { + recommended: ReactHooksFlatConfig; + 'recommended-latest': ReactHooksFlatConfig; + }, }; const plugin = { From 723b25c6444e4dcabe710ae33bc93cea79324428 Mon Sep 17 00:00:00 2001 From: Karl Horky <karl.horky@gmail.com> Date: Wed, 22 Oct 2025 20:05:49 +0200 Subject: [PATCH 129/276] Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (#34951) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit  ## Summary  Fix the runtime error with named imports and make the last remaining [Are The Types Wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%400.0.0-experimental-6b344c7c-20251022) error with `eslint-plugin-react-hooks` go away, thanks to the hint from @andrewbranch: - https://github.com/facebook/react/issues/34801#issuecomment-3433478810 ## How did you test this change?  I tried adding this to `node_modules` and it fixed the failures when importing named imports like `import { configs, meta, rules } from 'eslint-plugin-react-hooks'`: ```bash ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 Oops! Something went wrong! :( ESLint: 9.37.0 file:///Users/k/p/eslint-config-upleveled/index.js:13 import reactHooks, { configs } from 'eslint-plugin-react-hooks'; ^^^^^^^ SyntaxError: Named export 'configs' not found. The requested module 'eslint-plugin-react-hooks' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'eslint-plugin-react-hooks'; const { configs } = pkg; at ModuleJob._instantiate (node:internal/modules/esm/module_job:228:21) at async ModuleJob.run (node:internal/modules/esm/module_job:335:5) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:647:26) at async dynamicImportConfig (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:186:17) at async loadConfigFile (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:276:9) at async ConfigLoader.calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:589:23) at async #calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:743:23) at async directoryFilter (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/eslint/eslint-helpers.js:309:5) at async NodeHfs.<anonymous> (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:586:29) at async NodeHfs.walk (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:614:3) ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 ➜ eslint-config-upleveled git:(renovate/react-monorepo) # no error ``` The named imports identifiers `configs`, `meta`, and `rules` also contain values, as a sanity check: - https://github.com/facebook/react/pull/34951#issuecomment-3433555636 cc @poteto --- packages/eslint-plugin-react-hooks/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/eslint-plugin-react-hooks/index.js b/packages/eslint-plugin-react-hooks/index.js index ce26a10c315..4c18af7c001 100644 --- a/packages/eslint-plugin-react-hooks/index.js +++ b/packages/eslint-plugin-react-hooks/index.js @@ -1 +1,11 @@ module.exports = require('./src/index.ts'); + +// Hint to Node’s cjs-module-lexer to make named imports work +// https://github.com/facebook/react/issues/34801#issuecomment-3433478810 +// eslint-disable-next-line ft-flow/no-unused-expressions +0 && + (module.exports = { + meta: true, + rules: true, + configs: true, + }); From eb2f784e752ba690f032db4c3d87daac77a5a2aa Mon Sep 17 00:00:00 2001 From: Karl Horky <karl.horky@gmail.com> Date: Wed, 22 Oct 2025 23:51:01 +0200 Subject: [PATCH 130/276] Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (#34953) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit  Supersedes #34951 ## Summary  Fix the runtime error with named imports and make the last remaining [Are The Types Wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%400.0.0-experimental-6b344c7c-20251022) error with `eslint-plugin-react-hooks` go away, thanks to the hint from Andrew Branch: - https://github.com/facebook/react/issues/34801#issuecomment-3433478810 ## How did you test this change?  I tried adding this to `node_modules` and it fixed the failures when importing named imports like `import { configs, meta, rules } from 'eslint-plugin-react-hooks'`: ```bash ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 Oops! Something went wrong! :( ESLint: 9.37.0 file:///Users/k/p/eslint-config-upleveled/index.js:13 import reactHooks, { configs } from 'eslint-plugin-react-hooks'; ^^^^^^^ SyntaxError: Named export 'configs' not found. The requested module 'eslint-plugin-react-hooks' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'eslint-plugin-react-hooks'; const { configs } = pkg; at ModuleJob._instantiate (node:internal/modules/esm/module_job:228:21) at async ModuleJob.run (node:internal/modules/esm/module_job:335:5) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:647:26) at async dynamicImportConfig (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:186:17) at async loadConfigFile (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:276:9) at async ConfigLoader.calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:589:23) at async #calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:743:23) at async directoryFilter (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/eslint/eslint-helpers.js:309:5) at async NodeHfs.<anonymous> (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:586:29) at async NodeHfs.walk (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:614:3) ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 ➜ eslint-config-upleveled git:(renovate/react-monorepo) # no error ``` The named imports identifiers `configs`, `meta`, and `rules` also contain values, as a sanity check: - https://github.com/facebook/react/pull/34951#issuecomment-3433555636 cc @poteto --- packages/eslint-plugin-react-hooks/index.js | 10 ---------- packages/eslint-plugin-react-hooks/npm/index.js | 10 ++++++++++ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/eslint-plugin-react-hooks/index.js b/packages/eslint-plugin-react-hooks/index.js index 4c18af7c001..ce26a10c315 100644 --- a/packages/eslint-plugin-react-hooks/index.js +++ b/packages/eslint-plugin-react-hooks/index.js @@ -1,11 +1 @@ module.exports = require('./src/index.ts'); - -// Hint to Node’s cjs-module-lexer to make named imports work -// https://github.com/facebook/react/issues/34801#issuecomment-3433478810 -// eslint-disable-next-line ft-flow/no-unused-expressions -0 && - (module.exports = { - meta: true, - rules: true, - configs: true, - }); diff --git a/packages/eslint-plugin-react-hooks/npm/index.js b/packages/eslint-plugin-react-hooks/npm/index.js index b819fc70236..3e8352af1e6 100644 --- a/packages/eslint-plugin-react-hooks/npm/index.js +++ b/packages/eslint-plugin-react-hooks/npm/index.js @@ -14,3 +14,13 @@ if (process.env.NODE_ENV === 'production') { } else { module.exports = require('./cjs/eslint-plugin-react-hooks.development.js'); } + +// Hint to Node’s cjs-module-lexer to make named imports work +// https://github.com/facebook/react/issues/34801#issuecomment-3433478810 +// eslint-disable-next-line ft-flow/no-unused-expressions +0 && + (module.exports = { + meta: true, + rules: true, + configs: true, + }); From 6160773f309b7fc734767649d47140d04fa1f568 Mon Sep 17 00:00:00 2001 From: Timothy Lau <timothy-lau@outlook.com> Date: Thu, 23 Oct 2025 23:13:18 +0800 Subject: [PATCH 131/276] [playground] Refactor ConfigEditor to use <Activity> component (#34958) ## Summary This PR addresses a pending TODO comment left in https://github.com/facebook/react/pull/34499 https://github.com/facebook/react/blame/eb2f784e752ba690f032db4c3d87daac77a5a2aa/compiler/apps/playground/components/Editor/ConfigEditor.tsx#L37 This change removes the temporary workaround and replaces it with `<Activity>`, as originally intended. ## How did you test this change? - Updated the component to use `<Activity>` directly - Verified the editor renders correctly in both development and production builds. - The `<Activity>` UI updates as expected. https://github.com/user-attachments/assets/ce976123-da59-4579-b063-b308a9167b21 --- .../components/Editor/ConfigEditor.tsx | 19 +++---- compiler/apps/playground/package.json | 14 ++--- compiler/apps/playground/styles/globals.css | 9 +++ compiler/apps/playground/yarn.lock | 57 ++++++++++--------- 4 files changed, 54 insertions(+), 45 deletions(-) diff --git a/compiler/apps/playground/components/Editor/ConfigEditor.tsx b/compiler/apps/playground/components/Editor/ConfigEditor.tsx index 18f904d225f..cf80b48dbf0 100644 --- a/compiler/apps/playground/components/Editor/ConfigEditor.tsx +++ b/compiler/apps/playground/components/Editor/ConfigEditor.tsx @@ -14,6 +14,7 @@ import React, { unstable_ViewTransition as ViewTransition, unstable_addTransitionType as addTransitionType, startTransition, + Activity, } from 'react'; import {Resizable} from 're-resizable'; import {useStore, useStoreDispatch} from '../StoreContext'; @@ -34,12 +35,8 @@ export default function ConfigEditor({ const [isExpanded, setIsExpanded] = useState(false); return ( - // TODO: Use <Activity> when it is compatible with Monaco: https://github.com/suren-atoyan/monaco-react/issues/753 <> - <div - style={{ - display: isExpanded ? 'block' : 'none', - }}> + <Activity mode={isExpanded ? 'visible' : 'hidden'}> <ExpandedEditor onToggle={() => { startTransition(() => { @@ -49,11 +46,8 @@ export default function ConfigEditor({ }} formattedAppliedConfig={formattedAppliedConfig} /> - </div> - <div - style={{ - display: !isExpanded ? 'block' : 'none', - }}> + </Activity> + <Activity mode={isExpanded ? 'hidden' : 'visible'}> <CollapsedEditor onToggle={() => { startTransition(() => { @@ -62,7 +56,7 @@ export default function ConfigEditor({ }); }} /> - </div> + </Activity> </> ); } @@ -122,7 +116,8 @@ function ExpandedEditor({ return ( <ViewTransition - update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}> + enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}} + exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}> <Resizable minWidth={300} maxWidth={600} diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json index 6d5757008a5..7c187b439e7 100644 --- a/compiler/apps/playground/package.json +++ b/compiler/apps/playground/package.json @@ -26,7 +26,7 @@ "@babel/traverse": "^7.18.9", "@babel/types": "7.26.3", "@heroicons/react": "^1.0.6", - "@monaco-editor/react": "^4.4.6", + "@monaco-editor/react": "^4.8.0-rc.2", "@playwright/test": "^1.51.1", "@use-gesture/react": "^10.2.22", "hermes-eslint": "^0.25.0", @@ -40,13 +40,13 @@ "prettier": "^3.3.3", "pretty-format": "^29.3.1", "re-resizable": "^6.9.16", - "react": "19.1.1", - "react-dom": "19.1.1" + "react": "19.2", + "react-dom": "19.2" }, "devDependencies": { "@types/node": "18.11.9", - "@types/react": "19.1.13", - "@types/react-dom": "19.1.9", + "@types/react": "19.2", + "@types/react-dom": "19.2", "autoprefixer": "^10.4.13", "clsx": "^1.2.1", "concurrently": "^7.4.0", @@ -58,7 +58,7 @@ "wait-on": "^7.2.0" }, "resolutions": { - "@types/react": "19.1.12", - "@types/react-dom": "19.1.9" + "@types/react": "19.2", + "@types/react-dom": "19.2" } } diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css index 86b069f0579..ead5d83a65d 100644 --- a/compiler/apps/playground/styles/globals.css +++ b/compiler/apps/playground/styles/globals.css @@ -79,6 +79,15 @@ ::view-transition-group(.slide-in) { z-index: 1; } +::view-transition-old(.slide-out) { + animation-name: slideOutLeft; +} +::view-transition-new(.slide-out) { + animation-name: slideInLeft; +} +::view-transition-group(.slide-out) { + z-index: 1; +} @keyframes slideOutLeft { from { diff --git a/compiler/apps/playground/yarn.lock b/compiler/apps/playground/yarn.lock index 00b8a6950f9..232d37448ee 100644 --- a/compiler/apps/playground/yarn.lock +++ b/compiler/apps/playground/yarn.lock @@ -701,19 +701,19 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -"@monaco-editor/loader@^1.4.0": - version "1.4.0" - resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558" - integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg== +"@monaco-editor/loader@^1.6.1": + version "1.6.1" + resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.6.1.tgz#c99177d87765abf10de31a0086084e714acfbc0f" + integrity sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg== dependencies: state-local "^1.0.6" -"@monaco-editor/react@^4.4.6": - version "4.6.0" - resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119" - integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw== +"@monaco-editor/react@^4.8.0-rc.2": + version "4.8.0-rc.2" + resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.8.0-rc.2.tgz#e9acf652e23e9f640671a69875f496dde7f098aa" + integrity sha512-RzFHKBCnRA4RnozaG/EPhKsbkhX5wcApSa5MElR/AD2ojxhMY+QP+G8aJpxALCnIwKs6L0dec5MJ0nAjMUEqnA== dependencies: - "@monaco-editor/loader" "^1.4.0" + "@monaco-editor/loader" "^1.6.1" "@next/env@15.6.0-canary.7": version "15.6.0-canary.7" @@ -859,6 +859,11 @@ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b" integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ== +"@types/react-dom@19.2": + version "19.2.2" + resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332" + integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw== + "@types/react@19.1.12": version "19.1.12" resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b" @@ -866,10 +871,10 @@ dependencies: csstype "^3.0.2" -"@types/react@19.1.13": - version "19.1.13" - resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.13.tgz#fc650ffa680d739a25a530f5d7ebe00cdd771883" - integrity sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ== +"@types/react@19.2": + version "19.2.2" + resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36" + integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA== dependencies: csstype "^3.0.2" @@ -3589,12 +3594,12 @@ re-resizable@^6.9.16: resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.0.tgz#d684a096ab438f1a93f59ad3a580a206b0ce31ee" integrity sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw== -react-dom@19.1.1: - version "19.1.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.1.tgz#2daa9ff7f3ae384aeb30e76d5ee38c046dc89893" - integrity sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw== +react-dom@19.2: + version "19.2.0" + resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8" + integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ== dependencies: - scheduler "^0.26.0" + scheduler "^0.27.0" react-is@^16.13.1: version "16.13.1" @@ -3606,10 +3611,10 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== -react@19.1.1: - version "19.1.1" - resolved "https://registry.yarnpkg.com/react/-/react-19.1.1.tgz#06d9149ec5e083a67f9a1e39ce97b06a03b644af" - integrity sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ== +react@19.2: + version "19.2.0" + resolved "https://registry.npmjs.org/react/-/react-19.2.0.tgz#d33dd1721698f4376ae57a54098cb47fc75d93a5" + integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ== read-cache@^1.0.0: version "1.0.0" @@ -3785,10 +3790,10 @@ safe-regex-test@^1.1.0: es-errors "^1.3.0" is-regex "^1.2.1" -scheduler@^0.26.0: - version "0.26.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.26.0.tgz#4ce8a8c2a2095f13ea11bf9a445be50c555d6337" - integrity sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA== +scheduler@^0.27.0: + version "0.27.0" + resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd" + integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q== semver@^6.3.1: version "6.3.1" From e0654becf799516c1d0a1093a641afef78e476c5 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Thu, 23 Oct 2025 13:43:16 -0400 Subject: [PATCH 132/276] [eprh] Update changelog for 7.0.1 (#34964) Add changelog entry for 7.0.1 --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34964). * #34965 * __->__ #34964 --- packages/eslint-plugin-react-hooks/CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md index 0aba9e00561..9f88047193e 100644 --- a/packages/eslint-plugin-react-hooks/CHANGELOG.md +++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md @@ -1,3 +1,10 @@ +## 7.0.1 + +- Disallowed passing inline `useEffectEvent` values as JSX props to guard against accidental propagation. ([#34820](https://github.com/facebook/react/pull/34820) by [@jf-eirinha](https://github.com/jf-eirinha)) +- Switch to `export =` so eslint-plugin-react-hooks emits correct types for consumers in Node16 ESM projects. ([#34949](https://github.com/facebook/react/pull/34949) by [@karlhorky](https://github.com/karlhorky)) +- Tightened the typing of `configs.flat` so the `configs` export is always defined. ([#34950](https://github.com/facebook/react/pull/34950) by [@poteto](https://github.com/poteto)) +- Fix named import runtime errors. ([#34951](https://github.com/facebook/react/pull/34951), [#34953](https://github.com/facebook/react/pull/34953) by [@karlhorky](https://github.com/karlhorky)) + ## 7.0.0 This release slims down presets to just 2 configurations (`recommended` and `recommended-latest`), and all compiler rules are enabled by default. From c91783c1f2231ca5d99f5700f4c7fda4006a217e Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Thu, 23 Oct 2025 13:43:27 -0400 Subject: [PATCH 133/276] [eprh] Bump ReactVersions for next version (#34965) This was outdated from previously. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34965). * __->__ #34965 * #34964 --- ReactVersions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReactVersions.js b/ReactVersions.js index ba7b222bf06..dd8c78afb13 100644 --- a/ReactVersions.js +++ b/ReactVersions.js @@ -33,7 +33,7 @@ const canaryChannelLabel = 'canary'; const rcNumber = 0; const stablePackages = { - 'eslint-plugin-react-hooks': '7.0.0', + 'eslint-plugin-react-hooks': '7.1.0', 'jest-react': '0.18.0', react: ReactVersion, 'react-art': ReactVersion, From 09056abde76c464f4632f322a0ac30cd3984cee6 Mon Sep 17 00:00:00 2001 From: Jorge Cabiedes <57368278+jorge-cab@users.noreply.github.com> Date: Thu, 23 Oct 2025 11:05:55 -0700 Subject: [PATCH 134/276] [Compiler] Improve error for calculate in render useEffect validation (#34580) Summary: Change error and update snapshots The error now mentions what values are causing the issue which should provide better context on how to fix the issue --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34580). * __->__ #34580 * #34579 * #34578 * #34577 * #34575 * #34574 --- .../src/Entrypoint/Pipeline.ts | 5 + .../src/HIR/Environment.ts | 6 + ...idateNoDerivedComputationsInEffects_exp.ts | 504 ++++++++++++++++++ ...ter-call-outside-effect-no-error.expect.md | 84 +++ ...rop-setter-call-outside-effect-no-error.js | 21 + ...ter-used-outside-effect-no-error.expect.md | 85 +++ ...rop-setter-used-outside-effect-no-error.js | 20 + ...tate-from-ref-and-state-no-error.expect.md | 73 +++ ...rived-state-from-ref-and-state-no-error.js | 19 + ...ains-prop-function-call-no-error.expect.md | 75 +++ ...ct-contains-prop-function-call-no-error.js | 17 + ...th-global-function-call-no-error.expect.md | 70 +++ ...fect-with-global-function-call-no-error.js | 17 + ...ed-state-conditionally-in-effect.expect.md | 49 ++ ...r.derived-state-conditionally-in-effect.js | 21 + ...derived-state-from-default-props.expect.md | 46 ++ .../error.derived-state-from-default-props.js | 18 + ...state-from-local-state-in-effect.expect.md | 43 ++ ...erived-state-from-local-state-in-effect.js | 15 + ...-local-state-and-component-scope.expect.md | 53 ++ ...om-prop-local-state-and-component-scope.js | 25 + ...state-from-prop-with-side-effect.expect.md | 46 ++ ...erived-state-from-prop-with-side-effect.js | 18 + ...ect-contains-local-function-call.expect.md | 50 ++ ...ror.effect-contains-local-function-call.js | 22 + ...id-derived-computation-in-effect.expect.md | 48 ++ ...r.invalid-derived-computation-in-effect.js | 20 + ...erived-state-from-computed-props.expect.md | 46 ++ ...valid-derived-state-from-computed-props.js | 18 + ...ed-state-from-destructured-props.expect.md | 47 ++ ...d-derived-state-from-destructured-props.js | 19 + ...f-conditional-in-effect-no-error.expect.md | 82 +++ .../ref-conditional-in-effect-no-error.js | 23 + ...id-derived-computation-in-effect.expect.md | 18 +- ...r.invalid-derived-computation-in-effect.js | 4 +- 35 files changed, 1718 insertions(+), 9 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts index 1085d4c69e0..a83b22651e7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts @@ -103,6 +103,7 @@ import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoF import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects'; import {inferMutationAliasingRanges} from '../Inference/InferMutationAliasingRanges'; import {validateNoDerivedComputationsInEffects} from '../Validation/ValidateNoDerivedComputationsInEffects'; +import {validateNoDerivedComputationsInEffects_exp} from '../Validation/ValidateNoDerivedComputationsInEffects_exp'; import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions'; export type CompilerPipelineValue = @@ -275,6 +276,10 @@ function runWithEnvironment( validateNoDerivedComputationsInEffects(hir); } + if (env.config.validateNoDerivedComputationsInEffects_exp) { + validateNoDerivedComputationsInEffects_exp(hir); + } + if (env.config.validateNoSetStateInEffects) { env.logErrors(validateNoSetStateInEffects(hir, env)); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index bdbfb20a59a..efee8e080e3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -324,6 +324,12 @@ export const EnvironmentConfigSchema = z.object({ */ validateNoDerivedComputationsInEffects: z.boolean().default(false), + /** + * Experimental: Validates that effects are not used to calculate derived data which could instead be computed + * during render. Generates a custom error message for each type of violation. + */ + validateNoDerivedComputationsInEffects_exp: z.boolean().default(false), + /** * Validates against creating JSX within a try block and recommends using an error boundary * instead. diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts new file mode 100644 index 00000000000..a755d0e2c65 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts @@ -0,0 +1,504 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {CompilerDiagnostic, CompilerError, Effect} from '..'; +import {ErrorCategory} from '../CompilerError'; +import { + BlockId, + FunctionExpression, + HIRFunction, + IdentifierId, + isSetStateType, + isUseEffectHookType, + Place, + CallExpression, + Instruction, + isUseStateType, + BasicBlock, + isUseRefType, + GeneratedSource, + SourceLocation, +} from '../HIR'; +import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors'; +import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables'; +import {assertExhaustive} from '../Utils/utils'; + +type TypeOfValue = 'ignored' | 'fromProps' | 'fromState' | 'fromPropsAndState'; + +type DerivationMetadata = { + typeOfValue: TypeOfValue; + place: Place; + sourcesIds: Set<IdentifierId>; +}; + +type ValidationContext = { + readonly functions: Map<IdentifierId, FunctionExpression>; + readonly errors: CompilerError; + readonly derivationCache: DerivationCache; + readonly effects: Set<HIRFunction>; + readonly setStateCache: Map<string | undefined | null, Array<Place>>; + readonly effectSetStateCache: Map<string | undefined | null, Array<Place>>; +}; + +class DerivationCache { + hasChanges: boolean = false; + cache: Map<IdentifierId, DerivationMetadata> = new Map(); + + snapshot(): boolean { + const hasChanges = this.hasChanges; + this.hasChanges = false; + return hasChanges; + } + + addDerivationEntry( + derivedVar: Place, + sourcesIds: Set<IdentifierId>, + typeOfValue: TypeOfValue, + ): void { + let newValue: DerivationMetadata = { + place: derivedVar, + sourcesIds: new Set(), + typeOfValue: typeOfValue ?? 'ignored', + }; + + if (sourcesIds !== undefined) { + for (const id of sourcesIds) { + const sourcePlace = this.cache.get(id)?.place; + + if (sourcePlace === undefined) { + continue; + } + + /* + * If the identifier of the source is a promoted identifier, then + * we should set the target as the source. + */ + if ( + sourcePlace.identifier.name === null || + sourcePlace.identifier.name?.kind === 'promoted' + ) { + newValue.sourcesIds.add(derivedVar.identifier.id); + } else { + newValue.sourcesIds.add(sourcePlace.identifier.id); + } + } + } + + if (newValue.sourcesIds.size === 0) { + newValue.sourcesIds.add(derivedVar.identifier.id); + } + + const existingValue = this.cache.get(derivedVar.identifier.id); + if ( + existingValue === undefined || + !this.isDerivationEqual(existingValue, newValue) + ) { + this.cache.set(derivedVar.identifier.id, newValue); + this.hasChanges = true; + } + } + + private isDerivationEqual( + a: DerivationMetadata, + b: DerivationMetadata, + ): boolean { + if (a.typeOfValue !== b.typeOfValue) { + return false; + } + if (a.sourcesIds.size !== b.sourcesIds.size) { + return false; + } + for (const id of a.sourcesIds) { + if (!b.sourcesIds.has(id)) { + return false; + } + } + return true; + } +} + +/** + * Validates that useEffect is not used for derived computations which could/should + * be performed in render. + * + * See https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state + * + * Example: + * + * ``` + * // 🔴 Avoid: redundant state and unnecessary Effect + * const [fullName, setFullName] = useState(''); + * useEffect(() => { + * setFullName(firstName + ' ' + lastName); + * }, [firstName, lastName]); + * ``` + * + * Instead use: + * + * ``` + * // ✅ Good: calculated during rendering + * const fullName = firstName + ' ' + lastName; + * ``` + */ +export function validateNoDerivedComputationsInEffects_exp( + fn: HIRFunction, +): void { + const functions: Map<IdentifierId, FunctionExpression> = new Map(); + const derivationCache = new DerivationCache(); + const errors = new CompilerError(); + const effects: Set<HIRFunction> = new Set(); + + const setStateCache: Map<string | undefined | null, Array<Place>> = new Map(); + const effectSetStateCache: Map< + string | undefined | null, + Array<Place> + > = new Map(); + + const context: ValidationContext = { + functions, + errors, + derivationCache, + effects, + setStateCache, + effectSetStateCache, + }; + + if (fn.fnType === 'Hook') { + for (const param of fn.params) { + if (param.kind === 'Identifier') { + context.derivationCache.cache.set(param.identifier.id, { + place: param, + sourcesIds: new Set([param.identifier.id]), + typeOfValue: 'fromProps', + }); + context.derivationCache.hasChanges = true; + } + } + } else if (fn.fnType === 'Component') { + const props = fn.params[0]; + if (props != null && props.kind === 'Identifier') { + context.derivationCache.cache.set(props.identifier.id, { + place: props, + sourcesIds: new Set([props.identifier.id]), + typeOfValue: 'fromProps', + }); + context.derivationCache.hasChanges = true; + } + } + + let isFirstPass = true; + do { + for (const block of fn.body.blocks.values()) { + recordPhiDerivations(block, context); + for (const instr of block.instructions) { + recordInstructionDerivations(instr, context, isFirstPass); + } + } + + isFirstPass = false; + } while (context.derivationCache.snapshot()); + + for (const effect of effects) { + validateEffect(effect, context); + } + + if (errors.hasAnyErrors()) { + throw errors; + } +} + +function recordPhiDerivations( + block: BasicBlock, + context: ValidationContext, +): void { + for (const phi of block.phis) { + let typeOfValue: TypeOfValue = 'ignored'; + let sourcesIds: Set<IdentifierId> = new Set(); + for (const operand of phi.operands.values()) { + const operandMetadata = context.derivationCache.cache.get( + operand.identifier.id, + ); + + if (operandMetadata === undefined) { + continue; + } + + typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue); + sourcesIds.add(operand.identifier.id); + } + + if (typeOfValue !== 'ignored') { + context.derivationCache.addDerivationEntry( + phi.place, + sourcesIds, + typeOfValue, + ); + } + } +} + +function joinValue( + lvalueType: TypeOfValue, + valueType: TypeOfValue, +): TypeOfValue { + if (lvalueType === 'ignored') return valueType; + if (valueType === 'ignored') return lvalueType; + if (lvalueType === valueType) return lvalueType; + return 'fromPropsAndState'; +} + +function recordInstructionDerivations( + instr: Instruction, + context: ValidationContext, + isFirstPass: boolean, +): void { + let typeOfValue: TypeOfValue = 'ignored'; + const sources: Set<IdentifierId> = new Set(); + const {lvalue, value} = instr; + if (value.kind === 'FunctionExpression') { + context.functions.set(lvalue.identifier.id, value); + for (const [, block] of value.loweredFunc.func.body.blocks) { + for (const instr of block.instructions) { + recordInstructionDerivations(instr, context, isFirstPass); + } + } + } else if (value.kind === 'CallExpression' || value.kind === 'MethodCall') { + const callee = + value.kind === 'CallExpression' ? value.callee : value.property; + if ( + isUseEffectHookType(callee.identifier) && + value.args.length === 2 && + value.args[0].kind === 'Identifier' && + value.args[1].kind === 'Identifier' + ) { + const effectFunction = context.functions.get(value.args[0].identifier.id); + if (effectFunction != null) { + context.effects.add(effectFunction.loweredFunc.func); + } + } else if (isUseStateType(lvalue.identifier) && value.args.length > 0) { + const stateValueSource = value.args[0]; + if (stateValueSource.kind === 'Identifier') { + sources.add(stateValueSource.identifier.id); + } + typeOfValue = joinValue(typeOfValue, 'fromState'); + } + } + + for (const operand of eachInstructionOperand(instr)) { + if ( + isSetStateType(operand.identifier) && + operand.loc !== GeneratedSource && + isFirstPass + ) { + if (context.setStateCache.has(operand.loc.identifierName)) { + context.setStateCache.get(operand.loc.identifierName)!.push(operand); + } else { + context.setStateCache.set(operand.loc.identifierName, [operand]); + } + } + + const operandMetadata = context.derivationCache.cache.get( + operand.identifier.id, + ); + + if (operandMetadata === undefined) { + continue; + } + + typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue); + for (const id of operandMetadata.sourcesIds) { + sources.add(id); + } + } + + if (typeOfValue === 'ignored') { + return; + } + + for (const lvalue of eachInstructionLValue(instr)) { + context.derivationCache.addDerivationEntry(lvalue, sources, typeOfValue); + } + + for (const operand of eachInstructionOperand(instr)) { + switch (operand.effect) { + case Effect.Capture: + case Effect.Store: + case Effect.ConditionallyMutate: + case Effect.ConditionallyMutateIterator: + case Effect.Mutate: { + if (isMutable(instr, operand)) { + context.derivationCache.addDerivationEntry( + operand, + sources, + typeOfValue, + ); + } + break; + } + case Effect.Freeze: + case Effect.Read: { + // no-op + break; + } + case Effect.Unknown: { + CompilerError.invariant(false, { + reason: 'Unexpected unknown effect', + description: null, + details: [ + { + kind: 'error', + loc: operand.loc, + message: 'Unexpected unknown effect', + }, + ], + }); + } + default: { + assertExhaustive( + operand.effect, + `Unexpected effect kind \`${operand.effect}\``, + ); + } + } + } +} + +function validateEffect( + effectFunction: HIRFunction, + context: ValidationContext, +): void { + const seenBlocks: Set<BlockId> = new Set(); + + const effectDerivedSetStateCalls: Array<{ + value: CallExpression; + loc: SourceLocation; + sourceIds: Set<IdentifierId>; + typeOfValue: TypeOfValue; + }> = []; + + const globals: Set<IdentifierId> = new Set(); + for (const block of effectFunction.body.blocks.values()) { + for (const pred of block.preds) { + if (!seenBlocks.has(pred)) { + // skip if block has a back edge + return; + } + } + + for (const instr of block.instructions) { + // Early return if any instruction is deriving a value from a ref + if (isUseRefType(instr.lvalue.identifier)) { + return; + } + + for (const operand of eachInstructionOperand(instr)) { + if ( + isSetStateType(operand.identifier) && + operand.loc !== GeneratedSource + ) { + if (context.effectSetStateCache.has(operand.loc.identifierName)) { + context.effectSetStateCache + .get(operand.loc.identifierName)! + .push(operand); + } else { + context.effectSetStateCache.set(operand.loc.identifierName, [ + operand, + ]); + } + } + } + + if ( + instr.value.kind === 'CallExpression' && + isSetStateType(instr.value.callee.identifier) && + instr.value.args.length === 1 && + instr.value.args[0].kind === 'Identifier' + ) { + const argMetadata = context.derivationCache.cache.get( + instr.value.args[0].identifier.id, + ); + + if (argMetadata !== undefined) { + effectDerivedSetStateCalls.push({ + value: instr.value, + loc: instr.value.callee.loc, + sourceIds: argMetadata.sourcesIds, + typeOfValue: argMetadata.typeOfValue, + }); + } + } else if (instr.value.kind === 'CallExpression') { + const calleeMetadata = context.derivationCache.cache.get( + instr.value.callee.identifier.id, + ); + + if ( + calleeMetadata !== undefined && + (calleeMetadata.typeOfValue === 'fromProps' || + calleeMetadata.typeOfValue === 'fromPropsAndState') + ) { + // If the callee is a prop we can't confidently say that it should be derived in render + return; + } + + if (globals.has(instr.value.callee.identifier.id)) { + // If the callee is a global we can't confidently say that it should be derived in render + return; + } + } else if (instr.value.kind === 'LoadGlobal') { + globals.add(instr.lvalue.identifier.id); + for (const operand of eachInstructionOperand(instr)) { + globals.add(operand.identifier.id); + } + } + } + seenBlocks.add(block.id); + } + + for (const derivedSetStateCall of effectDerivedSetStateCalls) { + if ( + derivedSetStateCall.loc !== GeneratedSource && + context.effectSetStateCache.has(derivedSetStateCall.loc.identifierName) && + context.setStateCache.has(derivedSetStateCall.loc.identifierName) && + context.effectSetStateCache.get(derivedSetStateCall.loc.identifierName)! + .length === + context.setStateCache.get(derivedSetStateCall.loc.identifierName)! + .length - + 1 + ) { + const derivedDepsStr = Array.from(derivedSetStateCall.sourceIds) + .map(sourceId => { + const sourceMetadata = context.derivationCache.cache.get(sourceId); + return sourceMetadata?.place.identifier.name?.value; + }) + .filter(Boolean) + .join(', '); + + let description; + + if (derivedSetStateCall.typeOfValue === 'fromProps') { + description = `From props: [${derivedDepsStr}]`; + } else if (derivedSetStateCall.typeOfValue === 'fromState') { + description = `From local state: [${derivedDepsStr}]`; + } else { + description = `From props and local state: [${derivedDepsStr}]`; + } + + context.errors.pushDiagnostic( + CompilerDiagnostic.create({ + description: `Derived values (${description}) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user`, + category: ErrorCategory.EffectDerivationsOfState, + reason: + 'You might not need an effect. Derive values in render, not effects.', + }).withDetails({ + kind: 'error', + loc: derivedSetStateCall.value.callee.loc, + message: 'This should be computed during render, not in an effect', + }), + ); + } + } +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md new file mode 100644 index 00000000000..ef817a3ebf2 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md @@ -0,0 +1,84 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({initialName}) { + const [name, setName] = useState(''); + + useEffect(() => { + setName(initialName); + }, [initialName]); + + return ( + <div> + <input value={name} onChange={e => setName(e.target.value)} /> + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{initialName: 'John'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState } from "react"; + +function Component(t0) { + const $ = _c(6); + const { initialName } = t0; + const [name, setName] = useState(""); + let t1; + let t2; + if ($[0] !== initialName) { + t1 = () => { + setName(initialName); + }; + t2 = [initialName]; + $[0] = initialName; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t3 = (e) => setName(e.target.value); + $[3] = t3; + } else { + t3 = $[3]; + } + let t4; + if ($[4] !== name) { + t4 = ( + <div> + <input value={name} onChange={t3} /> + </div> + ); + $[4] = name; + $[5] = t4; + } else { + t4 = $[5]; + } + return t4; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ initialName: "John" }], +}; + +``` + +### Eval output +(kind: ok) <div><input value="John"></div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js new file mode 100644 index 00000000000..502402be51a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js @@ -0,0 +1,21 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({initialName}) { + const [name, setName] = useState(''); + + useEffect(() => { + setName(initialName); + }, [initialName]); + + return ( + <div> + <input value={name} onChange={e => setName(e.target.value)} /> + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{initialName: 'John'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md new file mode 100644 index 00000000000..2924de0da61 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md @@ -0,0 +1,85 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function MockComponent({onSet}) { + return <div onClick={() => onSet('clicked')}>Mock Component</div>; +} + +function Component({propValue}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + }, [propValue]); + + return <MockComponent onSet={setValue} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState } from "react"; + +function MockComponent(t0) { + const $ = _c(2); + const { onSet } = t0; + let t1; + if ($[0] !== onSet) { + t1 = <div onClick={() => onSet("clicked")}>Mock Component</div>; + $[0] = onSet; + $[1] = t1; + } else { + t1 = $[1]; + } + return t1; +} + +function Component(t0) { + const $ = _c(4); + const { propValue } = t0; + const [, setValue] = useState(null); + let t1; + let t2; + if ($[0] !== propValue) { + t1 = () => { + setValue(propValue); + }; + t2 = [propValue]; + $[0] = propValue; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t3 = <MockComponent onSet={setValue} />; + $[3] = t3; + } else { + t3 = $[3]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ propValue: "test" }], +}; + +``` + +### Eval output +(kind: ok) <div>Mock Component</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js new file mode 100644 index 00000000000..d33af16ec59 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js @@ -0,0 +1,20 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function MockComponent({onSet}) { + return <div onClick={() => onSet('clicked')}>Mock Component</div>; +} + +function Component({propValue}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + }, [propValue]); + + return <MockComponent onSet={setValue} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md new file mode 100644 index 00000000000..4d0b6663e32 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md @@ -0,0 +1,73 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState, useRef} from 'react'; + +export default function Component({test}) { + const [local, setLocal] = useState(''); + + const myRef = useRef(null); + + useEffect(() => { + setLocal(myRef.current + test); + }, [test]); + + return <>{local}</>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{test: 'testString'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState, useRef } from "react"; + +export default function Component(t0) { + const $ = _c(5); + const { test } = t0; + const [local, setLocal] = useState(""); + + const myRef = useRef(null); + let t1; + let t2; + if ($[0] !== test) { + t1 = () => { + setLocal(myRef.current + test); + }; + t2 = [test]; + $[0] = test; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] !== local) { + t3 = <>{local}</>; + $[3] = local; + $[4] = t3; + } else { + t3 = $[4]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ test: "testString" }], +}; + +``` + +### Eval output +(kind: ok) nulltestString \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js new file mode 100644 index 00000000000..6b24f73ac74 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js @@ -0,0 +1,19 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState, useRef} from 'react'; + +export default function Component({test}) { + const [local, setLocal] = useState(''); + + const myRef = useRef(null); + + useEffect(() => { + setLocal(myRef.current + test); + }, [test]); + + return <>{local}</>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{test: 'testString'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md new file mode 100644 index 00000000000..c83ea552a6a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md @@ -0,0 +1,75 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue, onChange}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + onChange(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test', onChange: () => {}}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState } from "react"; + +function Component(t0) { + const $ = _c(7); + const { propValue, onChange } = t0; + const [value, setValue] = useState(null); + let t1; + if ($[0] !== onChange || $[1] !== propValue) { + t1 = () => { + setValue(propValue); + onChange(); + }; + $[0] = onChange; + $[1] = propValue; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[3] !== propValue) { + t2 = [propValue]; + $[3] = propValue; + $[4] = t2; + } else { + t2 = $[4]; + } + useEffect(t1, t2); + let t3; + if ($[5] !== value) { + t3 = <div>{value}</div>; + $[5] = value; + $[6] = t3; + } else { + t3 = $[6]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ propValue: "test", onChange: () => {} }], +}; + +``` + +### Eval output +(kind: ok) <div>test</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js new file mode 100644 index 00000000000..512df7cb36e --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js @@ -0,0 +1,17 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue, onChange}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + onChange(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test', onChange: () => {}}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md new file mode 100644 index 00000000000..e17f1e26f6c --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md @@ -0,0 +1,70 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + globalCall(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState } from "react"; + +function Component(t0) { + const $ = _c(5); + const { propValue } = t0; + const [value, setValue] = useState(null); + let t1; + let t2; + if ($[0] !== propValue) { + t1 = () => { + setValue(propValue); + globalCall(); + }; + t2 = [propValue]; + $[0] = propValue; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] !== value) { + t3 = <div>{value}</div>; + $[3] = value; + $[4] = t3; + } else { + t3 = $[4]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ propValue: "test" }], +}; + +``` + +### Eval output +(kind: exception) globalCall is not defined \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js new file mode 100644 index 00000000000..4cded6dcc8e --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js @@ -0,0 +1,17 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + globalCall(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md new file mode 100644 index 00000000000..1fa7f7d7950 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md @@ -0,0 +1,49 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({value, enabled}) { + const [localValue, setLocalValue] = useState(''); + + useEffect(() => { + if (enabled) { + setLocalValue(value); + } else { + setLocalValue('disabled'); + } + }, [value, enabled]); + + return <div>{localValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 'test', enabled: true}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [value]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-conditionally-in-effect.ts:9:6 + 7 | useEffect(() => { + 8 | if (enabled) { +> 9 | setLocalValue(value); + | ^^^^^^^^^^^^^ This should be computed during render, not in an effect + 10 | } else { + 11 | setLocalValue('disabled'); + 12 | } +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js new file mode 100644 index 00000000000..2ccd52500c7 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js @@ -0,0 +1,21 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({value, enabled}) { + const [localValue, setLocalValue] = useState(''); + + useEffect(() => { + if (enabled) { + setLocalValue(value); + } else { + setLocalValue('disabled'); + } + }, [value, enabled]); + + return <div>{localValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 'test', enabled: true}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md new file mode 100644 index 00000000000..f30235a064a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md @@ -0,0 +1,46 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component({input = 'empty'}) { + const [currInput, setCurrInput] = useState(input); + const localConst = 'local const'; + + useEffect(() => { + setCurrInput(input + localConst); + }, [input, localConst]); + + return <div>{currInput}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{input: 'test'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [input]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-from-default-props.ts:9:4 + 7 | + 8 | useEffect(() => { +> 9 | setCurrInput(input + localConst); + | ^^^^^^^^^^^^ This should be computed during render, not in an effect + 10 | }, [input, localConst]); + 11 | + 12 | return <div>{currInput}</div>; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js new file mode 100644 index 00000000000..1a0f5126e7a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js @@ -0,0 +1,18 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component({input = 'empty'}) { + const [currInput, setCurrInput] = useState(input); + const localConst = 'local const'; + + useEffect(() => { + setCurrInput(input + localConst); + }, [input, localConst]); + + return <div>{currInput}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{input: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md new file mode 100644 index 00000000000..779ddafc401 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md @@ -0,0 +1,43 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp + +import {useEffect, useState} from 'react'; + +function Component({shouldChange}) { + const [count, setCount] = useState(0); + + useEffect(() => { + if (shouldChange) { + setCount(count + 1); + } + }, [count]); + + return <div>{count}</div>; +} + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From local state: [count]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-from-local-state-in-effect.ts:10:6 + 8 | useEffect(() => { + 9 | if (shouldChange) { +> 10 | setCount(count + 1); + | ^^^^^^^^ This should be computed during render, not in an effect + 11 | } + 12 | }, [count]); + 13 | +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js new file mode 100644 index 00000000000..9568e490029 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js @@ -0,0 +1,15 @@ +// @validateNoDerivedComputationsInEffects_exp + +import {useEffect, useState} from 'react'; + +function Component({shouldChange}) { + const [count, setCount] = useState(0); + + useEffect(() => { + if (shouldChange) { + setCount(count + 1); + } + }, [count]); + + return <div>{count}</div>; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md new file mode 100644 index 00000000000..7b27b556b3e --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md @@ -0,0 +1,53 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({firstName}) { + const [lastName, setLastName] = useState('Doe'); + const [fullName, setFullName] = useState('John'); + + const middleName = 'D.'; + + useEffect(() => { + setFullName(firstName + ' ' + middleName + ' ' + lastName); + }, [firstName, middleName, lastName]); + + return ( + <div> + <input value={lastName} onChange={e => setLastName(e.target.value)} /> + <div>{fullName}</div> + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstName: 'John'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props and local state: [firstName, lastName]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-from-prop-local-state-and-component-scope.ts:11:4 + 9 | + 10 | useEffect(() => { +> 11 | setFullName(firstName + ' ' + middleName + ' ' + lastName); + | ^^^^^^^^^^^ This should be computed during render, not in an effect + 12 | }, [firstName, middleName, lastName]); + 13 | + 14 | return ( +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js new file mode 100644 index 00000000000..3090ef00412 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js @@ -0,0 +1,25 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({firstName}) { + const [lastName, setLastName] = useState('Doe'); + const [fullName, setFullName] = useState('John'); + + const middleName = 'D.'; + + useEffect(() => { + setFullName(firstName + ' ' + middleName + ' ' + lastName); + }, [firstName, middleName, lastName]); + + return ( + <div> + <input value={lastName} onChange={e => setLastName(e.target.value)} /> + <div>{fullName}</div> + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstName: 'John'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md new file mode 100644 index 00000000000..7fadae5667f --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md @@ -0,0 +1,46 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({value}) { + const [localValue, setLocalValue] = useState(''); + + useEffect(() => { + setLocalValue(value); + document.title = `Value: ${value}`; + }, [value]); + + return <div>{localValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 'test'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [value]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-from-prop-with-side-effect.ts:8:4 + 6 | + 7 | useEffect(() => { +> 8 | setLocalValue(value); + | ^^^^^^^^^^^^^ This should be computed during render, not in an effect + 9 | document.title = `Value: ${value}`; + 10 | }, [value]); + 11 | +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js new file mode 100644 index 00000000000..88c66ce1ef6 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js @@ -0,0 +1,18 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({value}) { + const [localValue, setLocalValue] = useState(''); + + useEffect(() => { + setLocalValue(value); + document.title = `Value: ${value}`; + }, [value]); + + return <div>{localValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md new file mode 100644 index 00000000000..aec543fcbf4 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md @@ -0,0 +1,50 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue}) { + const [value, setValue] = useState(null); + + function localFunction() { + console.log('local function'); + } + + useEffect(() => { + setValue(propValue); + localFunction(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [propValue]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.effect-contains-local-function-call.ts:12:4 + 10 | + 11 | useEffect(() => { +> 12 | setValue(propValue); + | ^^^^^^^^ This should be computed during render, not in an effect + 13 | localFunction(); + 14 | }, [propValue]); + 15 | +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js new file mode 100644 index 00000000000..1efb3177e51 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js @@ -0,0 +1,22 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue}) { + const [value, setValue] = useState(null); + + function localFunction() { + console.log('local function'); + } + + useEffect(() => { + setValue(propValue); + localFunction(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md new file mode 100644 index 00000000000..f1f755adfa8 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md @@ -0,0 +1,48 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component() { + const [firstName, setFirstName] = useState('Taylor'); + const lastName = 'Swift'; + + // 🔴 Avoid: redundant state and unnecessary Effect + const [fullName, setFullName] = useState(''); + useEffect(() => { + setFullName(firstName + ' ' + lastName); + }, [firstName, lastName]); + + return <div>{fullName}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From local state: [firstName]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.invalid-derived-computation-in-effect.ts:11:4 + 9 | const [fullName, setFullName] = useState(''); + 10 | useEffect(() => { +> 11 | setFullName(firstName + ' ' + lastName); + | ^^^^^^^^^^^ This should be computed during render, not in an effect + 12 | }, [firstName, lastName]); + 13 | + 14 | return <div>{fullName}</div>; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js new file mode 100644 index 00000000000..17779a5b4c5 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js @@ -0,0 +1,20 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component() { + const [firstName, setFirstName] = useState('Taylor'); + const lastName = 'Swift'; + + // 🔴 Avoid: redundant state and unnecessary Effect + const [fullName, setFullName] = useState(''); + useEffect(() => { + setFullName(firstName + ' ' + lastName); + }, [firstName, lastName]); + + return <div>{fullName}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md new file mode 100644 index 00000000000..3a078896939 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md @@ -0,0 +1,46 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component(props) { + const [displayValue, setDisplayValue] = useState(''); + + useEffect(() => { + const computed = props.prefix + props.value + props.suffix; + setDisplayValue(computed); + }, [props.prefix, props.value, props.suffix]); + + return <div>{displayValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{prefix: '[', value: 'test', suffix: ']'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [props]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.invalid-derived-state-from-computed-props.ts:9:4 + 7 | useEffect(() => { + 8 | const computed = props.prefix + props.value + props.suffix; +> 9 | setDisplayValue(computed); + | ^^^^^^^^^^^^^^^ This should be computed during render, not in an effect + 10 | }, [props.prefix, props.value, props.suffix]); + 11 | + 12 | return <div>{displayValue}</div>; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js new file mode 100644 index 00000000000..24afa944fc5 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js @@ -0,0 +1,18 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component(props) { + const [displayValue, setDisplayValue] = useState(''); + + useEffect(() => { + const computed = props.prefix + props.value + props.suffix; + setDisplayValue(computed); + }, [props.prefix, props.value, props.suffix]); + + return <div>{displayValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{prefix: '[', value: 'test', suffix: ']'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md new file mode 100644 index 00000000000..b28692c67b3 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md @@ -0,0 +1,47 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component({props}) { + const [fullName, setFullName] = useState( + props.firstName + ' ' + props.lastName + ); + + useEffect(() => { + setFullName(props.firstName + ' ' + props.lastName); + }, [props.firstName, props.lastName]); + + return <div>{fullName}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{props: {firstName: 'John', lastName: 'Doe'}}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [props]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.invalid-derived-state-from-destructured-props.ts:10:4 + 8 | + 9 | useEffect(() => { +> 10 | setFullName(props.firstName + ' ' + props.lastName); + | ^^^^^^^^^^^ This should be computed during render, not in an effect + 11 | }, [props.firstName, props.lastName]); + 12 | + 13 | return <div>{fullName}</div>; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js new file mode 100644 index 00000000000..bdfb47a2c6a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js @@ -0,0 +1,19 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component({props}) { + const [fullName, setFullName] = useState( + props.firstName + ' ' + props.lastName + ); + + useEffect(() => { + setFullName(props.firstName + ' ' + props.lastName); + }, [props.firstName, props.lastName]); + + return <div>{fullName}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{props: {firstName: 'John', lastName: 'Doe'}}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md new file mode 100644 index 00000000000..365ee1fef45 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md @@ -0,0 +1,82 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState, useRef} from 'react'; + +export default function Component({test}) { + const [local, setLocal] = useState(0); + + const myRef = useRef(null); + + useEffect(() => { + if (myRef.current) { + setLocal(test); + } else { + setLocal(test + test); + } + }, [test]); + + return <>{local}</>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{test: 4}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState, useRef } from "react"; + +export default function Component(t0) { + const $ = _c(5); + const { test } = t0; + const [local, setLocal] = useState(0); + + const myRef = useRef(null); + let t1; + let t2; + if ($[0] !== test) { + t1 = () => { + if (myRef.current) { + setLocal(test); + } else { + setLocal(test + test); + } + }; + + t2 = [test]; + $[0] = test; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] !== local) { + t3 = <>{local}</>; + $[3] = local; + $[4] = t3; + } else { + t3 = $[4]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ test: 4 }], +}; + +``` + +### Eval output +(kind: ok) 8 \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js new file mode 100644 index 00000000000..ee59ccb78f0 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js @@ -0,0 +1,23 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState, useRef} from 'react'; + +export default function Component({test}) { + const [local, setLocal] = useState(0); + + const myRef = useRef(null); + + useEffect(() => { + if (myRef.current) { + setLocal(test); + } else { + setLocal(test + test); + } + }, [test]); + + return <>{local}</>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{test: 4}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md index d97a665ae69..ccbcf68a576 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md @@ -3,6 +3,8 @@ ```javascript // @validateNoDerivedComputationsInEffects +import {useEffect, useState} from 'react'; + function BadExample() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); @@ -10,7 +12,7 @@ function BadExample() { // 🔴 Avoid: redundant state and unnecessary Effect const [fullName, setFullName] = useState(''); useEffect(() => { - setFullName(capitalize(firstName + ' ' + lastName)); + setFullName(firstName + ' ' + lastName); }, [firstName, lastName]); return <div>{fullName}</div>; @@ -26,14 +28,14 @@ Found 1 error: Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state) -error.invalid-derived-computation-in-effect.ts:9:4 - 7 | const [fullName, setFullName] = useState(''); - 8 | useEffect(() => { -> 9 | setFullName(capitalize(firstName + ' ' + lastName)); +error.invalid-derived-computation-in-effect.ts:11:4 + 9 | const [fullName, setFullName] = useState(''); + 10 | useEffect(() => { +> 11 | setFullName(firstName + ' ' + lastName); | ^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state) - 10 | }, [firstName, lastName]); - 11 | - 12 | return <div>{fullName}</div>; + 12 | }, [firstName, lastName]); + 13 | + 14 | return <div>{fullName}</div>; ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js index d803d3c4a3a..0209b47ce39 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js @@ -1,4 +1,6 @@ // @validateNoDerivedComputationsInEffects +import {useEffect, useState} from 'react'; + function BadExample() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); @@ -6,7 +8,7 @@ function BadExample() { // 🔴 Avoid: redundant state and unnecessary Effect const [fullName, setFullName] = useState(''); useEffect(() => { - setFullName(capitalize(firstName + ' ' + lastName)); + setFullName(firstName + ' ' + lastName); }, [firstName, lastName]); return <div>{fullName}</div>; From 408b38ef7304faf022d2a37110c57efce12c6bad Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Thu, 23 Oct 2025 11:30:28 -0700 Subject: [PATCH 135/276] [compiler] Improve display of errors on multi-line expressions (#34963) When a longer function or expression is identified as the source of an error, we currently print the entire expression in our error message. This is because we delegate to a Babel helper to print codeframes. Here, we add some checking and abbreviate the result if it spans too many lines. --- .../src/CompilerError.ts | 41 ++++++++++++++++++- ...es-memoizes-with-captures-values.expect.md | 24 +---------- ...ional-nonoptional-property-chain.expect.md | 15 +------ .../bailout-retry/error.todo-syntax.expect.md | 13 +----- 4 files changed, 43 insertions(+), 50 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts index 3c131ea653e..18bcd7791d0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts @@ -12,6 +12,28 @@ import {Err, Ok, Result} from './Utils/Result'; import {assertExhaustive} from './Utils/utils'; import invariant from 'invariant'; +// Number of context lines to display above the source of an error +const CODEFRAME_LINES_ABOVE = 2; +// Number of context lines to display below the source of an error +const CODEFRAME_LINES_BELOW = 3; +/* + * Max number of lines for the _source_ of an error, before we abbreviate + * the display of the source portion + */ +const CODEFRAME_MAX_LINES = 10; +/* + * When the error source exceeds the above threshold, how many lines of + * the source should be displayed? We show: + * - CODEFRAME_LINES_ABOVE context lines + * - CODEFRAME_ABBREVIATED_SOURCE_LINES of the error + * - '...' ellipsis + * - CODEFRAME_ABBREVIATED_SOURCE_LINES of the error + * - CODEFRAME_LINES_BELOW context lines + * + * This value must be at least 2 or else we'll cut off important parts of the error message + */ +const CODEFRAME_ABBREVIATED_SOURCE_LINES = 5; + export enum ErrorSeverity { /** * An actionable error that the developer can fix. For example, product code errors should be @@ -496,7 +518,7 @@ function printCodeFrame( loc: t.SourceLocation, message: string, ): string { - return codeFrameColumns( + const printed = codeFrameColumns( source, { start: { @@ -510,8 +532,25 @@ function printCodeFrame( }, { message, + linesAbove: CODEFRAME_LINES_ABOVE, + linesBelow: CODEFRAME_LINES_BELOW, }, ); + const lines = printed.split(/\r?\n/); + if (loc.end.line - loc.start.line < CODEFRAME_MAX_LINES) { + return printed; + } + const pipeIndex = lines[0].indexOf('|'); + return [ + ...lines.slice( + 0, + CODEFRAME_LINES_ABOVE + CODEFRAME_ABBREVIATED_SOURCE_LINES, + ), + ' '.repeat(pipeIndex) + '…', + ...lines.slice( + -(CODEFRAME_LINES_BELOW + CODEFRAME_ABBREVIATED_SOURCE_LINES), + ), + ].join('\n'); } function printErrorSummary(category: ErrorCategory, message: string): string { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md index 8592ae65e4b..250114fdfb3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md @@ -60,29 +60,7 @@ This argument is a function which may reassign or mutate `cache` after render, w > 22 | // The original issue is that `cache` was not memoized together with the returned | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 23 | // function. This was because neither appears to ever be mutated — the function - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 24 | // is known to mutate `cache` but the function isn't called. - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 25 | // - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 26 | // The fix is to detect cases like this — functions that are mutable but not called - - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 27 | // and ensure that their mutable captures are aliased together into the same scope. - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 28 | const cache = new WeakMap<TInput, TOutput>(); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 29 | return input => { - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 30 | let output = cache.get(input); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 31 | if (output == null) { - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 32 | output = map(input); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 33 | cache.set(input, output); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 34 | } - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + … > 35 | return output; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 36 | }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md index e9772e67993..45e3d365a8d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md @@ -64,20 +64,7 @@ error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.ts:7:25 > 8 | return identity({ | ^^^^^^^^^^^^^^^^^^^^^ > 9 | callback: () => { - | ^^^^^^^^^^^^^^^^^^^^^ -> 10 | // This is a bug in our dependency inference: we stop capturing dependencies - | ^^^^^^^^^^^^^^^^^^^^^ -> 11 | // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b` - | ^^^^^^^^^^^^^^^^^^^^^ -> 12 | // was non-nullish, then we can access `.c.d?.e`. Thus we should take the - | ^^^^^^^^^^^^^^^^^^^^^ -> 13 | // full property chain, exactly as-is with optionals/non-optionals, as a - | ^^^^^^^^^^^^^^^^^^^^^ -> 14 | // dependency - | ^^^^^^^^^^^^^^^^^^^^^ -> 15 | return identity(x.a.b?.c.d?.e); - | ^^^^^^^^^^^^^^^^^^^^^ -> 16 | }, + … | ^^^^^^^^^^^^^^^^^^^^^ > 17 | }); | ^^^^^^^^^^^^^^^^^^^^^ diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md index 38d10ee0d1b..00af7ec6ad5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md @@ -46,18 +46,7 @@ error.todo-syntax.ts:11:2 > 12 | () => { | ^^^^^^^^^^^ > 13 | try { - | ^^^^^^^^^^^ -> 14 | console.log(prop1); - | ^^^^^^^^^^^ -> 15 | } finally { - | ^^^^^^^^^^^ -> 16 | console.log('exiting'); - | ^^^^^^^^^^^ -> 17 | } - | ^^^^^^^^^^^ -> 18 | }, - | ^^^^^^^^^^^ -> 19 | [prop1], + … | ^^^^^^^^^^^ > 20 | AUTODEPS | ^^^^^^^^^^^ From ba0590f3068829327cb25689b46926d6509893ea Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Mon, 27 Oct 2025 13:42:02 -0400 Subject: [PATCH 136/276] [playground] Upgrade playwright (#34991) Some vulnerabilities were detected in older versions of Playwright, upgrading for the playground. --- compiler/apps/playground/package.json | 2 +- compiler/apps/playground/yarn.lock | 40 ++++++++++----------------- 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json index 7c187b439e7..23b192fe580 100644 --- a/compiler/apps/playground/package.json +++ b/compiler/apps/playground/package.json @@ -27,7 +27,7 @@ "@babel/types": "7.26.3", "@heroicons/react": "^1.0.6", "@monaco-editor/react": "^4.8.0-rc.2", - "@playwright/test": "^1.51.1", + "@playwright/test": "^1.56.1", "@use-gesture/react": "^10.2.22", "hermes-eslint": "^0.25.0", "hermes-parser": "^0.25.0", diff --git a/compiler/apps/playground/yarn.lock b/compiler/apps/playground/yarn.lock index 232d37448ee..42e8deb7d7a 100644 --- a/compiler/apps/playground/yarn.lock +++ b/compiler/apps/playground/yarn.lock @@ -798,12 +798,12 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== -"@playwright/test@^1.51.1": - version "1.51.1" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.51.1.tgz#75357d513221a7be0baad75f01e966baf9c41a2e" - integrity sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q== +"@playwright/test@^1.56.1": + version "1.56.1" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.56.1.tgz#6e3bf3d0c90c5cf94bf64bdb56fd15a805c8bd3f" + integrity sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg== dependencies: - playwright "1.51.1" + playwright "1.56.1" "@rtsao/scc@^1.1.0": version "1.1.0" @@ -854,23 +854,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4" integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg== -"@types/react-dom@19.1.9": - version "19.1.9" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b" - integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ== - "@types/react-dom@19.2": version "19.2.2" resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332" integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw== -"@types/react@19.1.12": - version "19.1.12" - resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b" - integrity sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w== - dependencies: - csstype "^3.0.2" - "@types/react@19.2": version "19.2.2" resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36" @@ -3465,17 +3453,17 @@ pirates@^4.0.1: resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9" integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg== -playwright-core@1.51.1: - version "1.51.1" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.51.1.tgz#d57f0393e02416f32a47cf82b27533656a8acce1" - integrity sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw== +playwright-core@1.56.1: + version "1.56.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.1.tgz#24a66481e5cd33a045632230aa2c4f0cb6b1db3d" + integrity sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ== -playwright@1.51.1: - version "1.51.1" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.51.1.tgz#ae1467ee318083968ad28d6990db59f47a55390f" - integrity sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw== +playwright@1.56.1: + version "1.56.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.1.tgz#62e3b99ddebed0d475e5936a152c88e68be55fbf" + integrity sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw== dependencies: - playwright-core "1.51.1" + playwright-core "1.56.1" optionalDependencies: fsevents "2.3.2" From d3d0ce329e81c7081feda5d37130d01e0607b8a4 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Mon, 27 Oct 2025 15:48:36 -0400 Subject: [PATCH 137/276] [script] Add yarn generate-changelog (#34962) (disclaimer: I used codex to write this script) Adds a new `yarn generate-changelog` script to simplify the process of writing changelogs. You can use it as follows: ``` $ yarn generate-changelog --help Usage: yarn generate-changelog [--codex|--claude] [--debug] [<pkg@version> ...] Options: --codex Use Codex for commit summarization. [boolean] --claude Use Claude for commit summarization. [boolean] --debug Enable verbose debug logging. [boolean] [default: false] -h, --help Show help [boolean] Examples: generate-changelog --codex Generate changelog for a single eslint-plugin-react-hooks@7.0.1 package using Codex. generate-changelog --claude react@19.3 Generate changelog entries for react-dom@19.3 multiple packages using Claude. generate-changelog --codex Generate changelog for all stable packages using recorded versions. ``` For example, if no args are passed, the script will print find all the relevant commits affecting packages (defaults to `stablePackages` in `ReactVersions.js`) and format them as a simple markdown list. ``` $ yarn generate-changelog ## eslint-plugin-react-hooks@7.0.0 * [compiler] improve zod v3 backwards compat (#34877) ([#34877](https://github.com/facebook/react/pull/34877) by [@henryqdineen](https://github.com/henryqdineen)) * [ESLint] Disallow passing effect event down when inlined as a prop (#34820) ([#34820](https://github.com/facebook/react/pull/34820) by [@jf-eirinha](https://github.com/jf-eirinha)) * Switch to `export =` to fix eslint-plugin-react-hooks types (#34949) ([#34949](https://github.com/facebook/react/pull/34949) by [@karlhorky](https://github.com/karlhorky)) * [eprh] Type `configs.flat` more strictly (#34950) ([#34950](https://github.com/facebook/react/pull/34950) by [@poteto](https://github.com/poteto)) * Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (#34951) ([#34951](https://github.com/facebook/react/pull/34951) by [@karlhorky](https://github.com/karlhorky)) * Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (#34953) ([#34953](https://github.com/facebook/react/pull/34953) by [@karlhorky](https://github.com/karlhorky)) // etc etc... ``` If `--codex` or `--claude` is passed, the script will attempt to use them to summarize the commit(s) in the same style as our existing CHANGELOG.md. And finally, for debugging the script you can add `--debug` to see what's going on. --- package.json | 1 + scripts/tasks/generate-changelog.js | 816 ++++++++++++++++++++++++++++ 2 files changed, 817 insertions(+) create mode 100644 scripts/tasks/generate-changelog.js diff --git a/package.json b/package.json index 7bb0c2c5c93..9fb3082f0c6 100644 --- a/package.json +++ b/package.json @@ -152,6 +152,7 @@ "download-build-in-codesandbox-ci": "yarn build --type=node react/index react.react-server react-dom/index react-dom/client react-dom/src/server react-dom/test-utils react-dom.react-server scheduler/index react/jsx-runtime react/jsx-dev-runtime react-server-dom-webpack", "check-release-dependencies": "node ./scripts/release/check-release-dependencies", "generate-inline-fizz-runtime": "node ./scripts/rollup/generate-inline-fizz-runtime.js", + "generate-changelog": "node ./scripts/tasks/generate-changelog.js", "flags": "node ./scripts/flags/flags.js" }, "resolutions": { diff --git a/scripts/tasks/generate-changelog.js b/scripts/tasks/generate-changelog.js new file mode 100644 index 00000000000..158346d2d9a --- /dev/null +++ b/scripts/tasks/generate-changelog.js @@ -0,0 +1,816 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const https = require('https'); +const {execFile} = require('child_process'); +const {promisify} = require('util'); +const semver = require('semver'); +const yargs = require('yargs/yargs'); + +const {stablePackages} = require('../../ReactVersions'); + +const execFileAsync = promisify(execFile); +const repoRoot = path.resolve(__dirname, '..', '..'); + +function parseArgs(argv) { + const parser = yargs(argv) + .usage( + 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [<pkg@version> ...]' + ) + .example( + '$0 --codex eslint-plugin-react-hooks@7.0.1', + 'Generate changelog for a single package using Codex.' + ) + .example( + '$0 --claude react@19.3 react-dom@19.3', + 'Generate changelog entries for multiple packages using Claude.' + ) + .example( + '$0 --codex', + 'Generate changelog for all stable packages using recorded versions.' + ) + .option('codex', { + type: 'boolean', + describe: 'Use Codex for commit summarization.', + }) + .option('claude', { + type: 'boolean', + describe: 'Use Claude for commit summarization.', + }) + .option('debug', { + type: 'boolean', + describe: 'Enable verbose debug logging.', + default: false, + }) + .help('help') + .alias('h', 'help') + .version(false) + .parserConfiguration({ + 'parse-numbers': false, + 'parse-positional-numbers': false, + }); + + const args = parser.scriptName('generate-changelog').parse(); + const packageSpecs = []; + const debug = !!args.debug; + let summarizer = null; + if (args.codex && args.claude) { + throw new Error('Choose either --codex or --claude, not both.'); + } + if (args.codex) { + summarizer = 'codex'; + } else if (args.claude) { + summarizer = 'claude'; + } + + const positionalArgs = Array.isArray(args._) ? args._ : []; + for (let i = 0; i < positionalArgs.length; i++) { + const token = String(positionalArgs[i]).trim(); + if (!token) { + continue; + } + + const atIndex = token.lastIndexOf('@'); + if (atIndex <= 0 || atIndex === token.length - 1) { + throw new Error(`Invalid package specification: ${token}`); + } + + const packageName = token.slice(0, atIndex); + const versionText = token.slice(atIndex + 1); + const validVersion = + semver.valid(versionText) || semver.valid(semver.coerce(versionText)); + if (!validVersion) { + throw new Error(`Invalid version for ${packageName}: ${versionText}`); + } + + packageSpecs.push({ + name: packageName, + version: validVersion, + displayVersion: versionText, + }); + } + + if (packageSpecs.length === 0) { + Object.keys(stablePackages).forEach(pkgName => { + const versionText = stablePackages[pkgName]; + const validVersion = semver.valid(versionText); + if (!validVersion) { + throw new Error( + `Invalid stable version configured for ${pkgName}: ${versionText}` + ); + } + packageSpecs.push({ + name: pkgName, + version: validVersion, + displayVersion: versionText, + }); + }); + } + + if (summarizer && !isCommandAvailable(summarizer)) { + throw new Error( + `Requested summarizer "${summarizer}" is not available on the PATH.` + ); + } + + return { + debug, + summarizer, + packageSpecs, + }; +} + +async function fetchNpmInfo(packageName, {log}) { + const npmArgs = ['view', `${packageName}@latest`, '--json']; + const options = {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024}; + log(`Fetching npm info for ${packageName}...`); + const {stdout} = await execFileAsync('npm', npmArgs, options); + + let data = stdout.trim(); + if (!data) { + throw new Error(`npm view returned empty result for ${packageName}`); + } + + let info = JSON.parse(data); + if (Array.isArray(info)) { + info = info[info.length - 1]; + } + + const version = info.version || info['dist-tags']?.latest; + let gitHead = info.gitHead || null; + + if (!gitHead) { + const gitHeadResult = await execFileAsync( + 'npm', + ['view', `${packageName}@${version}`, 'gitHead'], + {cwd: repoRoot, maxBuffer: 1024 * 1024} + ); + const possibleGitHead = gitHeadResult.stdout.trim(); + if ( + possibleGitHead && + possibleGitHead !== 'undefined' && + possibleGitHead !== 'null' + ) { + log(`Found gitHead for ${packageName}@${version}: ${possibleGitHead}`); + gitHead = possibleGitHead; + } + } + + if (!version) { + throw new Error( + `Unable to determine latest published version for ${packageName}` + ); + } + if (!gitHead) { + throw new Error( + `Unable to determine git commit for ${packageName}@${version}` + ); + } + + return { + publishedVersion: version, + gitHead, + }; +} + +async function collectCommitsSince(packageName, sinceGitSha, {log}) { + log(`Collecting commits for ${packageName} since ${sinceGitSha}...`); + await execFileAsync('git', ['cat-file', '-e', `${sinceGitSha}^{commit}`], { + cwd: repoRoot, + }); + const {stdout} = await execFileAsync( + 'git', + [ + 'rev-list', + '--reverse', + `${sinceGitSha}..HEAD`, + '--', + path.posix.join('packages', packageName), + ], + {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} + ); + + return stdout + .trim() + .split('\n') + .map(line => line.trim()) + .filter(Boolean); +} + +async function loadCommitDetails(sha, {log}) { + log(`Loading commit details for ${sha}...`); + const format = ['%H', '%s', '%an', '%ae', '%ct', '%B'].join('%n'); + const {stdout} = await execFileAsync( + 'git', + ['show', '--quiet', `--format=${format}`, sha], + {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} + ); + + const [commitSha, subject, authorName, authorEmail, timestamp, ...rest] = + stdout.split('\n'); + const body = rest.join('\n').trim(); + + return { + sha: commitSha.trim(), + subject: subject.trim(), + authorName: authorName.trim(), + authorEmail: authorEmail.trim(), + timestamp: +timestamp.trim() || 0, + body, + }; +} + +function extractPrNumber(subject, body) { + const patterns = [ + /$#(\d+)$/, + /https:\/\/github\.com\/facebook\/react\/pull\/(\d+)/, + ]; + + for (let i = 0; i < patterns.length; i++) { + const pattern = patterns[i]; + const subjectMatch = subject && subject.match(pattern); + if (subjectMatch) { + return subjectMatch[1]; + } + const bodyMatch = body && body.match(pattern); + if (bodyMatch) { + return bodyMatch[1]; + } + } + + return null; +} + +function isCommandAvailable(command) { + const paths = (process.env.PATH || '').split(path.delimiter); + const extensions = + process.platform === 'win32' && process.env.PATHEXT + ? process.env.PATHEXT.split(';') + : ['']; + + for (let i = 0; i < paths.length; i++) { + const dir = paths[i]; + if (!dir) { + continue; + } + for (let j = 0; j < extensions.length; j++) { + const ext = extensions[j]; + const fullPath = path.join(dir, `${command}${ext}`); + try { + fs.accessSync(fullPath, fs.constants.X_OK); + return true; + } catch { + // Keep searching. + } + } + } + return false; +} + +function readChangelogSnippet(preferredPackage) { + const cacheKey = + preferredPackage === 'eslint-plugin-react-hooks' + ? preferredPackage + : 'root'; + if (!readChangelogSnippet.cache) { + readChangelogSnippet.cache = new Map(); + } + const cache = readChangelogSnippet.cache; + if (cache.has(cacheKey)) { + return cache.get(cacheKey); + } + + const targetPath = + preferredPackage === 'eslint-plugin-react-hooks' + ? path.join( + repoRoot, + 'packages', + 'eslint-plugin-react-hooks', + 'CHANGELOG.md' + ) + : path.join(repoRoot, 'CHANGELOG.md'); + + let content = ''; + try { + content = fs.readFileSync(targetPath, 'utf8'); + } catch { + content = ''; + } + + const snippet = content.slice(0, 4000); + cache.set(cacheKey, snippet); + return snippet; +} + +function sanitizeSummary(text) { + if (!text) { + return ''; + } + + const trimmed = text.trim(); + const withoutBullet = trimmed.replace(/^([-*]\s+|\d+\s*[\.)]\s+)/, ''); + + return withoutBullet.replace(/\s+/g, ' ').trim(); +} + +async function summarizePackages({ + summarizer, + packageSpecs, + packageTargets, + commitsByPackage, + log, +}) { + const summariesByPackage = new Map(); + if (!summarizer) { + packageSpecs.forEach(spec => { + const commits = commitsByPackage.get(spec.name) || []; + const summaryMap = new Map(); + for (let i = 0; i < commits.length; i++) { + const commit = commits[i]; + summaryMap.set(commit.sha, commit.subject); + } + summariesByPackage.set(spec.name, summaryMap); + }); + return summariesByPackage; + } + + const tasks = packageSpecs.map(spec => { + const commits = commitsByPackage.get(spec.name) || []; + return summarizePackageCommits({ + summarizer, + spec, + commits, + packageTargets, + allPackageSpecs: packageSpecs, + log, + }); + }); + + const results = await Promise.all(tasks); + results.forEach(entry => { + summariesByPackage.set(entry.packageName, entry.summaries); + }); + return summariesByPackage; +} + +async function summarizePackageCommits({ + summarizer, + spec, + commits, + packageTargets, + allPackageSpecs, + log, +}) { + const summaries = new Map(); + if (commits.length === 0) { + return {packageName: spec.name, summaries}; + } + + const rootStyle = readChangelogSnippet('root'); + const hooksStyle = readChangelogSnippet('eslint-plugin-react-hooks'); + const targetList = allPackageSpecs.map( + targetSpec => + `${targetSpec.name}@${targetSpec.displayVersion || targetSpec.version}` + ); + const payload = commits.map(commit => { + const packages = Array.from(commit.packages || []).sort(); + const usesHooksStyle = (commit.packages || new Set()).has( + 'eslint-plugin-react-hooks' + ); + const packagesWithVersions = packages.map(pkgName => { + const targetSpec = packageTargets.get(pkgName); + if (!targetSpec) { + return pkgName; + } + return `${pkgName}@${targetSpec.displayVersion || targetSpec.version}`; + }); + return { + sha: commit.sha, + packages, + packagesWithVersions, + style: usesHooksStyle ? 'eslint-plugin-react-hooks' : 'root', + subject: commit.subject, + body: commit.body || '', + }; + }); + + const promptParts = [ + `You are preparing changelog summaries for ${spec.name} ${ + spec.displayVersion || spec.version + }.`, + 'The broader release includes:', + ...targetList.map(line => `- ${line}`), + '', + 'For each commit payload, write a single concise sentence without a leading bullet.', + 'Match the tone and formatting of the provided style samples. Do not mention commit hashes.', + 'Return a JSON array where each element has the shape `{ "sha": "<sha>", "summary": "<text>" }`.', + 'The JSON must contain one entry per commit in the same order they are provided.', + 'Use `"root"` style unless the payload specifies `"eslint-plugin-react-hooks"`, in which case use that style sample.', + '', + '--- STYLE: root ---', + rootStyle, + '--- END STYLE ---', + '', + '--- STYLE: eslint-plugin-react-hooks ---', + hooksStyle, + '--- END STYLE ---', + '', + `Commits affecting ${spec.name}:`, + ]; + + payload.forEach((item, index) => { + promptParts.push( + `Commit ${index + 1}:`, + `sha: ${item.sha}`, + `style: ${item.style}`, + `packages: ${item.packagesWithVersions.join(', ') || 'none'}`, + `subject: ${item.subject}`, + 'body:', + item.body || '(empty)', + '' + ); + }); + promptParts.push('Return ONLY the JSON array.', ''); + + const prompt = promptParts.join('\n'); + log( + `Invoking ${summarizer} for ${payload.length} commit summaries targeting ${spec.name}.` + ); + log(`Summarizer prompt length: ${prompt.length} characters.`); + + try { + const raw = await runSummarizer(summarizer, prompt); + log(`Summarizer output length: ${raw.length}`); + const parsed = parseSummariesResponse(raw); + if (!parsed) { + throw new Error('Unable to parse summarizer output.'); + } + parsed.forEach(entry => { + const summary = sanitizeSummary(entry.summary || ''); + if (summary) { + summaries.set(entry.sha, summary); + } + }); + } catch (error) { + if (log !== noopLogger) { + log( + `Warning: failed to summarize commits for ${spec.name} with ${summarizer}. Falling back to subjects. ${error.message}` + ); + if (error && error.stack) { + log(error.stack); + } + } + } + + for (let i = 0; i < commits.length; i++) { + const commit = commits[i]; + if (!summaries.has(commit.sha)) { + summaries.set(commit.sha, commit.subject); + } + } + + log(`Summaries available for ${summaries.size} commit(s) for ${spec.name}.`); + + return {packageName: spec.name, summaries}; +} + +function noopLogger() {} + +async function runSummarizer(command, prompt) { + const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024}; + + if (command === 'codex') { + const {stdout} = await execFileAsync( + 'codex', + ['exec', '--json', prompt], + options + ); + return parseCodexSummary(stdout); + } + + if (command === 'claude') { + const {stdout} = await execFileAsync('claude', ['-p', prompt], options); + return stripClaudeBanner(stdout); + } + + throw new Error(`Unsupported summarizer command: ${command}`); +} + +function parseCodexSummary(output) { + let last = ''; + const lines = output.split('\n'); + for (let i = 0; i < lines.length; i++) { + const trimmed = lines[i].trim(); + if (!trimmed) { + continue; + } + try { + const event = JSON.parse(trimmed); + if ( + event.type === 'item.completed' && + event.item?.type === 'agent_message' + ) { + last = event.item.text || ''; + } + } catch { + last = trimmed; + } + } + return last || output; +} + +function stripClaudeBanner(text) { + return text + .split('\n') + .filter( + line => + line.trim() !== + 'Claude Code at Meta (https://fburl.com/claude.code.users)' + ) + .join('\n'); +} + +function parseSummariesResponse(raw) { + const candidates = []; + const trimmed = raw.trim(); + const fencedMatch = trimmed.match(/```(?:json)?\s*([\s\S]*?)```/i); + if (fencedMatch) { + candidates.push(fencedMatch[1].trim()); + } + + const firstBracket = trimmed.indexOf('['); + if (firstBracket !== -1) { + candidates.push(trimmed.slice(firstBracket).trim()); + } + + for (let i = 0; i < candidates.length; i++) { + const candidate = candidates[i]; + if (!candidate) { + continue; + } + try { + const parsed = JSON.parse(candidate); + if (Array.isArray(parsed)) { + return parsed; + } + } catch { + // Try the next candidate. + } + } + + try { + const parsed = JSON.parse(trimmed); + if (Array.isArray(parsed)) { + return parsed; + } + } catch { + // Fall through. + } + + return null; +} + +async function fetchPullRequestMetadata(prNumber, {log}) { + log(`Fetching PR metadata for #${prNumber}...`); + const token = process.env.GITHUB_TOKEN || process.env.GH_TOKEN || null; + const requestOptions = { + hostname: 'api.github.com', + path: `/repos/facebook/react/pulls/${prNumber}`, + method: 'GET', + headers: { + 'User-Agent': 'generate-changelog-script', + Accept: 'application/vnd.github+json', + }, + }; + if (token) { + requestOptions.headers.Authorization = `Bearer ${token}`; + } + + return new Promise(resolve => { + const req = https.request(requestOptions, res => { + let raw = ''; + res.on('data', chunk => { + raw += chunk; + }); + res.on('end', () => { + if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { + try { + const json = JSON.parse(raw); + resolve({ + authorLogin: json.user?.login || null, + }); + } catch (error) { + process.stderr.write( + `Warning: unable to parse GitHub response for PR #${prNumber}: ${error.message}\n` + ); + resolve(null); + } + } else { + process.stderr.write( + `Warning: GitHub API request failed for PR #${prNumber} with status ${res.statusCode}\n` + ); + resolve(null); + } + }); + }); + + req.on('error', error => { + process.stderr.write( + `Warning: GitHub API request errored for PR #${prNumber}: ${error.message}\n` + ); + resolve(null); + }); + + req.end(); + }); +} + +async function main() { + const {packageSpecs, summarizer, debug} = parseArgs(process.argv.slice(2)); + const log = debug + ? (...args) => console.log('[generate-changelog]', ...args) + : noopLogger; + const allStablePackages = Object.keys(stablePackages); + + const packageTargets = new Map(); + for (let i = 0; i < packageSpecs.length; i++) { + const spec = packageSpecs[i]; + if (!allStablePackages.includes(spec.name)) { + throw new Error( + `Package "${spec.name}" is not listed in stablePackages.` + ); + } + if (packageTargets.has(spec.name)) { + throw new Error(`Package "${spec.name}" was specified more than once.`); + } + packageTargets.set(spec.name, spec); + } + + const targetPackages = packageSpecs.map(spec => spec.name); + log( + `Starting changelog generation for: ${packageSpecs + .map(spec => `${spec.name}@${spec.displayVersion || spec.version}`) + .join(', ')}` + ); + + const packageInfoMap = new Map(); + const packageInfoResults = await Promise.all( + targetPackages.map(async pkg => { + const info = await fetchNpmInfo(pkg, {log}); + return {pkg, info}; + }) + ); + for (let i = 0; i < packageInfoResults.length; i++) { + const entry = packageInfoResults[i]; + packageInfoMap.set(entry.pkg, entry.info); + } + + const commitPackagesMap = new Map(); + const commitCollections = await Promise.all( + targetPackages.map(async pkg => { + const {gitHead} = packageInfoMap.get(pkg); + const commits = await collectCommitsSince(pkg, gitHead, {log}); + log(`Package ${pkg} has ${commits.length} commit(s) since ${gitHead}.`); + return {pkg, commits}; + }) + ); + for (let i = 0; i < commitCollections.length; i++) { + const entry = commitCollections[i]; + const pkg = entry.pkg; + const commits = entry.commits; + for (let j = 0; j < commits.length; j++) { + const sha = commits[j]; + if (!commitPackagesMap.has(sha)) { + commitPackagesMap.set(sha, new Set()); + } + commitPackagesMap.get(sha).add(pkg); + } + } + log(`Found ${commitPackagesMap.size} commits touching target packages.`); + + if (commitPackagesMap.size === 0) { + console.log('No commits found for the selected packages.'); + return; + } + + const commitDetails = await Promise.all( + Array.from(commitPackagesMap.entries()).map( + async ([sha, packagesTouched]) => { + const detail = await loadCommitDetails(sha, {log}); + detail.packages = packagesTouched; + detail.prNumber = extractPrNumber(detail.subject, detail.body); + return detail; + } + ) + ); + + commitDetails.sort((a, b) => a.timestamp - b.timestamp); + log(`Ordered ${commitDetails.length} commit(s) chronologically.`); + + const commitsByPackage = new Map(); + commitDetails.forEach(commit => { + commit.packages.forEach(pkgName => { + if (!commitsByPackage.has(pkgName)) { + commitsByPackage.set(pkgName, []); + } + commitsByPackage.get(pkgName).push(commit); + }); + }); + + const uniquePrNumbers = Array.from( + new Set(commitDetails.map(commit => commit.prNumber).filter(Boolean)) + ); + log(`Identified ${uniquePrNumbers.length} unique PR number(s).`); + + const prMetadata = new Map(); + log(`Summarizer selected: ${summarizer || 'none (using commit titles)'}`); + const prMetadataResults = await Promise.all( + uniquePrNumbers.map(async prNumber => { + const meta = await fetchPullRequestMetadata(prNumber, {log}); + return {prNumber, meta}; + }) + ); + for (let i = 0; i < prMetadataResults.length; i++) { + const entry = prMetadataResults[i]; + if (entry.meta) { + prMetadata.set(entry.prNumber, entry.meta); + } + } + log(`Fetched metadata for ${prMetadata.size} PR(s).`); + + const summariesByPackage = await summarizePackages({ + summarizer, + packageSpecs, + packageTargets, + commitsByPackage, + log, + }); + + const outputLines = []; + for (let i = 0; i < packageSpecs.length; i++) { + const spec = packageSpecs[i]; + outputLines.push(`## ${spec.name}@${spec.displayVersion || spec.version}`); + const commitsForPackage = commitsByPackage.get(spec.name) || []; + + if (commitsForPackage.length === 0) { + outputLines.push('* No changes since the last release.'); + outputLines.push(''); + continue; + } + + commitsForPackage.forEach(commit => { + if (commit.prNumber && prMetadata.has(commit.prNumber)) { + commit.authorLogin = prMetadata.get(commit.prNumber).authorLogin; + } + + const prFragment = commit.prNumber + ? `[#${commit.prNumber}](https://github.com/facebook/react/pull/${commit.prNumber})` + : `commit ${commit.sha.slice(0, 7)}`; + + let authorFragment = commit.authorLogin + ? `[@${commit.authorLogin}](https://github.com/${commit.authorLogin})` + : commit.authorName || 'unknown author'; + + if ( + !commit.authorLogin && + commit.authorName && + commit.authorName.startsWith('@') + ) { + const username = commit.authorName.slice(1); + authorFragment = `[@${username}](https://github.com/${username})`; + } + + const summaryMap = summariesByPackage.get(spec.name) || new Map(); + let summary = summaryMap.get(commit.sha) || commit.subject; + + if (commit.prNumber) { + const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); + summary = summary.replace(prPattern, '').trim(); + } + + outputLines.push(`* ${summary} (${prFragment} by ${authorFragment})`); + }); + + outputLines.push(''); + } + + while (outputLines.length && outputLines[outputLines.length - 1] === '') { + outputLines.pop(); + } + + log('Generated changelog sections.'); + console.log(outputLines.join('\n')); +} + +main().catch(error => { + process.stderr.write(`${error.message}\n`); + process.exit(1); +}); From 0d721b60c2b0447f85f20f457e908a494acb28b0 Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Mon, 27 Oct 2025 22:06:28 +0100 Subject: [PATCH 138/276] [Flight] Don't hang after resolving cyclic references (#34988) --- .../react-client/src/ReactFlightClient.js | 16 ++++++++++++ .../src/__tests__/ReactFlightDOMEdge-test.js | 25 +++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index c7506a13e59..503f79e4cc5 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -624,6 +624,22 @@ function wakeChunkIfInitialized<T>( rejectListeners.splice(rejectionIdx, 1); } } + // The status might have changed after fulfilling the reference. + switch ((chunk: SomeChunk<T>).status) { + case INITIALIZED: + const initializedChunk: InitializedChunk<T> = (chunk: any); + wakeChunk( + resolveListeners, + initializedChunk.value, + initializedChunk, + ); + return; + case ERRORED: + if (rejectListeners !== null) { + rejectChunk(rejectListeners, chunk.reason); + } + return; + } } } } diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index a47c9b086a1..9e024107fc5 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -2196,4 +2196,29 @@ describe('ReactFlightDOMEdge', () => { 'Switched to client rendering because the server rendering errored:\n\nssr-throw', ); }); + + it('should properly resolve with deduped objects', async () => { + const obj = {foo: 'hi'}; + + function Test(props) { + return props.obj.foo; + } + + const root = { + obj: obj, + node: <Test obj={obj} />, + }; + + const stream = ReactServerDOMServer.renderToReadableStream(root); + + const response = ReactServerDOMClient.createFromReadableStream(stream, { + serverConsumerManifest: { + moduleMap: null, + moduleLoading: null, + }, + }); + + const result = await response; + expect(result).toEqual({obj: obj, node: 'hi'}); + }); }); From 90817f8810da9d993bf93a75b673399b112af67e Mon Sep 17 00:00:00 2001 From: Ricky <rickhanlonii@gmail.com> Date: Mon, 27 Oct 2025 17:38:56 -0400 Subject: [PATCH 139/276] [rn] delete the legacy renderers from the sync (#34946) Now that RN is only on the New Architecture, we can stop stop syncing the legacy React Native renderers. In this diff, I just stop syncing them. In a follow up I'll delete the code for them so only Fabric is left. This will also allow us to remove the `enableLegacyMode` feature flag. --- .../workflows/runtime_commit_artifacts.yml | 7 ++-- packages/react-native-renderer/index.js | 1 + packages/react-reconciler/README.md | 2 +- scripts/rollup/bundles.js | 36 ------------------- .../rollup/shims/react-native/ReactNative.js | 1 + 5 files changed, 8 insertions(+), 39 deletions(-) diff --git a/.github/workflows/runtime_commit_artifacts.yml b/.github/workflows/runtime_commit_artifacts.yml index b982d561ed7..2809df18159 100644 --- a/.github/workflows/runtime_commit_artifacts.yml +++ b/.github/workflows/runtime_commit_artifacts.yml @@ -162,10 +162,13 @@ jobs: mv build/facebook-react-native/react-is/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-is/ mv build/facebook-react-native/react-test-renderer/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-test-renderer/ - # Delete OSS renderer. OSS renderer is synced through internal script. + # Delete the OSS renderers, these are sync'd to RN separately. RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/ + SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/ rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js - rm $RENDERER_FOLDER/ReactNativeRenderer-{dev,prod,profiling}.js + + # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future. + rm $SHIM_FOLDER/ReactNative.js # Copy eslint-plugin-react-hooks # NOTE: This is different from www, here we include the full package diff --git a/packages/react-native-renderer/index.js b/packages/react-native-renderer/index.js index ecc5e58c3d8..131c066ff44 100644 --- a/packages/react-native-renderer/index.js +++ b/packages/react-native-renderer/index.js @@ -12,4 +12,5 @@ import * as ReactNative from './src/ReactNativeRenderer'; // Assert that the exports line up with the type we're going to expose. (ReactNative: ReactNativeType); +// TODO: Delete the legacy renderer, only Fabric is used now. export * from './src/ReactNativeRenderer'; diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md index b30387c591f..82080513a45 100644 --- a/packages/react-reconciler/README.md +++ b/packages/react-reconciler/README.md @@ -59,7 +59,7 @@ The examples in the React repository are declared a bit differently than a third * [React ART](https://github.com/facebook/react/blob/main/packages/react-art/src/ReactART.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js) * [React DOM](https://github.com/facebook/react/blob/main/packages/react-dom/src/client/ReactDOM.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js) -* [React Native](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFiberConfigNative.js) +* [React Native](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFabric.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFiberConfigFabric.js) If these links break please file an issue and we’ll fix them. They intentionally link to the latest versions since the API is still evolving. If you have more questions please file an issue and we’ll try to help! diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 0a7b17ec2cc..69d0b534fce 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -819,42 +819,6 @@ const bundles = [ }), }, - /******* React Native *******/ - { - bundleTypes: __EXPERIMENTAL__ - ? [] - : [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING], - moduleType: RENDERER, - entry: 'react-native-renderer', - global: 'ReactNativeRenderer', - externals: ['react-native', 'ReactNativeInternalFeatureFlags'], - minifyWithProdErrorCodes: false, - wrapWithModuleBoundaries: true, - babel: opts => - Object.assign({}, opts, { - plugins: opts.plugins.concat([ - [require.resolve('@babel/plugin-transform-classes'), {loose: true}], - ]), - }), - }, - { - bundleTypes: [RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING], - moduleType: RENDERER, - entry: 'react-native-renderer', - global: 'ReactNativeRenderer', - // ReactNativeInternalFeatureFlags temporary until we land enableRemoveConsolePatches. - // Needs to be done before the next RN OSS release. - externals: ['react-native', 'ReactNativeInternalFeatureFlags'], - minifyWithProdErrorCodes: false, - wrapWithModuleBoundaries: true, - babel: opts => - Object.assign({}, opts, { - plugins: opts.plugins.concat([ - [require.resolve('@babel/plugin-transform-classes'), {loose: true}], - ]), - }), - }, - /******* React Native Fabric *******/ { bundleTypes: __EXPERIMENTAL__ diff --git a/scripts/rollup/shims/react-native/ReactNative.js b/scripts/rollup/shims/react-native/ReactNative.js index 82c062bb851..4e7ab19ae6e 100644 --- a/scripts/rollup/shims/react-native/ReactNative.js +++ b/scripts/rollup/shims/react-native/ReactNative.js @@ -14,6 +14,7 @@ import type {ReactNativeType} from './ReactNativeTypes'; let ReactNative: ReactNativeType; +// TODO: Delete the legacy renderer. Only ReactFabric is used now. if (__DEV__) { ReactNative = require('../implementations/ReactNativeRenderer-dev'); } else { From dd53a946ecf4805ea0ecb885e538f69e8e3cbd61 Mon Sep 17 00:00:00 2001 From: Ricky <rickhanlonii@gmail.com> Date: Mon, 27 Oct 2025 17:48:33 -0400 Subject: [PATCH 140/276] [rn] enabled disableLegacyMode everywhere (#34947) Stacked on https://github.com/facebook/react/pull/34946 This should be a noop, now that the legacy renderers are not being sync'd. --- .github/workflows/runtime_commit_artifacts.yml | 2 +- .../src/__tests__/ReactFabricAndNative-test.internal.js | 8 ++++++++ packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +- packages/shared/forks/ReactFeatureFlags.native-oss.js | 2 +- .../forks/ReactFeatureFlags.test-renderer.native-fb.js | 2 +- 5 files changed, 12 insertions(+), 4 deletions(-) diff --git a/.github/workflows/runtime_commit_artifacts.yml b/.github/workflows/runtime_commit_artifacts.yml index 2809df18159..1b98673cd4d 100644 --- a/.github/workflows/runtime_commit_artifacts.yml +++ b/.github/workflows/runtime_commit_artifacts.yml @@ -164,10 +164,10 @@ jobs: # Delete the OSS renderers, these are sync'd to RN separately. RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/ - SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/ rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future. + SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/ rm $SHIM_FOLDER/ReactNative.js # Copy eslint-plugin-react-hooks diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js index 4e0fcad9c80..0b2f46b4d5d 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js @@ -40,6 +40,7 @@ describe('created with ReactFabric called with ReactNative', () => { require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').getNativeTagFromPublicInstance; }); + // @gate !disableLegacyMode it('find Fabric instances with the RN renderer', () => { const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -60,6 +61,7 @@ describe('created with ReactFabric called with ReactNative', () => { expect(getNativeTagFromPublicInstance(instance)).toBe(2); }); + // @gate !disableLegacyMode it('find Fabric nodes with the RN renderer', () => { const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -80,6 +82,7 @@ describe('created with ReactFabric called with ReactNative', () => { expect(handle).toBe(2); }); + // @gate !disableLegacyMode it('dispatches commands on Fabric nodes with the RN renderer', () => { nativeFabricUIManager.dispatchCommand.mockClear(); const View = createReactNativeComponentClass('RCTView', () => ({ @@ -101,6 +104,7 @@ describe('created with ReactFabric called with ReactNative', () => { expect(UIManager.dispatchViewManagerCommand).not.toBeCalled(); }); + // @gate !disableLegacyMode it('dispatches sendAccessibilityEvent on Fabric nodes with the RN renderer', () => { nativeFabricUIManager.sendAccessibilityEvent.mockClear(); const View = createReactNativeComponentClass('RCTView', () => ({ @@ -143,6 +147,7 @@ describe('created with ReactNative called with ReactFabric', () => { .ReactNativeViewConfigRegistry.register; }); + // @gate !disableLegacyMode it('find Paper instances with the Fabric renderer', () => { const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -163,6 +168,7 @@ describe('created with ReactNative called with ReactFabric', () => { expect(instance._nativeTag).toBe(3); }); + // @gate !disableLegacyMode it('find Paper nodes with the Fabric renderer', () => { const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -183,6 +189,7 @@ describe('created with ReactNative called with ReactFabric', () => { expect(handle).toBe(3); }); + // @gate !disableLegacyMode it('dispatches commands on Paper nodes with the Fabric renderer', () => { UIManager.dispatchViewManagerCommand.mockReset(); const View = createReactNativeComponentClass('RCTView', () => ({ @@ -205,6 +212,7 @@ describe('created with ReactNative called with ReactFabric', () => { expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled(); }); + // @gate !disableLegacyMode it('dispatches sendAccessibilityEvent on Paper nodes with the Fabric renderer', () => { ReactNativePrivateInterface.legacySendAccessibilityEvent.mockReset(); const View = createReactNativeComponentClass('RCTView', () => ({ diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index afecaa685fa..dd0bd8624f3 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -35,7 +35,7 @@ export const disableCommentsAsDOMContainers: boolean = true; export const disableInputAttributeSyncing: boolean = false; export const disableLegacyContext: boolean = false; export const disableLegacyContextForFunctionComponents: boolean = false; -export const disableLegacyMode: boolean = false; +export const disableLegacyMode: boolean = true; export const disableSchedulerTimeoutInWorkLoop: boolean = false; export const disableTextareaChildren: boolean = false; export const enableAsyncDebugInfo: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 7cabeb526a2..555307cef00 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -21,7 +21,7 @@ export const disableCommentsAsDOMContainers: boolean = true; export const disableInputAttributeSyncing: boolean = false; export const disableLegacyContext: boolean = true; export const disableLegacyContextForFunctionComponents: boolean = true; -export const disableLegacyMode: boolean = false; +export const disableLegacyMode: boolean = true; export const disableSchedulerTimeoutInWorkLoop: boolean = false; export const disableTextareaChildren: boolean = false; export const enableAsyncDebugInfo: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index eb56da603d3..0ff044250cb 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -16,7 +16,7 @@ export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; export const disableLegacyContext = false; export const disableLegacyContextForFunctionComponents = false; -export const disableLegacyMode = false; +export const disableLegacyMode = true; export const disableSchedulerTimeoutInWorkLoop = false; export const disableTextareaChildren = false; export const enableAsyncDebugInfo = false; From 69f3e9d0346a04af55de05a08d7aa2df17035849 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Mon, 27 Oct 2025 17:54:09 -0400 Subject: [PATCH 141/276] [generate-changelog] Add `--format` option (#34992) Adds a new `--format` option which can be `text` (default), `csv`, or `json`. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34992). * #34993 * __->__ #34992 --- scripts/tasks/generate-changelog.js | 246 ++++++++++++++++++++++++---- 1 file changed, 213 insertions(+), 33 deletions(-) diff --git a/scripts/tasks/generate-changelog.js b/scripts/tasks/generate-changelog.js index 158346d2d9a..17818573a96 100644 --- a/scripts/tasks/generate-changelog.js +++ b/scripts/tasks/generate-changelog.js @@ -23,7 +23,7 @@ const repoRoot = path.resolve(__dirname, '..', '..'); function parseArgs(argv) { const parser = yargs(argv) .usage( - 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [<pkg@version> ...]' + 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [--format <text|csv|json>] [<pkg@version> ...]' ) .example( '$0 --codex eslint-plugin-react-hooks@7.0.1', @@ -50,6 +50,12 @@ function parseArgs(argv) { describe: 'Enable verbose debug logging.', default: false, }) + .option('format', { + type: 'string', + describe: 'Output format for the generated changelog.', + choices: ['text', 'csv', 'json'], + default: 'text', + }) .help('help') .alias('h', 'help') .version(false) @@ -61,6 +67,7 @@ function parseArgs(argv) { const args = parser.scriptName('generate-changelog').parse(); const packageSpecs = []; const debug = !!args.debug; + const format = args.format || 'text'; let summarizer = null; if (args.codex && args.claude) { throw new Error('Choose either --codex or --claude, not both.'); @@ -123,6 +130,7 @@ function parseArgs(argv) { return { debug, + format, summarizer, packageSpecs, }; @@ -484,6 +492,22 @@ async function summarizePackageCommits({ function noopLogger() {} +function escapeCsvValue(value) { + if (value == null) { + return ''; + } + + const stringValue = String(value).replace(/\r?\n|\r/g, ' '); + if (stringValue.includes('"') || stringValue.includes(',')) { + return `"${stringValue.replace(/"/g, '""')}"`; + } + return stringValue; +} + +function toCsvRow(values) { + return values.map(escapeCsvValue).join(','); +} + async function runSummarizer(command, prompt) { const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024}; @@ -634,7 +658,9 @@ async function fetchPullRequestMetadata(prNumber, {log}) { } async function main() { - const {packageSpecs, summarizer, debug} = parseArgs(process.argv.slice(2)); + const {packageSpecs, summarizer, debug, format} = parseArgs( + process.argv.slice(2) + ); const log = debug ? (...args) => console.log('[generate-changelog]', ...args) : noopLogger; @@ -754,60 +780,214 @@ async function main() { log, }); - const outputLines = []; + const noChangesMessage = 'No changes since the last release.'; + const changelogEntries = []; for (let i = 0; i < packageSpecs.length; i++) { const spec = packageSpecs[i]; - outputLines.push(`## ${spec.name}@${spec.displayVersion || spec.version}`); + const versionText = spec.displayVersion || spec.version; const commitsForPackage = commitsByPackage.get(spec.name) || []; + const entry = { + package: spec.name, + version: versionText, + hasChanges: commitsForPackage.length > 0, + commits: [], + note: null, + }; - if (commitsForPackage.length === 0) { - outputLines.push('* No changes since the last release.'); - outputLines.push(''); + if (!entry.hasChanges) { + entry.note = noChangesMessage; + changelogEntries.push(entry); continue; } - commitsForPackage.forEach(commit => { + const summaryMap = summariesByPackage.get(spec.name) || new Map(); + entry.commits = commitsForPackage.map(commit => { if (commit.prNumber && prMetadata.has(commit.prNumber)) { - commit.authorLogin = prMetadata.get(commit.prNumber).authorLogin; + const metadata = prMetadata.get(commit.prNumber); + if (metadata && metadata.authorLogin) { + commit.authorLogin = metadata.authorLogin; + } } - const prFragment = commit.prNumber - ? `[#${commit.prNumber}](https://github.com/facebook/react/pull/${commit.prNumber})` - : `commit ${commit.sha.slice(0, 7)}`; + let summary = summaryMap.get(commit.sha) || commit.subject; + if (commit.prNumber) { + const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); + summary = summary.replace(prPattern, '').trim(); + } - let authorFragment = commit.authorLogin - ? `[@${commit.authorLogin}](https://github.com/${commit.authorLogin})` - : commit.authorName || 'unknown author'; + const prNumber = commit.prNumber || null; + const prUrl = prNumber + ? `https://github.com/facebook/react/pull/${prNumber}` + : null; + const commitSha = commit.sha; + const commitUrl = `https://github.com/facebook/react/commit/${commitSha}`; + + const authorLogin = commit.authorLogin || null; + const authorName = commit.authorName || null; + const authorEmail = commit.authorEmail || null; + + let authorUrl = null; + let authorDisplay = authorName || 'unknown author'; + + if (authorLogin) { + authorUrl = `https://github.com/${authorLogin}`; + authorDisplay = `[@${authorLogin}](${authorUrl})`; + } else if (authorName && authorName.startsWith('@')) { + const username = authorName.slice(1); + authorUrl = `https://github.com/${username}`; + authorDisplay = `[@${username}](${authorUrl})`; + } - if ( - !commit.authorLogin && - commit.authorName && - commit.authorName.startsWith('@') - ) { - const username = commit.authorName.slice(1); - authorFragment = `[@${username}](https://github.com/${username})`; + const referenceDisplay = prNumber + ? `[#${prNumber}](${prUrl})` + : `commit ${commitSha.slice(0, 7)}`; + const referenceType = prNumber ? 'pr' : 'commit'; + const referenceId = prNumber ? `#${prNumber}` : commitSha.slice(0, 7); + const referenceUrl = prNumber ? prUrl : commitUrl; + + return { + summary, + prNumber, + prUrl, + commitSha, + commitUrl, + authorLogin, + authorName, + authorEmail, + authorUrl, + authorDisplay, + referenceDisplay, + referenceType, + referenceId, + referenceUrl, + }; + }); + + changelogEntries.push(entry); + } + + log('Generated changelog sections.'); + if (format === 'text') { + const outputLines = []; + for (let i = 0; i < changelogEntries.length; i++) { + const entry = changelogEntries[i]; + outputLines.push(`## ${entry.package}@${entry.version}`); + if (!entry.hasChanges) { + outputLines.push(`* ${entry.note}`); + outputLines.push(''); + continue; } - const summaryMap = summariesByPackage.get(spec.name) || new Map(); - let summary = summaryMap.get(commit.sha) || commit.subject; + entry.commits.forEach(commit => { + outputLines.push( + `* ${commit.summary} (${commit.referenceDisplay} by ${commit.authorDisplay})` + ); + }); + outputLines.push(''); + } - if (commit.prNumber) { - const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); - summary = summary.replace(prPattern, '').trim(); + while (outputLines.length && outputLines[outputLines.length - 1] === '') { + outputLines.pop(); + } + + console.log(outputLines.join('\n')); + return; + } + + if (format === 'csv') { + const header = [ + 'package', + 'version', + 'summary', + 'reference_type', + 'reference_id', + 'reference_url', + 'author_name', + 'author_login', + 'author_url', + 'author_email', + 'commit_sha', + 'commit_url', + ]; + const rows = [header]; + changelogEntries.forEach(entry => { + if (!entry.hasChanges) { + rows.push([ + entry.package, + entry.version, + entry.note, + '', + '', + '', + '', + '', + '', + '', + '', + '', + ]); + return; } - outputLines.push(`* ${summary} (${prFragment} by ${authorFragment})`); + entry.commits.forEach(commit => { + const authorName = + commit.authorName || + (commit.authorLogin ? `@${commit.authorLogin}` : 'unknown author'); + rows.push([ + entry.package, + entry.version, + commit.summary, + commit.referenceType, + commit.referenceId, + commit.referenceUrl, + authorName, + commit.authorLogin || '', + commit.authorUrl || '', + commit.authorEmail || '', + commit.commitSha, + commit.commitUrl, + ]); + }); }); - outputLines.push(''); + const csvLines = rows.map(toCsvRow); + console.log(csvLines.join('\n')); + return; } - while (outputLines.length && outputLines[outputLines.length - 1] === '') { - outputLines.pop(); + if (format === 'json') { + const payload = changelogEntries.map(entry => ({ + package: entry.package, + version: entry.version, + hasChanges: entry.hasChanges, + note: entry.hasChanges ? undefined : entry.note, + commits: entry.commits.map(commit => ({ + summary: commit.summary, + prNumber: commit.prNumber, + prUrl: commit.prUrl, + commitSha: commit.commitSha, + commitUrl: commit.commitUrl, + author: { + login: commit.authorLogin, + name: commit.authorName, + email: commit.authorEmail, + url: commit.authorUrl, + display: commit.authorDisplay, + }, + reference: { + type: commit.referenceType, + id: commit.referenceId, + url: commit.referenceUrl, + label: commit.referenceDisplay, + }, + })), + })); + + console.log(JSON.stringify(payload, null, 2)); + return; } - log('Generated changelog sections.'); - console.log(outputLines.join('\n')); + throw new Error(`Unsupported format: ${format}`); } main().catch(error => { From 17b3765244b83e4c6f7a8c9b78ea4c8fa3a35622 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Mon, 27 Oct 2025 18:04:48 -0400 Subject: [PATCH 142/276] [generate-changelog] Refactor (#34993) Just a light reorganization. --- package.json | 2 +- scripts/tasks/generate-changelog.js | 996 ------------------ scripts/tasks/generate-changelog/args.js | 128 +++ scripts/tasks/generate-changelog/data.js | 190 ++++ .../tasks/generate-changelog/formatters.js | 228 ++++ scripts/tasks/generate-changelog/index.js | 158 +++ scripts/tasks/generate-changelog/summaries.js | 306 ++++++ scripts/tasks/generate-changelog/utils.js | 62 ++ 8 files changed, 1073 insertions(+), 997 deletions(-) delete mode 100644 scripts/tasks/generate-changelog.js create mode 100644 scripts/tasks/generate-changelog/args.js create mode 100644 scripts/tasks/generate-changelog/data.js create mode 100644 scripts/tasks/generate-changelog/formatters.js create mode 100644 scripts/tasks/generate-changelog/index.js create mode 100644 scripts/tasks/generate-changelog/summaries.js create mode 100644 scripts/tasks/generate-changelog/utils.js diff --git a/package.json b/package.json index 9fb3082f0c6..1b88aa171a8 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ "download-build-in-codesandbox-ci": "yarn build --type=node react/index react.react-server react-dom/index react-dom/client react-dom/src/server react-dom/test-utils react-dom.react-server scheduler/index react/jsx-runtime react/jsx-dev-runtime react-server-dom-webpack", "check-release-dependencies": "node ./scripts/release/check-release-dependencies", "generate-inline-fizz-runtime": "node ./scripts/rollup/generate-inline-fizz-runtime.js", - "generate-changelog": "node ./scripts/tasks/generate-changelog.js", + "generate-changelog": "node ./scripts/tasks/generate-changelog/index.js", "flags": "node ./scripts/flags/flags.js" }, "resolutions": { diff --git a/scripts/tasks/generate-changelog.js b/scripts/tasks/generate-changelog.js deleted file mode 100644 index 17818573a96..00000000000 --- a/scripts/tasks/generate-changelog.js +++ /dev/null @@ -1,996 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -'use strict'; - -const fs = require('fs'); -const path = require('path'); -const https = require('https'); -const {execFile} = require('child_process'); -const {promisify} = require('util'); -const semver = require('semver'); -const yargs = require('yargs/yargs'); - -const {stablePackages} = require('../../ReactVersions'); - -const execFileAsync = promisify(execFile); -const repoRoot = path.resolve(__dirname, '..', '..'); - -function parseArgs(argv) { - const parser = yargs(argv) - .usage( - 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [--format <text|csv|json>] [<pkg@version> ...]' - ) - .example( - '$0 --codex eslint-plugin-react-hooks@7.0.1', - 'Generate changelog for a single package using Codex.' - ) - .example( - '$0 --claude react@19.3 react-dom@19.3', - 'Generate changelog entries for multiple packages using Claude.' - ) - .example( - '$0 --codex', - 'Generate changelog for all stable packages using recorded versions.' - ) - .option('codex', { - type: 'boolean', - describe: 'Use Codex for commit summarization.', - }) - .option('claude', { - type: 'boolean', - describe: 'Use Claude for commit summarization.', - }) - .option('debug', { - type: 'boolean', - describe: 'Enable verbose debug logging.', - default: false, - }) - .option('format', { - type: 'string', - describe: 'Output format for the generated changelog.', - choices: ['text', 'csv', 'json'], - default: 'text', - }) - .help('help') - .alias('h', 'help') - .version(false) - .parserConfiguration({ - 'parse-numbers': false, - 'parse-positional-numbers': false, - }); - - const args = parser.scriptName('generate-changelog').parse(); - const packageSpecs = []; - const debug = !!args.debug; - const format = args.format || 'text'; - let summarizer = null; - if (args.codex && args.claude) { - throw new Error('Choose either --codex or --claude, not both.'); - } - if (args.codex) { - summarizer = 'codex'; - } else if (args.claude) { - summarizer = 'claude'; - } - - const positionalArgs = Array.isArray(args._) ? args._ : []; - for (let i = 0; i < positionalArgs.length; i++) { - const token = String(positionalArgs[i]).trim(); - if (!token) { - continue; - } - - const atIndex = token.lastIndexOf('@'); - if (atIndex <= 0 || atIndex === token.length - 1) { - throw new Error(`Invalid package specification: ${token}`); - } - - const packageName = token.slice(0, atIndex); - const versionText = token.slice(atIndex + 1); - const validVersion = - semver.valid(versionText) || semver.valid(semver.coerce(versionText)); - if (!validVersion) { - throw new Error(`Invalid version for ${packageName}: ${versionText}`); - } - - packageSpecs.push({ - name: packageName, - version: validVersion, - displayVersion: versionText, - }); - } - - if (packageSpecs.length === 0) { - Object.keys(stablePackages).forEach(pkgName => { - const versionText = stablePackages[pkgName]; - const validVersion = semver.valid(versionText); - if (!validVersion) { - throw new Error( - `Invalid stable version configured for ${pkgName}: ${versionText}` - ); - } - packageSpecs.push({ - name: pkgName, - version: validVersion, - displayVersion: versionText, - }); - }); - } - - if (summarizer && !isCommandAvailable(summarizer)) { - throw new Error( - `Requested summarizer "${summarizer}" is not available on the PATH.` - ); - } - - return { - debug, - format, - summarizer, - packageSpecs, - }; -} - -async function fetchNpmInfo(packageName, {log}) { - const npmArgs = ['view', `${packageName}@latest`, '--json']; - const options = {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024}; - log(`Fetching npm info for ${packageName}...`); - const {stdout} = await execFileAsync('npm', npmArgs, options); - - let data = stdout.trim(); - if (!data) { - throw new Error(`npm view returned empty result for ${packageName}`); - } - - let info = JSON.parse(data); - if (Array.isArray(info)) { - info = info[info.length - 1]; - } - - const version = info.version || info['dist-tags']?.latest; - let gitHead = info.gitHead || null; - - if (!gitHead) { - const gitHeadResult = await execFileAsync( - 'npm', - ['view', `${packageName}@${version}`, 'gitHead'], - {cwd: repoRoot, maxBuffer: 1024 * 1024} - ); - const possibleGitHead = gitHeadResult.stdout.trim(); - if ( - possibleGitHead && - possibleGitHead !== 'undefined' && - possibleGitHead !== 'null' - ) { - log(`Found gitHead for ${packageName}@${version}: ${possibleGitHead}`); - gitHead = possibleGitHead; - } - } - - if (!version) { - throw new Error( - `Unable to determine latest published version for ${packageName}` - ); - } - if (!gitHead) { - throw new Error( - `Unable to determine git commit for ${packageName}@${version}` - ); - } - - return { - publishedVersion: version, - gitHead, - }; -} - -async function collectCommitsSince(packageName, sinceGitSha, {log}) { - log(`Collecting commits for ${packageName} since ${sinceGitSha}...`); - await execFileAsync('git', ['cat-file', '-e', `${sinceGitSha}^{commit}`], { - cwd: repoRoot, - }); - const {stdout} = await execFileAsync( - 'git', - [ - 'rev-list', - '--reverse', - `${sinceGitSha}..HEAD`, - '--', - path.posix.join('packages', packageName), - ], - {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} - ); - - return stdout - .trim() - .split('\n') - .map(line => line.trim()) - .filter(Boolean); -} - -async function loadCommitDetails(sha, {log}) { - log(`Loading commit details for ${sha}...`); - const format = ['%H', '%s', '%an', '%ae', '%ct', '%B'].join('%n'); - const {stdout} = await execFileAsync( - 'git', - ['show', '--quiet', `--format=${format}`, sha], - {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} - ); - - const [commitSha, subject, authorName, authorEmail, timestamp, ...rest] = - stdout.split('\n'); - const body = rest.join('\n').trim(); - - return { - sha: commitSha.trim(), - subject: subject.trim(), - authorName: authorName.trim(), - authorEmail: authorEmail.trim(), - timestamp: +timestamp.trim() || 0, - body, - }; -} - -function extractPrNumber(subject, body) { - const patterns = [ - /$#(\d+)$/, - /https:\/\/github\.com\/facebook\/react\/pull\/(\d+)/, - ]; - - for (let i = 0; i < patterns.length; i++) { - const pattern = patterns[i]; - const subjectMatch = subject && subject.match(pattern); - if (subjectMatch) { - return subjectMatch[1]; - } - const bodyMatch = body && body.match(pattern); - if (bodyMatch) { - return bodyMatch[1]; - } - } - - return null; -} - -function isCommandAvailable(command) { - const paths = (process.env.PATH || '').split(path.delimiter); - const extensions = - process.platform === 'win32' && process.env.PATHEXT - ? process.env.PATHEXT.split(';') - : ['']; - - for (let i = 0; i < paths.length; i++) { - const dir = paths[i]; - if (!dir) { - continue; - } - for (let j = 0; j < extensions.length; j++) { - const ext = extensions[j]; - const fullPath = path.join(dir, `${command}${ext}`); - try { - fs.accessSync(fullPath, fs.constants.X_OK); - return true; - } catch { - // Keep searching. - } - } - } - return false; -} - -function readChangelogSnippet(preferredPackage) { - const cacheKey = - preferredPackage === 'eslint-plugin-react-hooks' - ? preferredPackage - : 'root'; - if (!readChangelogSnippet.cache) { - readChangelogSnippet.cache = new Map(); - } - const cache = readChangelogSnippet.cache; - if (cache.has(cacheKey)) { - return cache.get(cacheKey); - } - - const targetPath = - preferredPackage === 'eslint-plugin-react-hooks' - ? path.join( - repoRoot, - 'packages', - 'eslint-plugin-react-hooks', - 'CHANGELOG.md' - ) - : path.join(repoRoot, 'CHANGELOG.md'); - - let content = ''; - try { - content = fs.readFileSync(targetPath, 'utf8'); - } catch { - content = ''; - } - - const snippet = content.slice(0, 4000); - cache.set(cacheKey, snippet); - return snippet; -} - -function sanitizeSummary(text) { - if (!text) { - return ''; - } - - const trimmed = text.trim(); - const withoutBullet = trimmed.replace(/^([-*]\s+|\d+\s*[\.)]\s+)/, ''); - - return withoutBullet.replace(/\s+/g, ' ').trim(); -} - -async function summarizePackages({ - summarizer, - packageSpecs, - packageTargets, - commitsByPackage, - log, -}) { - const summariesByPackage = new Map(); - if (!summarizer) { - packageSpecs.forEach(spec => { - const commits = commitsByPackage.get(spec.name) || []; - const summaryMap = new Map(); - for (let i = 0; i < commits.length; i++) { - const commit = commits[i]; - summaryMap.set(commit.sha, commit.subject); - } - summariesByPackage.set(spec.name, summaryMap); - }); - return summariesByPackage; - } - - const tasks = packageSpecs.map(spec => { - const commits = commitsByPackage.get(spec.name) || []; - return summarizePackageCommits({ - summarizer, - spec, - commits, - packageTargets, - allPackageSpecs: packageSpecs, - log, - }); - }); - - const results = await Promise.all(tasks); - results.forEach(entry => { - summariesByPackage.set(entry.packageName, entry.summaries); - }); - return summariesByPackage; -} - -async function summarizePackageCommits({ - summarizer, - spec, - commits, - packageTargets, - allPackageSpecs, - log, -}) { - const summaries = new Map(); - if (commits.length === 0) { - return {packageName: spec.name, summaries}; - } - - const rootStyle = readChangelogSnippet('root'); - const hooksStyle = readChangelogSnippet('eslint-plugin-react-hooks'); - const targetList = allPackageSpecs.map( - targetSpec => - `${targetSpec.name}@${targetSpec.displayVersion || targetSpec.version}` - ); - const payload = commits.map(commit => { - const packages = Array.from(commit.packages || []).sort(); - const usesHooksStyle = (commit.packages || new Set()).has( - 'eslint-plugin-react-hooks' - ); - const packagesWithVersions = packages.map(pkgName => { - const targetSpec = packageTargets.get(pkgName); - if (!targetSpec) { - return pkgName; - } - return `${pkgName}@${targetSpec.displayVersion || targetSpec.version}`; - }); - return { - sha: commit.sha, - packages, - packagesWithVersions, - style: usesHooksStyle ? 'eslint-plugin-react-hooks' : 'root', - subject: commit.subject, - body: commit.body || '', - }; - }); - - const promptParts = [ - `You are preparing changelog summaries for ${spec.name} ${ - spec.displayVersion || spec.version - }.`, - 'The broader release includes:', - ...targetList.map(line => `- ${line}`), - '', - 'For each commit payload, write a single concise sentence without a leading bullet.', - 'Match the tone and formatting of the provided style samples. Do not mention commit hashes.', - 'Return a JSON array where each element has the shape `{ "sha": "<sha>", "summary": "<text>" }`.', - 'The JSON must contain one entry per commit in the same order they are provided.', - 'Use `"root"` style unless the payload specifies `"eslint-plugin-react-hooks"`, in which case use that style sample.', - '', - '--- STYLE: root ---', - rootStyle, - '--- END STYLE ---', - '', - '--- STYLE: eslint-plugin-react-hooks ---', - hooksStyle, - '--- END STYLE ---', - '', - `Commits affecting ${spec.name}:`, - ]; - - payload.forEach((item, index) => { - promptParts.push( - `Commit ${index + 1}:`, - `sha: ${item.sha}`, - `style: ${item.style}`, - `packages: ${item.packagesWithVersions.join(', ') || 'none'}`, - `subject: ${item.subject}`, - 'body:', - item.body || '(empty)', - '' - ); - }); - promptParts.push('Return ONLY the JSON array.', ''); - - const prompt = promptParts.join('\n'); - log( - `Invoking ${summarizer} for ${payload.length} commit summaries targeting ${spec.name}.` - ); - log(`Summarizer prompt length: ${prompt.length} characters.`); - - try { - const raw = await runSummarizer(summarizer, prompt); - log(`Summarizer output length: ${raw.length}`); - const parsed = parseSummariesResponse(raw); - if (!parsed) { - throw new Error('Unable to parse summarizer output.'); - } - parsed.forEach(entry => { - const summary = sanitizeSummary(entry.summary || ''); - if (summary) { - summaries.set(entry.sha, summary); - } - }); - } catch (error) { - if (log !== noopLogger) { - log( - `Warning: failed to summarize commits for ${spec.name} with ${summarizer}. Falling back to subjects. ${error.message}` - ); - if (error && error.stack) { - log(error.stack); - } - } - } - - for (let i = 0; i < commits.length; i++) { - const commit = commits[i]; - if (!summaries.has(commit.sha)) { - summaries.set(commit.sha, commit.subject); - } - } - - log(`Summaries available for ${summaries.size} commit(s) for ${spec.name}.`); - - return {packageName: spec.name, summaries}; -} - -function noopLogger() {} - -function escapeCsvValue(value) { - if (value == null) { - return ''; - } - - const stringValue = String(value).replace(/\r?\n|\r/g, ' '); - if (stringValue.includes('"') || stringValue.includes(',')) { - return `"${stringValue.replace(/"/g, '""')}"`; - } - return stringValue; -} - -function toCsvRow(values) { - return values.map(escapeCsvValue).join(','); -} - -async function runSummarizer(command, prompt) { - const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024}; - - if (command === 'codex') { - const {stdout} = await execFileAsync( - 'codex', - ['exec', '--json', prompt], - options - ); - return parseCodexSummary(stdout); - } - - if (command === 'claude') { - const {stdout} = await execFileAsync('claude', ['-p', prompt], options); - return stripClaudeBanner(stdout); - } - - throw new Error(`Unsupported summarizer command: ${command}`); -} - -function parseCodexSummary(output) { - let last = ''; - const lines = output.split('\n'); - for (let i = 0; i < lines.length; i++) { - const trimmed = lines[i].trim(); - if (!trimmed) { - continue; - } - try { - const event = JSON.parse(trimmed); - if ( - event.type === 'item.completed' && - event.item?.type === 'agent_message' - ) { - last = event.item.text || ''; - } - } catch { - last = trimmed; - } - } - return last || output; -} - -function stripClaudeBanner(text) { - return text - .split('\n') - .filter( - line => - line.trim() !== - 'Claude Code at Meta (https://fburl.com/claude.code.users)' - ) - .join('\n'); -} - -function parseSummariesResponse(raw) { - const candidates = []; - const trimmed = raw.trim(); - const fencedMatch = trimmed.match(/```(?:json)?\s*([\s\S]*?)```/i); - if (fencedMatch) { - candidates.push(fencedMatch[1].trim()); - } - - const firstBracket = trimmed.indexOf('['); - if (firstBracket !== -1) { - candidates.push(trimmed.slice(firstBracket).trim()); - } - - for (let i = 0; i < candidates.length; i++) { - const candidate = candidates[i]; - if (!candidate) { - continue; - } - try { - const parsed = JSON.parse(candidate); - if (Array.isArray(parsed)) { - return parsed; - } - } catch { - // Try the next candidate. - } - } - - try { - const parsed = JSON.parse(trimmed); - if (Array.isArray(parsed)) { - return parsed; - } - } catch { - // Fall through. - } - - return null; -} - -async function fetchPullRequestMetadata(prNumber, {log}) { - log(`Fetching PR metadata for #${prNumber}...`); - const token = process.env.GITHUB_TOKEN || process.env.GH_TOKEN || null; - const requestOptions = { - hostname: 'api.github.com', - path: `/repos/facebook/react/pulls/${prNumber}`, - method: 'GET', - headers: { - 'User-Agent': 'generate-changelog-script', - Accept: 'application/vnd.github+json', - }, - }; - if (token) { - requestOptions.headers.Authorization = `Bearer ${token}`; - } - - return new Promise(resolve => { - const req = https.request(requestOptions, res => { - let raw = ''; - res.on('data', chunk => { - raw += chunk; - }); - res.on('end', () => { - if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { - try { - const json = JSON.parse(raw); - resolve({ - authorLogin: json.user?.login || null, - }); - } catch (error) { - process.stderr.write( - `Warning: unable to parse GitHub response for PR #${prNumber}: ${error.message}\n` - ); - resolve(null); - } - } else { - process.stderr.write( - `Warning: GitHub API request failed for PR #${prNumber} with status ${res.statusCode}\n` - ); - resolve(null); - } - }); - }); - - req.on('error', error => { - process.stderr.write( - `Warning: GitHub API request errored for PR #${prNumber}: ${error.message}\n` - ); - resolve(null); - }); - - req.end(); - }); -} - -async function main() { - const {packageSpecs, summarizer, debug, format} = parseArgs( - process.argv.slice(2) - ); - const log = debug - ? (...args) => console.log('[generate-changelog]', ...args) - : noopLogger; - const allStablePackages = Object.keys(stablePackages); - - const packageTargets = new Map(); - for (let i = 0; i < packageSpecs.length; i++) { - const spec = packageSpecs[i]; - if (!allStablePackages.includes(spec.name)) { - throw new Error( - `Package "${spec.name}" is not listed in stablePackages.` - ); - } - if (packageTargets.has(spec.name)) { - throw new Error(`Package "${spec.name}" was specified more than once.`); - } - packageTargets.set(spec.name, spec); - } - - const targetPackages = packageSpecs.map(spec => spec.name); - log( - `Starting changelog generation for: ${packageSpecs - .map(spec => `${spec.name}@${spec.displayVersion || spec.version}`) - .join(', ')}` - ); - - const packageInfoMap = new Map(); - const packageInfoResults = await Promise.all( - targetPackages.map(async pkg => { - const info = await fetchNpmInfo(pkg, {log}); - return {pkg, info}; - }) - ); - for (let i = 0; i < packageInfoResults.length; i++) { - const entry = packageInfoResults[i]; - packageInfoMap.set(entry.pkg, entry.info); - } - - const commitPackagesMap = new Map(); - const commitCollections = await Promise.all( - targetPackages.map(async pkg => { - const {gitHead} = packageInfoMap.get(pkg); - const commits = await collectCommitsSince(pkg, gitHead, {log}); - log(`Package ${pkg} has ${commits.length} commit(s) since ${gitHead}.`); - return {pkg, commits}; - }) - ); - for (let i = 0; i < commitCollections.length; i++) { - const entry = commitCollections[i]; - const pkg = entry.pkg; - const commits = entry.commits; - for (let j = 0; j < commits.length; j++) { - const sha = commits[j]; - if (!commitPackagesMap.has(sha)) { - commitPackagesMap.set(sha, new Set()); - } - commitPackagesMap.get(sha).add(pkg); - } - } - log(`Found ${commitPackagesMap.size} commits touching target packages.`); - - if (commitPackagesMap.size === 0) { - console.log('No commits found for the selected packages.'); - return; - } - - const commitDetails = await Promise.all( - Array.from(commitPackagesMap.entries()).map( - async ([sha, packagesTouched]) => { - const detail = await loadCommitDetails(sha, {log}); - detail.packages = packagesTouched; - detail.prNumber = extractPrNumber(detail.subject, detail.body); - return detail; - } - ) - ); - - commitDetails.sort((a, b) => a.timestamp - b.timestamp); - log(`Ordered ${commitDetails.length} commit(s) chronologically.`); - - const commitsByPackage = new Map(); - commitDetails.forEach(commit => { - commit.packages.forEach(pkgName => { - if (!commitsByPackage.has(pkgName)) { - commitsByPackage.set(pkgName, []); - } - commitsByPackage.get(pkgName).push(commit); - }); - }); - - const uniquePrNumbers = Array.from( - new Set(commitDetails.map(commit => commit.prNumber).filter(Boolean)) - ); - log(`Identified ${uniquePrNumbers.length} unique PR number(s).`); - - const prMetadata = new Map(); - log(`Summarizer selected: ${summarizer || 'none (using commit titles)'}`); - const prMetadataResults = await Promise.all( - uniquePrNumbers.map(async prNumber => { - const meta = await fetchPullRequestMetadata(prNumber, {log}); - return {prNumber, meta}; - }) - ); - for (let i = 0; i < prMetadataResults.length; i++) { - const entry = prMetadataResults[i]; - if (entry.meta) { - prMetadata.set(entry.prNumber, entry.meta); - } - } - log(`Fetched metadata for ${prMetadata.size} PR(s).`); - - const summariesByPackage = await summarizePackages({ - summarizer, - packageSpecs, - packageTargets, - commitsByPackage, - log, - }); - - const noChangesMessage = 'No changes since the last release.'; - const changelogEntries = []; - for (let i = 0; i < packageSpecs.length; i++) { - const spec = packageSpecs[i]; - const versionText = spec.displayVersion || spec.version; - const commitsForPackage = commitsByPackage.get(spec.name) || []; - const entry = { - package: spec.name, - version: versionText, - hasChanges: commitsForPackage.length > 0, - commits: [], - note: null, - }; - - if (!entry.hasChanges) { - entry.note = noChangesMessage; - changelogEntries.push(entry); - continue; - } - - const summaryMap = summariesByPackage.get(spec.name) || new Map(); - entry.commits = commitsForPackage.map(commit => { - if (commit.prNumber && prMetadata.has(commit.prNumber)) { - const metadata = prMetadata.get(commit.prNumber); - if (metadata && metadata.authorLogin) { - commit.authorLogin = metadata.authorLogin; - } - } - - let summary = summaryMap.get(commit.sha) || commit.subject; - if (commit.prNumber) { - const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); - summary = summary.replace(prPattern, '').trim(); - } - - const prNumber = commit.prNumber || null; - const prUrl = prNumber - ? `https://github.com/facebook/react/pull/${prNumber}` - : null; - const commitSha = commit.sha; - const commitUrl = `https://github.com/facebook/react/commit/${commitSha}`; - - const authorLogin = commit.authorLogin || null; - const authorName = commit.authorName || null; - const authorEmail = commit.authorEmail || null; - - let authorUrl = null; - let authorDisplay = authorName || 'unknown author'; - - if (authorLogin) { - authorUrl = `https://github.com/${authorLogin}`; - authorDisplay = `[@${authorLogin}](${authorUrl})`; - } else if (authorName && authorName.startsWith('@')) { - const username = authorName.slice(1); - authorUrl = `https://github.com/${username}`; - authorDisplay = `[@${username}](${authorUrl})`; - } - - const referenceDisplay = prNumber - ? `[#${prNumber}](${prUrl})` - : `commit ${commitSha.slice(0, 7)}`; - const referenceType = prNumber ? 'pr' : 'commit'; - const referenceId = prNumber ? `#${prNumber}` : commitSha.slice(0, 7); - const referenceUrl = prNumber ? prUrl : commitUrl; - - return { - summary, - prNumber, - prUrl, - commitSha, - commitUrl, - authorLogin, - authorName, - authorEmail, - authorUrl, - authorDisplay, - referenceDisplay, - referenceType, - referenceId, - referenceUrl, - }; - }); - - changelogEntries.push(entry); - } - - log('Generated changelog sections.'); - if (format === 'text') { - const outputLines = []; - for (let i = 0; i < changelogEntries.length; i++) { - const entry = changelogEntries[i]; - outputLines.push(`## ${entry.package}@${entry.version}`); - if (!entry.hasChanges) { - outputLines.push(`* ${entry.note}`); - outputLines.push(''); - continue; - } - - entry.commits.forEach(commit => { - outputLines.push( - `* ${commit.summary} (${commit.referenceDisplay} by ${commit.authorDisplay})` - ); - }); - outputLines.push(''); - } - - while (outputLines.length && outputLines[outputLines.length - 1] === '') { - outputLines.pop(); - } - - console.log(outputLines.join('\n')); - return; - } - - if (format === 'csv') { - const header = [ - 'package', - 'version', - 'summary', - 'reference_type', - 'reference_id', - 'reference_url', - 'author_name', - 'author_login', - 'author_url', - 'author_email', - 'commit_sha', - 'commit_url', - ]; - const rows = [header]; - changelogEntries.forEach(entry => { - if (!entry.hasChanges) { - rows.push([ - entry.package, - entry.version, - entry.note, - '', - '', - '', - '', - '', - '', - '', - '', - '', - ]); - return; - } - - entry.commits.forEach(commit => { - const authorName = - commit.authorName || - (commit.authorLogin ? `@${commit.authorLogin}` : 'unknown author'); - rows.push([ - entry.package, - entry.version, - commit.summary, - commit.referenceType, - commit.referenceId, - commit.referenceUrl, - authorName, - commit.authorLogin || '', - commit.authorUrl || '', - commit.authorEmail || '', - commit.commitSha, - commit.commitUrl, - ]); - }); - }); - - const csvLines = rows.map(toCsvRow); - console.log(csvLines.join('\n')); - return; - } - - if (format === 'json') { - const payload = changelogEntries.map(entry => ({ - package: entry.package, - version: entry.version, - hasChanges: entry.hasChanges, - note: entry.hasChanges ? undefined : entry.note, - commits: entry.commits.map(commit => ({ - summary: commit.summary, - prNumber: commit.prNumber, - prUrl: commit.prUrl, - commitSha: commit.commitSha, - commitUrl: commit.commitUrl, - author: { - login: commit.authorLogin, - name: commit.authorName, - email: commit.authorEmail, - url: commit.authorUrl, - display: commit.authorDisplay, - }, - reference: { - type: commit.referenceType, - id: commit.referenceId, - url: commit.referenceUrl, - label: commit.referenceDisplay, - }, - })), - })); - - console.log(JSON.stringify(payload, null, 2)); - return; - } - - throw new Error(`Unsupported format: ${format}`); -} - -main().catch(error => { - process.stderr.write(`${error.message}\n`); - process.exit(1); -}); diff --git a/scripts/tasks/generate-changelog/args.js b/scripts/tasks/generate-changelog/args.js new file mode 100644 index 00000000000..cee42f24ecd --- /dev/null +++ b/scripts/tasks/generate-changelog/args.js @@ -0,0 +1,128 @@ +'use strict'; + +const semver = require('semver'); +const yargs = require('yargs/yargs'); + +const {stablePackages} = require('../../../ReactVersions'); +const {isCommandAvailable} = require('./utils'); + +function parseArgs(argv) { + const parser = yargs(argv) + .usage( + 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [--format <text|csv|json>] [<pkg@version> ...]' + ) + .example( + '$0 --codex eslint-plugin-react-hooks@7.0.1', + 'Generate changelog for a single package using Codex.' + ) + .example( + '$0 --claude react@19.3 react-dom@19.3', + 'Generate changelog entries for multiple packages using Claude.' + ) + .example( + '$0 --codex', + 'Generate changelog for all stable packages using recorded versions.' + ) + .option('codex', { + type: 'boolean', + describe: 'Use Codex for commit summarization.', + }) + .option('claude', { + type: 'boolean', + describe: 'Use Claude for commit summarization.', + }) + .option('debug', { + type: 'boolean', + describe: 'Enable verbose debug logging.', + default: false, + }) + .option('format', { + type: 'string', + describe: 'Output format for the generated changelog.', + choices: ['text', 'csv', 'json'], + default: 'text', + }) + .help('help') + .alias('h', 'help') + .version(false) + .parserConfiguration({ + 'parse-numbers': false, + 'parse-positional-numbers': false, + }); + + const args = parser.scriptName('generate-changelog').parse(); + const packageSpecs = []; + const debug = !!args.debug; + const format = args.format || 'text'; + let summarizer = null; + + if (args.codex && args.claude) { + throw new Error('Choose either --codex or --claude, not both.'); + } + if (args.codex) { + summarizer = 'codex'; + } else if (args.claude) { + summarizer = 'claude'; + } + + const positionalArgs = Array.isArray(args._) ? args._ : []; + for (let i = 0; i < positionalArgs.length; i++) { + const token = String(positionalArgs[i]).trim(); + if (!token) { + continue; + } + + const atIndex = token.lastIndexOf('@'); + if (atIndex <= 0 || atIndex === token.length - 1) { + throw new Error(`Invalid package specification: ${token}`); + } + + const packageName = token.slice(0, atIndex); + const versionText = token.slice(atIndex + 1); + const validVersion = + semver.valid(versionText) || semver.valid(semver.coerce(versionText)); + if (!validVersion) { + throw new Error(`Invalid version for ${packageName}: ${versionText}`); + } + + packageSpecs.push({ + name: packageName, + version: validVersion, + displayVersion: versionText, + }); + } + + if (packageSpecs.length === 0) { + Object.keys(stablePackages).forEach(pkgName => { + const versionText = stablePackages[pkgName]; + const validVersion = semver.valid(versionText); + if (!validVersion) { + throw new Error( + `Invalid stable version configured for ${pkgName}: ${versionText}` + ); + } + packageSpecs.push({ + name: pkgName, + version: validVersion, + displayVersion: versionText, + }); + }); + } + + if (summarizer && !isCommandAvailable(summarizer)) { + throw new Error( + `Requested summarizer "${summarizer}" is not available on the PATH.` + ); + } + + return { + debug, + format, + summarizer, + packageSpecs, + }; +} + +module.exports = { + parseArgs, +}; diff --git a/scripts/tasks/generate-changelog/data.js b/scripts/tasks/generate-changelog/data.js new file mode 100644 index 00000000000..17e25e0a763 --- /dev/null +++ b/scripts/tasks/generate-changelog/data.js @@ -0,0 +1,190 @@ +'use strict'; + +const https = require('https'); +const path = require('path'); + +const {execFileAsync, repoRoot} = require('./utils'); + +async function fetchNpmInfo(packageName, {log}) { + const npmArgs = ['view', `${packageName}@latest`, '--json']; + const options = {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024}; + log(`Fetching npm info for ${packageName}...`); + const {stdout} = await execFileAsync('npm', npmArgs, options); + + let data = stdout.trim(); + if (!data) { + throw new Error(`npm view returned empty result for ${packageName}`); + } + + let info = JSON.parse(data); + if (Array.isArray(info)) { + info = info[info.length - 1]; + } + + const version = info.version || info['dist-tags']?.latest; + let gitHead = info.gitHead || null; + + if (!gitHead) { + const gitHeadResult = await execFileAsync( + 'npm', + ['view', `${packageName}@${version}`, 'gitHead'], + {cwd: repoRoot, maxBuffer: 1024 * 1024} + ); + const possibleGitHead = gitHeadResult.stdout.trim(); + if ( + possibleGitHead && + possibleGitHead !== 'undefined' && + possibleGitHead !== 'null' + ) { + log(`Found gitHead for ${packageName}@${version}: ${possibleGitHead}`); + gitHead = possibleGitHead; + } + } + + if (!version) { + throw new Error( + `Unable to determine latest published version for ${packageName}` + ); + } + if (!gitHead) { + throw new Error( + `Unable to determine git commit for ${packageName}@${version}` + ); + } + + return { + publishedVersion: version, + gitHead, + }; +} + +async function collectCommitsSince(packageName, sinceGitSha, {log}) { + log(`Collecting commits for ${packageName} since ${sinceGitSha}...`); + await execFileAsync('git', ['cat-file', '-e', `${sinceGitSha}^{commit}`], { + cwd: repoRoot, + }); + const {stdout} = await execFileAsync( + 'git', + [ + 'rev-list', + '--reverse', + `${sinceGitSha}..HEAD`, + '--', + path.posix.join('packages', packageName), + ], + {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} + ); + + return stdout + .trim() + .split('\n') + .map(line => line.trim()) + .filter(Boolean); +} + +async function loadCommitDetails(sha, {log}) { + log(`Loading commit details for ${sha}...`); + const format = ['%H', '%s', '%an', '%ae', '%ct', '%B'].join('%n'); + const {stdout} = await execFileAsync( + 'git', + ['show', '--quiet', `--format=${format}`, sha], + {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} + ); + + const [commitSha, subject, authorName, authorEmail, timestamp, ...rest] = + stdout.split('\n'); + const body = rest.join('\n').trim(); + + return { + sha: commitSha.trim(), + subject: subject.trim(), + authorName: authorName.trim(), + authorEmail: authorEmail.trim(), + timestamp: +timestamp.trim() || 0, + body, + }; +} + +function extractPrNumber(subject, body) { + const patterns = [ + /$#(\d+)$/, + /https:\/\/github\.com\/facebook\/react\/pull\/(\d+)/, + ]; + + for (let i = 0; i < patterns.length; i++) { + const pattern = patterns[i]; + const subjectMatch = subject && subject.match(pattern); + if (subjectMatch) { + return subjectMatch[1]; + } + const bodyMatch = body && body.match(pattern); + if (bodyMatch) { + return bodyMatch[1]; + } + } + + return null; +} + +async function fetchPullRequestMetadata(prNumber, {log}) { + log(`Fetching PR metadata for #${prNumber}...`); + const token = process.env.GITHUB_TOKEN || process.env.GH_TOKEN || null; + const requestOptions = { + hostname: 'api.github.com', + path: `/repos/facebook/react/pulls/${prNumber}`, + method: 'GET', + headers: { + 'User-Agent': 'generate-changelog-script', + Accept: 'application/vnd.github+json', + }, + }; + if (token) { + requestOptions.headers.Authorization = `Bearer ${token}`; + } + + return new Promise(resolve => { + const req = https.request(requestOptions, res => { + let raw = ''; + res.on('data', chunk => { + raw += chunk; + }); + res.on('end', () => { + if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { + try { + const json = JSON.parse(raw); + resolve({ + authorLogin: json.user?.login || null, + }); + } catch (error) { + process.stderr.write( + `Warning: unable to parse GitHub response for PR #${prNumber}: ${error.message}\n` + ); + resolve(null); + } + } else { + process.stderr.write( + `Warning: GitHub API request failed for PR #${prNumber} with status ${res.statusCode}\n` + ); + resolve(null); + } + }); + }); + + req.on('error', error => { + process.stderr.write( + `Warning: GitHub API request errored for PR #${prNumber}: ${error.message}\n` + ); + resolve(null); + }); + + req.end(); + }); +} + +module.exports = { + fetchNpmInfo, + collectCommitsSince, + loadCommitDetails, + extractPrNumber, + fetchPullRequestMetadata, +}; diff --git a/scripts/tasks/generate-changelog/formatters.js b/scripts/tasks/generate-changelog/formatters.js new file mode 100644 index 00000000000..49ed2a6a106 --- /dev/null +++ b/scripts/tasks/generate-changelog/formatters.js @@ -0,0 +1,228 @@ +'use strict'; + +const {toCsvRow} = require('./utils'); + +const NO_CHANGES_MESSAGE = 'No changes since the last release.'; + +function buildChangelogEntries({ + packageSpecs, + commitsByPackage, + summariesByPackage, + prMetadata, +}) { + const entries = []; + + for (let i = 0; i < packageSpecs.length; i++) { + const spec = packageSpecs[i]; + const version = spec.displayVersion || spec.version; + const commitsForPackage = commitsByPackage.get(spec.name) || []; + + if (commitsForPackage.length === 0) { + entries.push({ + package: spec.name, + version, + hasChanges: false, + note: NO_CHANGES_MESSAGE, + commits: [], + }); + continue; + } + + const summaryMap = summariesByPackage.get(spec.name) || new Map(); + const commitEntries = commitsForPackage.map(commit => { + let summary = summaryMap.get(commit.sha) || commit.subject; + if (commit.prNumber) { + const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); + summary = summary.replace(prPattern, '').trim(); + } + + const commitSha = commit.sha; + const commitUrl = `https://github.com/facebook/react/commit/${commitSha}`; + const prNumber = commit.prNumber || null; + const prUrl = prNumber + ? `https://github.com/facebook/react/pull/${prNumber}` + : null; + const prEntry = prNumber ? prMetadata.get(prNumber) : null; + + const authorLogin = prEntry?.authorLogin || null; + const authorName = commit.authorName || null; + const authorEmail = commit.authorEmail || null; + + let authorUrl = null; + let authorDisplay = authorName || 'unknown author'; + + if (authorLogin) { + authorUrl = `https://github.com/${authorLogin}`; + authorDisplay = `[@${authorLogin}](${authorUrl})`; + } else if (authorName && authorName.startsWith('@')) { + const username = authorName.slice(1); + authorUrl = `https://github.com/${username}`; + authorDisplay = `[@${username}](${authorUrl})`; + } + + const referenceType = prNumber ? 'pr' : 'commit'; + const referenceId = prNumber ? `#${prNumber}` : commitSha.slice(0, 7); + const referenceUrl = prNumber ? prUrl : commitUrl; + const referenceLabel = prNumber + ? `[#${prNumber}](${prUrl})` + : `commit ${commitSha.slice(0, 7)}`; + + return { + summary, + prNumber, + prUrl, + commitSha, + commitUrl, + author: { + login: authorLogin, + name: authorName, + email: authorEmail, + url: authorUrl, + display: authorDisplay, + }, + reference: { + type: referenceType, + id: referenceId, + url: referenceUrl, + label: referenceLabel, + }, + }; + }); + + entries.push({ + package: spec.name, + version, + hasChanges: true, + note: null, + commits: commitEntries, + }); + } + + return entries; +} + +function renderChangelog(entries, format) { + if (format === 'text') { + const lines = []; + for (let i = 0; i < entries.length; i++) { + const entry = entries[i]; + lines.push(`## ${entry.package}@${entry.version}`); + if (!entry.hasChanges) { + lines.push(`* ${entry.note}`); + lines.push(''); + continue; + } + + entry.commits.forEach(commit => { + lines.push( + `* ${commit.summary} (${commit.reference.label} by ${commit.author.display})` + ); + }); + lines.push(''); + } + + while (lines.length && lines[lines.length - 1] === '') { + lines.pop(); + } + + return lines.join('\n'); + } + + if (format === 'csv') { + const header = [ + 'package', + 'version', + 'summary', + 'reference_type', + 'reference_id', + 'reference_url', + 'author_name', + 'author_login', + 'author_url', + 'author_email', + 'commit_sha', + 'commit_url', + ]; + const rows = [header]; + + entries.forEach(entry => { + if (!entry.hasChanges) { + rows.push([ + entry.package, + entry.version, + entry.note, + '', + '', + '', + '', + '', + '', + '', + '', + '', + ]); + return; + } + + entry.commits.forEach(commit => { + const authorName = + commit.author.name || + (commit.author.login ? `@${commit.author.login}` : 'unknown author'); + rows.push([ + entry.package, + entry.version, + commit.summary, + commit.reference.type, + commit.reference.id, + commit.reference.url, + authorName, + commit.author.login || '', + commit.author.url || '', + commit.author.email || '', + commit.commitSha, + commit.commitUrl, + ]); + }); + }); + + return rows.map(toCsvRow).join('\n'); + } + + if (format === 'json') { + const payload = entries.map(entry => ({ + package: entry.package, + version: entry.version, + hasChanges: entry.hasChanges, + note: entry.hasChanges ? undefined : entry.note, + commits: entry.commits.map(commit => ({ + summary: commit.summary, + prNumber: commit.prNumber, + prUrl: commit.prUrl, + commitSha: commit.commitSha, + commitUrl: commit.commitUrl, + author: { + login: commit.author.login, + name: commit.author.name, + email: commit.author.email, + url: commit.author.url, + display: commit.author.display, + }, + reference: { + type: commit.reference.type, + id: commit.reference.id, + url: commit.reference.url, + label: commit.reference.label, + }, + })), + })); + + return JSON.stringify(payload, null, 2); + } + + throw new Error(`Unsupported format: ${format}`); +} + +module.exports = { + buildChangelogEntries, + renderChangelog, +}; diff --git a/scripts/tasks/generate-changelog/index.js b/scripts/tasks/generate-changelog/index.js new file mode 100644 index 00000000000..816ad7959bf --- /dev/null +++ b/scripts/tasks/generate-changelog/index.js @@ -0,0 +1,158 @@ +'use strict'; + +const {stablePackages} = require('../../../ReactVersions'); +const {parseArgs} = require('./args'); +const { + fetchNpmInfo, + collectCommitsSince, + loadCommitDetails, + extractPrNumber, + fetchPullRequestMetadata, +} = require('./data'); +const {summarizePackages} = require('./summaries'); +const {buildChangelogEntries, renderChangelog} = require('./formatters'); +const {noopLogger} = require('./utils'); + +async function main() { + const {packageSpecs, summarizer, debug, format} = parseArgs( + process.argv.slice(2) + ); + const log = debug + ? (...args) => console.log('[generate-changelog]', ...args) + : noopLogger; + + const allStablePackages = Object.keys(stablePackages); + const packageTargets = new Map(); + for (let i = 0; i < packageSpecs.length; i++) { + const spec = packageSpecs[i]; + if (!allStablePackages.includes(spec.name)) { + throw new Error( + `Package "${spec.name}" is not listed in stablePackages.` + ); + } + if (packageTargets.has(spec.name)) { + throw new Error(`Package "${spec.name}" was specified more than once.`); + } + packageTargets.set(spec.name, spec); + } + + const targetPackages = packageSpecs.map(spec => spec.name); + log( + `Starting changelog generation for: ${packageSpecs + .map(spec => `${spec.name}@${spec.displayVersion || spec.version}`) + .join(', ')}` + ); + + const packageInfoMap = new Map(); + const packageInfoResults = await Promise.all( + targetPackages.map(async pkg => { + const info = await fetchNpmInfo(pkg, {log}); + return {pkg, info}; + }) + ); + for (let i = 0; i < packageInfoResults.length; i++) { + const entry = packageInfoResults[i]; + packageInfoMap.set(entry.pkg, entry.info); + } + + const commitPackagesMap = new Map(); + const commitCollections = await Promise.all( + targetPackages.map(async pkg => { + const {gitHead} = packageInfoMap.get(pkg); + const commits = await collectCommitsSince(pkg, gitHead, {log}); + log(`Package ${pkg} has ${commits.length} commit(s) since ${gitHead}.`); + return {pkg, commits}; + }) + ); + for (let i = 0; i < commitCollections.length; i++) { + const entry = commitCollections[i]; + const pkg = entry.pkg; + const commits = entry.commits; + for (let j = 0; j < commits.length; j++) { + const sha = commits[j]; + if (!commitPackagesMap.has(sha)) { + commitPackagesMap.set(sha, new Set()); + } + commitPackagesMap.get(sha).add(pkg); + } + } + log(`Found ${commitPackagesMap.size} commits touching target packages.`); + + if (commitPackagesMap.size === 0) { + console.log('No commits found for the selected packages.'); + return; + } + + const commitDetails = await Promise.all( + Array.from(commitPackagesMap.entries()).map( + async ([sha, packagesTouched]) => { + const detail = await loadCommitDetails(sha, {log}); + detail.packages = packagesTouched; + detail.prNumber = extractPrNumber(detail.subject, detail.body); + return detail; + } + ) + ); + + commitDetails.sort((a, b) => a.timestamp - b.timestamp); + log(`Ordered ${commitDetails.length} commit(s) chronologically.`); + + const commitsByPackage = new Map(); + commitDetails.forEach(commit => { + commit.packages.forEach(pkgName => { + if (!commitsByPackage.has(pkgName)) { + commitsByPackage.set(pkgName, []); + } + commitsByPackage.get(pkgName).push(commit); + }); + }); + + const uniquePrNumbers = Array.from( + new Set(commitDetails.map(commit => commit.prNumber).filter(Boolean)) + ); + log(`Identified ${uniquePrNumbers.length} unique PR number(s).`); + + const prMetadata = new Map(); + log(`Summarizer selected: ${summarizer || 'none (using commit titles)'}`); + const prMetadataResults = await Promise.all( + uniquePrNumbers.map(async prNumber => { + const meta = await fetchPullRequestMetadata(prNumber, {log}); + return {prNumber, meta}; + }) + ); + for (let i = 0; i < prMetadataResults.length; i++) { + const entry = prMetadataResults[i]; + if (entry.meta) { + prMetadata.set(entry.prNumber, entry.meta); + } + } + log(`Fetched metadata for ${prMetadata.size} PR(s).`); + + const summariesByPackage = await summarizePackages({ + summarizer, + packageSpecs, + packageTargets, + commitsByPackage, + log, + }); + + const changelogEntries = buildChangelogEntries({ + packageSpecs, + commitsByPackage, + summariesByPackage, + prMetadata, + }); + + log('Generated changelog sections.'); + const output = renderChangelog(changelogEntries, format); + console.log(output); +} + +if (require.main === module) { + main().catch(error => { + process.stderr.write(`${error.message}\n`); + process.exit(1); + }); +} else { + module.exports = main; +} diff --git a/scripts/tasks/generate-changelog/summaries.js b/scripts/tasks/generate-changelog/summaries.js new file mode 100644 index 00000000000..d0b73851efd --- /dev/null +++ b/scripts/tasks/generate-changelog/summaries.js @@ -0,0 +1,306 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); + +const {execFileAsync, repoRoot, noopLogger} = require('./utils'); + +function readChangelogSnippet(preferredPackage) { + const cacheKey = + preferredPackage === 'eslint-plugin-react-hooks' + ? preferredPackage + : 'root'; + if (!readChangelogSnippet.cache) { + readChangelogSnippet.cache = new Map(); + } + const cache = readChangelogSnippet.cache; + if (cache.has(cacheKey)) { + return cache.get(cacheKey); + } + + const targetPath = + preferredPackage === 'eslint-plugin-react-hooks' + ? path.join( + repoRoot, + 'packages', + 'eslint-plugin-react-hooks', + 'CHANGELOG.md' + ) + : path.join(repoRoot, 'CHANGELOG.md'); + + let content = ''; + try { + content = fs.readFileSync(targetPath, 'utf8'); + } catch { + content = ''; + } + + const snippet = content.slice(0, 4000); + cache.set(cacheKey, snippet); + return snippet; +} + +function sanitizeSummary(text) { + if (!text) { + return ''; + } + + const trimmed = text.trim(); + const withoutBullet = trimmed.replace(/^([-*]\s+|\d+\s*[\.)]\s+)/, ''); + + return withoutBullet.replace(/\s+/g, ' ').trim(); +} + +async function summarizePackages({ + summarizer, + packageSpecs, + packageTargets, + commitsByPackage, + log, +}) { + const summariesByPackage = new Map(); + if (!summarizer) { + packageSpecs.forEach(spec => { + const commits = commitsByPackage.get(spec.name) || []; + const summaryMap = new Map(); + for (let i = 0; i < commits.length; i++) { + const commit = commits[i]; + summaryMap.set(commit.sha, commit.subject); + } + summariesByPackage.set(spec.name, summaryMap); + }); + return summariesByPackage; + } + + const tasks = packageSpecs.map(spec => { + const commits = commitsByPackage.get(spec.name) || []; + return summarizePackageCommits({ + summarizer, + spec, + commits, + packageTargets, + allPackageSpecs: packageSpecs, + log, + }); + }); + + const results = await Promise.all(tasks); + results.forEach(entry => { + summariesByPackage.set(entry.packageName, entry.summaries); + }); + return summariesByPackage; +} + +async function summarizePackageCommits({ + summarizer, + spec, + commits, + packageTargets, + allPackageSpecs, + log, +}) { + const summaries = new Map(); + if (commits.length === 0) { + return {packageName: spec.name, summaries}; + } + + const rootStyle = readChangelogSnippet('root'); + const hooksStyle = readChangelogSnippet('eslint-plugin-react-hooks'); + const targetList = allPackageSpecs.map( + targetSpec => + `${targetSpec.name}@${targetSpec.displayVersion || targetSpec.version}` + ); + const payload = commits.map(commit => { + const packages = Array.from(commit.packages || []).sort(); + const usesHooksStyle = (commit.packages || new Set()).has( + 'eslint-plugin-react-hooks' + ); + const packagesWithVersions = packages.map(pkgName => { + const targetSpec = packageTargets.get(pkgName); + if (!targetSpec) { + return pkgName; + } + return `${pkgName}@${targetSpec.displayVersion || targetSpec.version}`; + }); + return { + sha: commit.sha, + packages, + packagesWithVersions, + style: usesHooksStyle ? 'eslint-plugin-react-hooks' : 'root', + subject: commit.subject, + body: commit.body || '', + }; + }); + + const promptParts = [ + `You are preparing changelog summaries for ${spec.name} ${ + spec.displayVersion || spec.version + }.`, + 'The broader release includes:', + ...targetList.map(line => `- ${line}`), + '', + 'For each commit payload, write a single concise sentence without a leading bullet.', + 'Match the tone and formatting of the provided style samples. Do not mention commit hashes.', + 'Return a JSON array where each element has the shape `{ "sha": "<sha>", "summary": "<text>" }`.', + 'The JSON must contain one entry per commit in the same order they are provided.', + 'Use `"root"` style unless the payload specifies `"eslint-plugin-react-hooks"`, in which case use that style sample.', + '', + '--- STYLE: root ---', + rootStyle, + '--- END STYLE ---', + '', + '--- STYLE: eslint-plugin-react-hooks ---', + hooksStyle, + '--- END STYLE ---', + '', + `Commits affecting ${spec.name}:`, + ]; + + payload.forEach((item, index) => { + promptParts.push( + `Commit ${index + 1}:`, + `sha: ${item.sha}`, + `style: ${item.style}`, + `packages: ${item.packagesWithVersions.join(', ') || 'none'}`, + `subject: ${item.subject}`, + 'body:', + item.body || '(empty)', + '' + ); + }); + promptParts.push('Return ONLY the JSON array.', ''); + + const prompt = promptParts.join('\n'); + log( + `Invoking ${summarizer} for ${payload.length} commit summaries targeting ${spec.name}.` + ); + log(`Summarizer prompt length: ${prompt.length} characters.`); + + try { + const raw = await runSummarizer(summarizer, prompt); + log(`Summarizer output length: ${raw.length}`); + const parsed = parseSummariesResponse(raw); + if (!parsed) { + throw new Error('Unable to parse summarizer output.'); + } + parsed.forEach(entry => { + const summary = sanitizeSummary(entry.summary || ''); + if (summary) { + summaries.set(entry.sha, summary); + } + }); + } catch (error) { + if (log !== noopLogger) { + log( + `Warning: failed to summarize commits for ${spec.name} with ${summarizer}. Falling back to subjects. ${error.message}` + ); + if (error && error.stack) { + log(error.stack); + } + } + } + + for (let i = 0; i < commits.length; i++) { + const commit = commits[i]; + if (!summaries.has(commit.sha)) { + summaries.set(commit.sha, commit.subject); + } + } + + log(`Summaries available for ${summaries.size} commit(s) for ${spec.name}.`); + + return {packageName: spec.name, summaries}; +} + +async function runSummarizer(command, prompt) { + const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024}; + + if (command === 'codex') { + const {stdout} = await execFileAsync( + 'codex', + ['exec', '--json', prompt], + options + ); + return parseCodexSummary(stdout); + } + + if (command === 'claude') { + const {stdout} = await execFileAsync('claude', ['-p', prompt], options); + return stripClaudeBanner(stdout); + } + + throw new Error(`Unsupported summarizer command: ${command}`); +} + +function parseCodexSummary(output) { + let last = ''; + const lines = output.split('\n'); + for (let i = 0; i < lines.length; i++) { + const trimmed = lines[i].trim(); + if (!trimmed) { + continue; + } + try { + const event = JSON.parse(trimmed); + if ( + event.type === 'item.completed' && + event.item?.type === 'agent_message' + ) { + last = event.item.text || ''; + } + } catch { + last = trimmed; + } + } + return last || output; +} + +function stripClaudeBanner(text) { + return text + .split('\n') + .filter( + line => + line.trim() !== + 'Claude Code at Meta (https://fburl.com/claude.code.users)' + ) + .join('\n') + .trim(); +} + +function parseSummariesResponse(output) { + const trimmed = output.trim(); + const candidates = trimmed + .split('\n') + .map(line => line.trim()) + .filter(Boolean); + + for (let i = candidates.length - 1; i >= 0; i--) { + const candidate = candidates[i]; + if (!candidate) { + continue; + } + try { + const parsed = JSON.parse(candidate); + if (Array.isArray(parsed)) { + return parsed; + } + } catch { + // Try the next candidate. + } + } + + try { + const parsed = JSON.parse(trimmed); + if (Array.isArray(parsed)) { + return parsed; + } + } catch { + // Fall through. + } + + return null; +} + +module.exports = { + summarizePackages, +}; diff --git a/scripts/tasks/generate-changelog/utils.js b/scripts/tasks/generate-changelog/utils.js new file mode 100644 index 00000000000..fe4069eca02 --- /dev/null +++ b/scripts/tasks/generate-changelog/utils.js @@ -0,0 +1,62 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const {execFile} = require('child_process'); +const {promisify} = require('util'); + +const execFileAsync = promisify(execFile); +const repoRoot = path.resolve(__dirname, '..', '..', '..'); + +function isCommandAvailable(command) { + const paths = (process.env.PATH || '').split(path.delimiter); + const extensions = + process.platform === 'win32' && process.env.PATHEXT + ? process.env.PATHEXT.split(';') + : ['']; + + for (let i = 0; i < paths.length; i++) { + const dir = paths[i]; + if (!dir) { + continue; + } + for (let j = 0; j < extensions.length; j++) { + const ext = extensions[j]; + const fullPath = path.join(dir, `${command}${ext}`); + try { + fs.accessSync(fullPath, fs.constants.X_OK); + return true; + } catch { + // Keep searching. + } + } + } + return false; +} + +function noopLogger() {} + +function escapeCsvValue(value) { + if (value == null) { + return ''; + } + + const stringValue = String(value).replace(/\r?\n|\r/g, ' '); + if (stringValue.includes('"') || stringValue.includes(',')) { + return `"${stringValue.replace(/"/g, '""')}"`; + } + return stringValue; +} + +function toCsvRow(values) { + return values.map(escapeCsvValue).join(','); +} + +module.exports = { + execFileAsync, + repoRoot, + isCommandAvailable, + noopLogger, + escapeCsvValue, + toCsvRow, +}; From b4455a6ee6450fae830ae0b6e53e77f7a147bc27 Mon Sep 17 00:00:00 2001 From: Michael H <git@riskymh.dev> Date: Tue, 28 Oct 2025 09:06:45 +1100 Subject: [PATCH 143/276] [react-dom] Include all Node.js APIs in Bun entrypoint for `/server` (#34193) --- packages/react-dom/npm/server.bun.js | 2 ++ packages/react-dom/server.bun.js | 14 ++++++++++ .../src/server/react-dom-server.bun.js | 11 ++++++++ .../src/server/react-dom-server.bun.stable.js | 11 ++++++++ .../src/ReactServerStreamConfigBun.js | 27 ++++++++++++++++--- scripts/rollup/bundles.js | 2 +- scripts/shared/inlinedHostConfigs.js | 2 ++ 7 files changed, 65 insertions(+), 4 deletions(-) diff --git a/packages/react-dom/npm/server.bun.js b/packages/react-dom/npm/server.bun.js index bb44b38ec3c..ec94e0f0bc4 100644 --- a/packages/react-dom/npm/server.bun.js +++ b/packages/react-dom/npm/server.bun.js @@ -12,6 +12,8 @@ if (process.env.NODE_ENV === 'production') { exports.version = b.version; exports.renderToReadableStream = b.renderToReadableStream; +exports.renderToPipeableStream = b.renderToPipeableStream; +exports.resumeToPipeableStream = b.resumeToPipeableStream; exports.resume = b.resume; exports.renderToString = l.renderToString; exports.renderToStaticMarkup = l.renderToStaticMarkup; diff --git a/packages/react-dom/server.bun.js b/packages/react-dom/server.bun.js index 7d054e5534e..13e312e559a 100644 --- a/packages/react-dom/server.bun.js +++ b/packages/react-dom/server.bun.js @@ -38,3 +38,17 @@ export function resume() { arguments, ); } + +export function renderToPipeableStream() { + return require('./src/server/react-dom-server.bun').renderToPipeableStream.apply( + this, + arguments, + ); +} + +export function resumeToPipeableStream() { + return require('./src/server/react-dom-server.bun').resumeToPipeableStream.apply( + this, + arguments, + ); +} diff --git a/packages/react-dom/src/server/react-dom-server.bun.js b/packages/react-dom/src/server/react-dom-server.bun.js index 5ca420c2305..17c9c1f465a 100644 --- a/packages/react-dom/src/server/react-dom-server.bun.js +++ b/packages/react-dom/src/server/react-dom-server.bun.js @@ -8,3 +8,14 @@ */ export * from './ReactDOMFizzServerBun.js'; +export { + renderToPipeableStream, + resumeToPipeableStream, + resume, +} from './ReactDOMFizzServerNode.js'; +export { + prerenderToNodeStream, + prerender, + resumeAndPrerenderToNodeStream, + resumeAndPrerender, +} from './ReactDOMFizzStaticNode.js'; diff --git a/packages/react-dom/src/server/react-dom-server.bun.stable.js b/packages/react-dom/src/server/react-dom-server.bun.stable.js index 4d17773002f..50c83508ba9 100644 --- a/packages/react-dom/src/server/react-dom-server.bun.stable.js +++ b/packages/react-dom/src/server/react-dom-server.bun.stable.js @@ -8,3 +8,14 @@ */ export {renderToReadableStream, version} from './ReactDOMFizzServerBun.js'; +export { + renderToPipeableStream, + resume, + resumeToPipeableStream, +} from './ReactDOMFizzServerNode.js'; +export { + prerenderToNodeStream, + prerender, + resumeAndPrerenderToNodeStream, + resumeAndPrerender, +} from './ReactDOMFizzStaticNode.js'; diff --git a/packages/react-server/src/ReactServerStreamConfigBun.js b/packages/react-server/src/ReactServerStreamConfigBun.js index ef53ca96236..a9079bee43a 100644 --- a/packages/react-server/src/ReactServerStreamConfigBun.js +++ b/packages/react-server/src/ReactServerStreamConfigBun.js @@ -9,13 +9,22 @@ /* global Bun */ +import type {Writable} from 'stream'; + type BunReadableStreamController = ReadableStreamController & { end(): mixed, write(data: Chunk | BinaryChunk): void, error(error: Error): void, flush?: () => void, }; -export type Destination = BunReadableStreamController; + +interface MightBeFlushable { + flush?: () => void; +} + +export type Destination = + | BunReadableStreamController + | (Writable & MightBeFlushable); export type PrecomputedChunk = string; export opaque type Chunk = string; @@ -46,6 +55,7 @@ export function writeChunk( return; } + // $FlowFixMe[incompatible-call]: write() is compatible with both types in Bun destination.write(chunk); } @@ -53,6 +63,7 @@ export function writeChunkAndReturn( destination: Destination, chunk: PrecomputedChunk | Chunk | BinaryChunk, ): boolean { + // $FlowFixMe[incompatible-call]: write() is compatible with both types in Bun return !!destination.write(chunk); } @@ -86,11 +97,21 @@ export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number { } export function closeWithError(destination: Destination, error: mixed): void { + // $FlowFixMe[incompatible-use] // $FlowFixMe[method-unbinding] if (typeof destination.error === 'function') { // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types. destination.error(error); - } else { + + // $FlowFixMe[incompatible-use] + // $FlowFixMe[method-unbinding] + } else if (typeof destination.destroy === 'function') { + // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types. + destination.destroy(error); + + // $FlowFixMe[incompatible-use] + // $FlowFixMe[method-unbinding] + } else if (typeof destination.close === 'function') { // Earlier implementations doesn't support this method. In that environment you're // supposed to throw from a promise returned but we don't return a promise in our // approach. We could fork this implementation but this is environment is an edge @@ -101,7 +122,7 @@ export function closeWithError(destination: Destination, error: mixed): void { } } -export function createFastHash(input: string): string | number { +export function createFastHash(input: string): number { return Bun.hash(input); } diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 69d0b534fce..c4176099b76 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -405,7 +405,7 @@ const bundles = [ global: 'ReactDOMServer', minifyWithProdErrorCodes: false, wrapWithModuleBoundaries: false, - externals: ['react', 'react-dom'], + externals: ['react', 'react-dom', 'crypto', 'stream', 'util'], }, /******* React DOM Fizz Server External Runtime *******/ diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js index 801060c4c54..ebdbf6cf52f 100644 --- a/scripts/shared/inlinedHostConfigs.js +++ b/scripts/shared/inlinedHostConfigs.js @@ -250,6 +250,8 @@ module.exports = [ 'react-dom/server.bun', 'react-dom/src/server/react-dom-server.bun', 'react-dom/src/server/ReactDOMFizzServerBun.js', + 'react-dom/src/server/ReactDOMFizzServerNode.js', + 'react-dom/src/server/ReactDOMFizzStaticNode.js', 'react-dom-bindings', 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js', 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js', From fb0d96073c588ca2f652f9c97849234576db534f Mon Sep 17 00:00:00 2001 From: Ricky <rickhanlonii@gmail.com> Date: Tue, 28 Oct 2025 12:53:30 -0400 Subject: [PATCH 144/276] [tests] disableLegacyMode in test-renderer (#35002) 500 tests failed from not using async act. Will fix the tests and then re-land this. --- .../shared/forks/ReactFeatureFlags.test-renderer.native-fb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index 0ff044250cb..eb56da603d3 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -16,7 +16,7 @@ export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; export const disableLegacyContext = false; export const disableLegacyContextForFunctionComponents = false; -export const disableLegacyMode = true; +export const disableLegacyMode = false; export const disableSchedulerTimeoutInWorkLoop = false; export const disableTextareaChildren = false; export const enableAsyncDebugInfo = false; From 0fa32506dab4293dfffae662e181d2f970aa95ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 28 Oct 2025 13:27:35 -0400 Subject: [PATCH 145/276] [Flight] Clone subsequent I/O nodes if it's resolved more than once (#35003) IO tasks can execute more than once. E.g. a connection may fire each time a new message or chunk comes in or a setInterval every time it executes. We used to treat these all as one I/O node and just updated the end time as we go. Most of the time this was fine because typically you would have a Promise instance whose end time is really the one that gets used as the I/O anyway. However, in a pattern like this it could be problematic: ```js setTimeout(() => { function App() { return Promise.resolve(123); } renderToReadableStream(<App />); }); ``` Because the I/O's end time is before the render started so it should be excluded from being considered I/O as part of the render. It happened outside of render. But because the `Promise.resolve()` is inside render its end time is after the render start so the promise is considered part of the render. This is usually not a problem because the end time of the I/O is still before the start of the render so even though the Promise is valid it has no I/O source so it's properly excluded. However, if the I/O's end time updates before we observe this then the I/O can be considered part of the render. E.g. if this was a setInterval it would be clearly wrong. But it turns out that even setTimeout can sometimes execute more than once in the async_hooks because each run of "process.nextTick" and microtasks respectively are ran in their own before/after. When a micro task executes after this main body it'll update the end time which can then turn the whole I/O as being inside the render. To solve this properly I create a new I/O node each time before() is invoked so that each one gets to observe a different end time. This has a potential CPU and memory allocation cost when there's a lot of them like in a quick stream. --- .../src/ReactFlightServerConfigDebugNode.js | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/react-server/src/ReactFlightServerConfigDebugNode.js b/packages/react-server/src/ReactFlightServerConfigDebugNode.js index e79c19cc73a..9bb521be406 100644 --- a/packages/react-server/src/ReactFlightServerConfigDebugNode.js +++ b/packages/react-server/src/ReactFlightServerConfigDebugNode.js @@ -208,10 +208,29 @@ export function initAsyncDebugInfo(): void { switch (node.tag) { case IO_NODE: { lastRanAwait = null; - // Log the end time when we resolved the I/O. This can happen - // more than once if it's a recurring resource like a connection. + // Log the end time when we resolved the I/O. const ioNode: IONode = (node: any); - ioNode.end = performance.now(); + if (ioNode.end < 0) { + ioNode.end = performance.now(); + } else { + // This can happen more than once if it's a recurring resource like a connection. + // Even for single events like setTimeout, this can happen three times due to ticks + // and microtasks each running its own scope. + // To preserve each operation's separate end time, we create a clone of the IO node. + // Any pre-existing reference will refer to the first resolution and any new resolutions + // will refer to the new node. + const clonedNode: IONode = { + tag: IO_NODE, + owner: ioNode.owner, + stack: ioNode.stack, + start: ioNode.start, + end: performance.now(), + promise: ioNode.promise, + awaited: ioNode.awaited, + previous: ioNode.previous, + }; + pendingOperations.set(asyncId, clonedNode); + } break; } case UNRESOLVED_AWAIT_NODE: { From 4f93170066c5ee7519749b45c5962a6b970cf977 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 29 Oct 2025 10:55:43 -0400 Subject: [PATCH 146/276] [Flight] Cache the value if we visit the same I/O or Promise multiple times along different paths (#35005) We avoid visiting the same async node twice but if we see it again we returned "null" indicating that there's no I/O there. This means that if you have two different Promises both resolving from the same I/O node then we only show one of them. However, in general we treat that as two different I/O entries to allow for things like batching to still show up separately. This fixes that by caching the return value for multiple visits. So if we found I/O (but no user space await) in one path and then we visit that path through a different Promise chain, then we'll still emit it twice. However, if we visit the same exact Promise that we emitted an await on then we skip it. Because there's no need to emit two awaits on the same thing. It only matters when the path ends up informing whether it has I/O or not. --- .../react-server/src/ReactFlightServer.js | 43 ++++++++++++++++--- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 84008f6757a..dcdf631a3d7 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -2316,15 +2316,37 @@ function visitAsyncNode( request: Request, task: Task, node: AsyncSequence, - visited: Set<AsyncSequence | ReactDebugInfo>, + visited: Map< + AsyncSequence | ReactDebugInfo, + void | null | PromiseNode | IONode, + >, cutOff: number, ): void | null | PromiseNode | IONode { if (visited.has(node)) { // It's possible to visit them same node twice when it's part of both an "awaited" path // and a "previous" path. This also gracefully handles cycles which would be a bug. - return null; + return visited.get(node); + } + // Set it as visited early in case we see ourselves before returning. + visited.set(node, null); + const result = visitAsyncNodeImpl(request, task, node, visited, cutOff); + if (result !== null) { + // If we ended up with a value, let's use that value for future visits. + visited.set(node, result); } - visited.add(node); + return result; +} + +function visitAsyncNodeImpl( + request: Request, + task: Task, + node: AsyncSequence, + visited: Map< + AsyncSequence | ReactDebugInfo, + void | null | PromiseNode | IONode, + >, + cutOff: number, +): void | null | PromiseNode | IONode { if (node.end >= 0 && node.end <= request.timeOrigin) { // This was already resolved when we started this render. It must have been either something // that's part of a start up sequence or externally cached data. We exclude that information. @@ -2416,7 +2438,7 @@ function visitAsyncNode( if (promise !== undefined) { const debugInfo = promise._debugInfo; if (debugInfo != null && !visited.has(debugInfo)) { - visited.add(debugInfo); + visited.set(debugInfo, null); forwardDebugInfo(request, task, debugInfo); } } @@ -2483,6 +2505,10 @@ function visitAsyncNode( // Promise that was ultimately awaited by the user space await. serializeIONode(request, ioNode, awaited.promise); + // If we ever visit this I/O node again, skip it because we already emitted this + // exact entry and we don't need two awaits on the same thing. + visited.set(ioNode, null); + // Ensure the owner is already outlined. if (node.owner != null) { outlineComponentInfo(request, node.owner); @@ -2521,7 +2547,7 @@ function visitAsyncNode( if (promise !== undefined) { const debugInfo = promise._debugInfo; if (debugInfo != null && !visited.has(debugInfo)) { - visited.add(debugInfo); + visited.set(debugInfo, null); forwardDebugInfo(request, task, debugInfo); } } @@ -2542,9 +2568,12 @@ function emitAsyncSequence( owner: null | ReactComponentInfo, stack: null | Error, ): void { - const visited: Set<AsyncSequence | ReactDebugInfo> = new Set(); + const visited: Map< + AsyncSequence | ReactDebugInfo, + void | null | PromiseNode | IONode, + > = new Map(); if (__DEV__ && alreadyForwardedDebugInfo) { - visited.add(alreadyForwardedDebugInfo); + visited.set(alreadyForwardedDebugInfo, null); } const awaitedNode = visitAsyncNode(request, task, node, visited, task.time); if (awaitedNode === undefined) { From 0a5fb67ddfbd50740e2cbd6f1e575e834f696444 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 29 Oct 2025 15:05:04 -0400 Subject: [PATCH 147/276] [DevTools] Sort suspense timeline by end time instead of just document order (#35011) Right now it's possible for things like server environments to appear before other content in the timeline just because it's in a different document order. Ofc the order in production is not guaranteed but we can at least use the timing information we have as a hint towards the actual order. Unfortunately since the end time of the RSC stream itself is always after the content that resolved to produce it, it becomes kind of determined by the chunking. Similarly since for a clean refresh, the scripts and styles will typically load after the server content they appear later. Similarly SSR typically finishes after the RSC parts. Therefore a hack here is that I artificially delay everything with a non-null environment (RSC) so that RSC always comes after client-side (Suspense). This is also consistent with how we color things that have an environment even if children are just Suspense. To ensure that we never show a child before a parent, in the timeline, each child has a minimum time of its parent. --- .../src/backend/fiber/renderer.js | 46 +++++++++++++++++-- .../src/devtools/store.js | 43 +++++++++++++++-- .../views/Profiler/CommitTreeBuilder.js | 3 +- .../devtools/views/SuspenseTab/SuspenseTab.js | 2 +- .../views/SuspenseTab/SuspenseTreeContext.js | 4 +- .../src/frontend/types.js | 2 + packages/react-devtools-shared/src/utils.js | 3 +- 7 files changed, 91 insertions(+), 12 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 9de9037690c..8cdc731058f 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -301,6 +301,7 @@ type SuspenseNode = { rects: null | Array<Rect>, // The bounding rects of content children. suspendedBy: Map<ReactIOInfo, Set<DevToolsInstance>>, // Tracks which data we're suspended by and the children that suspend it. environments: Map<string, number>, // Tracks the Flight environment names that suspended this. I.e. if the server blocked this. + endTime: number, // Track a short cut to the maximum end time value within the suspendedBy set. // Track whether any of the items in suspendedBy are unique this this Suspense boundaries or if they're all // also in the parent sets. This determine whether this could contribute in the loading sequence. hasUniqueSuspenders: boolean, @@ -330,6 +331,7 @@ function createSuspenseNode( rects: null, suspendedBy: new Map(), environments: new Map(), + endTime: 0, hasUniqueSuspenders: false, hasUnknownSuspenders: false, }); @@ -2156,8 +2158,8 @@ export function attach( // Regular operations pendingOperations.length + // All suspender changes are batched in a single message. - // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, isSuspended]] - (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 3 : 0), + // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, endTime, isSuspended]] + (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 4 : 0), ); // Identify which renderer this update is coming from. @@ -2242,6 +2244,7 @@ export function attach( } operations[i++] = fiberIdWithChanges; operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0; + operations[i++] = Math.round(suspense.endTime * 1000); const instance = suspense.instance; const isSuspended = // TODO: Track if other SuspenseNode like SuspenseList rows are suspended. @@ -2912,12 +2915,19 @@ export function attach( // like owner instances to link down into the tree. if (!suspendedBySet.has(parentInstance)) { suspendedBySet.add(parentInstance); + const virtualEndTime = getVirtualEndTime(ioInfo); if ( !parentSuspenseNode.hasUniqueSuspenders && !ioExistsInSuspenseAncestor(parentSuspenseNode, ioInfo) ) { // This didn't exist in the parent before, so let's mark this boundary as having a unique suspender. parentSuspenseNode.hasUniqueSuspenders = true; + if (parentSuspenseNode.endTime < virtualEndTime) { + parentSuspenseNode.endTime = virtualEndTime; + } + recordSuspenseSuspenders(parentSuspenseNode); + } else if (parentSuspenseNode.endTime < virtualEndTime) { + parentSuspenseNode.endTime = virtualEndTime; recordSuspenseSuspenders(parentSuspenseNode); } } @@ -2979,6 +2989,26 @@ export function attach( } } + function getVirtualEndTime(ioInfo: ReactIOInfo): number { + if (ioInfo.env != null) { + // Sort client side content first so that scripts and streams don't + // cover up the effect of server time. + return ioInfo.end + 1000000; + } + return ioInfo.end; + } + + function computeEndTime(suspenseNode: SuspenseNode) { + let maxEndTime = 0; + suspenseNode.suspendedBy.forEach((set, ioInfo) => { + const virtualEndTime = getVirtualEndTime(ioInfo); + if (virtualEndTime > maxEndTime) { + maxEndTime = virtualEndTime; + } + }); + return maxEndTime; + } + function removePreviousSuspendedBy( instance: DevToolsInstance, previousSuspendedBy: null | Array<ReactAsyncInfo>, @@ -2996,6 +3026,7 @@ export function attach( if (previousSuspendedBy !== null && suspenseNode !== null) { const nextSuspendedBy = instance.suspendedBy; let changedEnvironment = false; + let mayHaveChangedEndTime = false; for (let i = 0; i < previousSuspendedBy.length; i++) { const asyncInfo = previousSuspendedBy[i]; if ( @@ -3009,6 +3040,11 @@ export function attach( const ioInfo = asyncInfo.awaited; const suspendedBySet = suspenseNode.suspendedBy.get(ioInfo); + if (suspenseNode.endTime === getVirtualEndTime(ioInfo)) { + // This may be the only remaining entry at this end time. Recompute the end time. + mayHaveChangedEndTime = true; + } + if ( suspendedBySet === undefined || !suspendedBySet.delete(instance) @@ -3066,7 +3102,11 @@ export function attach( } } } - if (changedEnvironment) { + const newEndTime = mayHaveChangedEndTime + ? computeEndTime(suspenseNode) + : suspenseNode.endTime; + if (changedEnvironment || newEndTime !== suspenseNode.endTime) { + suspenseNode.endTime = newEndTime; recordSuspenseSuspenders(suspenseNode); } } diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 9377fa01dfe..5d84d12d1b8 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -925,7 +925,7 @@ export default class Store extends EventEmitter<{ */ getSuspendableDocumentOrderSuspense( uniqueSuspendersOnly: boolean, - ): $ReadOnlyArray<SuspenseTimelineStep> { + ): Array<SuspenseTimelineStep> { const target: Array<SuspenseTimelineStep> = []; const roots = this.roots; let rootStep: null | SuspenseTimelineStep = null; @@ -949,17 +949,25 @@ export default class Store extends EventEmitter<{ rootStep = { id: suspense.id, environment: environmentName, + endTime: suspense.endTime, }; target.push(rootStep); - } else if (rootStep.environment === null) { - // If any root has an environment name, then let's use it. - rootStep.environment = environmentName; + } else { + if (rootStep.environment === null) { + // If any root has an environment name, then let's use it. + rootStep.environment = environmentName; + } + if (suspense.endTime > rootStep.endTime) { + // If any root has a higher end time, let's use that. + rootStep.endTime = suspense.endTime; + } } this.pushTimelineStepsInDocumentOrder( suspense.children, target, uniqueSuspendersOnly, environments, + 0, // Don't pass a minimum end time at the root. The root is always first so doesn't matter. ); } } @@ -972,6 +980,7 @@ export default class Store extends EventEmitter<{ target: Array<SuspenseTimelineStep>, uniqueSuspendersOnly: boolean, parentEnvironments: Array<string>, + parentEndTime: number, ): void { for (let i = 0; i < children.length; i++) { const child = this.getSuspenseByID(children[i]); @@ -996,10 +1005,15 @@ export default class Store extends EventEmitter<{ unionEnvironments.length > 0 ? unionEnvironments[unionEnvironments.length - 1] : null; + // The end time of a child boundary can in effect never be earlier than its parent even if + // everything unsuspended before that. + const maxEndTime = + parentEndTime > child.endTime ? parentEndTime : child.endTime; if (hasRects && (!uniqueSuspendersOnly || child.hasUniqueSuspenders)) { target.push({ id: child.id, environment: environmentName, + endTime: maxEndTime, }); } this.pushTimelineStepsInDocumentOrder( @@ -1007,10 +1021,28 @@ export default class Store extends EventEmitter<{ target, uniqueSuspendersOnly, unionEnvironments, + maxEndTime, ); } } + getEndTimeOrDocumentOrderSuspense( + uniqueSuspendersOnly: boolean, + ): $ReadOnlyArray<SuspenseTimelineStep> { + const timeline = + this.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly); + if (timeline.length === 0) { + return timeline; + } + const root = timeline[0]; + // We mutate in place since we assume we've got a fresh array. + timeline.sort((a, b) => { + // Root is always first + return a === root ? -1 : b === root ? 1 : a.endTime - b.endTime; + }); + return timeline; + } + getRendererIDForElement(id: number): number | null { let current = this._idToElement.get(id); while (current !== undefined) { @@ -1688,6 +1720,7 @@ export default class Store extends EventEmitter<{ hasUniqueSuspenders: false, isSuspended: isSuspended, environments: [], + endTime: 0, }); hasSuspenseTreeChanged = true; @@ -1884,6 +1917,7 @@ export default class Store extends EventEmitter<{ for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const id = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const endTime = operations[i++] / 1000; const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; const environmentNames = []; @@ -1919,6 +1953,7 @@ export default class Store extends EventEmitter<{ } suspense.hasUniqueSuspenders = hasUniqueSuspenders; + suspense.endTime = endTime; suspense.isSuspended = isSuspended; suspense.environments = environmentNames; } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js index 4addf109166..d2226a183a1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js @@ -460,13 +460,14 @@ function updateTree( for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const suspenseNodeId = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const endTime = operations[i++] / 1000; const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; i += environmentNamesLength; if (__DEBUG__) { debug( 'Suspender changes', - `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, + `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} ending at ${String(endTime)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, ); } } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index 1344faf0a29..3b0839ccba2 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -74,7 +74,7 @@ function ToggleUniqueSuspenders() { function handleToggleUniqueSuspenders() { const nextUniqueSuspendersOnly = !uniqueSuspendersOnly; // TODO: Handle different timeline modes (e.g. random order) - const nextTimeline = store.getSuspendableDocumentOrderSuspense( + const nextTimeline = store.getEndTimeOrDocumentOrderSuspense( nextUniqueSuspendersOnly, ); suspenseTreeDispatch({ diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js index b1ba98acfb5..6cb4eb7a487 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js @@ -111,7 +111,7 @@ type Props = { function getInitialState(store: Store): SuspenseTreeState { const uniqueSuspendersOnly = true; const timeline = - store.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly); + store.getEndTimeOrDocumentOrderSuspense(uniqueSuspendersOnly); const timelineIndex = timeline.length - 1; const selectedSuspenseID = timelineIndex === -1 ? null : timeline[timelineIndex].id; @@ -182,7 +182,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { } // TODO: Handle different timeline modes (e.g. random order) - const nextTimeline = store.getSuspendableDocumentOrderSuspense( + const nextTimeline = store.getEndTimeOrDocumentOrderSuspense( state.uniqueSuspendersOnly, ); diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js index 4eed49e6bac..130676ac715 100644 --- a/packages/react-devtools-shared/src/frontend/types.js +++ b/packages/react-devtools-shared/src/frontend/types.js @@ -196,6 +196,7 @@ export type Rect = { export type SuspenseTimelineStep = { id: SuspenseNode['id'], // TODO: Will become a group. environment: null | string, + endTime: number, }; export type SuspenseNode = { @@ -207,6 +208,7 @@ export type SuspenseNode = { hasUniqueSuspenders: boolean, isSuspended: boolean, environments: Array<string>, + endTime: number, }; // Serialized version of ReactIOInfo diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 6d31888cd9d..d0784eea036 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -432,11 +432,12 @@ export function printOperationsArray(operations: Array<number>) { for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const id = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const endTime = operations[i++] / 1000; const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; i += environmentNamesLength; logs.push( - `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, + `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} ending at ${String(endTime)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, ); } From 3a0ab8a7eea22394ba8948ff02af1c6d6e6e1921 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 29 Oct 2025 21:49:35 -0400 Subject: [PATCH 148/276] [DevTools] Synchronize Scroll Position Between Suspense Tab and Main Document (#34641) It's annoying to have to try to find where it lines up with no hints. This way when you hover over something it should be on screen. The strategy I went with is that it scrolls to a percentage along the scrollable axis but the two might not be exactly the same. Partially because they have different aspect ratios but also because suspended boundaries can shrink the document while the suspense tab needs to still be able to show the boundaries that are currently invisible. --- .../src/__tests__/bridge-test.js | 4 +- .../src/backend/views/Highlighter/index.js | 60 +++++++++ packages/react-devtools-shared/src/bridge.js | 6 +- .../views/SuspenseTab/SuspenseRects.js | 13 +- .../devtools/views/SuspenseTab/SuspenseTab.js | 125 +++++++++++++++++- 5 files changed, 199 insertions(+), 9 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/bridge-test.js b/packages/react-devtools-shared/src/__tests__/bridge-test.js index fe265e326c9..1cc47fbe5d8 100644 --- a/packages/react-devtools-shared/src/__tests__/bridge-test.js +++ b/packages/react-devtools-shared/src/__tests__/bridge-test.js @@ -27,7 +27,7 @@ describe('Bridge', () => { // Check that we're wired up correctly. bridge.send('reloadAppForProfiling'); jest.runAllTimers(); - expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling'); + expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling', undefined); // Should flush pending messages and then shut down. wall.send.mockClear(); @@ -37,7 +37,7 @@ describe('Bridge', () => { jest.runAllTimers(); expect(wall.send).toHaveBeenCalledWith('update', '1'); expect(wall.send).toHaveBeenCalledWith('update', '2'); - expect(wall.send).toHaveBeenCalledWith('shutdown'); + expect(wall.send).toHaveBeenCalledWith('shutdown', undefined); expect(shutdownCallback).toHaveBeenCalledTimes(1); // Verify that the Bridge doesn't send messages after shutdown. diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index b67b3964ed5..0adf3ff64ef 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -33,6 +33,66 @@ export default function setupHighlighter( bridge.addListener('shutdown', stopInspectingHost); bridge.addListener('startInspectingHost', startInspectingHost); bridge.addListener('stopInspectingHost', stopInspectingHost); + bridge.addListener('scrollTo', scrollDocumentTo); + bridge.addListener('requestScrollPosition', sendScroll); + + let applyingScroll = false; + + function scrollDocumentTo({ + left, + top, + right, + bottom, + }: { + left: number, + top: number, + right: number, + bottom: number, + }) { + if ( + left === Math.round(window.scrollX) && + top === Math.round(window.scrollY) + ) { + return; + } + applyingScroll = true; + window.scrollTo({ + top: top, + left: left, + behavior: 'smooth', + }); + } + + let scrollTimer = null; + function sendScroll() { + if (scrollTimer) { + clearTimeout(scrollTimer); + scrollTimer = null; + } + if (applyingScroll) { + return; + } + const left = window.scrollX; + const top = window.scrollY; + const right = left + window.innerWidth; + const bottom = top + window.innerHeight; + bridge.send('scrollTo', {left, top, right, bottom}); + } + + function scrollEnd() { + // Upon scrollend send it immediately. + sendScroll(); + applyingScroll = false; + } + + document.addEventListener('scroll', () => { + if (!scrollTimer) { + // Periodically synchronize the scroll while scrolling. + scrollTimer = setTimeout(sendScroll, 400); + } + }); + + document.addEventListener('scrollend', scrollEnd); function startInspectingHost(onlySuspenseNodes: boolean) { inspectOnlySuspenseNodes = onlySuspenseNodes; diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index 683b3419202..b00867cc0cb 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -217,6 +217,7 @@ export type BackendEvents = { selectElement: [number], shutdown: [], stopInspectingHost: [boolean], + scrollTo: [{left: number, top: number, right: number, bottom: number}], syncSelectionToBuiltinElementsPanel: [], unsupportedRendererVersion: [], @@ -270,6 +271,8 @@ type FrontendEvents = { startProfiling: [StartProfilingParams], stopInspectingHost: [], scrollToHostInstance: [ScrollToHostInstance], + scrollTo: [{left: number, top: number, right: number, bottom: number}], + requestScrollPosition: [], stopProfiling: [], storeAsGlobal: [StoreAsGlobalParams], updateComponentFilters: [Array<ComponentFilter>], @@ -416,7 +419,8 @@ class Bridge< try { if (this._messageQueue.length) { for (let i = 0; i < this._messageQueue.length; i += 2) { - this._wall.send(this._messageQueue[i], ...this._messageQueue[i + 1]); + // This only supports one argument in practice but the types suggests it should support multiple. + this._wall.send(this._messageQueue[i], this._messageQueue[i + 1][0]); } this._messageQueue.length = 0; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index d5f44eeb32b..556238f1ea9 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -18,7 +18,7 @@ import typeof { } from 'react-dom-bindings/src/events/SyntheticEvent'; import * as React from 'react'; -import {createContext, useContext} from 'react'; +import {createContext, useContext, useLayoutEffect} from 'react'; import { TreeDispatcherContext, TreeStateContext, @@ -435,7 +435,11 @@ function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node { const ViewBox = createContext<Rect>((null: any)); -function SuspenseRectsContainer(): React$Node { +function SuspenseRectsContainer({ + scaleRef, +}: { + scaleRef: {current: number}, +}): React$Node { const store = useContext(StoreContext); const {inspectedElementID} = useContext(TreeStateContext); const treeDispatch = useContext(TreeDispatcherContext); @@ -505,6 +509,11 @@ function SuspenseRectsContainer(): React$Node { const rootEnvironment = timeline.length === 0 ? null : timeline[0].environment; + useLayoutEffect(() => { + // 100% of the width represents this many pixels in the real document. + scaleRef.current = boundingBoxWidth; + }, [boundingBoxWidth]); + return ( <div className={ diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index 3b0839ccba2..766e6f51b29 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -35,7 +35,7 @@ import { SuspenseTreeDispatcherContext, SuspenseTreeStateContext, } from './SuspenseTreeContext'; -import {StoreContext, OptionsContext} from '../context'; +import {BridgeContext, StoreContext, OptionsContext} from '../context'; import Button from '../Button'; import Toggle from '../Toggle'; import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent'; @@ -157,6 +157,119 @@ function ToggleInspectedElement({ ); } +function SynchronizedScrollContainer({ + className, + children, + scaleRef, +}: { + className?: string, + children?: React.Node, + scaleRef: {current: number}, +}) { + const bridge = useContext(BridgeContext); + const ref = useRef(null); + const applyingScrollRef = useRef(false); + + // TODO: useEffectEvent + function scrollContainerTo({ + left, + top, + right, + bottom, + }: { + left: number, + top: number, + right: number, + bottom: number, + }): void { + const element = ref.current; + if (element === null) { + return; + } + const scale = scaleRef.current / element.clientWidth; + const targetLeft = Math.round(left / scale); + const targetTop = Math.round(top / scale); + if ( + targetLeft !== Math.round(element.scrollLeft) || + targetTop !== Math.round(element.scrollTop) + ) { + // Disable scroll events until we've applied the new scroll position. + applyingScrollRef.current = true; + element.scrollTo({ + left: targetLeft, + top: targetTop, + behavior: 'smooth', + }); + } + } + + useEffect(() => { + const callback = scrollContainerTo; + bridge.addListener('scrollTo', callback); + // Ask for the current scroll position when we mount so we can attach ourselves to it. + bridge.send('requestScrollPosition'); + return () => bridge.removeListener('scrollTo', callback); + }, [bridge]); + + const scrollTimer = useRef<null | TimeoutID>(null); + + // TODO: useEffectEvent + function sendScroll() { + if (scrollTimer.current) { + clearTimeout(scrollTimer.current); + scrollTimer.current = null; + } + if (applyingScrollRef.current) { + return; + } + const element = ref.current; + if (element === null) { + return; + } + const scale = scaleRef.current / element.clientWidth; + const left = element.scrollLeft * scale; + const top = element.scrollTop * scale; + const right = left + element.clientWidth * scale; + const bottom = top + element.clientHeight * scale; + bridge.send('scrollTo', {left, top, right, bottom}); + } + + // TODO: useEffectEvent + function throttleScroll() { + if (!scrollTimer.current) { + // Periodically synchronize the scroll while scrolling. + scrollTimer.current = setTimeout(sendScroll, 400); + } + } + + function scrollEnd() { + // Upon scrollend send it immediately. + sendScroll(); + applyingScrollRef.current = false; + } + + useEffect(() => { + const element = ref.current; + if (element === null) { + return; + } + const scrollCallback = throttleScroll; + const scrollEndCallback = scrollEnd; + element.addEventListener('scroll', scrollCallback); + element.addEventListener('scrollend', scrollEndCallback); + return () => { + element.removeEventListener('scroll', scrollCallback); + element.removeEventListener('scrollend', scrollEndCallback); + }; + }, [ref]); + + return ( + <div className={className} ref={ref}> + {children} + </div> + ); +} + function SuspenseTab(_: {}) { const store = useContext(StoreContext); const {hideSettings} = useContext(OptionsContext); @@ -341,6 +454,8 @@ function SuspenseTab(_: {}) { } }; + const scaleRef = useRef(0); + return ( <SettingsModalContextController> <div className={styles.SuspenseTab} ref={wrapperTreeRef}> @@ -388,9 +503,11 @@ function SuspenseTab(_: {}) { orientation="horizontal" /> </header> - <div className={styles.Rects}> - <SuspenseRects /> - </div> + <SynchronizedScrollContainer + className={styles.Rects} + scaleRef={scaleRef}> + <SuspenseRects scaleRef={scaleRef} /> + </SynchronizedScrollContainer> <footer className={styles.SuspenseTreeViewFooter}> <SuspenseTimeline /> <div className={styles.SuspenseTreeViewFooterButtons}> From 6fb77544940d033355c660556dbc48a08d1d6708 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 30 Oct 2025 15:26:49 -0400 Subject: [PATCH 149/276] [DevTools] Render selected outline on top of every other rect (#35012) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When rects are close together (or overlapping) the outline can end up being covered up by sibling rects or deeper rects. This renders the selected outline on top of everything so it's always visible. <img width="275" height="730" alt="Screenshot 2025-10-29 at 8 43 28 PM" src="https://github.com/user-attachments/assets/69224883-f548-45ec-ada1-1a04ec17eaf5" /> <img width="266" height="737" alt="Screenshot 2025-10-29 at 8 58 53 PM" src="https://github.com/user-attachments/assets/946f7dde-450d-49fd-9fbd-57487f67f461" /> Additionally, this makes it so that it's not part of the translucent tree when things are hidden by the timeline. That way it's easier to see what is selected inside a hidden tree. <img width="498" height="196" alt="Screenshot 2025-10-29 at 8 45 24 PM" src="https://github.com/user-attachments/assets/723107ab-a92c-42c2-8a7d-a548ac3332d0" /> <img width="571" height="735" alt="Screenshot 2025-10-29 at 8 59 06 PM" src="https://github.com/user-attachments/assets/d653f1a7-4096-45c3-b92a-ef155d4742e6" /> --- .../views/SuspenseTab/SuspenseRects.css | 10 ++--- .../views/SuspenseTab/SuspenseRects.js | 42 +++++++++++++++---- 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 0af7baf51a6..aadb6a0fba0 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -6,12 +6,6 @@ border-radius: 0.25rem; } -.SuspenseRectsContainer[data-highlighted='true'] { - outline-color: var(--color-transition); - outline-style: solid; - outline-width: 4px; -} - .SuspenseRectsRoot { cursor: pointer; outline-color: var(--color-transition); @@ -106,6 +100,10 @@ pointer-events: none; } +.SuspenseRectOutlineRoot { + outline-color: var(--color-transition); +} + .SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect { box-shadow: none; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 556238f1ea9..e08cdc41736 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -236,13 +236,6 @@ function SuspenseRects({ <span>{suspense.name}</span> </ScaledRect> ) : null} - {selected && visible ? ( - <ScaledRect - className={styles.SuspenseRectOutline} - rect={boundingBox} - adjust={true} - /> - ) : null} </ViewBox.Provider> </ScaledRect> ); @@ -514,6 +507,28 @@ function SuspenseRectsContainer({ scaleRef.current = boundingBoxWidth; }, [boundingBoxWidth]); + let selectedBoundingBox = null; + let selectedEnvironment = null; + if (isRootSelected) { + selectedBoundingBox = boundingBox; + selectedEnvironment = rootEnvironment; + } else if (inspectedElementID !== null) { + const selectedSuspenseNode = store.getSuspenseByID(inspectedElementID); + if ( + selectedSuspenseNode !== null && + (selectedSuspenseNode.hasUniqueSuspenders || !uniqueSuspendersOnly) + ) { + selectedBoundingBox = getBoundingBox(selectedSuspenseNode.rects); + for (let i = 0; i < timeline.length; i++) { + const timelineStep = timeline[i]; + if (timelineStep.id === inspectedElementID) { + selectedEnvironment = timelineStep.environment; + break; + } + } + } + } + return ( <div className={ @@ -524,7 +539,6 @@ function SuspenseRectsContainer({ } onClick={handleClick} onDoubleClick={handleDoubleClick} - data-highlighted={isRootSelected} data-hovered={isRootHovered}> <ViewBox.Provider value={boundingBox}> <div @@ -533,6 +547,18 @@ function SuspenseRectsContainer({ {roots.map(rootID => { return <SuspenseRectsRoot key={rootID} rootID={rootID} />; })} + {selectedBoundingBox !== null ? ( + <ScaledRect + className={ + styles.SuspenseRectOutline + + (isRootSelected ? ' ' + styles.SuspenseRectOutlineRoot : '') + + ' ' + + getClassNameForEnvironment(selectedEnvironment) + } + rect={selectedBoundingBox} + adjust={true} + /> + ) : null} </div> </ViewBox.Provider> </div> From c9ddee7e36c64311ad4e5e7acfca6c092d8a6264 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Fri, 31 Oct 2025 12:57:11 +0100 Subject: [PATCH 150/276] [DevTools] Reset forced states when changing component filters (#34929) --- .../src/__tests__/setupTests.js | 10 +++ .../__tests__/storeComponentFilters-test.js | 78 +++++++++++++++++++ .../src/backend/fiber/renderer.js | 40 ++++++++++ 3 files changed, 128 insertions(+) diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js index 610191fb2cd..aad3fbc00ea 100644 --- a/packages/react-devtools-shared/src/__tests__/setupTests.js +++ b/packages/react-devtools-shared/src/__tests__/setupTests.js @@ -116,6 +116,16 @@ function shouldIgnoreConsoleErrorOrWarn(args) { return false; } + const maybeError = args[1]; + if ( + maybeError !== null && + typeof maybeError === 'object' && + maybeError.message === 'Simulated error coming from DevTools' + ) { + // Error from forcing an error boundary. + return true; + } + return global._ignoredErrorOrWarningMessages.some(errorOrWarningMessage => { return firstArg.indexOf(errorOrWarningMessage) !== -1; }); diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js index 439315dc858..ce423e94895 100644 --- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js @@ -18,12 +18,14 @@ import { describe('Store component filters', () => { let React; let Types; + let agent; let bridge: FrontendBridge; let store: Store; let utils; let actAsync; beforeEach(() => { + agent = global.agent; bridge = global.bridge; store = global.store; store.collapseNodesByDefault = false; @@ -740,4 +742,80 @@ describe('Store component filters', () => { `); }); }); + + // @reactVersion >= 16.6 + it('resets forced error and fallback states when filters are changed', async () => { + store.componentFilters = []; + class ErrorBoundary extends React.Component { + state = {hasError: false}; + + static getDerivedStateFromError() { + return {hasError: true}; + } + + render() { + if (this.state.hasError) { + return <div key="did-error" />; + } + return this.props.children; + } + } + + function App() { + return ( + <> + <React.Suspense fallback={<div key="loading" />}> + <div key="suspense-content" /> + </React.Suspense> + <ErrorBoundary> + <div key="error-content" /> + </ErrorBoundary> + </> + ); + } + + await actAsync(async () => { + render(<App />); + }); + const rendererID = utils.getRendererID(); + await actAsync(() => { + agent.overrideSuspense({ + id: store.getElementIDAtIndex(2), + rendererID, + forceFallback: true, + }); + agent.overrideError({ + id: store.getElementIDAtIndex(4), + rendererID, + forceError: true, + }); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + ▾ <Suspense> + <div key="loading"> + ▾ <ErrorBoundary> + <div key="did-error"> + [suspense-root] rects={[]} + <Suspense name="App" rects={[]}> + `); + + await actAsync(() => { + store.componentFilters = [ + utils.createElementTypeFilter(Types.ElementTypeFunction, true), + ]; + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <Suspense> + <div key="suspense-content"> + ▾ <ErrorBoundary> + <div key="error-content"> + [suspense-root] rects={[]} + <Suspense name="Unknown" rects={[]}> + `); + }); }); diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 8cdc731058f..ddafd014e7f 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -1512,6 +1512,11 @@ export function attach( throw Error('Cannot modify filter preferences while profiling'); } + const previousForcedFallbacks = + forceFallbackForFibers.size > 0 ? new Set(forceFallbackForFibers) : null; + const previousForcedErrors = + forceErrorForFibers.size > 0 ? new Map(forceErrorForFibers) : null; + // Recursively unmount all roots. hook.getFiberRoots(rendererID).forEach(root => { const rootInstance = rootToFiberInstanceMap.get(root); @@ -1532,6 +1537,41 @@ export function attach( // Reset pseudo counters so that new path selections will be persisted. rootDisplayNameCounter.clear(); + // We just cleared all the forced states. Schedule updates on the affected Fibers + // so that we get their initial states again according to the new filters. + if (typeof scheduleUpdate === 'function') { + if (previousForcedFallbacks !== null) { + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const fiber of previousForcedFallbacks) { + if (typeof scheduleRetry === 'function') { + scheduleRetry(fiber); + } else { + scheduleUpdate(fiber); + } + } + } + if ( + previousForcedErrors !== null && + typeof setErrorHandler === 'function' + ) { + // Unlike for Suspense, disabling the forced error state requires setting + // the status to false first. `shouldErrorFiberAccordingToMap` will clear + // the Fibers later. + setErrorHandler(shouldErrorFiberAccordingToMap); + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const [fiber, shouldError] of previousForcedErrors) { + forceErrorForFibers.set(fiber, false); + if (shouldError) { + if (typeof scheduleRetry === 'function') { + scheduleRetry(fiber); + } else { + scheduleUpdate(fiber); + } + } + } + } + } + // Recursively re-mount all roots with new filter criteria applied. hook.getFiberRoots(rendererID).forEach(root => { const current = root.current; From 26cf2804802f3d32c4d8f9db73ddea12ad6c1670 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 31 Oct 2025 12:58:18 -0400 Subject: [PATCH 151/276] Switch the default revealOrder to "forwards" and tail "hidden" on SuspenseList (#35018) We have warned about this for a while now so we can make the switch. Often when you reach for SuspenseList, you mean forwards. It doesn't make sense to have the default to just be a noop. While "together" is another useful mode that's more like a Group so isn't so associated with the default as List. So we're switching it. However, tail=hidden isn't as obvious of a default it does allow for a convenient pattern for streaming in list of items by default. This doesn't yet switch the rendering order of "backwards". That's coming in a follow up. --- .../ReactDOMFizzSuspenseList-test.js | 21 ++- .../react-reconciler/src/ReactChildFiber.js | 3 +- .../src/ReactFiberBeginWork.js | 80 +++++------- .../src/ReactFiberCompleteWork.js | 29 +++-- .../src/ReactFiberSuspenseComponent.js | 5 +- .../src/__tests__/ReactSuspenseList-test.js | 121 ++++++++++-------- packages/react-server/src/ReactFizzServer.js | 8 +- 7 files changed, 142 insertions(+), 125 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js index 74db51d2429..f434bf3cda8 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js @@ -134,7 +134,7 @@ describe('ReactDOMFizzSuspenseList', () => { } // @gate enableSuspenseList - it('shows content independently by default', async () => { + it('shows content forwards by default', async () => { const A = createAsyncText('A'); const B = createAsyncText('B'); const C = createAsyncText('C'); @@ -157,31 +157,38 @@ describe('ReactDOMFizzSuspenseList', () => { ); } - await A.resolve(); + await C.resolve(); await serverAct(async () => { const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />); pipe(writable); }); - assertLog(['A', 'Suspend! [B]', 'Suspend! [C]', 'Loading B', 'Loading C']); + assertLog([ + 'Suspend! [A]', + 'Suspend! [B]', // TODO: Defer rendering the content after fallback if previous suspended, + 'C', + 'Loading A', + 'Loading B', + 'Loading C', + ]); expect(getVisibleChildren(container)).toEqual( <div> - <span>A</span> + <span>Loading A</span> <span>Loading B</span> <span>Loading C</span> </div>, ); - await serverAct(() => C.resolve()); - assertLog(['C']); + await serverAct(() => A.resolve()); + assertLog(['A']); expect(getVisibleChildren(container)).toEqual( <div> <span>A</span> <span>Loading B</span> - <span>C</span> + <span>Loading C</span> </div>, ); diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js index f0d9c2e012e..8daf7fde4b4 100644 --- a/packages/react-reconciler/src/ReactChildFiber.js +++ b/packages/react-reconciler/src/ReactChildFiber.js @@ -2104,7 +2104,8 @@ export function validateSuspenseListChildren( ) { if (__DEV__) { if ( - (revealOrder === 'forwards' || + (revealOrder == null || + revealOrder === 'forwards' || revealOrder === 'backwards' || revealOrder === 'unstable_legacy-backwards') && children !== undefined && diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index 7251e52dd61..32ecd33edca 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -3245,6 +3245,7 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) { if (__DEV__) { const cacheKey = revealOrder == null ? 'null' : revealOrder; if ( + revealOrder != null && revealOrder !== 'forwards' && revealOrder !== 'unstable_legacy-backwards' && revealOrder !== 'together' && @@ -3252,13 +3253,7 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) { !didWarnAboutRevealOrder[cacheKey] ) { didWarnAboutRevealOrder[cacheKey] = true; - if (revealOrder == null) { - console.error( - 'The default for the <SuspenseList revealOrder="..."> prop is changing. ' + - 'To be future compatible you must explictly specify either ' + - '"independent" (the current default), "together", "forwards" or "legacy_unstable-backwards".', - ); - } else if (revealOrder === 'backwards') { + if (revealOrder === 'backwards') { console.error( 'The rendering order of <SuspenseList revealOrder="backwards"> is changing. ' + 'To be future compatible you must specify revealOrder="legacy_unstable-backwards" instead.', @@ -3314,18 +3309,7 @@ function validateTailOptions( const cacheKey = tailMode == null ? 'null' : tailMode; if (!didWarnAboutTailOptions[cacheKey]) { if (tailMode == null) { - if ( - revealOrder === 'forwards' || - revealOrder === 'backwards' || - revealOrder === 'unstable_legacy-backwards' - ) { - didWarnAboutTailOptions[cacheKey] = true; - console.error( - 'The default for the <SuspenseList tail="..."> prop is changing. ' + - 'To be future compatible you must explictly specify either ' + - '"visible" (the current default), "collapsed" or "hidden".', - ); - } + // The default tail is now "hidden". } else if ( tailMode !== 'visible' && tailMode !== 'collapsed' && @@ -3338,6 +3322,7 @@ function validateTailOptions( tailMode, ); } else if ( + revealOrder != null && revealOrder !== 'forwards' && revealOrder !== 'backwards' && revealOrder !== 'unstable_legacy-backwards' @@ -3345,7 +3330,7 @@ function validateTailOptions( didWarnAboutTailOptions[cacheKey] = true; console.error( '<SuspenseList tail="%s" /> is only valid if revealOrder is ' + - '"forwards" or "backwards". ' + + '"forwards" (default) or "backwards". ' + 'Did you mean to specify revealOrder="forwards"?', tailMode, ); @@ -3449,30 +3434,6 @@ function updateSuspenseListComponent( workInProgress.memoizedState = null; } else { switch (revealOrder) { - case 'forwards': { - const lastContentRow = findLastContentRow(workInProgress.child); - let tail; - if (lastContentRow === null) { - // The whole list is part of the tail. - // TODO: We could fast path by just rendering the tail now. - tail = workInProgress.child; - workInProgress.child = null; - } else { - // Disconnect the tail rows after the content row. - // We're going to render them separately later. - tail = lastContentRow.sibling; - lastContentRow.sibling = null; - } - initSuspenseListRenderState( - workInProgress, - false, // isBackwards - tail, - lastContentRow, - tailMode, - treeForkCount, - ); - break; - } case 'backwards': case 'unstable_legacy-backwards': { // We're going to find the first row that has existing content. @@ -3517,10 +3478,37 @@ function updateSuspenseListComponent( ); break; } - default: { - // The default reveal order is the same as not having + case 'independent': { + // The "independent" reveal order is the same as not having // a boundary. workInProgress.memoizedState = null; + break; + } + // The default is now forwards. + case 'forwards': + default: { + const lastContentRow = findLastContentRow(workInProgress.child); + let tail; + if (lastContentRow === null) { + // The whole list is part of the tail. + // TODO: We could fast path by just rendering the tail now. + tail = workInProgress.child; + workInProgress.child = null; + } else { + // Disconnect the tail rows after the content row. + // We're going to render them separately later. + tail = lastContentRow.sibling; + lastContentRow.sibling = null; + } + initSuspenseListRenderState( + workInProgress, + false, // isBackwards + tail, + lastContentRow, + tailMode, + treeForkCount, + ); + break; } } } diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js index d3abcb466e5..5ccf1b2ac7a 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js @@ -698,7 +698,11 @@ function cutOffTailIfNeeded( return; } switch (renderState.tailMode) { - case 'hidden': { + case 'visible': { + // Everything should remain as it was. + break; + } + case 'collapsed': { // Any insertions at the end of the tail list after this point // should be invisible. If there are already mounted boundaries // anything before them are not considered for collapsing. @@ -716,7 +720,13 @@ function cutOffTailIfNeeded( // last rendered item. if (lastTailNode === null) { // All remaining items in the tail are insertions. - renderState.tail = null; + if (!hasRenderedATailFallback && renderState.tail !== null) { + // We suspended during the head. We want to show at least one + // row at the tail. So we'll keep on and cut off the rest. + renderState.tail.sibling = null; + } else { + renderState.tail = null; + } } else { // Detach the insertion after the last node that was already // inserted. @@ -724,7 +734,9 @@ function cutOffTailIfNeeded( } break; } - case 'collapsed': { + // Hidden is now the default. + case 'hidden': + default: { // Any insertions at the end of the tail list after this point // should be invisible. If there are already mounted boundaries // anything before them are not considered for collapsing. @@ -742,13 +754,7 @@ function cutOffTailIfNeeded( // last rendered item. if (lastTailNode === null) { // All remaining items in the tail are insertions. - if (!hasRenderedATailFallback && renderState.tail !== null) { - // We suspended during the head. We want to show at least one - // row at the tail. So we'll keep on and cut off the rest. - renderState.tail.sibling = null; - } else { - renderState.tail = null; - } + renderState.tail = null; } else { // Detach the insertion after the last node that was already // inserted. @@ -1795,7 +1801,8 @@ function completeWork( // This might have been modified. if ( renderState.tail === null && - renderState.tailMode === 'hidden' && + renderState.tailMode !== 'collapsed' && + renderState.tailMode !== 'visible' && !renderedTail.alternate && !getIsHydrating() // We don't cut it if we're hydrating. ) { diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.js index 64ab4f29fcd..695c3697154 100644 --- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.js +++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.js @@ -79,10 +79,7 @@ export function findFirstSuspended(row: Fiber): null | Fiber { node.tag === SuspenseListComponent && // Independent revealOrder can't be trusted because it doesn't // keep track of whether it suspended or not. - (node.memoizedProps.revealOrder === 'forwards' || - node.memoizedProps.revealOrder === 'backwards' || - node.memoizedProps.revealOrder === 'unstable_legacy-backwards' || - node.memoizedProps.revealOrder === 'together') + node.memoizedProps.revealOrder !== 'independent' ) { const didSuspend = (node.flags & DidCapture) !== NoFlags; if (didSuspend) { diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js index bfbf165dbab..34600b7a672 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js @@ -218,7 +218,7 @@ describe('ReactSuspenseList', () => { }); // @gate enableSuspenseList - it('warns if no revealOrder is specified', async () => { + it('behaves as revealOrder=forwards by default', async () => { const A = createAsyncText('A'); const B = createAsyncText('B'); const C = createAsyncText('C'); @@ -239,54 +239,36 @@ describe('ReactSuspenseList', () => { ); } + ReactNoop.render(<Foo />); + + await waitForAll(['Suspend! [A]', 'Loading A']); + + expect(ReactNoop).toMatchRenderedOutput(null); + await A.resolve(); - ReactNoop.render(<Foo />); + await waitForAll(['A', 'Suspend! [B]', 'Loading B']); - await waitForAll([ - 'A', - 'Suspend! [B]', - 'Loading B', - 'Suspend! [C]', - 'Loading C', - // pre-warming - 'Suspend! [B]', - 'Suspend! [C]', - ]); + // Incremental loading is suspended. + jest.advanceTimersByTime(500); - assertConsoleErrorDev([ - 'The default for the <SuspenseList revealOrder="..."> prop is changing. ' + - 'To be future compatible you must explictly specify either ' + - '"independent" (the current default), "together", "forwards" or "legacy_unstable-backwards".' + - '\n in SuspenseList (at **)' + - '\n in Foo (at **)', - ]); + expect(ReactNoop).toMatchRenderedOutput(<span>A</span>); - expect(ReactNoop).toMatchRenderedOutput( - <> - <span>A</span> - <span>Loading B</span> - <span>Loading C</span> - </>, - ); + await act(() => B.resolve()); + assertLog(['B', 'Suspend! [C]', 'Loading C']); - await act(() => C.resolve()); - assertLog( - gate('alwaysThrottleRetries') - ? ['Suspend! [B]', 'C', 'Suspend! [B]'] - : ['C'], - ); + // Incremental loading is suspended. + jest.advanceTimersByTime(500); expect(ReactNoop).toMatchRenderedOutput( <> <span>A</span> - <span>Loading B</span> - <span>C</span> + <span>B</span> </>, ); - await act(() => B.resolve()); - assertLog(['B']); + await act(() => C.resolve()); + assertLog(['C']); expect(ReactNoop).toMatchRenderedOutput( <> @@ -1699,26 +1681,65 @@ describe('ReactSuspenseList', () => { }); // @gate enableSuspenseList - it('warns if no tail option is specified', async () => { + it('behaves as tail=hidden if no tail option is specified', async () => { + const A = createAsyncText('A'); + const B = createAsyncText('B'); + const C = createAsyncText('C'); + function Foo() { return ( <SuspenseList revealOrder="forwards"> - <Suspense fallback="Loading">A</Suspense> - <Suspense fallback="Loading">B</Suspense> + <Suspense fallback={<Text text="Loading A" />}> + <A /> + </Suspense> + <Suspense fallback={<Text text="Loading B" />}> + <B /> + </Suspense> + <Suspense fallback={<Text text="Loading C" />}> + <C /> + </Suspense> </SuspenseList> ); } - await act(() => { - ReactNoop.render(<Foo />); - }); - assertConsoleErrorDev([ - 'The default for the <SuspenseList tail="..."> prop is changing. ' + - 'To be future compatible you must explictly specify either ' + - '"visible" (the current default), "collapsed" or "hidden".' + - '\n in SuspenseList (at **)' + - '\n in Foo (at **)', - ]); + ReactNoop.render(<Foo />); + + await waitForAll(['Suspend! [A]', 'Loading A']); + + expect(ReactNoop).toMatchRenderedOutput(null); + + await A.resolve(); + + await waitForAll(['A', 'Suspend! [B]', 'Loading B']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + expect(ReactNoop).toMatchRenderedOutput(<span>A</span>); + + await act(() => B.resolve()); + assertLog(['B', 'Suspend! [C]', 'Loading C']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>B</span> + </>, + ); + + await act(() => C.resolve()); + assertLog(['C']); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>B</span> + <span>C</span> + </>, + ); }); // @gate enableSuspenseList @@ -1758,7 +1779,7 @@ describe('ReactSuspenseList', () => { }); assertConsoleErrorDev([ '<SuspenseList tail="collapsed" /> is only valid if ' + - 'revealOrder is "forwards" or "backwards". ' + + 'revealOrder is "forwards" (default) or "backwards". ' + 'Did you mean to specify revealOrder="forwards"?' + '\n in SuspenseList (at **)' + '\n in Foo (at **)', diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 07408d64e88..156bacbe148 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1913,7 +1913,7 @@ function renderSuspenseListRows( task: Task, keyPath: KeyNode, rows: Array<ReactNodeList>, - revealOrder: 'forwards' | 'backwards' | 'unstable_legacy-backwards', + revealOrder: void | 'forwards' | 'backwards' | 'unstable_legacy-backwards', ): void { // This is a fork of renderChildrenArray that's aware of tracking rows. const prevKeyPath = task.keyPath; @@ -2098,11 +2098,7 @@ function renderSuspenseList( const revealOrder: SuspenseListRevealOrder = props.revealOrder; // TODO: Support tail hidden/collapsed modes. // const tailMode: SuspenseListTailMode = props.tail; - if ( - revealOrder === 'forwards' || - revealOrder === 'backwards' || - revealOrder === 'unstable_legacy-backwards' - ) { + if (revealOrder !== 'independent' && revealOrder !== 'together') { // For ordered reveal, we need to produce rows from the children. if (isArray(children)) { renderSuspenseListRows(request, task, keyPath, children, revealOrder); From 488d88b018ee8fd1fac56cab22dfa8796ebce30b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 31 Oct 2025 13:33:23 -0400 Subject: [PATCH 152/276] Render children passed to "backwards" SuspenseList in reverse mount order (#35021) Stacked on #35018. This mounts the children of SuspenseList backwards. Meaning the first child is mounted last in the DOM (and effect list). It's like calling reverse() on the children. This is meant to set us up for allowing AsyncIterable children where the unknown number of children streams in at the end (which is the beginning in a backwards SuspenseList). For consistency we do that with other children too. `unstable_legacy-backwards` still exists for the old mode but is meant to be deprecated. <img width="100" alt="image" src="https://github.com/user-attachments/assets/5c2a95d7-34c4-4a4e-b602-3646a834d779" /> --- .../ReactDOMFizzSuspenseList-test.js | 81 +++++++++++++++++-- .../src/ReactFiberBeginWork.js | 62 ++++++++++++-- .../src/ReactFiberCompleteWork.js | 4 - .../src/__tests__/ReactSuspenseList-test.js | 20 ++--- packages/react-server/src/ReactFizzServer.js | 6 +- 5 files changed, 140 insertions(+), 33 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js index f434bf3cda8..0e2fff5cd45 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js @@ -656,6 +656,77 @@ describe('ReactDOMFizzSuspenseList', () => { ); }); + // @gate enableSuspenseList + it('displays each items in "backwards" mount order', async () => { + const A = createAsyncText('A'); + const B = createAsyncText('B'); + const C = createAsyncText('C'); + + function Foo() { + return ( + <div> + <SuspenseList revealOrder="backwards" tail="visible"> + <Suspense fallback={<Text text="Loading C" />}> + <C /> + </Suspense> + <Suspense fallback={<Text text="Loading B" />}> + <B /> + </Suspense> + <Suspense fallback={<Text text="Loading A" />}> + <A /> + </Suspense> + </SuspenseList> + </div> + ); + } + + await A.resolve(); + + await serverAct(async () => { + const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />); + pipe(writable); + }); + + assertLog([ + 'Suspend! [C]', + 'Suspend! [B]', // TODO: Defer rendering the content after fallback if previous suspended, + 'A', + 'Loading C', + 'Loading B', + 'Loading A', + ]); + + expect(getVisibleChildren(container)).toEqual( + <div> + <span>Loading A</span> + <span>Loading B</span> + <span>Loading C</span> + </div>, + ); + + await serverAct(() => C.resolve()); + assertLog(['C']); + + expect(getVisibleChildren(container)).toEqual( + <div> + <span>Loading A</span> + <span>Loading B</span> + <span>C</span> + </div>, + ); + + await serverAct(() => B.resolve()); + assertLog(['B']); + + expect(getVisibleChildren(container)).toEqual( + <div> + <span>A</span> + <span>B</span> + <span>C</span> + </div>, + ); + }); + // @gate enableSuspenseList it('displays each items in "backwards" order in legacy mode', async () => { const A = createAsyncText('A'); @@ -737,15 +808,13 @@ describe('ReactDOMFizzSuspenseList', () => { return ( <div> <SuspenseList revealOrder="forwards" tail="visible"> - <SuspenseList - revealOrder="unstable_legacy-backwards" - tail="visible"> - <Suspense fallback={<Text text="Loading A" />}> - <A /> - </Suspense> + <SuspenseList revealOrder="backwards" tail="visible"> <Suspense fallback={<Text text="Loading B" />}> <B /> </Suspense> + <Suspense fallback={<Text text="Loading A" />}> + <A /> + </Suspense> </SuspenseList> <Suspense fallback={<Text text="Loading C" />}> <C /> diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index 32ecd33edca..33fadfd5396 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -3247,18 +3247,14 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) { if ( revealOrder != null && revealOrder !== 'forwards' && + revealOrder !== 'backwards' && revealOrder !== 'unstable_legacy-backwards' && revealOrder !== 'together' && revealOrder !== 'independent' && !didWarnAboutRevealOrder[cacheKey] ) { didWarnAboutRevealOrder[cacheKey] = true; - if (revealOrder === 'backwards') { - console.error( - 'The rendering order of <SuspenseList revealOrder="backwards"> is changing. ' + - 'To be future compatible you must specify revealOrder="legacy_unstable-backwards" instead.', - ); - } else if (typeof revealOrder === 'string') { + if (typeof revealOrder === 'string') { switch (revealOrder.toLowerCase()) { case 'together': case 'forwards': @@ -3371,6 +3367,17 @@ function initSuspenseListRenderState( } } +function reverseChildren(fiber: Fiber): void { + let row = fiber.child; + fiber.child = null; + while (row !== null) { + const nextRow = row.sibling; + row.sibling = fiber.child; + fiber.child = row; + row = nextRow; + } +} + // This can end up rendering this component multiple passes. // The first pass splits the children fibers into two sets. A head and tail. // We first render the head. If anything is in fallback state, we do another @@ -3409,7 +3416,16 @@ function updateSuspenseListComponent( validateTailOptions(tailMode, revealOrder); validateSuspenseListChildren(newChildren, revealOrder); - reconcileChildren(current, workInProgress, newChildren, renderLanes); + if (revealOrder === 'backwards' && current !== null) { + // For backwards the current mounted set will be backwards. Reconciling against it + // will lead to mismatches and reorders. We need to swap the original set first + // and then restore it afterwards. + reverseChildren(current); + reconcileChildren(current, workInProgress, newChildren, renderLanes); + reverseChildren(current); + } else { + reconcileChildren(current, workInProgress, newChildren, renderLanes); + } // Read how many children forks this set pushed so we can push it every time we retry. const treeForkCount = getIsHydrating() ? getForksAtLevel(workInProgress) : 0; @@ -3434,7 +3450,37 @@ function updateSuspenseListComponent( workInProgress.memoizedState = null; } else { switch (revealOrder) { - case 'backwards': + case 'backwards': { + // We're going to find the first row that has existing content. + // We are also going to reverse the order of anything in the existing content + // since we want to actually render them backwards from the reconciled set. + // The tail is left in order, because it'll be added to the front as we + // complete each item. + const lastContentRow = findLastContentRow(workInProgress.child); + let tail; + if (lastContentRow === null) { + // The whole list is part of the tail. + tail = workInProgress.child; + workInProgress.child = null; + } else { + // Disconnect the tail rows after the content row. + // We're going to render them separately later in reverse order. + tail = lastContentRow.sibling; + lastContentRow.sibling = null; + // We have to now reverse the main content so it renders backwards too. + reverseChildren(workInProgress); + } + // TODO: If workInProgress.child is null, we can continue on the tail immediately. + initSuspenseListRenderState( + workInProgress, + true, // isBackwards + tail, + null, // last + tailMode, + treeForkCount, + ); + break; + } case 'unstable_legacy-backwards': { // We're going to find the first row that has existing content. // At the same time we're going to reverse the list of everything diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js index 5ccf1b2ac7a..0b1f1e4366e 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js @@ -1838,10 +1838,6 @@ function completeWork( } } if (renderState.isBackwards) { - // The effect list of the backwards tail will have been added - // to the end. This breaks the guarantee that life-cycles fire in - // sibling order but that isn't a strong guarantee promised by React. - // Especially since these might also just pop in during future commits. // Append to the beginning of the list. renderedTail.sibling = workInProgress.child; workInProgress.child = renderedTail; diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js index 34600b7a672..ba5b668652f 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js @@ -1022,7 +1022,7 @@ describe('ReactSuspenseList', () => { }); // @gate enableSuspenseList - it('warns if revealOrder="backwards" is specified', async () => { + it('displays each items in "backwards" order', async () => { const A = createAsyncText('A'); const B = createAsyncText('B'); const C = createAsyncText('C'); @@ -1030,14 +1030,14 @@ describe('ReactSuspenseList', () => { function Foo() { return ( <SuspenseList revealOrder="backwards" tail="visible"> - <Suspense fallback={<Text text="Loading A" />}> - <A /> + <Suspense fallback={<Text text="Loading C" />}> + <C /> </Suspense> <Suspense fallback={<Text text="Loading B" />}> <B /> </Suspense> - <Suspense fallback={<Text text="Loading C" />}> - <C /> + <Suspense fallback={<Text text="Loading A" />}> + <A /> </Suspense> </SuspenseList> ); @@ -1056,14 +1056,6 @@ describe('ReactSuspenseList', () => { 'Suspend! [C]', ]); - assertConsoleErrorDev([ - 'The rendering order of <SuspenseList revealOrder="backwards"> is changing. ' + - 'To be future compatible you must specify ' + - 'revealOrder="legacy_unstable-backwards" instead.' + - '\n in SuspenseList (at **)' + - '\n in Foo (at **)', - ]); - expect(ReactNoop).toMatchRenderedOutput( <> <span>Loading A</span> @@ -1101,7 +1093,7 @@ describe('ReactSuspenseList', () => { }); // @gate enableSuspenseList - it('displays each items in "backwards" order', async () => { + it('displays each items in "backwards" order (legacy)', async () => { const A = createAsyncText('A'); const B = createAsyncText('B'); const C = createAsyncText('C'); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 156bacbe148..33c0ab68a8e 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -2017,7 +2017,11 @@ function renderSuspenseListRows( const parentSegment = task.blockedSegment; const childIndex = parentSegment.children.length; const insertionIndex = parentSegment.chunks.length; - for (let i = totalChildren - 1; i >= 0; i--) { + for (let n = 0; n < totalChildren; n++) { + const i = + revealOrder === 'unstable_legacy-backwards' + ? totalChildren - 1 - n + : n; const node = rows[i]; task.row = previousSuspenseListRow = createSuspenseListRow( previousSuspenseListRow, From 561ee24d4a7c805e9837ee4cfbb5671a35e41b5a Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Sat, 1 Nov 2025 16:03:09 +0100 Subject: [PATCH 153/276] [Fizz] Push halted await to the owner stack for late-arriving I/O info (#35019) --- .../react-client/src/ReactFlightClient.js | 105 ++++++-- .../src/client/ReactFlightDOMClientBrowser.js | 2 + .../src/client/ReactFlightDOMClientNode.js | 2 + .../src/client/ReactFlightDOMClientBrowser.js | 2 + .../src/client/ReactFlightDOMClientEdge.js | 2 + .../src/client/ReactFlightDOMClientNode.js | 2 + .../src/client/ReactFlightDOMClientBrowser.js | 2 + .../src/client/ReactFlightDOMClientEdge.js | 2 + .../src/client/ReactFlightDOMClientNode.js | 2 + .../src/__tests__/ReactFlightDOMNode-test.js | 238 +++++++++++++++++- .../src/client/ReactFlightDOMClientBrowser.js | 2 + .../src/client/ReactFlightDOMClientEdge.js | 2 + .../src/client/ReactFlightDOMClientNode.js | 2 + packages/react-server/src/ReactFizzServer.js | 38 ++- 14 files changed, 363 insertions(+), 40 deletions(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 503f79e4cc5..2a5936be0f4 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -367,6 +367,7 @@ type Response = { _debugRootStack?: null | Error, // DEV-only _debugRootTask?: null | ConsoleTask, // DEV-only _debugStartTime: number, // DEV-only + _debugEndTime?: number, // DEV-only _debugIOStarted: boolean, // DEV-only _debugFindSourceMapURL?: void | FindSourceMapURLCallback, // DEV-only _debugChannel?: void | DebugChannel, // DEV-only @@ -500,6 +501,34 @@ function createErrorChunk<T>( return new ReactPromise(ERRORED, null, error); } +function filterDebugInfo( + response: Response, + value: {_debugInfo: ReactDebugInfo, ...}, +) { + if (response._debugEndTime === null) { + // No end time was defined, so we keep all debug info entries. + return; + } + + // Remove any debug info entries that arrived after the defined end time. + const relativeEndTime = + response._debugEndTime - + // $FlowFixMe[prop-missing] + performance.timeOrigin; + const debugInfo = []; + for (let i = 0; i < value._debugInfo.length; i++) { + const info = value._debugInfo[i]; + if (typeof info.time === 'number' && info.time > relativeEndTime) { + break; + } + if (info.awaited != null && info.awaited.end > relativeEndTime) { + break; + } + debugInfo.push(info); + } + value._debugInfo = debugInfo; +} + function moveDebugInfoFromChunkToInnerValue<T>( chunk: InitializedChunk<T> | InitializedStreamChunk<any>, value: T, @@ -534,7 +563,17 @@ function moveDebugInfoFromChunkToInnerValue<T>( } } +function processChunkDebugInfo<T>( + response: Response, + chunk: InitializedChunk<T> | InitializedStreamChunk<any>, + value: T, +): void { + filterDebugInfo(response, chunk); + moveDebugInfoFromChunkToInnerValue(chunk, value); +} + function wakeChunk<T>( + response: Response, listeners: Array<InitializationReference | (T => mixed)>, value: T, chunk: InitializedChunk<T>, @@ -544,16 +583,17 @@ function wakeChunk<T>( if (typeof listener === 'function') { listener(value); } else { - fulfillReference(listener, value, chunk); + fulfillReference(response, listener, value, chunk); } } if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(chunk, value); + processChunkDebugInfo(response, chunk, value); } } function rejectChunk( + response: Response, listeners: Array<InitializationReference | (mixed => mixed)>, error: mixed, ): void { @@ -562,7 +602,7 @@ function rejectChunk( if (typeof listener === 'function') { listener(error); } else { - rejectReference(listener, error); + rejectReference(response, listener.handler, error); } } } @@ -595,13 +635,14 @@ function resolveBlockedCycle<T>( } function wakeChunkIfInitialized<T>( + response: Response, chunk: SomeChunk<T>, resolveListeners: Array<InitializationReference | (T => mixed)>, rejectListeners: null | Array<InitializationReference | (mixed => mixed)>, ): void { switch (chunk.status) { case INITIALIZED: - wakeChunk(resolveListeners, chunk.value, chunk); + wakeChunk(response, resolveListeners, chunk.value, chunk); break; case BLOCKED: // It is possible that we're blocked on our own chunk if it's a cycle. @@ -615,7 +656,7 @@ function wakeChunkIfInitialized<T>( if (cyclicHandler !== null) { // This reference points back to this chunk. We can resolve the cycle by // using the value from that handler. - fulfillReference(reference, cyclicHandler.value, chunk); + fulfillReference(response, reference, cyclicHandler.value, chunk); resolveListeners.splice(i, 1); i--; if (rejectListeners !== null) { @@ -629,6 +670,7 @@ function wakeChunkIfInitialized<T>( case INITIALIZED: const initializedChunk: InitializedChunk<T> = (chunk: any); wakeChunk( + response, resolveListeners, initializedChunk.value, initializedChunk, @@ -636,7 +678,7 @@ function wakeChunkIfInitialized<T>( return; case ERRORED: if (rejectListeners !== null) { - rejectChunk(rejectListeners, chunk.reason); + rejectChunk(response, rejectListeners, chunk.reason); } return; } @@ -666,7 +708,7 @@ function wakeChunkIfInitialized<T>( break; case ERRORED: if (rejectListeners) { - rejectChunk(rejectListeners, chunk.reason); + rejectChunk(response, rejectListeners, chunk.reason); } break; } @@ -724,7 +766,7 @@ function triggerErrorOnChunk<T>( erroredChunk.status = ERRORED; erroredChunk.reason = error; if (listeners !== null) { - rejectChunk(listeners, error); + rejectChunk(response, listeners, error); } } @@ -832,7 +874,7 @@ function resolveModelChunk<T>( // longer be rendered or might not be the highest pri. initializeModelChunk(resolvedChunk); // The status might have changed after initialization. - wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners); + wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners); } } @@ -861,12 +903,11 @@ function resolveModuleChunk<T>( } if (resolveListeners !== null) { initializeModuleChunk(resolvedChunk); - wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners); + wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners); } } type InitializationReference = { - response: Response, // TODO: Remove Response from here and pass it through instead. handler: InitializationHandler, parentObject: Object, key: string, @@ -1005,7 +1046,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void { if (typeof listener === 'function') { listener(value); } else { - fulfillReference(listener, value, cyclicChunk); + fulfillReference(response, listener, value, cyclicChunk); } } } @@ -1026,7 +1067,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void { initializedChunk.value = value; if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(initializedChunk, value); + processChunkDebugInfo(response, initializedChunk, value); } } catch (error) { const erroredChunk: ErroredChunk<T> = (chunk: any); @@ -1413,11 +1454,12 @@ function getChunk(response: Response, id: number): SomeChunk<any> { } function fulfillReference( + response: Response, reference: InitializationReference, value: any, fulfilledChunk: SomeChunk<any>, ): void { - const {response, handler, parentObject, key, map, path} = reference; + const {handler, parentObject, key, map, path} = reference; for (let i = 1; i < path.length; i++) { while ( @@ -1487,7 +1529,11 @@ function fulfillReference( return; } default: { - rejectReference(reference, referencedChunk.reason); + rejectReference( + response, + reference.handler, + referencedChunk.reason, + ); return; } } @@ -1585,21 +1631,20 @@ function fulfillReference( initializedChunk.value = handler.value; initializedChunk.reason = handler.reason; // Used by streaming chunks if (resolveListeners !== null) { - wakeChunk(resolveListeners, handler.value, initializedChunk); + wakeChunk(response, resolveListeners, handler.value, initializedChunk); } else { if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value); + processChunkDebugInfo(response, initializedChunk, handler.value); } } } } function rejectReference( - reference: InitializationReference, + response: Response, + handler: InitializationHandler, error: mixed, ): void { - const {handler, response} = reference; - if (handler.errored) { // We've already errored. We could instead build up an AggregateError // but if there are multiple errors we just take the first one like @@ -1690,7 +1735,6 @@ function waitForReference<T>( } const reference: InitializationReference = { - response, handler, parentObject, key, @@ -1838,10 +1882,10 @@ function loadServerReference<A: Iterable<any>, T>( initializedChunk.status = INITIALIZED; initializedChunk.value = handler.value; if (resolveListeners !== null) { - wakeChunk(resolveListeners, handler.value, initializedChunk); + wakeChunk(response, resolveListeners, handler.value, initializedChunk); } else { if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value); + processChunkDebugInfo(response, initializedChunk, handler.value); } } } @@ -2578,6 +2622,7 @@ function ResponseInstance( replayConsole: boolean, // DEV-only environmentName: void | string, // DEV-only debugStartTime: void | number, // DEV-only + debugEndTime: void | number, // DEV-only debugChannel: void | DebugChannel, // DEV-only ) { const chunks: Map<number, SomeChunk<any>> = new Map(); @@ -2645,6 +2690,7 @@ function ResponseInstance( // and is not considered I/O required to load the stream. setTimeout(markIOStarted.bind(this), 0); } + this._debugEndTime = debugEndTime == null ? null : debugEndTime; this._debugFindSourceMapURL = findSourceMapURL; this._debugChannel = debugChannel; this._blockedConsole = null; @@ -2688,6 +2734,7 @@ export function createResponse( replayConsole: boolean, // DEV-only environmentName: void | string, // DEV-only debugStartTime: void | number, // DEV-only + debugEndTime: void | number, // DEV-only debugChannel: void | DebugChannel, // DEV-only ): WeakResponse { return getWeakResponse( @@ -2704,6 +2751,7 @@ export function createResponse( replayConsole, environmentName, debugStartTime, + debugEndTime, debugChannel, ), ); @@ -3075,10 +3123,10 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>( resolvedChunk.value = stream; resolvedChunk.reason = controller; if (resolveListeners !== null) { - wakeChunk(resolveListeners, chunk.value, (chunk: any)); + wakeChunk(response, resolveListeners, chunk.value, (chunk: any)); } else { if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(resolvedChunk, stream); + processChunkDebugInfo(response, resolvedChunk, stream); } } } @@ -3218,7 +3266,12 @@ function startAsyncIterable<T>( initializedChunk.status = INITIALIZED; initializedChunk.value = {done: false, value: value}; if (resolveListeners !== null) { - wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners); + wakeChunkIfInitialized( + response, + chunk, + resolveListeners, + rejectListeners, + ); } } nextWriteIndex++; diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js index 371f08abc9a..ee2475287d0 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js @@ -53,6 +53,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, }; function createDebugCallbackFromWritableStream( @@ -107,6 +108,7 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js index 78dce936158..38ac43d0131 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js @@ -58,6 +58,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -116,6 +117,7 @@ function createFromNodeStream<T>( __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js index 0f0141e6409..b304d442046 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js @@ -132,6 +132,7 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } @@ -209,6 +210,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, }; export function createFromReadableStream<T>( diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js index 5c8d1023b23..f58f8534348 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js @@ -80,6 +80,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -111,6 +112,7 @@ function createResponseFromOptions(options?: Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js index fbc633a1753..a9b82e343fb 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js @@ -53,6 +53,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -107,6 +108,7 @@ export function createFromNodeStream<T>( __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js index b3d31bd1bbb..0bf61500198 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js @@ -52,6 +52,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, }; function createDebugCallbackFromWritableStream( @@ -106,6 +107,7 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js index 5517e0f73cf..c6dd4ee94ad 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js @@ -80,6 +80,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -113,6 +114,7 @@ function createResponseFromOptions(options: Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js index 6d117929df0..73d79800c92 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js @@ -61,6 +61,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -118,6 +119,7 @@ function createFromNodeStream<T>( __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js index d59f298f994..646735a54b7 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js @@ -86,12 +86,25 @@ describe('ReactFlightDOMNode', () => { ); } - function normalizeCodeLocInfo(str) { + const relativeFilename = path.relative(__dirname, __filename); + + function normalizeCodeLocInfo(str, {preserveLocation = false} = {}) { return ( str && - str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) { - return ' in ' + name + (/\d/.test(m) ? ' (at **)' : ''); - }) + str.replace( + /^ +(?:at|in) ([\S]+) ([^\n]*)/gm, + function (m, name, location) { + return ( + ' in ' + + name + + (/\d/.test(m) + ? preserveLocation + ? ' ' + location.replace(__filename, relativeFilename) + : ' (at **)' + : '') + ); + }, + ) ); } @@ -1169,4 +1182,221 @@ describe('ReactFlightDOMNode', () => { // Must not throw an error. await readable.pipeTo(writable); }); + + describe('with real timers', () => { + // These tests schedule their rendering in a way that requires real timers + // to be used to accurately represent how this interacts with React's + // internal scheduling. + + beforeEach(() => { + jest.useRealTimers(); + }); + + afterEach(() => { + jest.useFakeTimers(); + }); + + it('should use late-arriving I/O debug info to enhance component and owner stacks when aborting a prerender', async () => { + // This test is constructing a scenario where a framework might separate + // I/O into different phases, e.g. runtime I/O and dynamic I/O. The + // framework might choose to define an end time for the Flight client, + // indicating that all I/O info (or any debug info for that matter) that + // arrives after that time should be ignored. When rendering in Fizz is + // then aborted, the late-arriving debug info that's used to enhance the + // owner stack only includes I/O info up to that end time. + let resolveRuntimeData; + let resolveDynamicData; + + async function getRuntimeData() { + return new Promise(resolve => { + resolveRuntimeData = resolve; + }); + } + + async function getDynamicData() { + return new Promise(resolve => { + resolveDynamicData = resolve; + }); + } + + async function Dynamic() { + const runtimeData = await getRuntimeData(); + const dynamicData = await getDynamicData(); + + return ( + <p> + {runtimeData} {dynamicData} + </p> + ); + } + + function App() { + return ReactServer.createElement( + 'html', + null, + ReactServer.createElement( + 'body', + null, + ReactServer.createElement(Dynamic), + ), + ); + } + + const stream = await ReactServerDOMServer.renderToPipeableStream( + ReactServer.createElement(App), + webpackMap, + {filterStackFrame}, + ); + + const initialChunks = []; + const dynamicChunks = []; + let isDynamic = false; + + const passThrough = new Stream.PassThrough(streamOptions); + stream.pipe(passThrough); + + passThrough.on('data', chunk => { + if (isDynamic) { + dynamicChunks.push(chunk); + } else { + initialChunks.push(chunk); + } + }); + + let endTime; + + await new Promise(resolve => { + setTimeout(() => { + resolveRuntimeData('Hi'); + }); + setTimeout(() => { + isDynamic = true; + endTime = performance.now() + performance.timeOrigin; + resolveDynamicData('Josh'); + resolve(); + }); + }); + + await new Promise(resolve => { + passThrough.on('end', resolve); + }); + + // Create a new Readable and push all initial chunks immediately. + const readable = new Stream.Readable({...streamOptions, read() {}}); + for (let i = 0; i < initialChunks.length; i++) { + readable.push(initialChunks[i]); + } + + const abortController = new AbortController(); + + // When prerendering is aborted, push all dynamic chunks. They won't be + // considered for rendering, but they include debug info we want to use. + abortController.signal.addEventListener( + 'abort', + () => { + for (let i = 0; i < dynamicChunks.length; i++) { + readable.push(dynamicChunks[i]); + } + }, + {once: true}, + ); + + const response = ReactServerDOMClient.createFromNodeStream( + readable, + { + serverConsumerManifest: { + moduleMap: null, + moduleLoading: null, + }, + }, + { + // Debug info arriving after this end time will be ignored, e.g. the + // I/O info for the dynamic data. + endTime, + }, + ); + + function ClientRoot() { + return use(response); + } + + let componentStack; + let ownerStack; + + const {prelude} = await new Promise(resolve => { + let result; + + setTimeout(() => { + result = ReactDOMFizzStatic.prerenderToNodeStream( + React.createElement(ClientRoot), + { + signal: abortController.signal, + onError(error, errorInfo) { + componentStack = errorInfo.componentStack; + ownerStack = React.captureOwnerStack + ? React.captureOwnerStack() + : null; + }, + }, + ); + }); + + setTimeout(() => { + abortController.abort(); + resolve(result); + }); + }); + + const prerenderHTML = await readResult(prelude); + + expect(prerenderHTML).toBe(''); + + if (__DEV__) { + expect( + normalizeCodeLocInfo(componentStack, {preserveLocation: true}), + ).toBe( + '\n' + + ' in Dynamic' + + (gate(flags => flags.enableAsyncDebugInfo) + ? ' (file://ReactFlightDOMNode-test.js:1223:33)\n' + : '\n') + + ' in body\n' + + ' in html\n' + + ' in App (file://ReactFlightDOMNode-test.js:1240:25)\n' + + ' in ClientRoot (ReactFlightDOMNode-test.js:1320:16)', + ); + } else { + expect( + normalizeCodeLocInfo(componentStack, {preserveLocation: true}), + ).toBe( + '\n' + + ' in body\n' + + ' in html\n' + + ' in ClientRoot (ReactFlightDOMNode-test.js:1320:16)', + ); + } + + if (__DEV__) { + if (gate(flags => flags.enableAsyncDebugInfo)) { + expect( + normalizeCodeLocInfo(ownerStack, {preserveLocation: true}), + ).toBe( + '\n' + + ' in Dynamic (file://ReactFlightDOMNode-test.js:1223:33)\n' + + ' in App (file://ReactFlightDOMNode-test.js:1240:25)', + ); + } else { + expect( + normalizeCodeLocInfo(ownerStack, {preserveLocation: true}), + ).toBe( + '' + + '\n' + + ' in App (file://ReactFlightDOMNode-test.js:1240:25)', + ); + } + } else { + expect(ownerStack).toBeNull(); + } + }); + }); }); diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js index b3d31bd1bbb..0bf61500198 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js @@ -52,6 +52,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, }; function createDebugCallbackFromWritableStream( @@ -106,6 +107,7 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js index bc4caac767f..2cf668f679d 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js @@ -80,6 +80,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -113,6 +114,7 @@ function createResponseFromOptions(options: Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js index 6d117929df0..73d79800c92 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js @@ -61,6 +61,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -118,6 +119,7 @@ function createFromNodeStream<T>( __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 33c0ab68a8e..6259357c839 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1004,14 +1004,6 @@ function pushHaltedAwaitOnComponentStack( if (debugInfo != null) { for (let i = debugInfo.length - 1; i >= 0; i--) { const info = debugInfo[i]; - if (typeof info.name === 'string') { - // This is a Server Component. Any awaits in previous Server Components already resolved. - break; - } - if (typeof info.time === 'number') { - // This had an end time. Any awaits before this must have already resolved. - break; - } if (info.awaited != null) { const asyncInfo: ReactAsyncInfo = (info: any); const bestStack = @@ -4653,10 +4645,36 @@ function abortTask(task: Task, request: Request, error: mixed): void { // If the task is not rendering, then this is an async abort. Conceptually it's as if // the abort happened inside the async gap. The abort reason's stack frame won't have that // on the stack so instead we use the owner stack and debug task of any halted async debug info. - const node: any = task.node; + let node: any = task.node; if (node !== null && typeof node === 'object') { // Push a fake component stack frame that represents the await. - pushHaltedAwaitOnComponentStack(task, node._debugInfo); + let debugInfo = node._debugInfo; + // First resolve lazy nodes to find debug info that has been transferred + // to the inner value. + while ( + typeof node === 'object' && + node !== null && + node.$$typeof === REACT_LAZY_TYPE + ) { + const payload = node._payload; + if (payload.status === 'fulfilled') { + node = payload.value; + continue; + } + break; + } + if ( + typeof node === 'object' && + node !== null && + (isArray(node) || + typeof node[ASYNC_ITERATOR] === 'function' || + node.$$typeof === REACT_ELEMENT_TYPE || + node.$$typeof === REACT_LAZY_TYPE) && + isArray(node._debugInfo) + ) { + debugInfo = node._debugInfo; + } + pushHaltedAwaitOnComponentStack(task, debugInfo); /* if (task.thenableState !== null) { // TODO: If we were stalled inside use() of a Client Component then we should From 67f7d47a9b8f450c93ee69edd16aed68e910ff1e Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Mon, 3 Nov 2025 22:59:40 +0100 Subject: [PATCH 154/276] [Flight] Fix debug info filtering to include later resolved I/O (#35036) In #35019, we excluded debug I/O info from being considered for enhancing the owner stack if it resolved after the defined `endTime` option that can be passed to the Flight client. However, we should include any I/O that was awaited before that end time, even if it resolved later. --- .../react-client/src/ReactFlightClient.js | 7 +- .../src/__tests__/ReactFlightDOMNode-test.js | 96 ++++++++----------- 2 files changed, 45 insertions(+), 58 deletions(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 2a5936be0f4..f8cc0a80f39 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -510,7 +510,9 @@ function filterDebugInfo( return; } - // Remove any debug info entries that arrived after the defined end time. + // Remove any debug info entries after the defined end time. For async info + // that means we're including anything that was awaited before the end time, + // but it doesn't need to be resolved before the end time. const relativeEndTime = response._debugEndTime - // $FlowFixMe[prop-missing] @@ -521,9 +523,6 @@ function filterDebugInfo( if (typeof info.time === 'number' && info.time > relativeEndTime) { break; } - if (info.awaited != null && info.awaited.end > relativeEndTime) { - break; - } debugInfo.push(info); } value._debugInfo = debugInfo; diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js index 646735a54b7..d9de7df43d3 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js @@ -1197,35 +1197,28 @@ describe('ReactFlightDOMNode', () => { }); it('should use late-arriving I/O debug info to enhance component and owner stacks when aborting a prerender', async () => { - // This test is constructing a scenario where a framework might separate - // I/O into different phases, e.g. runtime I/O and dynamic I/O. The - // framework might choose to define an end time for the Flight client, - // indicating that all I/O info (or any debug info for that matter) that - // arrives after that time should be ignored. When rendering in Fizz is - // then aborted, the late-arriving debug info that's used to enhance the - // owner stack only includes I/O info up to that end time. - let resolveRuntimeData; - let resolveDynamicData; - - async function getRuntimeData() { + let resolveDynamicData1; + let resolveDynamicData2; + + async function getDynamicData1() { return new Promise(resolve => { - resolveRuntimeData = resolve; + resolveDynamicData1 = resolve; }); } - async function getDynamicData() { + async function getDynamicData2() { return new Promise(resolve => { - resolveDynamicData = resolve; + resolveDynamicData2 = resolve; }); } async function Dynamic() { - const runtimeData = await getRuntimeData(); - const dynamicData = await getDynamicData(); + const data1 = await getDynamicData1(); + const data2 = await getDynamicData2(); return ( <p> - {runtimeData} {dynamicData} + {data1} {data2} </p> ); } @@ -1242,45 +1235,40 @@ describe('ReactFlightDOMNode', () => { ); } - const stream = await ReactServerDOMServer.renderToPipeableStream( - ReactServer.createElement(App), - webpackMap, - {filterStackFrame}, - ); - + let staticEndTime = -1; const initialChunks = []; const dynamicChunks = []; - let isDynamic = false; - const passThrough = new Stream.PassThrough(streamOptions); - stream.pipe(passThrough); + await new Promise(resolve => { + setTimeout(async () => { + const stream = ReactServerDOMServer.renderToPipeableStream( + ReactServer.createElement(App), + webpackMap, + {filterStackFrame}, + ); - passThrough.on('data', chunk => { - if (isDynamic) { - dynamicChunks.push(chunk); - } else { - initialChunks.push(chunk); - } - }); + const passThrough = new Stream.PassThrough(streamOptions); + stream.pipe(passThrough); - let endTime; + passThrough.on('data', chunk => { + if (staticEndTime < 0) { + initialChunks.push(chunk); + } else { + dynamicChunks.push(chunk); + } + }); - await new Promise(resolve => { - setTimeout(() => { - resolveRuntimeData('Hi'); + passThrough.on('end', resolve); }); setTimeout(() => { - isDynamic = true; - endTime = performance.now() + performance.timeOrigin; - resolveDynamicData('Josh'); - resolve(); + staticEndTime = performance.now() + performance.timeOrigin; + resolveDynamicData1('Hi'); + setTimeout(() => { + resolveDynamicData2('Josh'); + }); }); }); - await new Promise(resolve => { - passThrough.on('end', resolve); - }); - // Create a new Readable and push all initial chunks immediately. const readable = new Stream.Readable({...streamOptions, read() {}}); for (let i = 0; i < initialChunks.length; i++) { @@ -1311,8 +1299,8 @@ describe('ReactFlightDOMNode', () => { }, { // Debug info arriving after this end time will be ignored, e.g. the - // I/O info for the dynamic data. - endTime, + // I/O info for the second dynamic data. + endTime: staticEndTime, }, ); @@ -1358,12 +1346,12 @@ describe('ReactFlightDOMNode', () => { '\n' + ' in Dynamic' + (gate(flags => flags.enableAsyncDebugInfo) - ? ' (file://ReactFlightDOMNode-test.js:1223:33)\n' + ? ' (file://ReactFlightDOMNode-test.js:1216:27)\n' : '\n') + ' in body\n' + ' in html\n' + - ' in App (file://ReactFlightDOMNode-test.js:1240:25)\n' + - ' in ClientRoot (ReactFlightDOMNode-test.js:1320:16)', + ' in App (file://ReactFlightDOMNode-test.js:1233:25)\n' + + ' in ClientRoot (ReactFlightDOMNode-test.js:1308:16)', ); } else { expect( @@ -1372,7 +1360,7 @@ describe('ReactFlightDOMNode', () => { '\n' + ' in body\n' + ' in html\n' + - ' in ClientRoot (ReactFlightDOMNode-test.js:1320:16)', + ' in ClientRoot (ReactFlightDOMNode-test.js:1308:16)', ); } @@ -1382,8 +1370,8 @@ describe('ReactFlightDOMNode', () => { normalizeCodeLocInfo(ownerStack, {preserveLocation: true}), ).toBe( '\n' + - ' in Dynamic (file://ReactFlightDOMNode-test.js:1223:33)\n' + - ' in App (file://ReactFlightDOMNode-test.js:1240:25)', + ' in Dynamic (file://ReactFlightDOMNode-test.js:1216:27)\n' + + ' in App (file://ReactFlightDOMNode-test.js:1233:25)', ); } else { expect( @@ -1391,7 +1379,7 @@ describe('ReactFlightDOMNode', () => { ).toBe( '' + '\n' + - ' in App (file://ReactFlightDOMNode-test.js:1240:25)', + ' in App (file://ReactFlightDOMNode-test.js:1233:25)', ); } } else { From edd05f181b72272fb87b77bd84d2c048a4613955 Mon Sep 17 00:00:00 2001 From: Jack Pope <jackpope1@gmail.com> Date: Mon, 3 Nov 2025 17:51:00 -0500 Subject: [PATCH 155/276] Add fragment handles to children of FragmentInstances (#34935) This PR adds a `unstable_reactFragments?: Set<FragmentInstance>` property to DOM nodes that belong to a Fragment with a ref (top level host components). This allows you to access a FragmentInstance from a DOM node. This is flagged behind `enableFragmentRefsInstanceHandles`. The primary use case to unblock is reusing IntersectionObserver instances. A fairly common practice is to cache and reuse IntersectionObservers that share the same config, with a map of node->callbacks to run for each entry in the IO callback. Currently this is not possible with Fragment Ref `observeUsing` because the key in the cache would have to be the `FragmentInstance` and you can't find it without a handle from the node. This works now by accessing `entry.target.fragments`. This also opens up possibilities to use `FragmentInstance` operations in other places, such as events. We can do `event.target.unstable_reactFragments`, then access `fragmentInstance.getClientRects` for example. In a future PR, we can assign an event's `currentTarget` as the Fragment Ref for a more direct handle when the event has been dispatched by the Fragment itself. The first commit here implemented a handle only on observed elements. This is awkward because there isn't a good way to document or expose this temporary property. `element.fragments` is closer to what we would expect from a DOM API if a standard was implemented here. And by assigning it to all top-level nodes of a Fragment, it can be used beyond the cached IntersectionObserver callback. One tradeoff here is adding extra work during the creation of FragmentInstances as well as keeping track of adding/removing nodes. Previously we only track the Fiber on creation but here we add a traversal which could apply to a large set of top-level host children. The `element.unstable_reactFragments` Set can also be randomly ordered. --- .../src/client/ReactFiberConfigDOM.js | 55 +++++- .../__tests__/ReactDOMFragmentRefs-test.js | 167 ++++++++++++++++++ .../src/ReactFiberConfigFabric.js | 58 +++++- packages/shared/ReactFeatureFlags.js | 1 + .../ReactFeatureFlags.native-fb-dynamic.js | 1 + .../forks/ReactFeatureFlags.native-fb.js | 1 + .../forks/ReactFeatureFlags.native-oss.js | 1 + .../forks/ReactFeatureFlags.test-renderer.js | 1 + .../ReactFeatureFlags.test-renderer.www.js | 1 + .../shared/forks/ReactFeatureFlags.www.js | 2 + 10 files changed, 281 insertions(+), 7 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 0af810924bb..bbecbb66356 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -126,6 +126,7 @@ import { enableHydrationChangeEvent, enableFragmentRefsScrollIntoView, enableProfilerTimer, + enableFragmentRefsInstanceHandles, } from 'shared/ReactFeatureFlags'; import { HostComponent, @@ -214,6 +215,10 @@ export type Container = export type Instance = Element; export type TextInstance = Text; +type InstanceWithFragmentHandles = Instance & { + unstable_reactFragments?: Set<FragmentInstanceType>, +}; + declare class ActivityInterface extends Comment {} declare class SuspenseInterface extends Comment { _reactRetry: void | (() => void); @@ -3390,10 +3395,44 @@ if (enableFragmentRefsScrollIntoView) { }; } +function addFragmentHandleToFiber( + child: Fiber, + fragmentInstance: FragmentInstanceType, +): boolean { + if (enableFragmentRefsInstanceHandles) { + const instance = + getInstanceFromHostFiber<InstanceWithFragmentHandles>(child); + if (instance != null) { + addFragmentHandleToInstance(instance, fragmentInstance); + } + } + return false; +} + +function addFragmentHandleToInstance( + instance: InstanceWithFragmentHandles, + fragmentInstance: FragmentInstanceType, +): void { + if (enableFragmentRefsInstanceHandles) { + if (instance.unstable_reactFragments == null) { + instance.unstable_reactFragments = new Set(); + } + instance.unstable_reactFragments.add(fragmentInstance); + } +} + export function createFragmentInstance( fragmentFiber: Fiber, ): FragmentInstanceType { - return new (FragmentInstance: any)(fragmentFiber); + const fragmentInstance = new (FragmentInstance: any)(fragmentFiber); + if (enableFragmentRefsInstanceHandles) { + traverseFragmentInstance( + fragmentFiber, + addFragmentHandleToFiber, + fragmentInstance, + ); + } + return fragmentInstance; } export function updateFragmentInstanceFiber( @@ -3404,7 +3443,7 @@ export function updateFragmentInstanceFiber( } export function commitNewChildToFragmentInstance( - childInstance: Instance, + childInstance: InstanceWithFragmentHandles, fragmentInstance: FragmentInstanceType, ): void { const eventListeners = fragmentInstance._eventListeners; @@ -3419,17 +3458,25 @@ export function commitNewChildToFragmentInstance( observer.observe(childInstance); }); } + if (enableFragmentRefsInstanceHandles) { + addFragmentHandleToInstance(childInstance, fragmentInstance); + } } export function deleteChildFromFragmentInstance( - childElement: Instance, + childInstance: InstanceWithFragmentHandles, fragmentInstance: FragmentInstanceType, ): void { const eventListeners = fragmentInstance._eventListeners; if (eventListeners !== null) { for (let i = 0; i < eventListeners.length; i++) { const {type, listener, optionsOrUseCapture} = eventListeners[i]; - childElement.removeEventListener(type, listener, optionsOrUseCapture); + childInstance.removeEventListener(type, listener, optionsOrUseCapture); + } + } + if (enableFragmentRefsInstanceHandles) { + if (childInstance.unstable_reactFragments != null) { + childInstance.unstable_reactFragments.delete(fragmentInstance); } } } diff --git a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js index 90dfa9d2f30..a5b9eae6fad 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js @@ -110,6 +110,53 @@ describe('FragmentRefs', () => { await act(() => root.render(<Test />)); }); + // @gate enableFragmentRefs && enableFragmentRefsInstanceHandles + it('attaches fragment handles to nodes', async () => { + const fragmentParentRef = React.createRef(); + const fragmentRef = React.createRef(); + + function Test({show}) { + return ( + <Fragment ref={fragmentParentRef}> + <Fragment ref={fragmentRef}> + <div id="childA">A</div> + <div id="childB">B</div> + </Fragment> + <div id="childC">C</div> + {show && <div id="childD">D</div>} + </Fragment> + ); + } + + const root = ReactDOMClient.createRoot(container); + await act(() => root.render(<Test show={false} />)); + + const childA = document.querySelector('#childA'); + const childB = document.querySelector('#childB'); + const childC = document.querySelector('#childC'); + + expect(childA.unstable_reactFragments.has(fragmentRef.current)).toBe(true); + expect(childB.unstable_reactFragments.has(fragmentRef.current)).toBe(true); + expect(childC.unstable_reactFragments.has(fragmentRef.current)).toBe(false); + expect(childA.unstable_reactFragments.has(fragmentParentRef.current)).toBe( + true, + ); + expect(childB.unstable_reactFragments.has(fragmentParentRef.current)).toBe( + true, + ); + expect(childC.unstable_reactFragments.has(fragmentParentRef.current)).toBe( + true, + ); + + await act(() => root.render(<Test show={true} />)); + + const childD = document.querySelector('#childD'); + expect(childD.unstable_reactFragments.has(fragmentRef.current)).toBe(false); + expect(childD.unstable_reactFragments.has(fragmentParentRef.current)).toBe( + true, + ); + }); + describe('focus methods', () => { describe('focus()', () => { // @gate enableFragmentRefs @@ -1045,6 +1092,126 @@ describe('FragmentRefs', () => { {withoutStack: true}, ); }); + + // @gate enableFragmentRefs && enableFragmentRefsInstanceHandles + it('attaches handles to observed elements to allow caching of observers', async () => { + const targetToCallbackMap = new WeakMap(); + let cachedObserver = null; + function createObserverIfNeeded(fragmentInstance, onIntersection) { + const callbacks = targetToCallbackMap.get(fragmentInstance); + targetToCallbackMap.set( + fragmentInstance, + callbacks ? [...callbacks, onIntersection] : [onIntersection], + ); + if (cachedObserver !== null) { + return cachedObserver; + } + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + const fragmentInstances = entry.target.unstable_reactFragments; + if (fragmentInstances) { + Array.from(fragmentInstances).forEach(fInstance => { + const cbs = targetToCallbackMap.get(fInstance) || []; + cbs.forEach(callback => { + callback(entry); + }); + }); + } + + targetToCallbackMap.get(entry.target)?.forEach(callback => { + callback(entry); + }); + }); + }); + cachedObserver = observer; + return observer; + } + + function IntersectionObserverFragment({onIntersection, children}) { + const fragmentRef = React.useRef(null); + React.useLayoutEffect(() => { + const observer = createObserverIfNeeded( + fragmentRef.current, + onIntersection, + ); + fragmentRef.current.observeUsing(observer); + const lastRefValue = fragmentRef.current; + return () => { + lastRefValue.unobserveUsing(observer); + }; + }, []); + return <React.Fragment ref={fragmentRef}>{children}</React.Fragment>; + } + + let logs = []; + function logIntersection(id) { + logs.push(`observe: ${id}`); + } + + function ChildWithManualIO({id}) { + const divRef = React.useRef(null); + React.useLayoutEffect(() => { + const observer = createObserverIfNeeded(divRef.current, entry => { + logIntersection(id); + }); + observer.observe(divRef.current); + return () => { + observer.unobserve(divRef.current); + }; + }, []); + return ( + <div id={id} ref={divRef}> + {id} + </div> + ); + } + + function Test() { + return ( + <> + <IntersectionObserverFragment + onIntersection={() => logIntersection('grandparent')}> + <IntersectionObserverFragment + onIntersection={() => logIntersection('parentA')}> + <div id="childA">A</div> + </IntersectionObserverFragment> + </IntersectionObserverFragment> + <IntersectionObserverFragment + onIntersection={() => logIntersection('parentB')}> + <div id="childB">B</div> + <ChildWithManualIO id="childC" /> + </IntersectionObserverFragment> + </> + ); + } + + const root = ReactDOMClient.createRoot(container); + await act(() => root.render(<Test />)); + + simulateIntersection([ + container.querySelector('#childA'), + {y: 0, x: 0, width: 1, height: 1}, + 1, + ]); + expect(logs).toEqual(['observe: grandparent', 'observe: parentA']); + + logs = []; + + simulateIntersection([ + container.querySelector('#childB'), + {y: 0, x: 0, width: 1, height: 1}, + 1, + ]); + expect(logs).toEqual(['observe: parentB']); + + logs = []; + simulateIntersection([ + container.querySelector('#childC'), + {y: 0, x: 0, width: 1, height: 1}, + 1, + ]); + expect(logs).toEqual(['observe: parentB', 'observe: childC']); + }); }); describe('getClientRects', () => { diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js index 0f334eea860..f5a4361fd41 100644 --- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js +++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js @@ -40,6 +40,7 @@ import { type PublicTextInstance, type PublicRootInstance, } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'; +import {enableFragmentRefsInstanceHandles} from 'shared/ReactFeatureFlags'; const { createNode, @@ -119,6 +120,9 @@ export type TextInstance = { }; export type HydratableInstance = Instance | TextInstance; export type PublicInstance = ReactNativePublicInstance; +type PublicInstanceWithFragmentHandles = PublicInstance & { + unstable_reactFragments?: Set<FragmentInstanceType>, +}; export type Container = { containerTag: number, publicInstance: PublicRootInstance | null, @@ -794,10 +798,45 @@ function collectClientRects(child: Fiber, rects: Array<DOMRect>): boolean { return false; } +function addFragmentHandleToFiber( + child: Fiber, + fragmentInstance: FragmentInstanceType, +): boolean { + if (enableFragmentRefsInstanceHandles) { + const instance = ((getPublicInstanceFromHostFiber( + child, + ): any): PublicInstanceWithFragmentHandles); + if (instance != null) { + addFragmentHandleToInstance(instance, fragmentInstance); + } + } + return false; +} + +function addFragmentHandleToInstance( + instance: PublicInstanceWithFragmentHandles, + fragmentInstance: FragmentInstanceType, +): void { + if (enableFragmentRefsInstanceHandles) { + if (instance.unstable_reactFragments == null) { + instance.unstable_reactFragments = new Set(); + } + instance.unstable_reactFragments.add(fragmentInstance); + } +} + export function createFragmentInstance( fragmentFiber: Fiber, ): FragmentInstanceType { - return new (FragmentInstance: any)(fragmentFiber); + const fragmentInstance = new (FragmentInstance: any)(fragmentFiber); + if (enableFragmentRefsInstanceHandles) { + traverseFragmentInstance( + fragmentFiber, + addFragmentHandleToFiber, + fragmentInstance, + ); + } + return fragmentInstance; } export function updateFragmentInstanceFiber( @@ -821,13 +860,26 @@ export function commitNewChildToFragmentInstance( observer.observe(publicInstance); }); } + if (enableFragmentRefsInstanceHandles) { + addFragmentHandleToInstance( + ((publicInstance: any): PublicInstanceWithFragmentHandles), + fragmentInstance, + ); + } } export function deleteChildFromFragmentInstance( - child: Instance, + childInstance: Instance, fragmentInstance: FragmentInstanceType, ): void { - // Noop + const publicInstance = ((getPublicInstance( + childInstance, + ): any): PublicInstanceWithFragmentHandles); + if (enableFragmentRefsInstanceHandles) { + if (publicInstance.unstable_reactFragments != null) { + publicInstance.unstable_reactFragments.delete(fragmentInstance); + } + } } export const NotPendingTransition: TransitionStatus = null; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 4e08b56d114..68410612b5d 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -147,6 +147,7 @@ export const enableInfiniteRenderLoopDetection: boolean = false; export const enableFragmentRefs: boolean = true; export const enableFragmentRefsScrollIntoView: boolean = true; +export const enableFragmentRefsInstanceHandles: boolean = false; // ----------------------------------------------------------------------------- // Ready for next major. diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js index 0cbcd61a876..f139a3fcf28 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js @@ -25,4 +25,5 @@ export const passChildrenWhenCloningPersistedNodes = __VARIANT__; export const renameElementSymbol = __VARIANT__; export const enableFragmentRefs = __VARIANT__; export const enableFragmentRefsScrollIntoView = __VARIANT__; +export const enableFragmentRefsInstanceHandles = __VARIANT__; export const enableComponentPerformanceTrack = __VARIANT__; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index dd0bd8624f3..8a2e7921bdd 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -27,6 +27,7 @@ export const { renameElementSymbol, enableFragmentRefs, enableFragmentRefsScrollIntoView, + enableFragmentRefsInstanceHandles, } = dynamicFlags; // The rest of the flags are static for better dead code elimination. diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 555307cef00..e9de8e6b4a4 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -74,6 +74,7 @@ export const ownerStackLimit = 1e4; export const enableFragmentRefs: boolean = true; export const enableFragmentRefsScrollIntoView: boolean = false; +export const enableFragmentRefsInstanceHandles: boolean = false; // Profiling Only export const enableProfilerTimer: boolean = __PROFILE__; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 9d2e73024d1..57de815d9c3 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -75,6 +75,7 @@ export const ownerStackLimit = 1e4; export const enableFragmentRefs: boolean = true; export const enableFragmentRefsScrollIntoView: boolean = true; +export const enableFragmentRefsInstanceHandles: boolean = false; // TODO: This must be in sync with the main ReactFeatureFlags file because // the Test Renderer's value must be the same as the one used by the diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index f652ec4047c..90e24f264d1 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -82,6 +82,7 @@ export const enableDefaultTransitionIndicator: boolean = true; export const enableFragmentRefs: boolean = false; export const enableFragmentRefsScrollIntoView: boolean = false; +export const enableFragmentRefsInstanceHandles: boolean = false; export const ownerStackLimit = 1e4; // Flow magic to verify the exports of this file match the original version. diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 6ba56d9d54e..9d8be29c658 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -111,5 +111,7 @@ export const enableDefaultTransitionIndicator: boolean = true; export const ownerStackLimit = 1e4; +export const enableFragmentRefsInstanceHandles: boolean = true; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); From f646e8ffd85ddf5bd8be23327ac887196355bf9b Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Tue, 4 Nov 2025 16:30:08 +0100 Subject: [PATCH 156/276] [Flight] Fix `hasReadable` flag in Node.js clients' debug channel (#35039) For Edge Flight servers, that use Web Streams, we're defining the `debugChannel` option as: ``` debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...} ``` Whereas for Node.js Flight servers, that use Node.js Streams, we're defining it as: ``` debugChannel?: Readable | Writable | Duplex | WebSocket ``` For the Edge Flight clients, there is currently only one direction of the debug channel supported, so we define the option as: ``` debugChannel?: {readable?: ReadableStream, ...} ``` Consequently, for the Node.js Flight clients, we define the option as: ``` debugChannel?: Readable ``` The presence of a readable debug channel is passed to the Flight client internally via the `hasReadable` flag on the internal `debugChannel` option. For the Node.js clients, that flag was accidentally derived from the public option `debugChannel.readable`, which is conceptually incorrect, because `debugChannel` is a `Readable` stream, not an options object with a `readable` property. However, a `Readable` also has a `readable` property, which is a boolean that indicates whether the stream is in a readable state. This meant that the `hasReadable` flag was incidentally still set correctly. Regardless, this was confusing and unintentional, so we're now fixing it to always set `hasReadable` to `true` when a `debugChannel` is provided to the Node.js clients. We'll revisit this in case we ever add support for writable debug channels in Node.js (and Edge) clients. --- .../src/client/ReactFlightDOMClientNode.js | 5 +---- .../src/client/ReactFlightDOMClientNode.js | 5 +---- .../src/client/ReactFlightDOMClientNode.js | 5 +---- .../src/client/ReactFlightDOMClientNode.js | 5 +---- 4 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js index 38ac43d0131..ae11dc29bff 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js @@ -93,10 +93,7 @@ function createFromNodeStream<T>( ): Thenable<T> { const debugChannel: void | DebugChannel = __DEV__ && options && options.debugChannel !== undefined - ? { - hasReadable: options.debugChannel.readable !== undefined, - callback: null, - } + ? {hasReadable: true, callback: null} : undefined; const response: Response = createResponse( diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js index a9b82e343fb..e8716bdc6bb 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js @@ -86,10 +86,7 @@ export function createFromNodeStream<T>( ): Thenable<T> { const debugChannel: void | DebugChannel = __DEV__ && options && options.debugChannel !== undefined - ? { - hasReadable: options.debugChannel.readable !== undefined, - callback: null, - } + ? {hasReadable: true, callback: null} : undefined; const response: Response = createResponse( diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js index 73d79800c92..8863b1bf1c6 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js @@ -95,10 +95,7 @@ function createFromNodeStream<T>( ): Thenable<T> { const debugChannel: void | DebugChannel = __DEV__ && options && options.debugChannel !== undefined - ? { - hasReadable: options.debugChannel.readable !== undefined, - callback: null, - } + ? {hasReadable: true, callback: null} : undefined; const response: Response = createResponse( diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js index 73d79800c92..8863b1bf1c6 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js @@ -95,10 +95,7 @@ function createFromNodeStream<T>( ): Thenable<T> { const debugChannel: void | DebugChannel = __DEV__ && options && options.debugChannel !== undefined - ? { - hasReadable: options.debugChannel.readable !== undefined, - callback: null, - } + ? {hasReadable: true, callback: null} : undefined; const response: Response = createResponse( From d000261eef6109c332a1880e92836856473f6a39 Mon Sep 17 00:00:00 2001 From: Alex Hunt <hello@alexhunt.dev> Date: Tue, 4 Nov 2025 17:07:31 +0000 Subject: [PATCH 157/276] [Tracks] Annotate devtools.performanceIssue for Cascading Updates in DEV (#34961) --- .../src/ReactFiberPerformanceTrack.js | 15 +++++++++++++++ packages/shared/ReactFeatureFlags.js | 5 +++++ .../shared/forks/ReactFeatureFlags.native-fb.js | 2 ++ .../shared/forks/ReactFeatureFlags.native-oss.js | 1 + .../forks/ReactFeatureFlags.test-renderer.js | 1 + .../ReactFeatureFlags.test-renderer.native-fb.js | 1 + .../forks/ReactFeatureFlags.test-renderer.www.js | 1 + packages/shared/forks/ReactFeatureFlags.www.js | 2 ++ 8 files changed, 28 insertions(+) diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index 5f94bd35e02..f926bd6085b 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -36,6 +36,7 @@ import { import { enableProfilerTimer, enableGestureTransition, + enablePerformanceIssueReporting, } from 'shared/ReactFeatureFlags'; const supportsUserTiming = @@ -203,6 +204,15 @@ const reusableComponentOptions: PerformanceMeasureOptions = { const reusableChangedPropsEntry = ['Changed Props', '']; +const reusableCascadingUpdateIssue = { + name: 'React: Cascading Update', + severity: 'warning', + description: + 'A cascading update is an update that is triggered during an ongoing render. This can lead to performance issues.', + learnMoreUrl: + 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', +}; + const DEEP_EQUALITY_WARNING = 'This component received deeply equal props. It might benefit from useMemo or the React Compiler in its owner.'; @@ -761,6 +771,11 @@ export function logBlockingStart( }, }, }; + if (enablePerformanceIssueReporting && isSpawnedUpdate) { + // $FlowFixMe[prop-missing] - detail is untyped + measureOptions.detail.devtools.performanceIssue = + reusableCascadingUpdateIssue; + } if (debugTask) { debugTask.run( diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 68410612b5d..6d45a30718a 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -232,6 +232,11 @@ export const enableProfilerTimer = __PROFILE__; // All calls should also be gated on enableProfilerTimer. export const enableComponentPerformanceTrack: boolean = true; +// Enables annotating of React performance track events with `performanceIssue` +// metadata, to more prominently highlight performance issues to users +// (initially, an experimental feature in React Native). +export const enablePerformanceIssueReporting: boolean = false; + // Adds user timing marks for e.g. state updates, suspense, and work loop stuff, // for an experimental timeline tool. export const enableSchedulingProfiler: boolean = diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 8a2e7921bdd..dbf92a2190e 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -83,6 +83,8 @@ export const enableDefaultTransitionIndicator: boolean = true; export const ownerStackLimit = 1e4; export const enableComponentPerformanceTrack: boolean = __PROFILE__ && dynamicFlags.enableComponentPerformanceTrack; +export const enablePerformanceIssueReporting: boolean = + enableComponentPerformanceTrack; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index e9de8e6b4a4..c509dbce69f 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -42,6 +42,7 @@ export const enablePostpone: boolean = false; export const enableReactTestRendererWarning: boolean = false; export const enableRetryLaneExpiration: boolean = false; export const enableComponentPerformanceTrack: boolean = true; +export const enablePerformanceIssueReporting: boolean = false; export const enableSchedulingProfiler: boolean = !enableComponentPerformanceTrack && __PROFILE__; export const enableScopeAPI: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 57de815d9c3..5ae58dab14d 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -16,6 +16,7 @@ export const enableProfilerTimer: boolean = __PROFILE__; export const enableProfilerCommitHooks: boolean = __PROFILE__; export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__; export const enableComponentPerformanceTrack: boolean = true; +export const enablePerformanceIssueReporting: boolean = false; export const enableUpdaterTracking: boolean = false; export const enableLegacyCache: boolean = __EXPERIMENTAL__; export const enableAsyncIterableChildren: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index eb56da603d3..91803ab38ac 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -41,6 +41,7 @@ export const enableReactTestRendererWarning = false; export const enableRetryLaneExpiration = false; export const enableSchedulingProfiler = __PROFILE__; export const enableComponentPerformanceTrack = false; +export const enablePerformanceIssueReporting = false; export const enableScopeAPI = false; export const enableEagerAlternateStateNodeCleanup = true; export const enableSuspenseAvoidThisFallback = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 90e24f264d1..dd982851075 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -16,6 +16,7 @@ export const enableProfilerTimer: boolean = __PROFILE__; export const enableProfilerCommitHooks: boolean = __PROFILE__; export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__; export const enableComponentPerformanceTrack: boolean = false; +export const enablePerformanceIssueReporting: boolean = false; export const enableUpdaterTracking: boolean = false; export const enableLegacyCache: boolean = true; export const enableAsyncIterableChildren: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 9d8be29c658..542d72c2f6f 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -59,6 +59,8 @@ export const enableThrottledScheduling: boolean = false; export const enableHydrationLaneScheduling: boolean = true; +export const enablePerformanceIssueReporting: boolean = false; + // Logs additional User Timing API marks for use with an experimental profiling tool. export const enableSchedulingProfiler: boolean = __PROFILE__ && dynamicFeatureFlags.enableSchedulingProfiler; From 8f8b336734d7c807f5aa11b0f31540e63302d789 Mon Sep 17 00:00:00 2001 From: Jordan Brown <jmbrown@meta.com> Date: Tue, 4 Nov 2025 14:59:29 -0500 Subject: [PATCH 158/276] [eslint] Fix useEffectEvent checks in component syntax (#35041) We were not recording uEE calls in component/hook syntax. Easy fix. Added tests matching function component syntax for component syntax + added one for hooks --- .../__tests__/ESLintRulesOfHooks-test.js | 344 ++++++++++++++++++ .../src/rules/RulesOfHooks.ts | 12 + 2 files changed, 356 insertions(+) diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js index 05bdb1e71ed..3d60a36824d 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js @@ -585,6 +585,29 @@ const allTests = { code: normalizeIndent` // Valid: useEffectEvent can be called in custom effect hooks configured via ESLint settings function MyComponent({ theme }) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useMyEffect(() => { + onClick(); + }); + useServerEffect(() => { + onClick(); + }); + } + `, + settings: { + 'react-hooks': { + additionalEffectHooks: '(useMyEffect|useServerEffect)', + }, + }, + }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid: useEffectEvent can be called in custom effect hooks configured via ESLint settings + component MyComponent(theme: any) { const onClick = useEffectEvent(() => { showNotification(theme); }); @@ -618,6 +641,24 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be called in a useEffect. + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useEffect(() => { + onClick(); + }); + React.useEffect(() => { + onClick(); + }); + } + `, + }, { code: normalizeIndent` // Valid because functions created with useEffectEvent can be passed by reference in useEffect @@ -644,6 +685,34 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be passed by reference in useEffect + // and useEffectEvent. + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + const onClick2 = useEffectEvent(() => { + debounce(onClick); + debounce(() => onClick()); + debounce(() => { onClick() }); + deboucne(() => debounce(onClick)); + }); + useEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + React.useEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + return null; + } + `, + }, { code: normalizeIndent` function MyComponent({ theme }) { @@ -656,6 +725,20 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + component MyComponent(theme: any) { + useEffect(() => { + onClick(); + }); + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + } + `, + }, { code: normalizeIndent` function MyComponent({ theme }) { @@ -673,6 +756,25 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + component MyComponent(theme: any) { + // Can receive arguments + const onEvent = useEffectEvent((text) => { + console.log(text); + }); + + useEffect(() => { + onEvent('Hello world'); + }); + React.useEffect(() => { + onEvent('Hello world'); + }); + } + `, + }, { code: normalizeIndent` // Valid because functions created with useEffectEvent can be called in useLayoutEffect. @@ -689,6 +791,24 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be called in useLayoutEffect. + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useLayoutEffect(() => { + onClick(); + }); + React.useLayoutEffect(() => { + onClick(); + }); + } + `, + }, { code: normalizeIndent` // Valid because functions created with useEffectEvent can be called in useInsertionEffect. @@ -705,6 +825,24 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be called in useInsertionEffect. + component MyComponent(theme) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useInsertionEffect(() => { + onClick(); + }); + React.useInsertionEffect(() => { + onClick(); + }); + } + `, + }, { code: normalizeIndent` // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect @@ -739,6 +877,42 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect. + // and useInsertionEffect. + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + const onClick2 = useEffectEvent(() => { + debounce(onClick); + debounce(() => onClick()); + debounce(() => { onClick() }); + deboucne(() => debounce(onClick)); + }); + useLayoutEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + React.useLayoutEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + useInsertionEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + React.useInsertionEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + return null; + } + `, + }, ], invalid: [ { @@ -1525,6 +1699,22 @@ const allTests = { `, errors: [useEffectEventError('onClick', true)], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Invalid: useEffectEvent should not be callable in regular custom hooks without additional configuration + component MyComponent() { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useCustomHook(() => { + onClick(); + }); + } + `, + errors: [useEffectEventError('onClick', true)], + }, { code: normalizeIndent` // Invalid: useEffectEvent should not be callable in hooks not matching the settings regex @@ -1544,6 +1734,27 @@ const allTests = { }, errors: [useEffectEventError('onClick', true)], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Invalid: useEffectEvent should not be callable in hooks not matching the settings regex + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useWrongHook(() => { + onClick(); + }); + } + `, + settings: { + 'react-hooks': { + additionalEffectHooks: 'useMyEffect', + }, + }, + errors: [useEffectEventError('onClick', true)], + }, { code: normalizeIndent` function MyComponent({ theme }) { @@ -1555,6 +1766,19 @@ const allTests = { `, errors: [useEffectEventError('onClick', false)], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + return <Child onClick={onClick}></Child>; + } + `, + errors: [useEffectEventError('onClick', false)], + }, { code: normalizeIndent` // Invalid because useEffectEvent is being passed down @@ -1566,6 +1790,19 @@ const allTests = { `, errors: [{...useEffectEventError(null, false), line: 4}], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Invalid because useEffectEvent is being passed down + component MyComponent(theme: any) { + return <Child onClick={useEffectEvent(() => { + showNotification(theme); + })} />; + } + `, + errors: [{...useEffectEventError(null, false), line: 5}], + }, { code: normalizeIndent` // This should error even though it shares an identifier name with the below @@ -1601,6 +1838,43 @@ const allTests = { {...useEffectEventError('onClick', true), line: 15}, ], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // This should error even though it shares an identifier name with the below + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme) + }); + return <Child onClick={onClick} /> + } + + // The useEffectEvent function shares an identifier name with the above + component MyOtherComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme) + }); + return <Child onClick={() => onClick()} /> + } + + // The useEffectEvent function shares an identifier name with the above + component MyLastComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme) + }); + useEffect(() => { + onClick(); // No error here, errors on all other uses + onClick; + }) + return <Child /> + } + `, + errors: [ + {...useEffectEventError('onClick', false), line: 8}, + {...useEffectEventError('onClick', true), line: 16}, + ], + }, { code: normalizeIndent` const MyComponent = ({ theme }) => { @@ -1625,6 +1899,21 @@ const allTests = { `, errors: [{...useEffectEventError('onClick', false), line: 7}], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Invalid because onClick is being aliased to foo but not invoked + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + let foo = onClick; + return <Bar onClick={foo} /> + } + `, + errors: [{...useEffectEventError('onClick', false), line: 8}], + }, { code: normalizeIndent` // Should error because it's being passed down to JSX, although it's been referenced once @@ -1641,6 +1930,24 @@ const allTests = { `, errors: [useEffectEventError('onClick', false)], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Should error because it's being passed down to JSX, although it's been referenced once + // in an effect + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(them); + }); + useEffect(() => { + setTimeout(onClick, 100); + }); + return <Child onClick={onClick} /> + } + `, + errors: [useEffectEventError('onClick', false)], + }, { code: normalizeIndent` // Invalid because functions created with useEffectEvent cannot be called in arbitrary closures. @@ -1676,6 +1983,43 @@ const allTests = { `It cannot be assigned to a variable or passed down.`, ], }, + { + syntax: 'flow', + code: normalizeIndent` + // Hook syntax version + // Invalid because functions created with useEffectEvent cannot be called in arbitrary closures. + hook useMyHook(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + // error message 1 + const onClick2 = () => { onClick() }; + // error message 2 + const onClick3 = useCallback(() => onClick(), []); + // error message 3 + const onClick4 = onClick; + return <> + {/** error message 4 */} + <Child onClick={onClick}></Child> + <Child onClick={onClick2}></Child> + <Child onClick={onClick3}></Child> + </>; + } + `, + // Explicitly test error messages here for various cases + errors: [ + `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` + + 'Effects and Effect Events in the same component.', + `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` + + 'Effects and Effect Events in the same component.', + `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` + + `Effects and Effect Events in the same component. ` + + `It cannot be assigned to a variable or passed down.`, + `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` + + `Effects and Effect Events in the same component. ` + + `It cannot be assigned to a variable or passed down.`, + ], + }, ], }; diff --git a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts index 4e49e96bfe6..ca82c99e2f5 100644 --- a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts +++ b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts @@ -833,6 +833,18 @@ const rule = { recordAllUseEffectEventFunctions(getScope(node)); } }, + + // @ts-expect-error parser-hermes produces these node types + ComponentDeclaration(node) { + // component MyComponent() { const onClick = useEffectEvent(...) } + recordAllUseEffectEventFunctions(getScope(node)); + }, + + // @ts-expect-error parser-hermes produces these node types + HookDeclaration(node) { + // hook useMyHook() { const onClick = useEffectEvent(...) } + recordAllUseEffectEventFunctions(getScope(node)); + }, }; }, } satisfies Rule.RuleModule; From 986323f8c65927490036183357d644974a14b8a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 4 Nov 2025 22:11:33 -0500 Subject: [PATCH 159/276] [Fiber] SuspenseList with "hidden" tail row should "catch" suspense (#35042) Normally if you suspend in a SuspenseList row above a Suspense boundary in that row, it'll suspend the parent. Which can itself delay the commit or resuspend a parent boundary. That's because SuspenseList mostly just coordinates the state of the inner boundaries and isn't a boundary itself. However, for tail "hidden" and "collapsed" this is not quite the case because the rows themselves can avoid being rendered. In the case of "collapsed" we require at least one Suspense boundary above to have successfully rendered before committing the list because the idea of this mode is that you should at least always show some indicator that things are still loading. Since we'd never try the next one after that at all, this just works. Expect there was an unrelated bug that meant that "suspend with delay" on a Retry didn't suspend the commit. This caused a scenario were it'd allow a commit proceed when it shouldn't. So I fixed that too. The counter intuitive thing here is that we won't actually show a previous completed row if the loading state of the next row is still loading. For tail "hidden" it's a little different because we don't actually require any loading indicator at all to be shown while it's loading. If we attempt a row and it suspends, we can just hide it (and the rest) and move to commit. Therefore this implements a path where if all the rest of the tail are new mounts (we wouldn't be required to unmount any existing boundaries) then we can treat the SuspenseList boundary itself as "catching" the suspense. This is more coherent semantics since any future row that we didn't attempt also wouldn't resuspend the parent. This allows simple cases like `<SuspenseList>{list}</SuspenseList>` to stream in each row without any indicator and no need for Suspense boundaries. --- .../src/ReactFiberBeginWork.js | 15 ++ .../src/ReactFiberCompleteWork.js | 36 ++- .../src/ReactFiberSuspenseContext.js | 36 ++- .../react-reconciler/src/ReactFiberThrow.js | 11 +- .../src/ReactFiberUnwindWork.js | 28 ++- .../src/ReactFiberWorkLoop.js | 2 +- .../src/__tests__/ReactSuspenseList-test.js | 221 ++++++++++++++++++ 7 files changed, 337 insertions(+), 12 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index 33fadfd5396..25918e8b387 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -3397,6 +3397,13 @@ function updateSuspenseListComponent( let suspenseContext: SuspenseContext = suspenseStackCursor.current; + if (workInProgress.flags & DidCapture) { + // This is the second pass after having suspended in a row. Proceed directly + // to the complete phase. + pushSuspenseListContext(workInProgress, suspenseContext); + return null; + } + const shouldForceFallback = hasSuspenseListContext( suspenseContext, (ForceSuspenseFallback: SuspenseContext), @@ -4011,6 +4018,14 @@ function attemptEarlyBailoutIfNoScheduledUpdate( break; } case SuspenseListComponent: { + if (workInProgress.flags & DidCapture) { + // Second pass caught. + return updateSuspenseListComponent( + current, + workInProgress, + renderLanes, + ); + } const didSuspendBefore = (current.flags & DidCapture) !== NoFlags; let hasChildWork = includesSomeLane( diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js index 0b1f1e4366e..dab1b2272bd 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js @@ -138,6 +138,7 @@ import { popSuspenseListContext, popSuspenseHandler, pushSuspenseListContext, + pushSuspenseListCatch, setShallowSuspenseListContext, ForceSuspenseFallback, setDefaultShallowSuspenseListContext, @@ -765,6 +766,17 @@ function cutOffTailIfNeeded( } } +function isOnlyNewMounts(tail: Fiber): boolean { + let fiber: null | Fiber = tail; + while (fiber !== null) { + if (fiber.alternate !== null) { + return false; + } + fiber = fiber.sibling; + } + return true; +} + function bubbleProperties(completedWork: Fiber) { const didBailout = completedWork.alternate !== null && @@ -1855,7 +1867,10 @@ function completeWork( if (renderState.tail !== null) { // We still have tail rows to render. // Pop a row. + // TODO: Consider storing the first of the new mount tail in the state so + // that we don't have to recompute this for every row in the list. const next = renderState.tail; + const onlyNewMounts = isOnlyNewMounts(next); renderState.rendering = next; renderState.tail = next.sibling; renderState.renderingStartTime = now(); @@ -1874,7 +1889,26 @@ function completeWork( suspenseContext = setDefaultShallowSuspenseListContext(suspenseContext); } - pushSuspenseListContext(workInProgress, suspenseContext); + if ( + renderState.tailMode === 'visible' || + renderState.tailMode === 'collapsed' || + !onlyNewMounts || + // TODO: While hydrating, we still let it suspend the parent. Tail mode hidden has broken + // hydration anyway right now but this preserves the previous semantics out of caution. + // Once proper hydration is implemented, this special case should be removed as it should + // never be needed. + getIsHydrating() + ) { + pushSuspenseListContext(workInProgress, suspenseContext); + } else { + // If we are rendering in 'hidden' (default) tail mode, then we if we suspend in the + // tail itself, we can delete it rather than suspend the parent. So we act as a catch in that + // case. For 'collapsed' we need to render at least one in suspended state, after which we'll + // have cut off the rest to never attempt it so it never hits this case. + // If this is an updated node, we cannot delete it from the tail so it's effectively visible. + // As a consequence, if it resuspends it actually suspends the parent by taking the other path. + pushSuspenseListCatch(workInProgress, suspenseContext); + } // Do a pass over the next row. if (getIsHydrating()) { // Re-apply tree fork since we popped the tree fork context in the beginning of this function. diff --git a/packages/react-reconciler/src/ReactFiberSuspenseContext.js b/packages/react-reconciler/src/ReactFiberSuspenseContext.js index 3177b9d1b35..aec47af4656 100644 --- a/packages/react-reconciler/src/ReactFiberSuspenseContext.js +++ b/packages/react-reconciler/src/ReactFiberSuspenseContext.js @@ -48,9 +48,10 @@ export function pushPrimaryTreeSuspenseHandler(handler: Fiber): void { // Shallow Suspense context fields, like ForceSuspenseFallback, should only be // propagated a single level. For example, when ForceSuspenseFallback is set, // it should only force the nearest Suspense boundary into fallback mode. - pushSuspenseListContext( - handler, + push( + suspenseStackCursor, setDefaultShallowSuspenseListContext(suspenseStackCursor.current), + handler, ); // Experimental feature: Some Suspense boundaries are marked as having an @@ -113,7 +114,7 @@ export function pushDehydratedActivitySuspenseHandler(fiber: Fiber): void { // Reuse the current value on the stack. // TODO: We can avoid needing to push here by by forking popSuspenseHandler // into separate functions for Activity, Suspense and Offscreen. - pushSuspenseListContext(fiber, suspenseStackCursor.current); + push(suspenseStackCursor, suspenseStackCursor.current, fiber); push(suspenseHandlerStackCursor, fiber, fiber); if (shellBoundary === null) { // We can contain any suspense inside the Activity boundary. @@ -127,7 +128,7 @@ export function pushOffscreenSuspenseHandler(fiber: Fiber): void { // Reuse the current value on the stack. // TODO: We can avoid needing to push here by by forking popSuspenseHandler // into separate functions for Activity, Suspense and Offscreen. - pushSuspenseListContext(fiber, suspenseStackCursor.current); + push(suspenseStackCursor, suspenseStackCursor.current, fiber); push(suspenseHandlerStackCursor, fiber, fiber); if (shellBoundary === null) { // We're rendering hidden content. If it suspends, we can handle it by @@ -141,7 +142,7 @@ export function pushOffscreenSuspenseHandler(fiber: Fiber): void { } export function reuseSuspenseHandlerOnStack(fiber: Fiber) { - pushSuspenseListContext(fiber, suspenseStackCursor.current); + push(suspenseStackCursor, suspenseStackCursor.current, fiber); push(suspenseHandlerStackCursor, getSuspenseHandler(), fiber); } @@ -155,7 +156,7 @@ export function popSuspenseHandler(fiber: Fiber): void { // Popping back into the shell. shellBoundary = null; } - popSuspenseListContext(fiber); + pop(suspenseStackCursor, fiber); } // SuspenseList context @@ -201,9 +202,32 @@ export function pushSuspenseListContext( fiber: Fiber, newContext: SuspenseContext, ): void { + // Push the current handler in this case since we're not catching at the SuspenseList + // for typical rows. + const handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, fiber); + push(suspenseStackCursor, newContext, fiber); +} + +export function pushSuspenseListCatch( + fiber: Fiber, + newContext: SuspenseContext, +): void { + // In this case we do want to handle catching suspending on the actual boundary itself. + // This is used for rows that are allowed to be hidden anyway. + push(suspenseHandlerStackCursor, fiber, fiber); push(suspenseStackCursor, newContext, fiber); + if (shellBoundary === null) { + // We can contain the effects to hiding the current row. + shellBoundary = fiber; + } } export function popSuspenseListContext(fiber: Fiber): void { pop(suspenseStackCursor, fiber); + pop(suspenseHandlerStackCursor, fiber); + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } diff --git a/packages/react-reconciler/src/ReactFiberThrow.js b/packages/react-reconciler/src/ReactFiberThrow.js index 92540176fe8..8ff61b02697 100644 --- a/packages/react-reconciler/src/ReactFiberThrow.js +++ b/packages/react-reconciler/src/ReactFiberThrow.js @@ -27,6 +27,7 @@ import { ActivityComponent, SuspenseComponent, OffscreenComponent, + SuspenseListComponent, } from './ReactWorkTags'; import { DidCapture, @@ -400,7 +401,8 @@ function throwException( if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case ActivityComponent: - case SuspenseComponent: { + case SuspenseComponent: + case SuspenseListComponent: { // If this suspense/activity boundary is not already showing a fallback, mark // the in-progress render as suspended. We try to perform this logic // as soon as soon as possible during the render phase, so the work @@ -561,6 +563,13 @@ function throwException( // Instead of surfacing the error, find the nearest Suspense boundary // and render it again without hydration. if (hydrationBoundary !== null) { + if (__DEV__) { + if (hydrationBoundary.tag === SuspenseListComponent) { + console.error( + 'SuspenseList should never catch while hydrating. This is a bug in React.', + ); + } + } if ((hydrationBoundary.flags & ShouldCapture) === NoFlags) { // Set a flag to indicate that we should try rendering the normal // children again, not the fallback. diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.js b/packages/react-reconciler/src/ReactFiberUnwindWork.js index efe08a43ac7..b2954c41f5a 100644 --- a/packages/react-reconciler/src/ReactFiberUnwindWork.js +++ b/packages/react-reconciler/src/ReactFiberUnwindWork.js @@ -11,7 +11,10 @@ import type {ReactContext} from 'shared/ReactTypes'; import type {Fiber, FiberRoot} from './ReactInternalTypes'; import type {Lanes} from './ReactFiberLane'; import type {ActivityState} from './ReactFiberActivityComponent'; -import type {SuspenseState} from './ReactFiberSuspenseComponent'; +import type { + SuspenseState, + SuspenseListRenderState, +} from './ReactFiberSuspenseComponent'; import type {Cache} from './ReactFiberCacheComponent'; import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent'; @@ -31,7 +34,7 @@ import { CacheComponent, TracingMarkerComponent, } from './ReactWorkTags'; -import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags'; +import {DidCapture, NoFlags, ShouldCapture, Update} from './ReactFiberFlags'; import {NoMode, ProfileMode} from './ReactTypeOfMode'; import { enableProfilerTimer, @@ -180,8 +183,27 @@ function unwindWork( } case SuspenseListComponent: { popSuspenseListContext(workInProgress); - // SuspenseList doesn't actually catch anything. It should've been + // SuspenseList doesn't normally catch anything. It should've been // caught by a nested boundary. If not, it should bubble through. + const flags = workInProgress.flags; + if (flags & ShouldCapture) { + workInProgress.flags = (flags & ~ShouldCapture) | DidCapture; + // If we caught something on the SuspenseList itself it's because + // we want to ignore something. Re-enter the cycle and handle it + // in the complete phase. + const renderState: null | SuspenseListRenderState = + workInProgress.memoizedState; + if (renderState !== null) { + // Cut off any remaining tail work and don't commit the rendering one. + // This assumes that we have already confirmed that none of these are + // already mounted. + renderState.rendering = null; + renderState.tail = null; + } + // Schedule the commit phase to attach retry listeners. + workInProgress.flags |= Update; + return workInProgress; + } return null; } case HostPortal: diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index 3de2ab6b16f..f7200458be1 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -1355,7 +1355,7 @@ function finishConcurrentRender( throw new Error('Root did not complete. This is a bug in React.'); } case RootSuspendedWithDelay: { - if (!includesOnlyTransitions(lanes)) { + if (!includesOnlyTransitions(lanes) && !includesOnlyRetries(lanes)) { // Commit the placeholder. break; } diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js index ba5b668652f..c7d4de1421e 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js @@ -2346,6 +2346,227 @@ describe('ReactSuspenseList', () => { ); }); + // @gate enableSuspenseList + it('reveals "hidden" rows one by one without suspense boundaries', async () => { + const A = createAsyncText('A'); + const B = createAsyncText('B'); + const C = createAsyncText('C'); + + function Foo() { + return ( + <SuspenseList revealOrder="forwards" tail="hidden"> + <div> + <A /> + </div> + <B /> + <C /> + </SuspenseList> + ); + } + + ReactNoop.render( + <Suspense fallback="Loading root"> + <Foo /> + </Suspense>, + ); + + await waitForAll(['Suspend! [A]']); + + // We can commit without any rows at all leaving empty. + expect(ReactNoop).toMatchRenderedOutput(null); + + await act(() => A.resolve()); + assertLog(['A', 'Suspend! [B]']); + + expect(ReactNoop).toMatchRenderedOutput( + <div> + <span>A</span> + </div>, + ); + + await act(() => B.resolve()); + assertLog(['B', 'Suspend! [C]']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <div> + <span>A</span> + </div> + <span>B</span> + </>, + ); + + await act(() => C.resolve()); + assertLog(['C']); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <div> + <span>A</span> + </div> + <span>B</span> + <span>C</span> + </>, + ); + }); + + // @gate enableSuspenseList + it('preserves already mounted rows when a new hidden on is inserted in the tail', async () => { + const B = createAsyncText('B'); + const C = createAsyncText('C'); + + let count = 0; + function MountCount({children}) { + // This component should only mount once. + React.useLayoutEffect(() => { + count++; + }, []); + return children; + } + + function Foo({insert}) { + return ( + <SuspenseList + revealOrder="forwards" + tail={insert ? 'hidden' : 'visible'}> + <Text text="A" /> + {insert ? <B /> : null} + <MountCount> + <Suspense fallback={<Text text="Loading C" />}> + <C /> + </Suspense> + </MountCount> + </SuspenseList> + ); + } + + await act(() => { + ReactNoop.render(<Foo insert={false} />); + }); + assertLog(['A', 'Suspend! [C]', 'Loading C', 'Suspend! [C]']); + + expect(count).toBe(1); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>Loading C</span> + </>, + ); + + await act(() => { + ReactNoop.render(<Foo insert={true} />); + }); + + assertLog(['A', 'Suspend! [B]', 'A', 'Suspend! [B]']); + + expect(count).toBe(1); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>Loading C</span> + </>, + ); + + await act(async () => { + await B.resolve(); + await C.resolve(); + }); + + assertLog(['A', 'B', 'C']); + + expect(count).toBe(1); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>B</span> + <span>C</span> + </>, + ); + }); + + // @gate enableSuspenseList + it('reveals "collapsed" rows one by one after the first without boundaries', async () => { + const A = createAsyncText('A'); + const B = createAsyncText('B'); + const C = createAsyncText('C'); + + function Foo() { + return ( + <SuspenseList revealOrder="forwards" tail="collapsed"> + <A /> + <Suspense fallback={<Text text="Loading B" />}> + <B /> + </Suspense> + <C /> + </SuspenseList> + ); + } + + await act(async () => { + ReactNoop.render( + <Suspense fallback="Loading root"> + <Foo /> + </Suspense>, + ); + await waitForAll(['Suspend! [A]', 'Suspend! [A]']); + }); + + // The root is still blocked on the first row. + expect(ReactNoop).toMatchRenderedOutput('Loading root'); + + await A.resolve(); + + await waitForAll(['A', 'Suspend! [B]', 'Loading B']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + // Because we have a Suspense boundary that can commit we can now unblock the rest. + // If it wasn't a boundary then we couldn't make progress because it would commit + // without any loading state. + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>Loading B</span> + </>, + ); + + await act(() => B.resolve()); + assertLog(['B', 'Suspend! [C]', 'B', 'Suspend! [C]']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + // Surprisingly unsuspending B actually causes the parent to resuspend + // because C is now unblocked which resuspends the parent. Preventing the + // Retry from committing. That's because we don't want to commit into a + // state that doesn't have any loading indicators at all. That's what + // "collapsed" is for. To ensure there's always a loading indicator. + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>Loading B</span> + </>, + ); + + await act(() => C.resolve()); + assertLog(['B', 'C']); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>B</span> + <span>C</span> + </>, + ); + }); + // @gate enableSuspenseList it('eventually resolves a nested forwards suspense list', async () => { const B = createAsyncText('B'); From c308cb590598b61a7fc1766e15edf454d758d226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 4 Nov 2025 23:23:25 -0500 Subject: [PATCH 160/276] Disable enablePostpone flag in experimental (#31042) I don't think we're ready to land this yet since we're using it to run other experiments and our tests. I'm opening this PR to indicate intent to disable and to ensure tests in other combinations still work. Such as enableHalt without enablePostpone. I think we'll also need to rewrite some tests that depend on enablePostpone to preserve some coverage. The conclusion after this experiment is that try/catch around these are too likely to block these signals and consider them error. Throwing works for Hooks and `use()` because the lint rule can ensure that they're not wrapped in try/catch. Throwing in arbitrary functions not quite ecosystem compatible. It's also why there's `use()` and not just throwing a Promise. This might also affect the Catch proposal. The "prerender" for SSR that's supporting "Partial Prerendering" is still there. This just disables the `React.postpone()` API for creating the holes. --- .../src/__tests__/ReactDOMFizzStatic-test.js | 66 ------------------- .../react/index.experimental.development.js | 1 - packages/react/index.experimental.js | 1 - packages/react/src/ReactClient.js | 2 - .../ReactServer.experimental.development.js | 2 - .../react/src/ReactServer.experimental.js | 2 - packages/shared/ReactFeatureFlags.js | 2 +- 7 files changed, 1 insertion(+), 75 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js index 65012023420..a4ac87c92c4 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js @@ -400,72 +400,6 @@ describe('ReactDOMFizzStatic', () => { ); }); - // @gate enablePostpone - it('does not fatally error when aborting with a postpone during a prerender', async () => { - let postponedValue; - try { - React.unstable_postpone('aborting with postpone'); - } catch (e) { - postponedValue = e; - } - - const controller = new AbortController(); - const infinitePromise = new Promise(() => {}); - function App() { - React.use(infinitePromise); - return <div>aborted</div>; - } - - const errors = []; - const pendingResult = ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - onError: error => { - errors.push(error); - }, - signal: controller.signal, - }); - pendingResult.catch(() => {}); - - await Promise.resolve(); - controller.abort(postponedValue); - - const result = await pendingResult; - - await act(async () => { - result.prelude.pipe(writable); - }); - expect(getVisibleChildren(container)).toEqual(undefined); - expect(errors).toEqual([]); - }); - - // @gate enablePostpone - it('does not fatally error when aborting with a postpone during a prerender from within', async () => { - let postponedValue; - try { - React.unstable_postpone('aborting with postpone'); - } catch (e) { - postponedValue = e; - } - - const controller = new AbortController(); - function App() { - controller.abort(postponedValue); - return <div>aborted</div>; - } - - const errors = []; - const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - onError: error => { - errors.push(error); - }, - signal: controller.signal, - }); - await act(async () => { - result.prelude.pipe(writable); - }); - expect(getVisibleChildren(container)).toEqual(undefined); - expect(errors).toEqual([]); - }); - // @gate enableHalt it('will halt a prerender when aborting with an error during a render', async () => { const controller = new AbortController(); diff --git a/packages/react/index.experimental.development.js b/packages/react/index.experimental.development.js index b2374493073..9b0e301a8c9 100644 --- a/packages/react/index.experimental.development.js +++ b/packages/react/index.experimental.development.js @@ -30,7 +30,6 @@ export { cacheSignal, startTransition, Activity, - unstable_postpone, unstable_getCacheForType, unstable_SuspenseList, ViewTransition, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index 37800ede07a..0145e9137e9 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -31,7 +31,6 @@ export { startTransition, Activity, Activity as unstable_Activity, - unstable_postpone, unstable_getCacheForType, unstable_SuspenseList, ViewTransition, diff --git a/packages/react/src/ReactClient.js b/packages/react/src/ReactClient.js index 9f7c5dce36d..d881030b7d0 100644 --- a/packages/react/src/ReactClient.js +++ b/packages/react/src/ReactClient.js @@ -34,7 +34,6 @@ import {lazy} from './ReactLazy'; import {forwardRef} from './ReactForwardRef'; import {memo} from './ReactMemo'; import {cache, cacheSignal} from './ReactCacheClient'; -import {postpone} from './ReactPostpone'; import { getCacheForType, useCallback, @@ -84,7 +83,6 @@ export { memo, cache, cacheSignal, - postpone as unstable_postpone, useCallback, useContext, useEffect, diff --git a/packages/react/src/ReactServer.experimental.development.js b/packages/react/src/ReactServer.experimental.development.js index df8b3d79b3a..10d0123843d 100644 --- a/packages/react/src/ReactServer.experimental.development.js +++ b/packages/react/src/ReactServer.experimental.development.js @@ -38,7 +38,6 @@ import {lazy} from './ReactLazy'; import {memo} from './ReactMemo'; import {cache, cacheSignal} from './ReactCacheServer'; import {startTransition} from './ReactStartTransition'; -import {postpone} from './ReactPostpone'; import {captureOwnerStack} from './ReactOwnerStack'; import version from 'shared/ReactVersion'; @@ -76,7 +75,6 @@ export { cacheSignal, startTransition, getCacheForType as unstable_getCacheForType, - postpone as unstable_postpone, useId, useCallback, useDebugValue, diff --git a/packages/react/src/ReactServer.experimental.js b/packages/react/src/ReactServer.experimental.js index 06c0a9bf896..9fc26341314 100644 --- a/packages/react/src/ReactServer.experimental.js +++ b/packages/react/src/ReactServer.experimental.js @@ -38,7 +38,6 @@ import {lazy} from './ReactLazy'; import {memo} from './ReactMemo'; import {cache, cacheSignal} from './ReactCacheServer'; import {startTransition} from './ReactStartTransition'; -import {postpone} from './ReactPostpone'; import version from 'shared/ReactVersion'; const Children = { @@ -75,7 +74,6 @@ export { cacheSignal, startTransition, getCacheForType as unstable_getCacheForType, - postpone as unstable_postpone, useId, useCallback, useDebugValue, diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 6d45a30718a..1881d3fc289 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -80,7 +80,7 @@ export const enableAsyncIterableChildren = __EXPERIMENTAL__; export const enableTaint = __EXPERIMENTAL__; -export const enablePostpone = __EXPERIMENTAL__; +export const enablePostpone: boolean = false; // Probably won't ship in this form. export const enableHalt: boolean = true; From dd048c3b2d8b5760dec718fb0926ca0b68660922 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 5 Nov 2025 00:05:59 -0500 Subject: [PATCH 161/276] Clean up enablePostpone Experiment (#35048) We're not shipping this and it's a lot of code to maintain that is blocking my refactor of Fizz for SuspenseList. --- .../react-client/src/ReactFlightClient.js | 105 -- .../ReactDOMFizzDeferredValue-test.js | 37 - .../src/__tests__/ReactDOMFizzServer-test.js | 1569 +---------------- .../ReactDOMFizzServerBrowser-test.js | 41 - .../src/__tests__/ReactDOMFizzStatic-test.js | 40 +- .../ReactDOMFizzStaticBrowser-test.js | 1230 +------------ .../__tests__/ReactDOMFizzStaticFloat-test.js | 283 --- .../__tests__/ReactDOMFizzStaticNode-test.js | 28 +- .../src/server/ReactDOMFizzServerBrowser.js | 10 +- .../src/server/ReactDOMFizzServerBun.js | 4 +- .../src/server/ReactDOMFizzServerEdge.js | 10 +- .../src/server/ReactDOMFizzServerNode.js | 7 - .../src/server/ReactDOMFizzStaticBrowser.js | 29 +- .../src/server/ReactDOMFizzStaticEdge.js | 29 +- .../src/server/ReactDOMFizzStaticNode.js | 48 +- .../react-markup/src/ReactMarkupClient.js | 1 - .../react-markup/src/ReactMarkupServer.js | 2 - .../src/ReactNoopFlightServer.js | 2 - .../src/ReactFiberBeginWork.js | 38 +- .../src/ReactFiberCommitWork.js | 4 +- .../react-reconciler/src/ReactFiberThrow.js | 6 - .../src/server/ReactFlightDOMServerNode.js | 4 - .../src/server/ReactFlightDOMServerBrowser.js | 3 - .../src/server/ReactFlightDOMServerEdge.js | 3 - .../src/server/ReactFlightDOMServerNode.js | 6 - .../src/server/ReactFlightDOMServerBrowser.js | 3 - .../src/server/ReactFlightDOMServerEdge.js | 3 - .../src/server/ReactFlightDOMServerNode.js | 6 - .../src/__tests__/ReactFlightDOM-test.js | 89 +- .../__tests__/ReactFlightDOMBrowser-test.js | 116 +- .../src/__tests__/ReactFlightDOMEdge-test.js | 14 +- .../src/__tests__/ReactFlightDOMNode-test.js | 4 +- .../src/server/ReactFlightDOMServerBrowser.js | 3 - .../src/server/ReactFlightDOMServerEdge.js | 3 - .../src/server/ReactFlightDOMServerNode.js | 6 - packages/react-server/README.md | 2 - packages/react-server/src/ReactFizzServer.js | 358 +--- .../react-server/src/ReactFlightServer.js | 151 +- packages/react/src/ReactPostpone.js | 23 - packages/shared/ReactFeatureFlags.js | 2 - packages/shared/ReactSymbols.js | 2 - .../forks/ReactFeatureFlags.native-fb.js | 1 - .../forks/ReactFeatureFlags.native-oss.js | 1 - .../forks/ReactFeatureFlags.test-renderer.js | 1 - ...actFeatureFlags.test-renderer.native-fb.js | 1 - .../ReactFeatureFlags.test-renderer.www.js | 1 - .../shared/forks/ReactFeatureFlags.www.js | 2 - 47 files changed, 216 insertions(+), 4115 deletions(-) delete mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzStaticFloat-test.js delete mode 100644 packages/react/src/ReactPostpone.js diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index f8cc0a80f39..7b635636157 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -39,12 +39,9 @@ import type { EncodeFormActionCallback, } from './ReactFlightReplyClient'; -import type {Postpone} from 'react/src/ReactPostpone'; - import type {TemporaryReferenceSet} from './ReactFlightTemporaryReferences'; import { - enablePostpone, enableProfilerTimer, enableComponentPerformanceTrack, enableAsyncDebugInfo, @@ -89,7 +86,6 @@ import { import { REACT_LAZY_TYPE, REACT_ELEMENT_TYPE, - REACT_POSTPONE_TYPE, ASYNC_ITERATOR, REACT_FRAGMENT_TYPE, } from 'shared/ReactSymbols'; @@ -3460,88 +3456,6 @@ function resolveErrorDev( return error; } -function resolvePostponeProd( - response: Response, - id: number, - streamState: StreamState, -): void { - if (__DEV__) { - // These errors should never make it into a build so we don't need to encode them in codes.json - // eslint-disable-next-line react-internal/prod-error-codes - throw new Error( - 'resolvePostponeProd should never be called in development mode. Use resolvePostponeDev instead. This is a bug in React.', - ); - } - const error = new Error( - 'A Server Component was postponed. The reason is omitted in production' + - ' builds to avoid leaking sensitive details.', - ); - const postponeInstance: Postpone = (error: any); - postponeInstance.$$typeof = REACT_POSTPONE_TYPE; - postponeInstance.stack = 'Error: ' + error.message; - const chunks = response._chunks; - const chunk = chunks.get(id); - if (!chunk) { - const newChunk: ErroredChunk<any> = createErrorChunk( - response, - postponeInstance, - ); - chunks.set(id, newChunk); - } else { - triggerErrorOnChunk(response, chunk, postponeInstance); - } -} - -function resolvePostponeDev( - response: Response, - id: number, - reason: string, - stack: ReactStackTrace, - env: string, - streamState: StreamState, -): void { - if (!__DEV__) { - // These errors should never make it into a build so we don't need to encode them in codes.json - // eslint-disable-next-line react-internal/prod-error-codes - throw new Error( - 'resolvePostponeDev should never be called in production mode. Use resolvePostponeProd instead. This is a bug in React.', - ); - } - let postponeInstance: Postpone; - const callStack = buildFakeCallStack( - response, - stack, - env, - false, - // $FlowFixMe[incompatible-use] - Error.bind(null, reason || ''), - ); - const rootTask = response._debugRootTask; - if (rootTask != null) { - postponeInstance = rootTask.run(callStack); - } else { - postponeInstance = callStack(); - } - postponeInstance.$$typeof = REACT_POSTPONE_TYPE; - const chunks = response._chunks; - const chunk = chunks.get(id); - if (!chunk) { - const newChunk: ErroredChunk<any> = createErrorChunk( - response, - postponeInstance, - ); - if (__DEV__) { - resolveChunkDebugInfo(response, streamState, newChunk); - } - chunks.set(id, newChunk); - } else { - if (__DEV__) { - resolveChunkDebugInfo(response, streamState, chunk); - } - triggerErrorOnChunk(response, chunk, postponeInstance); - } -} - function resolveErrorModel( response: Response, id: number, @@ -4893,25 +4807,6 @@ function processFullStringRow( return; } // Fallthrough - case 80 /* "P" */: { - if (enablePostpone) { - if (__DEV__) { - const postponeInfo = JSON.parse(row); - resolvePostponeDev( - response, - id, - postponeInfo.reason, - postponeInfo.stack, - postponeInfo.env, - streamState, - ); - } else { - resolvePostponeProd(response, id, streamState); - } - return; - } - } - // Fallthrough default: /* """ "{" "[" "t" "f" "n" "0" - "9" */ { if (__DEV__ && row === '') { resolveDebugHalt(response, id); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js index 529e3be3132..805bf89c4f1 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js @@ -90,43 +90,6 @@ describe('ReactDOMFizzForm', () => { expect(container.textContent).toEqual('Final'); }); - // @gate enablePostpone - it( - 'if initial value postpones during hydration, it will switch to the ' + - 'final value instead', - async () => { - function Content() { - const isInitial = useDeferredValue(false, true); - if (isInitial) { - React.unstable_postpone(); - } - return <Text text="Final" />; - } - - function App() { - return ( - <div> - <Suspense fallback={<Text text="Loading..." />}> - <Content /> - </Suspense> - </div> - ); - } - - const stream = await serverAct(() => - ReactDOMServer.renderToReadableStream(<App />), - ); - await readIntoContainer(stream); - expect(container.textContent).toEqual('Loading...'); - - assertLog(['Loading...']); - // After hydration, it's updated to the final value - await act(() => ReactDOMClient.hydrateRoot(container, <App />)); - expect(container.textContent).toEqual('Final'); - assertLog(['Loading...', 'Final']); - }, - ); - it( 'useDeferredValue during hydration has higher priority than remaining ' + 'incremental hydration', diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index b988bd72caf..18cf6124444 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -6665,150 +6665,6 @@ describe('ReactDOMFizzServer', () => { ]); }); - // @gate enablePostpone - it('client renders postponed boundaries without erroring', async () => { - function Postponed({isClient}) { - if (!isClient) { - React.unstable_postpone('testing postpone'); - } - return 'client only'; - } - - function App({isClient}) { - return ( - <div> - <Suspense fallback={'loading...'}> - <Postponed isClient={isClient} /> - </Suspense> - </div> - ); - } - - const errors = []; - - await act(() => { - const {pipe} = renderToPipeableStream(<App isClient={false} />, { - onError(error) { - errors.push(error.message); - }, - }); - pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual(<div>loading...</div>); - - ReactDOMClient.hydrateRoot(container, <App isClient={true} />, { - onRecoverableError(error) { - errors.push(error.message); - }, - }); - await waitForAll([]); - // Postponing should not be logged as a recoverable error since it's intentional. - expect(errors).toEqual([]); - expect(getVisibleChildren(container)).toEqual(<div>client only</div>); - }); - - // @gate enablePostpone - it('errors if trying to postpone outside a Suspense boundary', async () => { - function Postponed() { - React.unstable_postpone('testing postpone'); - return 'client only'; - } - - function App() { - return ( - <div> - <Postponed /> - </div> - ); - } - - const errors = []; - const fatalErrors = []; - const postponed = []; - let written = false; - - const testWritable = new Stream.Writable(); - testWritable._write = (chunk, encoding, next) => { - written = true; - }; - - await act(() => { - const {pipe} = renderToPipeableStream(<App />, { - onPostpone(reason) { - postponed.push(reason); - }, - onError(error) { - errors.push(error.message); - }, - onShellError(error) { - fatalErrors.push(error.message); - }, - }); - pipe(testWritable); - }); - - expect(written).toBe(false); - // Postponing is not logged as an error but as a postponed reason. - expect(errors).toEqual([]); - expect(postponed).toEqual(['testing postpone']); - // However, it does error the shell. - expect(fatalErrors).toEqual(['testing postpone']); - }); - - // @gate enablePostpone - it('can postpone in a fallback', async () => { - function Postponed({isClient}) { - if (!isClient) { - React.unstable_postpone('testing postpone'); - } - return 'loading...'; - } - - const lazyText = React.lazy(async () => { - await 0; // causes the fallback to start work - return {default: 'Hello'}; - }); - - function App({isClient}) { - return ( - <div> - <Suspense fallback="Outer"> - <Suspense fallback={<Postponed isClient={isClient} />}> - {lazyText} - </Suspense> - </Suspense> - </div> - ); - } - - const errors = []; - - await act(() => { - const {pipe} = renderToPipeableStream(<App isClient={false} />, { - onError(error) { - errors.push(error.message); - }, - }); - pipe(writable); - }); - - // TODO: This should actually be fully resolved because the value could eventually - // resolve on the server even though the fallback couldn't so we should have been - // able to render it. - expect(getVisibleChildren(container)).toEqual(<div>Outer</div>); - - ReactDOMClient.hydrateRoot(container, <App isClient={true} />, { - onRecoverableError(error) { - errors.push(error.message); - }, - }); - await waitForAll([]); - // Postponing should not be logged as a recoverable error since it's intentional. - expect(errors).toEqual([]); - expect(getVisibleChildren(container)).toEqual(<div>Hello</div>); - }); - it( 'a transition that flows into a dehydrated boundary should not suspend ' + 'if the boundary is showing a fallback', @@ -6860,37 +6716,63 @@ describe('ReactDOMFizzServer', () => { }, ); - // @gate enablePostpone - it('supports postponing in prerender and resuming later', async () => { + // @gate enableHalt + it('can resume a prerender that was aborted', async () => { + const promise = new Promise(r => {}); + let prerendering = true; - function Postpone() { + + function Wait() { if (prerendering) { - React.unstable_postpone(); + return React.use(promise); + } else { + return 'Hello'; } - return 'Hello'; } function App() { return ( <div> <Suspense fallback="Loading..."> - <Postpone /> + <p> + <span> + <Suspense fallback="Loading again..."> + <Wait /> + </Suspense> + </span> + </p> + <p> + <span> + <Suspense fallback="Loading again too..."> + <Wait /> + </Suspense> + </span> + </p> </Suspense> </div> ); } - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); + const controller = new AbortController(); + const signal = controller.signal; - prerendering = false; + const errors = []; + function onError(error) { + errors.push(error); + } + let pendingPrerender; + await act(() => { + pendingPrerender = ReactDOMFizzStatic.prerenderToNodeStream(<App />, { + signal, + onError, + }); + }); + controller.abort('boom'); - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ); + const prerendered = await pendingPrerender; + + expect(errors).toEqual(['boom', 'boom']); - // Create a separate stream so it doesn't close the writable. I.e. simple concat. const preludeWritable = new Stream.PassThrough(); preludeWritable.setEncoding('utf8'); preludeWritable.on('data', chunk => { @@ -6901,1378 +6783,45 @@ describe('ReactDOMFizzServer', () => { prerendered.prelude.pipe(preludeWritable); }); - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await act(() => { - resumed.pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual(<div>Hello</div>); - }); - - // @gate enablePostpone - it('client renders a component if it errors during resuming', async () => { - let prerendering = true; - let ssr = true; - function PostponeAndError() { - if (prerendering) { - React.unstable_postpone(); - } - if (ssr) { - throw new Error('server error'); - } - return 'Hello'; - } - - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - const lazyPostponeAndError = React.lazy(async () => { - return {default: <PostponeAndError />}; - }); - - function ReplayError() { - if (prerendering) { - return <Postpone />; - } - if (ssr) { - throw new Error('replay error'); - } - return 'Hello'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading1"> - <PostponeAndError /> - </Suspense> - <Suspense fallback="Loading2"> - <Postpone /> - <Suspense fallback="Loading3">{lazyPostponeAndError}</Suspense> - </Suspense> - <Suspense fallback="Loading4"> - <ReplayError /> - </Suspense> - </div> - ); - } - - const prerenderErrors = []; - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream( - <App />, - { - onError(x) { - prerenderErrors.push(x.message); - }, - }, + expect(getVisibleChildren(container)).toEqual( + <div> + <p> + <span>Loading again...</span> + </p> + <p> + <span>Loading again too...</span> + </p> + </div>, ); - expect(prerendered.postponed).not.toBe(null); prerendering = false; - const ssrErrors = []; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( + errors.length = 0; + const resumed = await ReactDOMFizzServer.resumeToPipeableStream( <App />, JSON.parse(JSON.stringify(prerendered.postponed)), { - onError(x) { - ssrErrors.push(x.message); - }, + onError, }, ); - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Loading2'} - {'Loading4'} - </div>, - ); - await act(() => { resumed.pipe(writable); }); - expect(prerenderErrors).toEqual([]); - - expect(ssrErrors).toEqual(['server error', 'server error', 'replay error']); - - // Still loading... - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Hello'} - {'Loading3'} - {'Loading4'} - </div>, - ); - - const recoverableErrors = []; - - ssr = false; - - await clientAct(() => { - ReactDOMClient.hydrateRoot(container, <App />, { - onRecoverableError(x) { - recoverableErrors.push(x.message); - }, - }); - }); - - expect(recoverableErrors).toEqual( - __DEV__ - ? [ - 'Switched to client rendering because the server rendering errored:\n\n' + - 'server error', - 'Switched to client rendering because the server rendering errored:\n\n' + - 'replay error', - 'Switched to client rendering because the server rendering errored:\n\n' + - 'server error', - ] - : [ - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - ], - ); + expect(errors).toEqual([]); expect(getVisibleChildren(container)).toEqual( <div> - {'Hello'} - {'Hello'} - {'Hello'} - {'Hello'} + <p> + <span>Hello</span> + </p> + <p> + <span>Hello</span> + </p> </div>, ); }); - // @gate enablePostpone - it('client renders a component if we abort before resuming', async () => { - let prerendering = true; - let ssr = true; - const promise = new Promise(() => {}); - function PostponeAndSuspend() { - if (prerendering) { - React.unstable_postpone(); - } - if (ssr) { - React.use(promise); - } - return 'Hello'; - } - - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function DelayedBoundary() { - if (!prerendering && ssr) { - // We delay discovery of the boundary so we can abort before finding it. - React.use(promise); - } - return ( - <Suspense fallback="Loading3"> - <Postpone /> - </Suspense> - ); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading1"> - <PostponeAndSuspend /> - </Suspense> - <Suspense fallback="Loading2"> - <Postpone /> - </Suspense> - <Suspense fallback="Not used"> - <DelayedBoundary /> - </Suspense> - </div> - ); - } - - const prerenderErrors = []; - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream( - <App />, - { - onError(x) { - prerenderErrors.push(x.message); - }, - }, - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const ssrErrors = []; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError(x) { - ssrErrors.push(x.message); - }, - }, - ); - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Loading2'} - {'Loading3'} - </div>, - ); - - await act(() => { - resumed.pipe(writable); - }); - - const recoverableErrors = []; - - ssr = false; - - await clientAct(() => { - ReactDOMClient.hydrateRoot(container, <App />, { - onRecoverableError(x) { - recoverableErrors.push(x.message); - }, - }); - }); - - expect(recoverableErrors).toEqual([]); - expect(prerenderErrors).toEqual([]); - expect(ssrErrors).toEqual([]); - - // Still loading... - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {/* - This used to show "Hello" in this slot because the boundary was able to be flushed - early but we now prevent flushing while pendingRootTasks is not zero. This is how Edge - would work anyway because you don't get the stream until the root is unblocked on a resume - so Node now aligns with edge bevavior - {'Hello'} - */} - {'Loading2'} - {'Loading3'} - </div>, - ); - - await clientAct(async () => { - await act(() => { - resumed.abort(new Error('aborted')); - }); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hello'} - {'Hello'} - {'Hello'} - </div>, - ); - - expect(prerenderErrors).toEqual([]); - expect(ssrErrors).toEqual(['aborted', 'aborted']); - expect(recoverableErrors).toEqual( - __DEV__ - ? [ - 'Switched to client rendering because the server rendering aborted due to:\n\n' + - 'aborted', - 'Switched to client rendering because the server rendering aborted due to:\n\n' + - 'aborted', - ] - : [ - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - ], - ); - }); - - // @gate enablePostpone - it('client renders remaining boundaries below the error in shell', async () => { - let prerendering = true; - let ssr = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function ReplayError({children}) { - if (!prerendering && ssr) { - throw new Error('replay error'); - } - return children; - } - - function App() { - return ( - <div> - <div> - <Suspense fallback="Loading1"> - <Postpone /> - </Suspense> - <ReplayError> - <Suspense fallback="Loading2"> - <Postpone /> - </Suspense> - </ReplayError> - <Suspense fallback="Loading3"> - <Postpone /> - </Suspense> - </div> - <Suspense fallback="Not used"> - <div> - <Suspense fallback="Loading4"> - <Postpone /> - </Suspense> - </div> - </Suspense> - <Suspense fallback="Loading5"> - <Postpone /> - <ReplayError> - <Suspense fallback="Loading6"> - <Postpone /> - </Suspense> - </ReplayError> - </Suspense> - </div> - ); - } - - const prerenderErrors = []; - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream( - <App />, - { - onError(x) { - prerenderErrors.push(x.message); - }, - }, - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const ssrErrors = []; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError(x) { - ssrErrors.push(x.message); - }, - }, - ); - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <div> - {'Loading1'} - {'Loading2'} - {'Loading3'} - </div> - <div>{'Loading4'}</div> - {'Loading5'} - </div>, - ); - - await act(() => { - resumed.pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <div> - {'Hello' /* This was matched and completed before the error */} - { - 'Loading2' /* This will be client rendered because its parent errored during replay */ - } - { - 'Hello' /* This should be renderable since we matched which previous sibling errored */ - } - </div> - <div> - { - 'Hello' /* This should be able to resume because it's in a different parent. */ - } - </div> - {'Hello'} - {'Loading6' /* The parent could resolve even if the child didn't */} - </div>, - ); - - const recoverableErrors = []; - - ssr = false; - - await clientAct(() => { - ReactDOMClient.hydrateRoot(container, <App />, { - onRecoverableError(x) { - recoverableErrors.push(x.message); - }, - }); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <div> - {'Hello'} - {'Hello'} - {'Hello'} - </div> - <div>{'Hello'}</div> - {'Hello'} - {'Hello'} - </div>, - ); - - // We should've logged once for each boundary that this affected. - expect(prerenderErrors).toEqual([]); - expect(ssrErrors).toEqual([ - // This error triggered in two replay components. - 'replay error', - 'replay error', - ]); - expect(recoverableErrors).toEqual( - // It surfaced in two different suspense boundaries. - __DEV__ - ? [ - 'Switched to client rendering because the server rendering errored:\n\n' + - 'replay error', - 'Switched to client rendering because the server rendering errored:\n\n' + - 'replay error', - ] - : [ - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - ], - ); - }); - - // @gate enablePostpone - it('can client render a boundary after having already postponed', async () => { - let prerendering = true; - let ssr = true; - - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function ServerError() { - if (ssr) { - throw new Error('server error'); - } - return 'World'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading1"> - <Postpone /> - <ServerError /> - </Suspense> - <Suspense fallback="Loading2"> - <Postpone /> - </Suspense> - </div> - ); - } - - const prerenderErrors = []; - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream( - <App />, - { - onError(x) { - prerenderErrors.push(x.message); - }, - }, - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const ssrErrors = []; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError(x) { - ssrErrors.push(x.message); - }, - }, - ); - - const windowErrors = []; - function globalError(e) { - windowErrors.push(e.message); - } - window.addEventListener('error', globalError); - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(windowErrors).toEqual([]); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Loading2'} - </div>, - ); - - await act(() => { - resumed.pipe(writable); - }); - - expect(prerenderErrors).toEqual(['server error']); - - // Since this errored, we shouldn't have to replay it. - expect(ssrErrors).toEqual([]); - - expect(windowErrors).toEqual([]); - - // Still loading... - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Hello'} - </div>, - ); - - const recoverableErrors = []; - - ssr = false; - - await clientAct(() => { - ReactDOMClient.hydrateRoot(container, <App />, { - onRecoverableError(x) { - recoverableErrors.push(x.message); - }, - }); - }); - - expect(recoverableErrors).toEqual( - __DEV__ - ? [ - 'Switched to client rendering because the server rendering errored:\n\n' + - 'server error', - ] - : [ - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - ], - ); - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hello'} - {'World'} - {'Hello'} - </div>, - ); - - expect(windowErrors).toEqual([]); - - window.removeEventListener('error', globalError); - }); - - // @gate enablePostpone - it('can postpone in fallback', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - let resolve; - const promise = new Promise(r => (resolve = r)); - - function PostponeAndDelay() { - if (prerendering) { - React.unstable_postpone(); - } - return React.use(promise); - } - - const Lazy = React.lazy(async () => { - await 0; - return {default: Postpone}; - }); - - function App() { - return ( - <div> - <Suspense fallback="Outer"> - <Suspense fallback={<Postpone />}> - <PostponeAndDelay /> World - </Suspense> - <Suspense fallback={<Postpone />}> - <Lazy /> - </Suspense> - </Suspense> - </div> - ); - } - - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - const resumed = await ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ); - - expect(getVisibleChildren(container)).toEqual(<div>Outer</div>); - - // Read what we've completed so far - await act(() => { - resumed.pipe(writable); - }); - - // Should have now resolved the postponed loading state, but not the promise - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hello'} - {'Hello'} - </div>, - ); - - // Resolve the final promise - await act(() => { - resolve('Hi'); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hi'} - {' World'} - {'Hello'} - </div>, - ); - }); - - // @gate enablePostpone - it('can discover new suspense boundaries in the resume', async () => { - let prerendering = true; - let resolveA; - const promiseA = new Promise(r => (resolveA = r)); - let resolveB; - const promiseB = new Promise(r => (resolveB = r)); - - function WaitA() { - return React.use(promiseA); - } - function WaitB() { - return React.use(promiseB); - } - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - <span> - <Suspense fallback="Loading again..."> - <WaitA /> - </Suspense> - <WaitB /> - </span> - ); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <Postpone /> - </p> - </Suspense> - </div> - ); - } - - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - const resumed = await ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - // Read what we've completed so far - await act(() => { - resumed.pipe(writable); - }); - - // Still blocked - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - // Resolve the first promise, this unblocks the inner boundary - await act(() => { - resolveA('Hello'); - }); - - // Still blocked - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - // Resolve the second promise, this unblocks the outer boundary - await act(() => { - resolveB('World'); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span> - {'Hello'} - {'World'} - </span> - </p> - </div>, - ); - }); - - // @gate enablePostpone - it('does not call onError when you abort with a postpone instance during prerender', async () => { - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - <p> - <span> - <Suspense fallback="Loading again too..."> - <Wait /> - </Suspense> - </span> - </p> - </Suspense> - </div> - ); - } - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - - const controller = new AbortController(); - const signal = controller.signal; - - const errors = []; - function onError(error) { - errors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - let pendingPrerender; - await act(() => { - pendingPrerender = ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - signal, - onError, - onPostpone, - }); - }); - controller.abort(postponeInstance); - - const prerendered = await pendingPrerender; - - expect(errors).toEqual([]); - expect(postpones).toEqual(['manufactured', 'manufactured']); - - await act(() => { - prerendered.prelude.pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again too...</span> - </p> - </div>, - ); - }); - - // @gate enableHalt - it('can resume a prerender that was aborted', async () => { - const promise = new Promise(r => {}); - - let prerendering = true; - - function Wait() { - if (prerendering) { - return React.use(promise); - } else { - return 'Hello'; - } - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - <p> - <span> - <Suspense fallback="Loading again too..."> - <Wait /> - </Suspense> - </span> - </p> - </Suspense> - </div> - ); - } - - const controller = new AbortController(); - const signal = controller.signal; - - const errors = []; - function onError(error) { - errors.push(error); - } - let pendingPrerender; - await act(() => { - pendingPrerender = ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - signal, - onError, - }); - }); - controller.abort('boom'); - - const prerendered = await pendingPrerender; - - expect(errors).toEqual(['boom', 'boom']); - - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again too...</span> - </p> - </div>, - ); - - prerendering = false; - - errors.length = 0; - const resumed = await ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError, - }, - ); - - await act(() => { - resumed.pipe(writable); - }); - - expect(errors).toEqual([]); - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Hello</span> - </p> - <p> - <span>Hello</span> - </p> - </div>, - ); - }); - - // @gate enablePostpone - it('does not call onError when you abort with a postpone instance during resume', async () => { - let prerendering = true; - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - ); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <Postpone /> - </p> - <p> - <Postpone /> - </p> - </Suspense> - </div> - ); - } - - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - - const errors = []; - function onError(error) { - errors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - - prerendering = false; - - const resumed = await ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError, - onPostpone, - }, - ); - - await act(() => { - resumed.pipe(writable); - }); - await act(() => { - resumed.abort(postponeInstance); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again...</span> - </p> - </div>, - ); - - expect(errors).toEqual([]); - expect(postpones).toEqual(['manufactured', 'manufactured']); - }); - - // @gate enablePostpone - it('does not call onError when you abort with a postpone instance during a render', async () => { - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - </Suspense> - </div> - ); - } - - const errors = []; - function onError(error) { - errors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - const result = await renderToPipeableStream(<App />, {onError, onPostpone}); - await act(() => { - result.pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again...</span> - </p> - </div>, - ); - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - await act(() => { - result.abort(postponeInstance); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again...</span> - </p> - </div>, - ); - - expect(errors).toEqual([]); - expect(postpones).toEqual(['manufactured', 'manufactured']); - }); - - // @gate enablePostpone - it('fatally errors if you abort with a postpone in the shell during resume', async () => { - let prerendering = true; - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - ); - } - - function PostponeInShell() { - if (prerendering) { - React.unstable_postpone(); - } - return <span>in shell</span>; - } - - function App() { - return ( - <div> - <PostponeInShell /> - <Suspense fallback="Loading..."> - <p> - <Postpone /> - </p> - <p> - <Postpone /> - </p> - </Suspense> - </div> - ); - } - - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual(undefined); - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - - const errors = []; - function onError(error) { - errors.push(error); - } - const shellErrors = []; - function onShellError(error) { - shellErrors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - - prerendering = false; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError, - onShellError, - onPostpone, - }, - ); - await act(() => { - resumed.abort(postponeInstance); - }); - expect(errors).toEqual([ - new Error( - 'The render was aborted with postpone when the shell is incomplete. Reason: manufactured', - ), - ]); - expect(shellErrors).toEqual([ - new Error( - 'The render was aborted with postpone when the shell is incomplete. Reason: manufactured', - ), - ]); - expect(postpones).toEqual([]); - }); - - // @gate enablePostpone - it('fatally errors if you abort with a postpone in the shell during render', async () => { - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - </Suspense> - </div> - ); - } - - const errors = []; - function onError(error) { - errors.push(error); - } - const shellErrors = []; - function onShellError(error) { - shellErrors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - const result = renderToPipeableStream(<App />, { - onError, - onShellError, - onPostpone, - }); - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - await act(() => { - result.abort(postponeInstance); - }); - - expect(getVisibleChildren(container)).toEqual(undefined); - - expect(errors).toEqual([ - new Error( - 'The render was aborted with postpone when the shell is incomplete. Reason: manufactured', - ), - ]); - expect(shellErrors).toEqual([ - new Error( - 'The render was aborted with postpone when the shell is incomplete. Reason: manufactured', - ), - ]); - expect(postpones).toEqual([]); - }); - it('should NOT warn for using generator functions as components', async () => { function* Foo() { yield <h1 key="1">Hello</h1>; diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js index bc96750d460..27e74750c45 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js @@ -551,45 +551,4 @@ describe('ReactDOMFizzServerBrowser', () => { `"<link rel="preload" as="script" fetchPriority="low" nonce="R4nd0m" href="init.js"/><link rel="modulepreload" fetchPriority="low" nonce="R4nd0m" href="init.mjs"/><div>hello world</div><script nonce="${nonce}" id="_R_">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`, ); }); - - // @gate enablePostpone - it('errors if trying to postpone outside a Suspense boundary', async () => { - function Postponed() { - React.unstable_postpone('testing postpone'); - return 'client only'; - } - - function App() { - return ( - <div> - <Postponed /> - </div> - ); - } - - const errors = []; - const postponed = []; - - let caughtError = null; - try { - await serverAct(() => - ReactDOMFizzServer.renderToReadableStream(<App />, { - onError(error) { - errors.push(error.message); - }, - onPostpone(reason) { - postponed.push(reason); - }, - }), - ); - } catch (error) { - caughtError = error; - } - - // Postponing is not logged as an error but as a postponed reason. - expect(errors).toEqual([]); - expect(postponed).toEqual(['testing postpone']); - // However, it does error the shell. - expect(caughtError.message).toEqual('testing postpone'); - }); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js index a4ac87c92c4..4542ca618ba 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js @@ -231,9 +231,7 @@ describe('ReactDOMFizzStatic', () => { const result = await promise; expect(result.postponed).toBe( - gate(flags => flags.enableHalt || flags.enablePostpone) - ? null - : undefined, + gate(flags => flags.enableHalt) ? null : undefined, ); await act(async () => { @@ -302,42 +300,6 @@ describe('ReactDOMFizzStatic', () => { expect(getVisibleChildren(container)).toEqual('hello'); }); - // @gate enablePostpone - it('includes stylesheet preloads in onHeaders when postponing in the Shell', async () => { - let headers; - function onHeaders(x) { - headers = x; - } - - function App() { - ReactDOM.preload('image', {as: 'image', fetchPriority: 'high'}); - ReactDOM.preinit('style', {as: 'style'}); - React.unstable_postpone(); - return ( - <html> - <body>hello</body> - </html> - ); - } - - const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - onHeaders, - }); - expect(headers).toEqual({ - Link: ` -<image>; rel=preload; as="image"; fetchpriority="high", - <style>; rel=preload; as="style" -` - .replaceAll('\n', '') - .trim(), - }); - - await act(async () => { - result.prelude.pipe(writable); - }); - expect(getVisibleChildren(container)).toEqual(undefined); - }); - it('will prerender Suspense fallbacks before children', async () => { const values = []; function Indirection({children}) { diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js index cf4a65821e4..beebd3a1165 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js @@ -25,7 +25,6 @@ global.TextDecoder = require('util').TextDecoder; let JSDOM; let React; -let ReactDOM; let ReactDOMFizzServer; let ReactDOMFizzStatic; let Suspense; @@ -46,7 +45,6 @@ describe('ReactDOMFizzStaticBrowser', () => { serverAct = require('internal-test-utils').serverAct; React = require('react'); - ReactDOM = require('react-dom'); ReactDOMFizzServer = require('react-dom/server.browser'); ReactDOMFizzStatic = require('react-dom/static.browser'); Suspense = React.Suspense; @@ -71,36 +69,6 @@ describe('ReactDOMFizzStaticBrowser', () => { throw theInfinitePromise; } - function concat(streamA, streamB) { - const readerA = streamA.getReader(); - const readerB = streamB.getReader(); - return new ReadableStream({ - start(controller) { - function readA() { - readerA.read().then(({done, value}) => { - if (done) { - readB(); - return; - } - controller.enqueue(value); - readA(); - }); - } - function readB() { - readerB.read().then(({done, value}) => { - if (done) { - controller.close(); - return; - } - controller.enqueue(value); - readB(); - }); - } - readA(); - }, - }); - } - async function readContent(stream) { const reader = stream.getReader(); let content = ''; @@ -609,1202 +577,28 @@ describe('ReactDOMFizzStaticBrowser', () => { expect(errors).toEqual(['uh oh', 'uh oh']); }); - // @gate enablePostpone - it('supports postponing in prerender and resuming later', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ['Hello', 'World']; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <Postpone /> - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( - <div>{['Hello', 'World']}</div>, - ); - }); - - // @gate enablePostpone - it('supports postponing in prerender and resuming with a prefix', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'World'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - Hello - <Postpone /> - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( - <div>{['Hello', 'World']}</div>, - ); - }); - - // @gate enablePostpone - it('supports postponing in lazy in prerender and resuming later', async () => { - let prerendering = true; - const Hole = React.lazy(async () => { - React.unstable_postpone(); - }); - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - Hi - {prerendering ? Hole : 'Hello'} - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hi'} - {'Hello'} - </div>, - ); - }); - - // @gate enablePostpone - it('supports postponing in a nested array', async () => { - let prerendering = true; - const Hole = React.lazy(async () => { - React.unstable_postpone(); - }); - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - Hi - {[<Postpone key="key" />, prerendering ? Hole : 'World']} - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( - <div>{['Hi', 'Hello', 'World']}</div>, - ); - }); - - // @gate enablePostpone - it('supports postponing in lazy as a direct child', async () => { - let prerendering = true; - const Hole = React.lazy(async () => { - React.unstable_postpone(); - }); - function Postpone() { - return prerendering ? Hole : 'Hello'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <Postpone key="key" /> - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual(<div>Hello</div>); - }); - - // @gate enablePostpone - it('only emits end tags once when resuming', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function App() { - return ( - <html> - <body> - <Suspense fallback="Loading..."> - <Postpone /> - </Suspense> - </body> - </html> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const content = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - const html = await readContent(concat(prerendered.prelude, content)); - const htmlEndTags = /<\/html\s*>/gi; - const bodyEndTags = /<\/body\s*>/gi; - expect(Array.from(html.matchAll(htmlEndTags)).length).toBe(1); - expect(Array.from(html.matchAll(bodyEndTags)).length).toBe(1); - }); - - // @gate enablePostpone - it('can prerender various hoistables and deduped resources', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - <> - <link rel="stylesheet" href="my-style2" precedence="low" /> - <link rel="stylesheet" href="my-style1" precedence="high" /> - <style precedence="high" href="my-style3"> - style - </style> - <img src="my-img" /> - </> - ); + it('logs an error if onHeaders throws but continues the prerender', async () => { + const errors = []; + function onError(error) { + errors.push(error.message); } - function App() { - ReactDOM.preconnect('example.com'); - ReactDOM.preload('my-font', {as: 'font', type: 'font/woff2'}); - ReactDOM.preload('my-style0', {as: 'style'}); - // This should transfer the props in to the style that loads later. - ReactDOM.preload('my-style2', { - as: 'style', - crossOrigin: 'use-credentials', - }); - return ( - <div> - <Suspense fallback="Loading..."> - <link rel="stylesheet" href="my-style1" precedence="high" /> - <img src="my-img" /> - <Postpone /> - </Suspense>

Timeline profiling not supported.

+ + {isPerformanceTracksSupported ? ( + + ) : ( + + )} {isInternalFacebookBuild && (

From 57d5a59748bbec1b507bb778c9fbe4bcb82b0a94 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Thu, 2 Oct 2025 09:48:52 -0700 Subject: [PATCH 006/276] [compiler] enablePreserveMemo treats manual deps as non-nullable (#34503) The `@enablePreserveExistingMemoizationGuarantees` mode can still fail to preserve manual memoization due to mismtached dependencies. Specifically, where the user's dependencies are more precise than the compiler infers bc the compiler is being conservative about what might be nullable. In this mode though we're intentionally using information from the manual memoization and can also rely on the deps as a signal for what's non-nullable. The idea of the PR is that we treat manual memo deps just like other inferred-as-non-nullable objects during PropagateScopeDeps. We're careful to not treat the full path as non-nullable, only up to the last property index. So `x.y.z` as a manual dep treats `x` and `x.y` as non-nullable, allowing us to preserve a conditional dependency on `x.y.z`. Optionals within manual dependencies are a bit trickier and aren't handled yet, but hopefully that's less common and something we can improve in a follow-up. Not handling them just means that developers may hit false positives on validating existing memoization if they use optional chains in manual dependencies. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34503). * #34689 * __->__ #34503 --- .../src/HIR/CollectHoistablePropertyLoads.ts | 26 ++++ ...ional-nonoptional-property-chain.expect.md | 91 +++++++++++++ ...xed-optional-nonoptional-property-chain.js | 41 ++++++ ...property-chain-less-precise-deps.expect.md | 122 +++++++++++++++++ ...tional-property-chain-less-precise-deps.js | 35 +++++ ...-deps-conditional-property-chain.expect.md | 117 ++++++++++++++++ ...ve-memo-deps-conditional-property-chain.js | 31 +++++ ...emo-deps-optional-property-chain.expect.md | 125 ++++++++++++++++++ ...serve-memo-deps-optional-property-chain.js | 36 +++++ 9 files changed, 624 insertions(+) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectHoistablePropertyLoads.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectHoistablePropertyLoads.ts index f249466431d..7bb65fbc04d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectHoistablePropertyLoads.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/CollectHoistablePropertyLoads.ts @@ -454,6 +454,32 @@ function collectNonNullsInBlocks( assumedNonNullObjects.add(entry); } } + } else if ( + fn.env.config.enablePreserveExistingMemoizationGuarantees && + instr.value.kind === 'StartMemoize' && + instr.value.deps != null + ) { + for (const dep of instr.value.deps) { + if (dep.root.kind === 'NamedLocal') { + if ( + !isImmutableAtInstr(dep.root.value.identifier, instr.id, context) + ) { + continue; + } + for (let i = 0; i < dep.path.length; i++) { + const pathEntry = dep.path[i]!; + if (pathEntry.optional) { + break; + } + const depNode = context.registry.getOrCreateProperty({ + identifier: dep.root.value.identifier, + path: dep.path.slice(0, i), + reactive: dep.root.value.reactive, + }); + assumedNonNullObjects.add(depNode); + } + } + } } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md new file mode 100644 index 00000000000..e9772e67993 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md @@ -0,0 +1,91 @@ + +## Input + +```javascript +// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false + +import {useMemo} from 'react'; +import {identity, ValidateMemoization} from 'shared-runtime'; + +function Component({x}) { + const object = useMemo(() => { + return identity({ + callback: () => { + // This is a bug in our dependency inference: we stop capturing dependencies + // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b` + // was non-nullish, then we can access `.c.d?.e`. Thus we should take the + // full property chain, exactly as-is with optionals/non-optionals, as a + // dependency + return identity(x.a.b?.c.d?.e); + }, + }); + }, [x.a.b?.c.d?.e]); + const result = useMemo(() => { + return [object.callback()]; + }, [object]); + return ; +} + +function Inner({x, result}) { + 'use no memo'; + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: {y: {z: 42}}}], + sequentialRenders: [ + {x: {y: {z: 42}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + ], +}; + +``` + + +## Error + +``` +Found 1 error: + +Compilation Skipped: Existing memoization could not be preserved + +React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `x.a.b?.c`, but the source dependencies were [x.a.b?.c.d?.e]. Inferred less specific property than source. + +error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.ts:7:25 + 5 | + 6 | function Component({x}) { +> 7 | const object = useMemo(() => { + | ^^^^^^^ +> 8 | return identity({ + | ^^^^^^^^^^^^^^^^^^^^^ +> 9 | callback: () => { + | ^^^^^^^^^^^^^^^^^^^^^ +> 10 | // This is a bug in our dependency inference: we stop capturing dependencies + | ^^^^^^^^^^^^^^^^^^^^^ +> 11 | // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b` + | ^^^^^^^^^^^^^^^^^^^^^ +> 12 | // was non-nullish, then we can access `.c.d?.e`. Thus we should take the + | ^^^^^^^^^^^^^^^^^^^^^ +> 13 | // full property chain, exactly as-is with optionals/non-optionals, as a + | ^^^^^^^^^^^^^^^^^^^^^ +> 14 | // dependency + | ^^^^^^^^^^^^^^^^^^^^^ +> 15 | return identity(x.a.b?.c.d?.e); + | ^^^^^^^^^^^^^^^^^^^^^ +> 16 | }, + | ^^^^^^^^^^^^^^^^^^^^^ +> 17 | }); + | ^^^^^^^^^^^^^^^^^^^^^ +> 18 | }, [x.a.b?.c.d?.e]); + | ^^^^ Could not preserve existing manual memoization + 19 | const result = useMemo(() => { + 20 | return [object.callback()]; + 21 | }, [object]); +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.js new file mode 100644 index 00000000000..12f8ebf3ce4 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.js @@ -0,0 +1,41 @@ +// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false + +import {useMemo} from 'react'; +import {identity, ValidateMemoization} from 'shared-runtime'; + +function Component({x}) { + const object = useMemo(() => { + return identity({ + callback: () => { + // This is a bug in our dependency inference: we stop capturing dependencies + // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b` + // was non-nullish, then we can access `.c.d?.e`. Thus we should take the + // full property chain, exactly as-is with optionals/non-optionals, as a + // dependency + return identity(x.a.b?.c.d?.e); + }, + }); + }, [x.a.b?.c.d?.e]); + const result = useMemo(() => { + return [object.callback()]; + }, [object]); + return ; +} + +function Inner({x, result}) { + 'use no memo'; + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: {y: {z: 42}}}], + sequentialRenders: [ + {x: {y: {z: 42}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + ], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.expect.md new file mode 100644 index 00000000000..84c611dec35 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain-less-precise-deps.expect.md @@ -0,0 +1,122 @@ + +## Input + +```javascript +// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false + +import {useMemo} from 'react'; +import {identity, ValidateMemoization} from 'shared-runtime'; + +function Component({x}) { + const object = useMemo(() => { + return identity({ + callback: () => { + return identity(x.y.z); // accesses more levels of properties than the manual memo + }, + }); + // x.y as a manual dep only tells us that x is non-nullable, not that x.y is non-nullable + // we can only take a dep on x.y, not x.y.z + }, [x.y]); + const result = useMemo(() => { + return [object.callback()]; + }, [object]); + return ; +} + +const input1 = {x: {y: {z: 42}}}; +const input1b = {x: {y: {z: 42}}}; +const input2 = {x: {y: {z: 3.14}}}; +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [input1], + sequentialRenders: [ + input1, + input1, + input1b, // should reset even though .z didn't change + input1, + input2, + ], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false + +import { useMemo } from "react"; +import { identity, ValidateMemoization } from "shared-runtime"; + +function Component(t0) { + const $ = _c(11); + const { x } = t0; + let t1; + if ($[0] !== x.y) { + t1 = identity({ callback: () => identity(x.y.z) }); + $[0] = x.y; + $[1] = t1; + } else { + t1 = $[1]; + } + const object = t1; + let t2; + if ($[2] !== object) { + t2 = object.callback(); + $[2] = object; + $[3] = t2; + } else { + t2 = $[3]; + } + let t3; + if ($[4] !== t2) { + t3 = [t2]; + $[4] = t2; + $[5] = t3; + } else { + t3 = $[5]; + } + const result = t3; + let t4; + if ($[6] !== x.y) { + t4 = [x.y]; + $[6] = x.y; + $[7] = t4; + } else { + t4 = $[7]; + } + let t5; + if ($[8] !== result || $[9] !== t4) { + t5 = ; + $[8] = result; + $[9] = t4; + $[10] = t5; + } else { + t5 = $[10]; + } + return t5; +} + +const input1 = { x: { y: { z: 42 } } }; +const input1b = { x: { y: { z: 42 } } }; +const input2 = { x: { y: { z: 3.14 } } }; +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [input1], + sequentialRenders: [ + input1, + input1, + input1b, // should reset even though .z didn't change + input1, + input2, + ], +}; + +``` + +### Eval output +(kind: ok)

{"inputs":[{"z":42}],"output":[42]}

{"inputs":[{"z":3.14}],"output":[3.14]}

{"inputs":[42],"output":[42]}

{"inputs":[3.14],"output":[3.14]}

{"inputs":[42],"output":[42]}

{"inputs":[3.14],"output":[3.14]}

{"inputs":[42],"output":[42]}

\ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.js new file mode 100644 index 00000000000..6b55e68bb01 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-conditional-property-chain.js @@ -0,0 +1,31 @@ +// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false + +import {useMemo} from 'react'; +import {identity, ValidateMemoization} from 'shared-runtime'; + +function Component({x}) { + const object = useMemo(() => { + return identity({ + callback: () => { + return identity(x.y.z); + }, + }); + }, [x.y.z]); + const result = useMemo(() => { + return [object.callback()]; + }, [object]); + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: {y: {z: 42}}}], + sequentialRenders: [ + {x: {y: {z: 42}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + ], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.expect.md new file mode 100644 index 00000000000..ab4940bcc3c --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.expect.md @@ -0,0 +1,125 @@ + +## Input + +```javascript +// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false + +import {useMemo} from 'react'; +import {identity, ValidateMemoization} from 'shared-runtime'; + +function Component({x, y, z}) { + const object = useMemo(() => { + return identity({ + callback: () => { + return identity(x?.y?.z, y.a?.b, z.a.b?.c); + }, + }); + }, [x?.y?.z, y.a?.b, z.a.b?.c]); + const result = useMemo(() => { + return [object.callback()]; + }, [object]); + return ; +} + +function Inner({x, result}) { + 'use no memo'; + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: {y: {z: 42}}}], + sequentialRenders: [ + {x: {y: {z: 42}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + ], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false + +import { useMemo } from "react"; +import { identity, ValidateMemoization } from "shared-runtime"; + +function Component(t0) { + const $ = _c(11); + const { x, y, z } = t0; + + x?.y?.z; + y.a?.b; + z.a.b?.c; + let t1; + if ($[0] !== x?.y?.z || $[1] !== y.a?.b || $[2] !== z.a.b?.c) { + t1 = identity({ callback: () => identity(x?.y?.z, y.a?.b, z.a.b?.c) }); + $[0] = x?.y?.z; + $[1] = y.a?.b; + $[2] = z.a.b?.c; + $[3] = t1; + } else { + t1 = $[3]; + } + const object = t1; + let t2; + if ($[4] !== object) { + t2 = object.callback(); + $[4] = object; + $[5] = t2; + } else { + t2 = $[5]; + } + let t3; + if ($[6] !== t2) { + t3 = [t2]; + $[6] = t2; + $[7] = t3; + } else { + t3 = $[7]; + } + const result = t3; + let t4; + if ($[8] !== result || $[9] !== x) { + t4 = ; + $[8] = result; + $[9] = x; + $[10] = t4; + } else { + t4 = $[10]; + } + return t4; +} + +function Inner({ x, result }) { + "use no memo"; + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: { y: { z: 42 } } }], + sequentialRenders: [ + { x: { y: { z: 42 } } }, + { x: { y: { z: 42 } } }, + { x: { y: { z: 3.14 } } }, + { x: { y: { z: 42 } } }, + { x: { y: { z: 3.14 } } }, + { x: { y: { z: 42 } } }, + ], +}; + +``` + +### Eval output +(kind: ok) [[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]] +[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]] +[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]] +[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]] +[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]] +[[ (exception in render) TypeError: Cannot read properties of undefined (reading 'a') ]] \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.js new file mode 100644 index 00000000000..820cef20cb2 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-deps-optional-property-chain.js @@ -0,0 +1,36 @@ +// @enablePreserveExistingMemoizationGuarantees @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies @enableTreatFunctionDepsAsConditional:false + +import {useMemo} from 'react'; +import {identity, ValidateMemoization} from 'shared-runtime'; + +function Component({x, y, z}) { + const object = useMemo(() => { + return identity({ + callback: () => { + return identity(x?.y?.z, y.a?.b, z.a.b?.c); + }, + }); + }, [x?.y?.z, y.a?.b, z.a.b?.c]); + const result = useMemo(() => { + return [object.callback()]; + }, [object]); + return ; +} + +function Inner({x, result}) { + 'use no memo'; + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: {y: {z: 42}}}], + sequentialRenders: [ + {x: {y: {z: 42}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + {x: {y: {z: 3.14}}}, + {x: {y: {z: 42}}}, + ], +}; From e4a27db2836981b3851bb981a3dec93f5a373e32 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Thu, 2 Oct 2025 19:13:52 +0200 Subject: [PATCH 007/276] [DevTools] Defer Suspense tab to 19.3.0-canary (#34688) --- packages/react-devtools-shared/src/backend/agent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 5a7d6eb836e..0f21f27f16e 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -739,7 +739,7 @@ export default class Agent extends EventEmitter<{ if (renderer !== null) { const devRenderer = renderer.bundleType === 1; const enableSuspenseTab = - devRenderer && gte(renderer.version, '19.2.0-canary'); + devRenderer && gte(renderer.version, '19.3.0-canary'); if (enableSuspenseTab) { this._bridge.send('enableSuspenseTab'); } From 4a28227960202539f329338f62d33973e76b32d8 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Thu, 2 Oct 2025 19:18:15 +0200 Subject: [PATCH 008/276] [DevTools] Inspect the Initial Paint when inspecting a Root (#34454) --- .../src/__tests__/store-test.js | 6 - .../src/backend/agent.js | 276 +++++++++++++++++- .../src/backend/fiber/renderer.js | 139 ++++++++- .../src/backend/legacy/renderer.js | 107 ++++++- .../src/backend/types.js | 5 +- .../src/backend/views/Highlighter/index.js | 48 +++ .../react-devtools-shared/src/backendAPI.js | 28 +- packages/react-devtools-shared/src/bridge.js | 24 +- .../src/devtools/store.js | 83 +++--- .../views/Profiler/CommitTreeBuilder.js | 1 - .../views/SuspenseTab/SuspenseBreadcrumbs.js | 8 +- .../views/SuspenseTab/SuspenseRects.js | 31 +- .../devtools/views/SuspenseTab/SuspenseTab.js | 72 +---- .../views/SuspenseTab/SuspenseTimeline.js | 42 +-- .../views/SuspenseTab/SuspenseTreeContext.js | 107 ++----- .../src/devtools/views/hooks.js | 44 ++- .../src/inspectedElementMutableSource.js | 31 +- packages/react-devtools-shared/src/utils.js | 1 - 18 files changed, 744 insertions(+), 309 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 9de9b564e93..d5280c091c9 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -974,12 +974,8 @@ describe('Store', () => { `); - const rendererID = getRendererID(); - const rootID = store.getRootIDForElement(store.getElementIDAtIndex(0)); await actAsync(() => { agent.overrideSuspenseMilestone({ - rendererID, - rootID, suspendedSet: [ store.getElementIDAtIndex(4), store.getElementIDAtIndex(8), @@ -1009,8 +1005,6 @@ describe('Store', () => { await actAsync(() => { agent.overrideSuspenseMilestone({ - rendererID, - rootID, suspendedSet: [], }); }); diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 0f21f27f16e..fce8fe626d4 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -8,7 +8,11 @@ */ import EventEmitter from '../events'; -import {SESSION_STORAGE_LAST_SELECTION_KEY, __DEBUG__} from '../constants'; +import { + SESSION_STORAGE_LAST_SELECTION_KEY, + UNKNOWN_SUSPENDERS_NONE, + __DEBUG__, +} from '../constants'; import setupHighlighter from './views/Highlighter'; import { initialize as setupTraceUpdates, @@ -26,8 +30,13 @@ import type { RendererID, RendererInterface, DevToolsHookSettings, + InspectedElement, } from './types'; -import type {ComponentFilter} from 'react-devtools-shared/src/frontend/types'; +import type { + ComponentFilter, + DehydratedData, + ElementType, +} from 'react-devtools-shared/src/frontend/types'; import type {GroupItem} from './views/TraceUpdates/canvas'; import {gte, isReactNativeEnvironment} from './utils'; import { @@ -73,6 +82,13 @@ type InspectElementParams = { requestID: number, }; +type InspectScreenParams = { + forceFullData: boolean, + id: number, + path: Array | null, + requestID: number, +}; + type OverrideHookParams = { id: number, hookID: number, @@ -131,8 +147,6 @@ type OverrideSuspenseParams = { }; type OverrideSuspenseMilestoneParams = { - rendererID: number, - rootID: number, suspendedSet: Array, }; @@ -141,6 +155,111 @@ type PersistedSelection = { path: Array, }; +function createEmptyInspectedScreen( + arbitraryRootID: number, + type: ElementType, +): InspectedElement { + const suspendedBy: DehydratedData = { + cleaned: [], + data: [], + unserializable: [], + }; + return { + // invariants + id: arbitraryRootID, + type: type, + // Properties we merge + isErrored: false, + errors: [], + warnings: [], + suspendedBy, + suspendedByRange: null, + // TODO: How to merge these? + unknownSuspenders: UNKNOWN_SUSPENDERS_NONE, + // Properties where merging doesn't make sense so we ignore them entirely in the UI + rootType: null, + plugins: {stylex: null}, + nativeTag: null, + env: null, + source: null, + stack: null, + rendererPackageName: null, + rendererVersion: null, + // These don't make sense for a Root. They're just bottom values. + key: null, + canEditFunctionProps: false, + canEditHooks: false, + canEditFunctionPropsDeletePaths: false, + canEditFunctionPropsRenamePaths: false, + canEditHooksAndDeletePaths: false, + canEditHooksAndRenamePaths: false, + canToggleError: false, + canToggleSuspense: false, + isSuspended: false, + hasLegacyContext: false, + context: null, + hooks: null, + props: null, + state: null, + owners: null, + }; +} + +function mergeRoots( + left: InspectedElement, + right: InspectedElement, + suspendedByOffset: number, +): void { + const leftSuspendedByRange = left.suspendedByRange; + const rightSuspendedByRange = right.suspendedByRange; + + if (right.isErrored) { + left.isErrored = true; + } + for (let i = 0; i < right.errors.length; i++) { + left.errors.push(right.errors[i]); + } + for (let i = 0; i < right.warnings.length; i++) { + left.warnings.push(right.warnings[i]); + } + + const leftSuspendedBy: DehydratedData = left.suspendedBy; + const {data, cleaned, unserializable} = (right.suspendedBy: DehydratedData); + const leftSuspendedByData = ((leftSuspendedBy.data: any): Array); + const rightSuspendedByData = ((data: any): Array); + for (let i = 0; i < rightSuspendedByData.length; i++) { + leftSuspendedByData.push(rightSuspendedByData[i]); + } + for (let i = 0; i < cleaned.length; i++) { + leftSuspendedBy.cleaned.push( + [suspendedByOffset + cleaned[i][0]].concat(cleaned[i].slice(1)), + ); + } + for (let i = 0; i < unserializable.length; i++) { + leftSuspendedBy.unserializable.push( + [suspendedByOffset + unserializable[i][0]].concat( + unserializable[i].slice(1), + ), + ); + } + + if (rightSuspendedByRange !== null) { + if (leftSuspendedByRange === null) { + left.suspendedByRange = [ + rightSuspendedByRange[0], + rightSuspendedByRange[1], + ]; + } else { + if (rightSuspendedByRange[0] < leftSuspendedByRange[0]) { + leftSuspendedByRange[0] = rightSuspendedByRange[0]; + } + if (rightSuspendedByRange[1] > leftSuspendedByRange[1]) { + leftSuspendedByRange[1] = rightSuspendedByRange[1]; + } + } + } +} + export default class Agent extends EventEmitter<{ hideNativeHighlight: [], showNativeHighlight: [HostInstance], @@ -201,6 +320,7 @@ export default class Agent extends EventEmitter<{ bridge.addListener('getProfilingStatus', this.getProfilingStatus); bridge.addListener('getOwnersList', this.getOwnersList); bridge.addListener('inspectElement', this.inspectElement); + bridge.addListener('inspectScreen', this.inspectScreen); bridge.addListener('logElementToConsole', this.logElementToConsole); bridge.addListener('overrideError', this.overrideError); bridge.addListener('overrideSuspense', this.overrideSuspense); @@ -531,6 +651,138 @@ export default class Agent extends EventEmitter<{ } }; + inspectScreen: InspectScreenParams => void = ({ + requestID, + id, + forceFullData, + path: screenPath, + }) => { + let inspectedScreen: InspectedElement | null = null; + let found = false; + // the suspendedBy index will be from the previously merged roots. + // We need to keep track of how many suspendedBy we've already seen to know + // to which renderer the index belongs. + let suspendedByOffset = 0; + let suspendedByPathIndex: number | null = null; + // The path to hydrate for a specific renderer + let rendererPath: InspectElementParams['path'] = null; + if (screenPath !== null && screenPath.length > 1) { + const secondaryCategory = screenPath[0]; + if (secondaryCategory !== 'suspendedBy') { + throw new Error( + 'Only hydrating suspendedBy paths is supported. This is a bug.', + ); + } + if (typeof screenPath[1] !== 'number') { + throw new Error( + `Expected suspendedBy index to be a number. Received '${screenPath[1]}' instead. This is a bug.`, + ); + } + suspendedByPathIndex = screenPath[1]; + rendererPath = screenPath.slice(2); + } + + for (const rendererID in this._rendererInterfaces) { + const renderer = ((this._rendererInterfaces[ + (rendererID: any) + ]: any): RendererInterface); + let path: InspectElementParams['path'] = null; + if (suspendedByPathIndex !== null && rendererPath !== null) { + const suspendedByPathRendererIndex = + suspendedByPathIndex - suspendedByOffset; + const rendererHasRequestedSuspendedByPath = + renderer.getElementAttributeByPath(id, [ + 'suspendedBy', + suspendedByPathRendererIndex, + ]) !== undefined; + if (rendererHasRequestedSuspendedByPath) { + path = ['suspendedBy', suspendedByPathRendererIndex].concat( + rendererPath, + ); + } + } + + const inspectedRootsPayload = renderer.inspectElement( + requestID, + id, + path, + forceFullData, + ); + switch (inspectedRootsPayload.type) { + case 'hydrated-path': + // The path will be relative to the Roots of this renderer. We adjust it + // to be relative to all Roots of this implementation. + inspectedRootsPayload.path[1] += suspendedByOffset; + // TODO: Hydration logic is flawed since the Frontend path is not based + // on the original backend data but rather its own representation of it (e.g. due to reorder). + // So we can receive null here instead when hydration fails + if (inspectedRootsPayload.value !== null) { + for ( + let i = 0; + i < inspectedRootsPayload.value.cleaned.length; + i++ + ) { + inspectedRootsPayload.value.cleaned[i][1] += suspendedByOffset; + } + } + this._bridge.send('inspectedScreen', inspectedRootsPayload); + // If we hydrated a path, it must've been in a specific renderer so we can stop here. + return; + case 'full-data': + const inspectedRoots = inspectedRootsPayload.value; + if (inspectedScreen === null) { + inspectedScreen = createEmptyInspectedScreen( + inspectedRoots.id, + inspectedRoots.type, + ); + } + mergeRoots(inspectedScreen, inspectedRoots, suspendedByOffset); + const dehydratedSuspendedBy: DehydratedData = + inspectedRoots.suspendedBy; + const suspendedBy = ((dehydratedSuspendedBy.data: any): Array); + suspendedByOffset += suspendedBy.length; + found = true; + break; + case 'no-change': + found = true; + const rootsSuspendedBy: Array = + (renderer.getElementAttributeByPath(id, ['suspendedBy']): any); + suspendedByOffset += rootsSuspendedBy.length; + break; + case 'not-found': + break; + case 'error': + // bail out and show the error + // TODO: aggregate errors + this._bridge.send('inspectedScreen', inspectedRootsPayload); + return; + } + } + + if (inspectedScreen === null) { + if (found) { + this._bridge.send('inspectedScreen', { + type: 'no-change', + responseID: requestID, + id, + }); + } else { + this._bridge.send('inspectedScreen', { + type: 'not-found', + responseID: requestID, + id, + }); + } + } else { + this._bridge.send('inspectedScreen', { + type: 'full-data', + responseID: requestID, + id, + value: inspectedScreen, + }); + } + }; + logElementToConsole: ElementAndRendererID => void = ({id, rendererID}) => { const renderer = this._rendererInterfaces[rendererID]; if (renderer == null) { @@ -567,17 +819,15 @@ export default class Agent extends EventEmitter<{ }; overrideSuspenseMilestone: OverrideSuspenseMilestoneParams => void = ({ - rendererID, - rootID, suspendedSet, }) => { - const renderer = this._rendererInterfaces[rendererID]; - if (renderer == null) { - console.warn( - `Invalid renderer id "${rendererID}" to override suspense milestone`, - ); - } else { - renderer.overrideSuspenseMilestone(rootID, suspendedSet); + for (const rendererID in this._rendererInterfaces) { + const renderer = ((this._rendererInterfaces[ + (rendererID: any) + ]: any): RendererInterface); + if (renderer.supportsTogglingSuspense) { + renderer.overrideSuspenseMilestone(suspendedSet); + } } }; diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 031a18b74d4..222baa0dae0 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2420,7 +2420,6 @@ export function attach( !isProductionBuildOfRenderer && StrictModeBits !== 0 ? 1 : 0, ); pushOperation(hasOwnerMetadata ? 1 : 0); - pushOperation(supportsTogglingSuspense ? 1 : 0); if (isProfiling) { if (displayNamesByRootID !== null) { @@ -4902,7 +4901,11 @@ export function attach( fiberInstance.data = nextFiber; if ( mostRecentlyInspectedElement !== null && - mostRecentlyInspectedElement.id === fiberInstance.id && + (mostRecentlyInspectedElement.id === fiberInstance.id || + // If we're inspecting a Root, we inspect the Screen. + // Invalidating any Root invalidates the Screen too. + (mostRecentlyInspectedElement.type === ElementTypeRoot && + nextFiber.tag === HostRoot)) && didFiberRender(prevFiber, nextFiber) ) { // If this Fiber has updated, clear cached inspected data. @@ -6422,7 +6425,10 @@ export function attach( return inspectVirtualInstanceRaw(devtoolsInstance); } if (devtoolsInstance.kind === FIBER_INSTANCE) { - return inspectFiberInstanceRaw(devtoolsInstance); + const isRoot = devtoolsInstance.parent === null; + return isRoot + ? inspectRootsRaw(devtoolsInstance.id) + : inspectFiberInstanceRaw(devtoolsInstance); } (devtoolsInstance: FilteredFiberInstance); // assert exhaustive throw new Error('Unsupported instance kind'); @@ -6875,10 +6881,24 @@ export function attach( let currentlyInspectedPaths: Object = {}; function isMostRecentlyInspectedElement(id: number): boolean { - return ( - mostRecentlyInspectedElement !== null && - mostRecentlyInspectedElement.id === id - ); + if (mostRecentlyInspectedElement === null) { + return false; + } + if (mostRecentlyInspectedElement.id === id) { + return true; + } + + if (mostRecentlyInspectedElement.type === ElementTypeRoot) { + // we inspected the screen recently. If we're inspecting another root, we're + // still inspecting the screen. + const instance = idToDevToolsInstanceMap.get(id); + return ( + instance !== undefined && + instance.kind === FIBER_INSTANCE && + instance.parent === null + ); + } + return false; } function isMostRecentlyInspectedElementCurrent(id: number): boolean { @@ -7060,8 +7080,8 @@ export function attach( if (!hasElementUpdatedSinceLastInspected) { if (path !== null) { let secondaryCategory: 'suspendedBy' | 'hooks' | null = null; - if (path[0] === 'hooks') { - secondaryCategory = 'hooks'; + if (path[0] === 'hooks' || path[0] === 'suspendedBy') { + secondaryCategory = path[0]; } // If this element has not been updated since it was last inspected, @@ -7209,6 +7229,99 @@ export function attach( }; } + function inspectRootsRaw(arbitraryRootID: number): InspectedElement | null { + const roots = hook.getFiberRoots(rendererID); + if (roots.size === 0) { + return null; + } + + const inspectedRoots: InspectedElement = { + // invariants + id: arbitraryRootID, + type: ElementTypeRoot, + // Properties we merge + isErrored: false, + errors: [], + warnings: [], + suspendedBy: [], + suspendedByRange: null, + // TODO: How to merge these? + unknownSuspenders: UNKNOWN_SUSPENDERS_NONE, + // Properties where merging doesn't make sense so we ignore them entirely in the UI + rootType: null, + plugins: {stylex: null}, + nativeTag: null, + env: null, + source: null, + stack: null, + rendererPackageName: null, + rendererVersion: null, + // These don't make sense for a Root. They're just bottom values. + key: null, + canEditFunctionProps: false, + canEditHooks: false, + canEditFunctionPropsDeletePaths: false, + canEditFunctionPropsRenamePaths: false, + canEditHooksAndDeletePaths: false, + canEditHooksAndRenamePaths: false, + canToggleError: false, + canToggleSuspense: false, + isSuspended: false, + hasLegacyContext: false, + context: null, + hooks: null, + props: null, + state: null, + owners: null, + }; + + let minSuspendedByRange = Infinity; + let maxSuspendedByRange = -Infinity; + roots.forEach(root => { + const rootInstance = rootToFiberInstanceMap.get(root); + if (rootInstance === undefined) { + throw new Error( + 'Expected a root instance to exist for this Fiber root', + ); + } + const inspectedRoot = inspectFiberInstanceRaw(rootInstance); + if (inspectedRoot === null) { + return; + } + + if (inspectedRoot.isErrored) { + inspectedRoots.isErrored = true; + } + for (let i = 0; i < inspectedRoot.errors.length; i++) { + inspectedRoots.errors.push(inspectedRoot.errors[i]); + } + for (let i = 0; i < inspectedRoot.warnings.length; i++) { + inspectedRoots.warnings.push(inspectedRoot.warnings[i]); + } + for (let i = 0; i < inspectedRoot.suspendedBy.length; i++) { + inspectedRoots.suspendedBy.push(inspectedRoot.suspendedBy[i]); + } + const suspendedByRange = inspectedRoot.suspendedByRange; + if (suspendedByRange !== null) { + if (suspendedByRange[0] < minSuspendedByRange) { + minSuspendedByRange = suspendedByRange[0]; + } + if (suspendedByRange[1] > maxSuspendedByRange) { + maxSuspendedByRange = suspendedByRange[1]; + } + } + }); + + if (minSuspendedByRange !== Infinity || maxSuspendedByRange !== -Infinity) { + inspectedRoots.suspendedByRange = [ + minSuspendedByRange, + maxSuspendedByRange, + ]; + } + + return inspectedRoots; + } + function logElementToConsole(id: number) { const result = isMostRecentlyInspectedElementCurrent(id) ? mostRecentlyInspectedElement @@ -7867,13 +7980,9 @@ export function attach( /** * Resets the all other roots of this renderer. - * @param rootID The root that contains this milestone * @param suspendedSet List of IDs of SuspenseComponent Fibers */ - function overrideSuspenseMilestone( - rootID: FiberInstance['id'], - suspendedSet: Array, - ) { + function overrideSuspenseMilestone(suspendedSet: Array) { if ( typeof setSuspenseHandler !== 'function' || typeof scheduleUpdate !== 'function' @@ -7883,8 +7992,6 @@ export function attach( ); } - // TODO: Allow overriding the timeline for the specified root. - const unsuspendedSet: Set = new Set(forceFallbackForFibers); let resuspended = false; diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 8a245155ef2..46709c9a804 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -412,7 +412,6 @@ export function attach( pushOperation(0); // Profiling flag pushOperation(0); // StrictMode supported? pushOperation(hasOwnerMetadata ? 1 : 0); - pushOperation(supportsTogglingSuspense ? 1 : 0); pushOperation(SUSPENSE_TREE_OPERATION_ADD); pushOperation(id); @@ -800,6 +799,20 @@ export function attach( return null; } + const rootID = internalInstanceToRootIDMap.get(internalInstance); + if (rootID === undefined) { + throw new Error('Expected to find root ID.'); + } + const isRoot = rootID === id; + return isRoot + ? inspectRootsRaw(rootID) + : inspectInternalInstanceRaw(id, internalInstance); + } + + function inspectInternalInstanceRaw( + id: number, + internalInstance: InternalInstance, + ): InspectedElement | null { const {key} = getData(internalInstance); const type = getElementType(internalInstance); @@ -903,6 +916,98 @@ export function attach( }; } + function inspectRootsRaw(arbitraryRootID: number): InspectedElement | null { + const roots = + renderer.Mount._instancesByReactRootID || + renderer.Mount._instancesByContainerID; + + const inspectedRoots: InspectedElement = { + // invariants + id: arbitraryRootID, + type: ElementTypeRoot, + // Properties we merge + isErrored: false, + errors: [], + warnings: [], + suspendedBy: [], + suspendedByRange: null, + // TODO: How to merge these? + unknownSuspenders: UNKNOWN_SUSPENDERS_NONE, + // Properties where merging doesn't make sense so we ignore them entirely in the UI + rootType: null, + plugins: {stylex: null}, + nativeTag: null, + env: null, + source: null, + stack: null, + // TODO: We could make the Frontend accept an array to display + // a list of unique renderers contributing to this Screen. + rendererPackageName: null, + rendererVersion: null, + // These don't make sense for a Root. They're just bottom values. + key: null, + canEditFunctionProps: false, + canEditHooks: false, + canEditFunctionPropsDeletePaths: false, + canEditFunctionPropsRenamePaths: false, + canEditHooksAndDeletePaths: false, + canEditHooksAndRenamePaths: false, + canToggleError: false, + canToggleSuspense: false, + isSuspended: false, + hasLegacyContext: false, + context: null, + hooks: null, + props: null, + state: null, + owners: null, + }; + + let minSuspendedByRange = Infinity; + let maxSuspendedByRange = -Infinity; + + for (const rootKey in roots) { + const internalInstance = roots[rootKey]; + const id = getID(internalInstance); + const inspectedRoot = inspectInternalInstanceRaw(id, internalInstance); + + if (inspectedRoot === null) { + return null; + } + + if (inspectedRoot.isErrored) { + inspectedRoots.isErrored = true; + } + for (let i = 0; i < inspectedRoot.errors.length; i++) { + inspectedRoots.errors.push(inspectedRoot.errors[i]); + } + for (let i = 0; i < inspectedRoot.warnings.length; i++) { + inspectedRoots.warnings.push(inspectedRoot.warnings[i]); + } + for (let i = 0; i < inspectedRoot.suspendedBy.length; i++) { + inspectedRoots.suspendedBy.push(inspectedRoot.suspendedBy[i]); + } + const suspendedByRange = inspectedRoot.suspendedByRange; + if (suspendedByRange !== null) { + if (suspendedByRange[0] < minSuspendedByRange) { + minSuspendedByRange = suspendedByRange[0]; + } + if (suspendedByRange[1] > maxSuspendedByRange) { + maxSuspendedByRange = suspendedByRange[1]; + } + } + } + + if (minSuspendedByRange !== Infinity || maxSuspendedByRange !== -Infinity) { + inspectedRoots.suspendedByRange = [ + minSuspendedByRange, + maxSuspendedByRange, + ]; + } + + return inspectedRoots; + } + function logElementToConsole(id: number): void { const result = inspectElementRaw(id); if (result === null) { diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index e002740cb69..1052dc9d75b 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -450,10 +450,7 @@ export type RendererInterface = { onErrorOrWarning?: OnErrorOrWarning, overrideError: (id: number, forceError: boolean) => void, overrideSuspense: (id: number, forceFallback: boolean) => void, - overrideSuspenseMilestone: ( - rootID: number, - suspendedSet: Array, - ) => void, + overrideSuspenseMilestone: (suspendedSet: Array) => void, overrideValueAtPath: ( type: Type, id: number, diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 155717e5d89..6fd93d3519c 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -10,6 +10,7 @@ import Agent from 'react-devtools-shared/src/backend/agent'; import {hideOverlay, showOverlay} from './Highlighter'; +import type {HostInstance} from 'react-devtools-shared/src/backend/types'; import type {BackendBridge} from 'react-devtools-shared/src/bridge'; import type {RendererInterface} from '../../types'; @@ -26,6 +27,7 @@ export default function setupHighlighter( ): void { bridge.addListener('clearHostInstanceHighlight', clearHostInstanceHighlight); bridge.addListener('highlightHostInstance', highlightHostInstance); + bridge.addListener('highlightHostInstances', highlightHostInstances); bridge.addListener('scrollToHostInstance', scrollToHostInstance); bridge.addListener('shutdown', stopInspectingHost); bridge.addListener('startInspectingHost', startInspectingHost); @@ -157,6 +159,52 @@ export default function setupHighlighter( hideOverlay(agent); } + function highlightHostInstances({ + displayName, + hideAfterTimeout, + elements, + scrollIntoView, + }: { + displayName: string | null, + hideAfterTimeout: boolean, + elements: Array<{rendererID: number, id: number}>, + scrollIntoView: boolean, + }) { + const nodes: Array = []; + for (let i = 0; i < elements.length; i++) { + const {id, rendererID} = elements[i]; + const renderer = agent.rendererInterfaces[rendererID]; + if (renderer == null) { + console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`); + continue; + } + + // In some cases fiber may already be unmounted + if (!renderer.hasElementWithId(id)) { + continue; + } + + const hostInstances = renderer.findHostInstancesForElementID(id); + if (hostInstances !== null) { + for (let j = 0; j < hostInstances.length; j++) { + nodes.push(hostInstances[j]); + } + } + } + + if (nodes.length > 0) { + const node = nodes[0]; + // $FlowFixMe[method-unbinding] + if (scrollIntoView && typeof node.scrollIntoView === 'function') { + // If the node isn't visible show it before highlighting it. + // We may want to reconsider this; it might be a little disruptive. + node.scrollIntoView({block: 'nearest', inline: 'nearest'}); + } + } + + showOverlay(nodes, displayName, agent, hideAfterTimeout); + } + function attemptScrollToHostInstance( renderer: RendererInterface, id: number, diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js index f6c11fb10d6..c332393d2aa 100644 --- a/packages/react-devtools-shared/src/backendAPI.js +++ b/packages/react-devtools-shared/src/backendAPI.js @@ -95,7 +95,7 @@ export function inspectElement( id: number, path: InspectedElementPath | null, rendererID: number, - shouldListenToPauseEvents: boolean = false, + shouldListenToPauseEvents: boolean, ): Promise { const requestID = requestCounter++; const promise = getPromiseForRequestID( @@ -117,6 +117,32 @@ export function inspectElement( return promise; } +export function inspectScreen( + bridge: FrontendBridge, + forceFullData: boolean, + arbitraryRootID: number, + path: InspectedElementPath | null, + shouldListenToPauseEvents: boolean, +): Promise { + const requestID = requestCounter++; + const promise = getPromiseForRequestID( + requestID, + 'inspectedScreen', + bridge, + `Timed out while inspecting screen.`, + shouldListenToPauseEvents, + ); + + bridge.send('inspectScreen', { + requestID, + id: arbitraryRootID, + path, + forceFullData, + }); + + return promise; +} + let storeAsGlobalCount = 0; export function storeAsGlobal({ diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index aa9c867e1f1..b6229192c23 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -65,12 +65,6 @@ export const BRIDGE_PROTOCOL: Array = [ { version: 2, minNpmVersion: '4.22.0', - maxNpmVersion: '6.2.0', - }, - // Version 3 adds supports-toggling-suspense bit to add-root - { - version: 3, - minNpmVersion: '6.2.0', maxNpmVersion: null, }, ]; @@ -92,6 +86,12 @@ type HighlightHostInstance = { openBuiltinElementsPanel: boolean, scrollIntoView: boolean, }; +type HighlightHostInstances = { + elements: Array, + displayName: string | null, + hideAfterTimeout: boolean, + scrollIntoView: boolean, +}; type ScrollToHostInstance = { ...ElementAndRendererID, @@ -145,8 +145,6 @@ type OverrideSuspense = { }; type OverrideSuspenseMilestone = { - rendererID: number, - rootID: number, suspendedSet: Array, }; @@ -167,6 +165,13 @@ type InspectElementParams = { requestID: number, }; +type InspectScreenParams = { + requestID: number, + id: number, + forceFullData: boolean, + path: Array | null, +}; + type StoreAsGlobalParams = { ...ElementAndRendererID, count: number, @@ -199,6 +204,7 @@ export type BackendEvents = { fastRefreshScheduled: [], getSavedPreferences: [], inspectedElement: [InspectedElementPayload], + inspectedScreen: [InspectedElementPayload], isReloadAndProfileSupportedByBackend: [boolean], operations: [Array], ownersList: [OwnersList], @@ -243,7 +249,9 @@ type FrontendEvents = { getProfilingData: [{rendererID: RendererID}], getProfilingStatus: [], highlightHostInstance: [HighlightHostInstance], + highlightHostInstances: [HighlightHostInstances], inspectElement: [InspectElementParams], + inspectScreen: [InspectScreenParams], logElementToConsole: [ElementAndRendererID], overrideError: [OverrideError], overrideSuspense: [OverrideSuspense], diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 0e3373e15e2..99971f6a1a6 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -96,7 +96,6 @@ export type Capabilities = { supportsBasicProfiling: boolean, hasOwnerMetadata: boolean, supportsStrictMode: boolean, - supportsTogglingSuspense: boolean, supportsAdvancedProfiling: AdvancedProfiling, }; @@ -506,14 +505,6 @@ export default class Store extends EventEmitter<{ ); } - supportsTogglingSuspense(rootID: Element['id']): boolean { - const capabilities = this._rootIDToCapabilities.get(rootID); - if (capabilities === undefined) { - throw new Error(`No capabilities registered for root ${rootID}`); - } - return capabilities.supportsTogglingSuspense; - } - // This build of DevTools supports the Timeline profiler. // This is a static flag, controlled by the Store config. get supportsTimeline(): boolean { @@ -898,38 +889,48 @@ export default class Store extends EventEmitter<{ * @param uniqueSuspendersOnly Filters out boundaries without unique suspenders */ getSuspendableDocumentOrderSuspense( - rootID: Element['id'] | void, uniqueSuspendersOnly: boolean, ): $ReadOnlyArray { - if (rootID === undefined) { - return []; - } - const root = this.getElementByID(rootID); - if (root === null) { - return []; - } - if (!this.supportsTogglingSuspense(rootID)) { + const roots = this.roots; + if (roots.length === 0) { return []; } + const list: SuspenseNode['id'][] = []; - const suspense = this.getSuspenseByID(rootID); - if (suspense !== null) { - const stack = [suspense]; - while (stack.length > 0) { - const current = stack.pop(); - if (current === undefined) { - continue; - } - // Include the root even if we won't show it suspended (because that's just blank). - // You should be able to see what suspended the shell. - if (!uniqueSuspendersOnly || current.hasUniqueSuspenders) { - list.push(current.id); + for (let i = 0; i < roots.length; i++) { + const rootID = roots[i]; + const root = this.getElementByID(rootID); + if (root === null) { + continue; + } + // TODO: This includes boundaries that can't be suspended due to no support from the renderer. + + const suspense = this.getSuspenseByID(rootID); + if (suspense !== null) { + if (list.length === 0) { + // start with an arbitrary root that will allow inspection of the Screen + list.push(suspense.id); } - // Add children in reverse order to maintain document order - for (let j = current.children.length - 1; j >= 0; j--) { - const childSuspense = this.getSuspenseByID(current.children[j]); - if (childSuspense !== null) { - stack.push(childSuspense); + + const stack = [suspense]; + while (stack.length > 0) { + const current = stack.pop(); + if (current === undefined) { + continue; + } + if ( + (!uniqueSuspendersOnly || current.hasUniqueSuspenders) && + // Roots are already included as part of the Screen + current.id !== rootID + ) { + list.push(current.id); + } + // Add children in reverse order to maintain document order + for (let j = current.children.length - 1; j >= 0; j--) { + const childSuspense = this.getSuspenseByID(current.children[j]); + if (childSuspense !== null) { + stack.push(childSuspense); + } } } } @@ -1191,7 +1192,6 @@ export default class Store extends EventEmitter<{ let supportsStrictMode = false; let hasOwnerMetadata = false; - let supportsTogglingSuspense = false; // If we don't know the bridge protocol, guess that we're dealing with the latest. // If we do know it, we can take it into consideration when parsing operations. @@ -1204,9 +1204,6 @@ export default class Store extends EventEmitter<{ hasOwnerMetadata = operations[i] > 0; i++; - - supportsTogglingSuspense = operations[i] > 0; - i++; } this._roots = this._roots.concat(id); @@ -1215,7 +1212,6 @@ export default class Store extends EventEmitter<{ supportsBasicProfiling, hasOwnerMetadata, supportsStrictMode, - supportsTogglingSuspense, supportsAdvancedProfiling, }); @@ -1561,7 +1557,12 @@ export default class Store extends EventEmitter<{ if (name === null) { // The boundary isn't explicitly named. // Pick a sensible default. - name = this._guessSuspenseName(element); + if (parentID === 0) { + // For Roots we use their display name. + name = element.displayName; + } else { + name = this._guessSuspenseName(element); + } } } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js index 9e928b02319..28be5f9e1c7 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js @@ -209,7 +209,6 @@ function updateTree( i++; // Profiling flag i++; // supportsStrictMode flag i++; // hasOwnerMetadata flag - i++; // supportsTogglingSuspense flag if (__DEBUG__) { debug('Add', `new root fiber ${id}`); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js index 13dab6efbc7..d7112ec7d3a 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js @@ -25,7 +25,7 @@ export default function SuspenseBreadcrumbs(): React$Node { const store = useContext(StoreContext); const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); - const {selectedSuspenseID, selectedRootID, lineage} = useContext( + const {selectedSuspenseID, lineage, roots} = useContext( SuspenseTreeStateContext, ); @@ -45,13 +45,13 @@ export default function SuspenseBreadcrumbs(): React$Node { // that rendered the whole screen. In laymans terms this is really "Initial Paint". // TODO: Once we add subtree selection, then the equivalent should be called // "Transition" since in that case it's really about a Transition within the page. - selectedRootID !== null ? ( + roots.length > 0 ? (

+ aria-current="true"> diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 00ca3e14594..cd77a7a62c5 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -278,11 +278,7 @@ function getDocumentBoundingRect( }; } -function SuspenseRectsShell({ - rootID, -}: { - rootID: SuspenseNode['id'], -}): React$Node { +function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node { const store = useContext(StoreContext); const root = store.getSuspenseByID(rootID); if (root === null) { @@ -299,6 +295,8 @@ const ViewBox = createContext((null: any)); function SuspenseRectsContainer(): React$Node { const store = useContext(StoreContext); + const treeDispatch = useContext(TreeDispatcherContext); + const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); // TODO: This relies on a full re-render of all children when the Suspense tree changes. const {roots} = useContext(SuspenseTreeStateContext); @@ -312,14 +310,33 @@ function SuspenseRectsContainer(): React$Node { const width = '100%'; const aspectRatio = `1 / ${heightScale}`; + function handleClick(event: SyntheticMouseEvent) { + if (event.defaultPrevented) { + // Already clicked on an inner rect + return; + } + if (roots.length === 0) { + // Nothing to select + return; + } + const arbitraryRootID = roots[0]; + + event.preventDefault(); + treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: arbitraryRootID}); + suspenseTreeDispatch({ + type: 'SET_SUSPENSE_LINEAGE', + payload: arbitraryRootID, + }); + } + return ( -

{roots.map(rootID => { - return ; + return ; })}

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index b4ed7ec1f93..f7b63fa2c62 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -34,13 +34,9 @@ import { SuspenseTreeStateContext, } from './SuspenseTreeContext'; import {StoreContext, OptionsContext} from '../context'; -import {TreeDispatcherContext} from '../Components/TreeContext'; import Button from '../Button'; import Toggle from '../Toggle'; -import typeof { - SyntheticEvent, - SyntheticPointerEvent, -} from 'react-dom-bindings/src/events/SyntheticEvent'; +import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent'; import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal'; import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle'; import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext'; @@ -71,20 +67,14 @@ function ToggleUniqueSuspenders() { const store = useContext(StoreContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); - const {selectedRootID: rootID, uniqueSuspendersOnly} = useContext( - SuspenseTreeStateContext, - ); + const {uniqueSuspendersOnly} = useContext(SuspenseTreeStateContext); function handleToggleUniqueSuspenders() { const nextUniqueSuspendersOnly = !uniqueSuspendersOnly; - const nextTimeline = - rootID === null - ? [] - : // TODO: Handle different timeline modes (e.g. random order) - store.getSuspendableDocumentOrderSuspense( - rootID, - nextUniqueSuspendersOnly, - ); + // TODO: Handle different timeline modes (e.g. random order) + const nextTimeline = store.getSuspendableDocumentOrderSuspense( + nextUniqueSuspendersOnly, + ); suspenseTreeDispatch({ type: 'SET_SUSPENSE_TIMELINE', payload: [nextTimeline, null, nextUniqueSuspendersOnly], @@ -101,55 +91,6 @@ function ToggleUniqueSuspenders() { ); } -function SelectRoot() { - const store = useContext(StoreContext); - const {roots, selectedRootID, uniqueSuspendersOnly} = useContext( - SuspenseTreeStateContext, - ); - const treeDispatch = useContext(TreeDispatcherContext); - const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); - - function handleChange(event: SyntheticEvent) { - const newRootID = +event.currentTarget.value; - // TODO: scrollIntoView both suspense rects and host instance. - const nextTimeline = store.getSuspendableDocumentOrderSuspense( - newRootID, - uniqueSuspendersOnly, - ); - suspenseTreeDispatch({ - type: 'SET_SUSPENSE_TIMELINE', - payload: [nextTimeline, newRootID, uniqueSuspendersOnly], - }); - if (nextTimeline.length > 0) { - const milestone = nextTimeline[nextTimeline.length - 1]; - treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: milestone}); - } - } - return ( - roots.length > 0 && ( - - ) - ); -} - function ToggleTreeList({ dispatch, state, @@ -427,7 +368,6 @@ function SuspenseTab(_: {}) {

{!hideSettings && } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index b7340da915b..30ca21476f2 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -9,7 +9,7 @@ import * as React from 'react'; import {useContext, useEffect, useRef} from 'react'; -import {BridgeContext, StoreContext} from '../context'; +import {BridgeContext} from '../context'; import {TreeDispatcherContext} from '../Components/TreeContext'; import {useHighlightHostInstance, useScrollToHostInstance} from '../hooks'; import { @@ -23,20 +23,15 @@ import ButtonIcon from '../ButtonIcon'; function SuspenseTimelineInput() { const bridge = useContext(BridgeContext); - const store = useContext(StoreContext); const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); const {highlightHostInstance, clearHighlightHostInstance} = useHighlightHostInstance(); const scrollToHostInstance = useScrollToHostInstance(); - const { - selectedRootID: rootID, - timeline, - timelineIndex, - hoveredTimelineIndex, - playing, - } = useContext(SuspenseTreeStateContext); + const {timeline, timelineIndex, hoveredTimelineIndex, playing} = useContext( + SuspenseTreeStateContext, + ); const min = 0; const max = timeline.length > 0 ? timeline.length - 1 : 0; @@ -112,24 +107,12 @@ function SuspenseTimelineInput() { // For now we just exclude it from deps since we don't lint those anyway. function changeTimelineIndex(newIndex: number) { // Synchronize timeline index with what is resuspended. - if (rootID === null) { - return; - } - const rendererID = store.getRendererIDForElement(rootID); - if (rendererID === null) { - console.error( - `No renderer ID found for root element ${rootID} in suspense timeline.`, - ); - return; - } // We suspend everything after the current selection. The root isn't showing // anything suspended in the root. The step after that should have one less // thing suspended. I.e. the first suspense boundary should be unsuspended // when it's selected. This also lets you show everything in the last step. const suspendedSet = timeline.slice(timelineIndex + 1); bridge.send('overrideSuspenseMilestone', { - rendererID, - rootID, suspendedSet, }); if (isInitialMount.current) { @@ -164,20 +147,6 @@ function SuspenseTimelineInput() { }; }, [playing]); - if (rootID === null) { - return ( -

No root selected.

- ); - } - - if (!store.supportsTogglingSuspense(rootID)) { - return ( -

- Can't step through Suspense in production apps. -

- ); - } - if (timeline.length === 0) { return (

@@ -226,10 +195,9 @@ function SuspenseTimelineInput() { } export default function SuspenseTimeline(): React$Node { - const {selectedRootID} = useContext(SuspenseTreeStateContext); return (

- +

); } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js index 151f454eb5e..bfe3f42bda6 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js @@ -7,10 +7,7 @@ * @flow */ import type {ReactContext} from 'shared/ReactTypes'; -import type { - Element, - SuspenseNode, -} from 'react-devtools-shared/src/frontend/types'; +import type {SuspenseNode} from 'react-devtools-shared/src/frontend/types'; import type Store from '../../store'; import * as React from 'react'; @@ -27,7 +24,6 @@ import {StoreContext} from '../context'; export type SuspenseTreeState = { lineage: $ReadOnlyArray | null, roots: $ReadOnlyArray, - selectedRootID: SuspenseNode['id'] | null, selectedSuspenseID: SuspenseNode['id'] | null, timeline: $ReadOnlyArray, timelineIndex: number | -1, @@ -107,60 +103,27 @@ type Props = { children: React$Node, }; -function getDefaultRootID(store: Store): Element['id'] | null { - const designatedRootID = store.roots.find(rootID => { - const suspense = store.getSuspenseByID(rootID); - return ( - store.supportsTogglingSuspense(rootID) && - suspense !== null && - suspense.children.length > 1 - ); - }); - - return designatedRootID === undefined ? null : designatedRootID; -} - function getInitialState(store: Store): SuspenseTreeState { - let initialState: SuspenseTreeState; const uniqueSuspendersOnly = true; - const selectedRootID = getDefaultRootID(store); - // TODO: Default to nearest from inspected - if (selectedRootID === null) { - initialState = { - selectedSuspenseID: null, - lineage: null, - roots: store.roots, - selectedRootID, - timeline: [], - timelineIndex: -1, - hoveredTimelineIndex: -1, - uniqueSuspendersOnly, - playing: false, - }; - } else { - const timeline = store.getSuspendableDocumentOrderSuspense( - selectedRootID, - uniqueSuspendersOnly, - ); - const timelineIndex = timeline.length - 1; - const selectedSuspenseID = - timelineIndex === -1 ? null : timeline[timelineIndex]; - const lineage = - selectedSuspenseID !== null - ? store.getSuspenseLineage(selectedSuspenseID) - : []; - initialState = { - selectedSuspenseID, - lineage, - roots: store.roots, - selectedRootID, - timeline, - timelineIndex, - hoveredTimelineIndex: -1, - uniqueSuspendersOnly, - playing: false, - }; - } + const timeline = + store.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly); + const timelineIndex = timeline.length - 1; + const selectedSuspenseID = + timelineIndex === -1 ? null : timeline[timelineIndex]; + const lineage = + selectedSuspenseID !== null + ? store.getSuspenseLineage(selectedSuspenseID) + : []; + const initialState: SuspenseTreeState = { + selectedSuspenseID, + lineage, + roots: store.roots, + timeline, + timelineIndex, + hoveredTimelineIndex: -1, + uniqueSuspendersOnly, + playing: false, + }; return initialState; } @@ -209,23 +172,10 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedTimelineID = removedIDs.get(selectedTimelineID); } - let nextRootID = state.selectedRootID; - if (selectedTimelineID !== null && selectedTimelineID !== 0) { - nextRootID = - store.getSuspenseRootIDForSuspense(selectedTimelineID); - } - if (nextRootID === null) { - nextRootID = getDefaultRootID(store); - } - - const nextTimeline = - nextRootID === null - ? [] - : // TODO: Handle different timeline modes (e.g. random order) - store.getSuspendableDocumentOrderSuspense( - nextRootID, - state.uniqueSuspendersOnly, - ); + // TODO: Handle different timeline modes (e.g. random order) + const nextTimeline = store.getSuspendableDocumentOrderSuspense( + state.uniqueSuspendersOnly, + ); let nextTimelineIndex = selectedTimelineID === null || nextTimeline.length === 0 @@ -250,7 +200,6 @@ function SuspenseTreeContextController({children}: Props): React.Node { ...state, lineage: nextLineage, roots: store.roots, - selectedRootID: nextRootID, selectedSuspenseID, timeline: nextTimeline, timelineIndex: nextTimelineIndex, @@ -258,27 +207,21 @@ function SuspenseTreeContextController({children}: Props): React.Node { } case 'SELECT_SUSPENSE_BY_ID': { const selectedSuspenseID = action.payload; - const selectedRootID = - store.getSuspenseRootIDForSuspense(selectedSuspenseID); return { ...state, selectedSuspenseID, - selectedRootID, playing: false, // pause }; } case 'SET_SUSPENSE_LINEAGE': { const suspenseID = action.payload; const lineage = store.getSuspenseLineage(suspenseID); - const selectedRootID = - store.getSuspenseRootIDForSuspense(suspenseID); return { ...state, lineage, selectedSuspenseID: suspenseID, - selectedRootID, playing: false, // pause }; } @@ -316,8 +259,6 @@ function SuspenseTreeContextController({children}: Props): React.Node { ...state, selectedSuspenseID: nextSelectedSuspenseID, lineage: nextLineage, - selectedRootID: - nextRootID === null ? state.selectedRootID : nextRootID, timeline: nextTimeline, timelineIndex: nextMilestoneIndex, uniqueSuspendersOnly: nextUniqueSuspendersOnly, diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index a4ed2da526e..2984c2fbfcd 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -353,20 +353,44 @@ export function useHighlightHostInstance(): { const highlightHostInstance = useCallback( (id: number, scrollIntoView?: boolean = false) => { const element = store.getElementByID(id); - const rendererID = store.getRendererIDForElement(id); - if (element !== null && rendererID !== null) { + if (element !== null) { + const isRoot = element.parentID === 0; let displayName = element.displayName; if (displayName !== null && element.nameProp !== null) { displayName += ` name="${element.nameProp}"`; } - bridge.send('highlightHostInstance', { - displayName, - hideAfterTimeout: false, - id, - openBuiltinElementsPanel: false, - rendererID, - scrollIntoView: scrollIntoView, - }); + if (isRoot) { + // Inspect screen + const elements: Array<{rendererID: number, id: number}> = []; + + for (let i = 0; i < store.roots.length; i++) { + const rootID = store.roots[i]; + const rendererID = store.getRendererIDForElement(rootID); + if (rendererID === null) { + continue; + } + elements.push({rendererID, id: rootID}); + } + + bridge.send('highlightHostInstances', { + displayName, + hideAfterTimeout: false, + elements, + scrollIntoView: scrollIntoView, + }); + } else { + const rendererID = store.getRendererIDForElement(id); + if (rendererID !== null) { + bridge.send('highlightHostInstance', { + displayName, + hideAfterTimeout: false, + id, + openBuiltinElementsPanel: false, + rendererID, + scrollIntoView: scrollIntoView, + }); + } + } } }, [store, bridge], diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js index ae90bd021bc..d967109163a 100644 --- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js +++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js @@ -12,6 +12,7 @@ import { convertInspectedElementBackendToFrontend, hydrateHelper, inspectElement as inspectElementAPI, + inspectScreen as inspectScreenAPI, } from 'react-devtools-shared/src/backendAPI'; import {fillInPath} from 'react-devtools-shared/src/hydration'; @@ -57,21 +58,31 @@ export function inspectElement( rendererID: number, shouldListenToPauseEvents: boolean = false, ): Promise { - const {id} = element; + const {id, parentID} = element; // This could indicate that the DevTools UI has been closed and reopened. // The in-memory cache will be clear but the backend still thinks we have cached data. // In this case, we need to tell it to resend the full data. const forceFullData = !inspectedElementCache.has(id); - - return inspectElementAPI( - bridge, - forceFullData, - id, - path, - rendererID, - shouldListenToPauseEvents, - ).then((data: any) => { + const isRoot = parentID === 0; + const promisedElement = isRoot + ? inspectScreenAPI( + bridge, + forceFullData, + id, + path, + shouldListenToPauseEvents, + ) + : inspectElementAPI( + bridge, + forceFullData, + id, + path, + rendererID, + shouldListenToPauseEvents, + ); + + return promisedElement.then((data: any) => { const {type} = data; let inspectedElement; diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index bc8e7684505..007db77f220 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -262,7 +262,6 @@ export function printOperationsArray(operations: Array) { i++; // supportsProfiling i++; // supportsStrictMode i++; // hasOwnerMetadata - i++; // supportsTogglingSuspense } else { const parentID = ((operations[i]: any): number); i++; From 70b52beca64aeac447a6cf57cfe1fda0691435c1 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Thu, 2 Oct 2025 10:25:00 -0700 Subject: [PATCH 009/276] [compiler] `@enablePreserveExistingMemoizationGuarantees` on by default (#34689) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This enables `@enablePreserveExistingMemoizationGuarantees` by default. As of the previous PR (#34503), this mode now enables the following behaviors: - Treating variables referenced within a `useMemo()` or `useCallback()` as "frozen" (immutable) as of the start of the call. Ie, the compiler will assume that the values you reference are not mutated by the body of the useMemo, not are they mutated later. Directly modifying them (eg `var.property = true`) will be an error. - Similarly, the results of the useMemo/useCallback are treated as frozen (immutable) after the call. These two rules match the behavior for other hooks: this means that developers will see similar behavior to swapping out `useMemo()` for a custom `useMyMemo()` wrapper/alias. Additionally, as of #34503 the compiler uses information from the manual dependencies to know which variables are non-nullable. Even if a useMemo block conditionally accesses a nested property — `if (cond) { log(x.y.z) }` — where the compiler would not usually know that `x` is non-nullable, if the user specifies `x.y.z` as a manual dependency then the compiler knows that `x` and `x.y` are non-nullable and can infer a more precise dependency. Finally, this mode also ensures that we always memoize function calls that return primitives. See #34343 for more details. For now, I've explicitly opted out of this feature in all test fixtures where the behavior changed. --- .../babel-plugin-react-compiler/src/HIR/Environment.ts | 2 +- .../fixtures/compiler/allocating-primitive-as-dep.expect.md | 4 +++- .../fixtures/compiler/allocating-primitive-as-dep.js | 1 + .../compiler/allow-modify-global-in-callback-jsx.expect.md | 3 ++- .../fixtures/compiler/allow-modify-global-in-callback-jsx.js | 1 + .../compiler/computed-load-primitive-as-dependency.expect.md | 3 ++- .../compiler/computed-load-primitive-as-dependency.js | 1 + .../compiler/constant-propagation-template-literal.expect.md | 3 ++- .../compiler/constant-propagation-template-literal.js | 1 + .../compiler/context-variable-as-jsx-element-tag.expect.md | 3 ++- .../fixtures/compiler/context-variable-as-jsx-element-tag.js | 1 + .../compiler/destructure-direct-reassignment.expect.md | 2 ++ .../fixtures/compiler/destructure-direct-reassignment.js | 1 + ...ing-mutable-values-memoizes-with-captures-values.expect.md | 2 +- ...-capturing-mutable-values-memoizes-with-captures-values.js | 2 +- ...ured-value-mistaken-as-dependency-later-mutation.expect.md | 2 +- ...estructured-value-mistaken-as-dependency-later-mutation.js | 2 +- ...uctured-value-mistaken-as-dependency-mutated-dep.expect.md | 2 +- ...r-destructured-value-mistaken-as-dependency-mutated-dep.js | 2 +- ...capture-in-invoked-function-inferred-as-mutation.expect.md | 2 +- ...n-from-capture-in-invoked-function-inferred-as-mutation.js | 2 +- ...sed-memoization-from-inferred-mutation-in-logger.expect.md | 2 +- ...pro-missed-memoization-from-inferred-mutation-in-logger.js | 2 +- ...unmemoized-callback-captured-in-context-variable.expect.md | 2 +- ...repro-unmemoized-callback-captured-in-context-variable.tsx | 2 +- .../compiler/error.validate-object-entries-mutation.expect.md | 2 +- .../compiler/error.validate-object-entries-mutation.js | 2 +- .../compiler/error.validate-object-values-mutation.expect.md | 2 +- .../compiler/error.validate-object-values-mutation.js | 2 +- .../compiler/existing-variables-with-c-name.expect.md | 3 ++- .../fixtures/compiler/existing-variables-with-c-name.js | 1 + .../fbt/bug-fbt-plural-multiple-function-calls.expect.md | 3 ++- .../compiler/fbt/bug-fbt-plural-multiple-function-calls.ts | 1 + .../compiler/for-in-statement-type-inference.expect.md | 2 ++ .../fixtures/compiler/for-in-statement-type-inference.js | 1 + .../__tests__/fixtures/compiler/hooks-with-prefix.expect.md | 4 ++-- .../src/__tests__/fixtures/compiler/hooks-with-prefix.js | 2 +- .../fixtures/compiler/infer-computed-delete.expect.md | 4 ++-- .../src/__tests__/fixtures/compiler/infer-computed-delete.js | 2 +- .../fixtures/compiler/infer-property-delete.expect.md | 2 ++ .../src/__tests__/fixtures/compiler/infer-property-delete.js | 1 + ....invalid-useCallback-captures-reassigned-context.expect.md | 2 +- .../error.invalid-useCallback-captures-reassigned-context.js | 2 +- .../mutate-through-identity-function-expression.expect.md | 3 ++- .../mutate-through-identity-function-expression.js | 1 + .../compiler/new-mutability/mutate-through-identity.expect.md | 3 ++- .../compiler/new-mutability/mutate-through-identity.js | 1 + .../todo-control-flow-sensitive-mutation.expect.md | 3 ++- .../new-mutability/todo-control-flow-sensitive-mutation.tsx | 1 + .../todo-transitivity-createfrom-capture-lambda.expect.md | 3 ++- .../todo-transitivity-createfrom-capture-lambda.tsx | 1 + .../transitivity-add-captured-array-to-itself.expect.md | 3 ++- .../transitivity-add-captured-array-to-itself.tsx | 1 + .../transitivity-capture-createfrom-lambda.expect.md | 3 ++- .../new-mutability/transitivity-capture-createfrom-lambda.tsx | 1 + .../new-mutability/transitivity-capture-createfrom.expect.md | 3 ++- .../new-mutability/transitivity-capture-createfrom.tsx | 1 + .../transitivity-phi-assign-or-capture.expect.md | 3 ++- .../new-mutability/transitivity-phi-assign-or-capture.tsx | 1 + .../useCallback-reordering-deplist-controlflow.expect.md | 4 ++-- .../useCallback-reordering-deplist-controlflow.tsx | 2 +- .../useCallback-reordering-depslist-assignment.expect.md | 4 ++-- .../useCallback-reordering-depslist-assignment.tsx | 2 +- .../useMemo-reordering-depslist-assignment.expect.md | 4 ++-- .../new-mutability/useMemo-reordering-depslist-assignment.ts | 2 +- .../error.false-positive-useMemo-infer-mutate-deps.expect.md | 2 +- .../error.false-positive-useMemo-infer-mutate-deps.ts | 2 +- ...r.hoist-useCallback-conditional-access-own-scope.expect.md | 2 +- .../error.hoist-useCallback-conditional-access-own-scope.ts | 2 +- ....hoist-useCallback-infer-conditional-value-block.expect.md | 2 +- .../error.hoist-useCallback-infer-conditional-value-block.ts | 2 +- ....invalid-useCallback-captures-reassigned-context.expect.md | 2 +- .../error.invalid-useCallback-captures-reassigned-context.ts | 2 +- .../error.useCallback-conditional-access-noAlloc.expect.md | 2 +- .../error.useCallback-conditional-access-noAlloc.ts | 2 +- ...eCallback-infer-less-specific-conditional-access.expect.md | 2 +- ...rror.useCallback-infer-less-specific-conditional-access.ts | 2 +- ...r.useMemo-infer-less-specific-conditional-access.expect.md | 2 +- .../error.useMemo-infer-less-specific-conditional-access.ts | 2 +- ...Memo-infer-less-specific-conditional-value-block.expect.md | 2 +- ...ror.useMemo-infer-less-specific-conditional-value-block.ts | 2 +- .../useCallback-reordering-deplist-controlflow.expect.md | 3 ++- .../useCallback-reordering-deplist-controlflow.tsx | 1 + .../useCallback-reordering-depslist-assignment.expect.md | 3 ++- .../useCallback-reordering-depslist-assignment.tsx | 1 + .../useMemo-reordering-depslist-assignment.expect.md | 3 ++- .../useMemo-reordering-depslist-assignment.ts | 1 + .../useMemo-reordering-depslist-controlflow.expect.md | 3 ++- .../useMemo-reordering-depslist-controlflow.tsx | 1 + ...declarations-in-reactive-scope-with-early-return.expect.md | 4 ++-- ...pro-no-declarations-in-reactive-scope-with-early-return.js | 2 +- .../compiler/repro-renaming-conflicting-decls.expect.md | 3 ++- .../fixtures/compiler/repro-renaming-conflicting-decls.js | 1 + .../compiler/ts-non-null-expression-default-value.expect.md | 3 ++- .../compiler/ts-non-null-expression-default-value.tsx | 1 + .../src/__tests__/fixtures/compiler/unary-expr.expect.md | 3 ++- .../src/__tests__/fixtures/compiler/unary-expr.js | 1 + .../fixtures/compiler/useMemo-named-function.expect.md | 4 ++-- .../src/__tests__/fixtures/compiler/useMemo-named-function.ts | 2 +- .../fixtures/compiler/useMemo-with-optional.expect.md | 3 ++- .../src/__tests__/fixtures/compiler/useMemo-with-optional.js | 1 + .../fixtures/compiler/while-with-assignment-in-test.expect.md | 2 ++ .../fixtures/compiler/while-with-assignment-in-test.js | 1 + 103 files changed, 138 insertions(+), 79 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index 57567f325fd..9fa88680ca2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -210,7 +210,7 @@ export const EnvironmentConfigSchema = z.object({ * that if a useEffect or useCallback references a function value, that function value will be * considered frozen, and in turn all of its referenced variables will be considered frozen as well. */ - enablePreserveExistingMemoizationGuarantees: z.boolean().default(false), + enablePreserveExistingMemoizationGuarantees: z.boolean().default(true), /** * Validates that all useMemo/useCallback values are also memoized by Forget. This mode can be diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md index 3f1f7b3222a..293d9964cc4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false // bar(props.b) is an allocating expression that produces a primitive, which means // that Forget should memoize it. // Correctness: @@ -16,7 +17,8 @@ function AllocatingPrimitiveAsDep(props) { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; // bar(props.b) is an allocating expression that produces a primitive, which means +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false +// bar(props.b) is an allocating expression that produces a primitive, which means // that Forget should memoize it. // Correctness: // - y depends on either bar(props.b) or bar(props.b) + 1 diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.js index c7ef86f7c22..3c0768e7f51 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false // bar(props.b) is an allocating expression that produces a primitive, which means // that Forget should memoize it. // Correctness: diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md index 44d4974f6f8..e9475a070b8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; const someGlobal = {value: 0}; @@ -32,7 +33,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; const someGlobal = { value: 0 }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js index 8d89c65f262..5bdeeaee1a8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-modify-global-in-callback-jsx.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; const someGlobal = {value: 0}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.expect.md index 6adc3056080..9f147194da1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false function Component(props) { let a = foo(); // freeze `a` so we know the next line cannot mutate it @@ -17,7 +18,7 @@ function Component(props) { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false function Component(props) { const $ = _c(2); const a = foo(); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.js index e6d2c795c37..29d6797fdd4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-load-primitive-as-dependency.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false function Component(props) { let a = foo(); // freeze `a` so we know the next line cannot mutate it diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md index 6f13b0cd489..06a7ee3a37f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {Stringify, identity} from 'shared-runtime'; function foo() { @@ -64,7 +65,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { Stringify, identity } from "shared-runtime"; function foo() { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js index 656a54db5c7..199284b8caa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-template-literal.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {Stringify, identity} from 'shared-runtime'; function foo() { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md index 5b8824eca6b..407fdcb0488 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {Stringify} from 'shared-runtime'; @@ -25,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { Stringify } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.js index a365800e3ed..5ed1a9157bd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {Stringify} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.expect.md index c5167994cff..3b2768d350a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false function foo(props) { let x, y; ({x, y} = {x: props.a, y: props.b}); @@ -21,6 +22,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript +// @enablePreserveExistingMemoizationGuarantees:false function foo(props) { let x; let y; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.js index 4e017cf2f77..ec10d66f26d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-direct-reassignment.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false function foo(props) { let x, y; ({x, y} = {x: props.a, y: props.b}); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md index 8fe4602c899..8592ae65e4b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @flow @enableNewMutationAliasingModel +// @flow @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false /** * This hook returns a function that when called with an input object, * will return the result of mapping that input with the supplied map diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.js index accabed80fc..0fda92c726c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.js @@ -1,4 +1,4 @@ -// @flow @enableNewMutationAliasingModel +// @flow @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false /** * This hook returns a function that when called with an input object, * will return the result of mapping that input with the supplied map diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.expect.md index d8223e29498..8d603c629b6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false /** * Repro from https://github.com/facebook/react/issues/34262 diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.js index f07d00854cd..086cda353e5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-later-mutation.js @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false /** * Repro from https://github.com/facebook/react/issues/34262 diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.expect.md index 371348a5606..25b11eb38c2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {identity, Stringify, useHook} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.js index 06d2945868d..7af080b072f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-preserve-memoization-inner-destructured-value-mistaken-as-dependency-mutated-dep.js @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {identity, Stringify, useHook} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.expect.md index 946dd33fcbf..fc00a96a9f3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @flow @validatePreserveExistingMemoizationGuarantees +// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {logValue, useFragment, useHook, typedLog} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.js index 1621ab41c90..f3d08397770 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-capture-in-invoked-function-inferred-as-mutation.js @@ -1,4 +1,4 @@ -// @flow @validatePreserveExistingMemoizationGuarantees +// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {logValue, useFragment, useHook, typedLog} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md index 46c473a1b5e..be31341d15d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @flow @validatePreserveExistingMemoizationGuarantees +// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useFragment} from 'react-relay'; import LogEvent from 'LogEvent'; import {useCallback, useMemo} from 'react'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js index 34a9a128821..c71723f4964 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js @@ -1,4 +1,4 @@ -// @flow @validatePreserveExistingMemoizationGuarantees +// @flow @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useFragment} from 'react-relay'; import LogEvent from 'LogEvent'; import {useCallback, useMemo} from 'react'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.expect.md index 11ef34621c4..4721e015b08 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {ValidateMemoization, useHook} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.tsx index b17a5a4f6a5..0b90cf45bc5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-unmemoized-callback-captured-in-context-variable.tsx @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {ValidateMemoization, useHook} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.expect.md index 76b8d466ed4..c7e16b3c12b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {makeObject_Primitives, Stringify} from 'shared-runtime'; function Component(props) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.js index b4145b1617f..b3a240a111c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-entries-mutation.js @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {makeObject_Primitives, Stringify} from 'shared-runtime'; function Component(props) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.expect.md index fe532231896..bee5b18b7e2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {makeObject_Primitives, Stringify} from 'shared-runtime'; function Component(props) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.js index 3482887d920..4f8c32367c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-object-values-mutation.js @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {makeObject_Primitives, Stringify} from 'shared-runtime'; function Component(props) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md index 9f340f19ab9..0ead4d68f58 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo, useState} from 'react'; import {ValidateMemoization} from 'shared-runtime'; @@ -28,7 +29,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c2 } from "react/compiler-runtime"; +import { c as _c2 } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo, useState } from "react"; import { ValidateMemoization } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js index 96a8017848d..16af7ef85d1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo, useState} from 'react'; import {ValidateMemoization} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.expect.md index 650d828bd25..f4a416a5036 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import fbt from 'fbt'; /** @@ -35,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import fbt from "fbt"; /** diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.ts index 20b14c5c507..4ce2caadb9a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-plural-multiple-function-calls.ts @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import fbt from 'fbt'; /** diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.expect.md index 387c033d98d..686d95a6f50 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false const {identity, mutate} = require('shared-runtime'); function Component(props) { @@ -24,6 +25,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript +// @enablePreserveExistingMemoizationGuarantees:false const { identity, mutate } = require("shared-runtime"); function Component(props) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.js index 6dbdbac59c5..027d1e7f41e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-in-statement-type-inference.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false const {identity, mutate} = require('shared-runtime'); function Component(props) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md index 6b95dda4739..c7fcfd1daae 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @hookPattern:".*\b(use[^$]+)$" +// @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false import * as React from 'react'; import {makeArray, useHook} from 'shared-runtime'; @@ -36,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; // @hookPattern:".*\b(use[^$]+)$" +import { c as _c } from "react/compiler-runtime"; // @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false import * as React from "react"; import { makeArray, useHook } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.js index 246a74db72f..4db8451bc85 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hooks-with-prefix.js @@ -1,4 +1,4 @@ -// @hookPattern:".*\b(use[^$]+)$" +// @hookPattern:".*\b(use[^$]+)$" @enablePreserveExistingMemoizationGuarantees:false import * as React from 'react'; import {makeArray, useHook} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.expect.md index 258371afec8..cd93ad9bf7a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @debug +// @debug @enablePreserveExistingMemoizationGuarantees:false function Component(props) { const x = makeObject(); const y = delete x[props.value]; @@ -14,7 +14,7 @@ function Component(props) { ## Code ```javascript -// @debug +// @debug @enablePreserveExistingMemoizationGuarantees:false function Component(props) { const x = makeObject(); const y = delete x[props.value]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.js index 187e797f40f..6229cb6d3e5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-computed-delete.js @@ -1,4 +1,4 @@ -// @debug +// @debug @enablePreserveExistingMemoizationGuarantees:false function Component(props) { const x = makeObject(); const y = delete x[props.value]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.expect.md index 4f1fb2d4929..f8e74b37dda 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false function Component(props) { const x = makeObject(); const y = delete x.value; @@ -13,6 +14,7 @@ function Component(props) { ## Code ```javascript +// @enablePreserveExistingMemoizationGuarantees:false function Component(props) { const x = makeObject(); const y = delete x.value; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.js index b8540044449..1dd4bd710e0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-property-delete.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false function Component(props) { const x = makeObject(); const y = delete x.value; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.expect.md index a6d7eb64e10..f3ebad71dfc 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel +// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {makeArray} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.js index b9b914d30ec..d084df5e7a1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-useCallback-captures-reassigned-context.js @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel +// @validatePreserveExistingMemoizationGuarantees @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {makeArray} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.expect.md index 83e593dbd41..98128b1e506 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {identity, ValidateMemoization} from 'shared-runtime'; @@ -32,7 +33,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { identity, ValidateMemoization } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.js index c7770ffcdce..3190c0e7c7c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity-function-expression.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {identity, ValidateMemoization} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.expect.md index 78cb6697fc7..012aec12b36 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {identity, ValidateMemoization} from 'shared-runtime'; @@ -29,7 +30,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { identity, ValidateMemoization } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.js index bd928634a29..a542514109e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-through-identity.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {identity, ValidateMemoization} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.expect.md index 0a31e02ae25..53a99470a92 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { mutate, @@ -49,7 +50,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { mutate, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.tsx index 61f8c47e453..5d61126ee97 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { mutate, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.expect.md index c985809353e..25f37285237 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, @@ -41,7 +42,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.tsx index d6bd1690f65..c6bd016280d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.expect.md index 4f665646241..9cb71732a09 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, @@ -42,7 +43,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.tsx index d81c069e336..1e997906428 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-add-captured-array-to-itself.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.expect.md index 2cffd06f07b..81c53c90167 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, @@ -40,7 +41,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.tsx index 72289eb8335..cb282549f06 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom-lambda.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.expect.md index 458b75dff94..a51aaf5367c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, @@ -36,7 +37,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.tsx index d06ad11eb57..6d2f1785316 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-capture-createfrom.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.expect.md index 0786bac4341..fd7f2b0cda0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, @@ -40,7 +41,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.tsx index 90b75976946..03ca2ef583a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/transitivity-phi-assign-or-capture.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import { typedCapture, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.expect.md index e33f52396d5..6c45eb8bfaf 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @enableNewMutationAliasingModel +// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {Stringify} from 'shared-runtime'; @@ -36,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import { useCallback } from "react"; import { Stringify } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.tsx index 08b9e4b2faa..f360a821325 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.tsx @@ -1,4 +1,4 @@ -// @enableNewMutationAliasingModel +// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {Stringify} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.expect.md index cc65670080b..f29be3d405b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @enableNewMutationAliasingModel +// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {Stringify} from 'shared-runtime'; @@ -31,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import { useCallback } from "react"; import { Stringify } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.tsx index 43e2dfbb050..061af52723e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.tsx @@ -1,4 +1,4 @@ -// @enableNewMutationAliasingModel +// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {Stringify} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.expect.md index 926887a7a44..ce3e3734e98 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @enableNewMutationAliasingModel +// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; function useFoo(arr1, arr2) { @@ -27,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; function useFoo(arr1, arr2) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.ts index 5b7d799d68b..7c4daae371f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.ts @@ -1,4 +1,4 @@ -// @enableNewMutationAliasingModel +// @enableNewMutationAliasingModel @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; function useFoo(arr1, arr2) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.expect.md index a30b33d8b64..9a092e3f228 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {identity} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.ts index 1d0ca7f1bc7..628c786550e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-infer-mutate-deps.ts @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {identity} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.expect.md index eafc8f16cff..ed2e61d8ee3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; function Component({propA, propB}) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.ts index 6c32f01b37d..a75a3936d4c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.ts @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; function Component({propA, propB}) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.expect.md index 6298ab289c1..a16ef317b09 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {identity, mutate} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.ts index d0c82f78663..23d77c84ec1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.ts @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {identity, mutate} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md index 082097cbd10..df6ee0495e1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {makeArray} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.ts index d7e77b77c26..29ff926d2e0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.ts @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {makeArray} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.expect.md index 92b667de08b..075458831b8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; function Component({propA, propB}) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.ts index e5e53b8420e..c6642be4f89 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-conditional-access-noAlloc.ts @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; function Component({propA, propB}) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.expect.md index c22a96d629f..077b9aa9f6f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {mutate} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.ts index fef4fdfa680..637e0a974e6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.ts @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {mutate} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.expect.md index cf24f259269..d93c52a10c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {mutate} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.ts index ee09122d602..9a81716828c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-access.ts @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {mutate} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.expect.md index fafaad14e64..9d35f52504e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {identity, mutate} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.ts index 1db0acf8398..7c9cb48c7c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-infer-less-specific-conditional-value-block.ts @@ -1,4 +1,4 @@ -// @validatePreserveExistingMemoizationGuarantees +// @validatePreserveExistingMemoizationGuarantees @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {identity, mutate} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md index 18e0621d626..db5ff86ed23 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {Stringify} from 'shared-runtime'; @@ -35,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useCallback } from "react"; import { Stringify } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.tsx index ba0abc0d7cd..698fbeb2ca0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {Stringify} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md index 086ef4f58d6..448c2133301 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {Stringify} from 'shared-runtime'; @@ -30,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useCallback } from "react"; import { Stringify } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.tsx index 3ac3845c47f..d5d36490dfb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useCallback} from 'react'; import {Stringify} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md index c224f1d17ec..58b2c9762b2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; function useFoo(arr1, arr2) { @@ -26,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; function useFoo(arr1, arr2) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.ts index 8025d3680fb..673380de119 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.ts @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; function useFoo(arr1, arr2) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md index d8a20367c91..d208ce4fb74 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {Stringify} from 'shared-runtime'; @@ -35,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { Stringify } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.tsx index c179d27b831..eae6a75854e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {Stringify} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md index d913c4f29b3..6cf8820e984 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions +// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @enablePreserveExistingMemoizationGuarantees:false function Component() { const items = useItems(); const filteredItems = useMemo( @@ -37,7 +37,7 @@ function Component() { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions +import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @enablePreserveExistingMemoizationGuarantees:false function Component() { const $ = _c(6); const items = useItems(); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.js index 1d01c209939..aa43a8d1886 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.js @@ -1,4 +1,4 @@ -// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions +// @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions @enablePreserveExistingMemoizationGuarantees:false function Component() { const items = useItems(); const filteredItems = useMemo( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md index 85d345fbf7d..68dc127bc1e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {Stringify, identity, makeArray, toJSON} from 'shared-runtime'; import {useMemo} from 'react'; @@ -40,7 +41,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { Stringify, identity, makeArray, toJSON } from "shared-runtime"; import { useMemo } from "react"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.js index 64135be731a..139be81a6c3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {Stringify, identity, makeArray, toJSON} from 'shared-runtime'; import {useMemo} from 'react'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md index 7af6bc996a9..4b8096f702a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false const THEME_MAP: ReadonlyMap = new Map([ ['default', 'light'], ['dark', 'dark'], @@ -21,7 +22,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false const THEME_MAP: ReadonlyMap = new Map([ ["default", "light"], ["dark", "dark"], diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx index c1d835d6f0f..43a24622c5b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false const THEME_MAP: ReadonlyMap = new Map([ ['default', 'light'], ['dark', 'dark'], diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.expect.md index 7fa86838e8c..399be048d55 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false function component(a) { let t = {t: a}; let z = +t.t; @@ -25,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false function component(a) { const $ = _c(8); const t = { t: a }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.js index c22b9208966..a367653dfd9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unary-expr.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false function component(a) { let t = {t: a}; let z = +t.t; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.expect.md index 9c87512a0f7..4d1cc124006 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.expect.md @@ -2,7 +2,7 @@ ## Input ```javascript -// @validateNoSetStateInRender:false +// @validateNoSetStateInRender:false @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {makeArray} from 'shared-runtime'; @@ -21,7 +21,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInRender:false +import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInRender:false @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; import { makeArray } from "shared-runtime"; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.ts index 317491efbfe..20a377c4749 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-named-function.ts @@ -1,4 +1,4 @@ -// @validateNoSetStateInRender:false +// @validateNoSetStateInRender:false @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; import {makeArray} from 'shared-runtime'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.expect.md index 260d695e09d..34529a21080 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; function Component(props) { return ( @@ -21,7 +22,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false import { useMemo } from "react"; function Component(props) { const $ = _c(2); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.js index a96c044a3b8..7df73db402f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-with-optional.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false import {useMemo} from 'react'; function Component(props) { return ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.expect.md index 1edde1af1ce..033c7b0d98f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @enablePreserveExistingMemoizationGuarantees:false function Component() { const queue = [1, 2, 3]; let value = 0; @@ -22,6 +23,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript +// @enablePreserveExistingMemoizationGuarantees:false function Component() { const queue = [1, 2, 3]; let value; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.js index 295bf27d3fb..3af11ed453c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/while-with-assignment-in-test.js @@ -1,3 +1,4 @@ +// @enablePreserveExistingMemoizationGuarantees:false function Component() { const queue = [1, 2, 3]; let value = 0; From ced705d7566a2f7f2a2f0e904d91fe1d1d97f808 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 2 Oct 2025 14:20:02 -0400 Subject: [PATCH 010/276] [DevTools] Always include the root in the timeline and select it by default (#34654) Rebased on #34454. Always include the root in the timeline even if it has no unique suspenders, since even if it won't suspend, we have to be able to see that and step to one step before the next boundary to see the first boundary that does suspend in its fallback state. Also, if there's no current selection on initial mount, select the last entry in the timeline. We usually do this with `selectedSuspenseID` but that doesn't happen on initial load. So this does it on initial load if nothing else is selected by then. That way when you reload you get the initial root selected. There's a problem here because we should really use one source of truth and `selectedSuspenseID` doesn't really do anything now. Either it should be its separate source of truth and you can't show components in the side-panel or it should be derived from the other state. If it's derived, once there's a selection, e.g. in the root, then even if new timelines load it will never change but that's probably a good thing. --- .../devtools/views/SuspenseTab/SuspenseTab.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index f7b63fa2c62..f698f0ae165 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -34,6 +34,10 @@ import { SuspenseTreeStateContext, } from './SuspenseTreeContext'; import {StoreContext, OptionsContext} from '../context'; +import { + TreeDispatcherContext, + TreeStateContext, +} from '../Components/TreeContext'; import Button from '../Button'; import Toggle from '../Toggle'; import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent'; @@ -181,6 +185,18 @@ function SuspenseTab(_: {}) { treeListHorizontalFraction, } = state; + const {inspectedElementID} = useContext(TreeStateContext); + const {timeline} = useContext(SuspenseTreeStateContext); + const treeDispatch = useContext(TreeDispatcherContext); + useLayoutEffect(() => { + // If the inspected element is still null and we've loaded a timeline, we can set the initial selection. + // TODO: This tab should use its own source of truth instead so we only show suspense boundaries. + if (inspectedElementID === null && timeline.length > 0) { + const milestone = timeline[timeline.length - 1]; + treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: milestone}); + } + }, [timeline, inspectedElementID]); + useLayoutEffect(() => { const wrapperElement = wrapperTreeRef.current; From 2e68dc76a41165d16b35d6eb2e7bf13aafed9aef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 2 Oct 2025 14:37:03 -0400 Subject: [PATCH 011/276] [DevTools] Give a distinct color to the root (#34690) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34654. The root is special since it represents "Initial Paint" (or a "Transition" when an Activity is selected). This gives it a different color in the timeline as well as gives it an outline that's clickable. Hovering the timeline now shows "Initial Paint" or "Suspense". Also made the cursor a pointer to invite you to try to click things and some rounded corners. Screenshot 2025-10-02 at 1 26 38 PM

--- .../views/SuspenseTab/SuspenseRects.css | 11 ++++- .../views/SuspenseTab/SuspenseRects.js | 8 +++- .../views/SuspenseTab/SuspenseScrubber.css | 10 +++-- .../views/SuspenseTab/SuspenseScrubber.js | 44 +++++++++++++------ 4 files changed, 53 insertions(+), 20 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 7ad31524968..ba862051d95 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -1,5 +1,12 @@ .SuspenseRectsContainer { padding: .25rem; + cursor: pointer; + outline: 1px solid var(--color-component-name); + border-radius: 0.25rem; +} + +.SuspenseRectsContainer[data-highlighted='true'] { + background: var(--color-dimmest); } .SuspenseRectsViewBox { @@ -28,6 +35,8 @@ pointer-events: all; outline-style: solid; outline-width: 1px; + border-radius: 0.125rem; + cursor: pointer; } .SuspenseRectsScaledRect { @@ -42,7 +51,7 @@ /* highlight this boundary */ .SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect { - background-color: var(--color-background-hover); + background-color: var(--color-background-hover); } .SuspenseRectsRect[data-highlighted='true'] { diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index cd77a7a62c5..8e43944e7a7 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -295,6 +295,7 @@ const ViewBox = createContext((null: any)); function SuspenseRectsContainer(): React$Node { const store = useContext(StoreContext); + const {inspectedElementID} = useContext(TreeStateContext); const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); // TODO: This relies on a full re-render of all children when the Suspense tree changes. @@ -329,8 +330,13 @@ function SuspenseRectsContainer(): React$Node { }); } + const isRootSelected = roots.includes(inspectedElementID); + return ( -

.SuspenseScrubberBead, -.SuspenseScrubberStepHighlight > .SuspenseScrubberBeadSelected, -.SuspenseScrubberStep:hover > .SuspenseScrubberBead, -.SuspenseScrubberStep:hover > .SuspenseScrubberBeadSelected { +.SuspenseScrubberStep:hover > .SuspenseScrubberBead { height: 0.75rem; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js index cbb76e41647..53d20b6467c 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js @@ -14,6 +14,8 @@ import {useRef} from 'react'; import styles from './SuspenseScrubber.css'; +import Tooltip from '../Components/reach-ui/tooltip'; + export default function SuspenseScrubber({ min, max, @@ -53,24 +55,38 @@ export default function SuspenseScrubber({ const steps = []; for (let index = min; index <= max; index++) { steps.push( -

+ label={ + index === min + ? // The first step in the timeline is always a Transition (Initial Paint). + // TODO: Support multiple environments. + 'Initial Paint' + : // TODO: Consider adding the name of this specific boundary if this step has only one. + 'Suspense' + }>

, + onPointerDown={handlePress.bind(null, index)} + onMouseEnter={onHoverSegment.bind(null, index)}> +

+ , ); } From c825f030679c41b55faf448648cee4e41dff3787 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 2 Oct 2025 15:18:41 -0400 Subject: [PATCH 012/276] [DevTools] Hide State and Props in the Sidebar for Suspense (#34630) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We're showing too much noise in the side-panel when selecting a Suspense boundary. The interesting thing to see directly is the "Suspended by". The "props" are mostly useless because the `"name"` prop is already in the tree. I'm now also showing it in the title bar of the selected element panel. The "children" and "fallback" props are just the thing that you can see in the tree view anyway. The "state" is this weird section with just one field in it, which we already have duplicated in the top toolbar as well. We can just delete this. I make sure to show the icon and a "suspended..." section while the boundary is still loading but now yet resuspended by force suspending. While still loading: Screenshot 2025-09-27 at 11 54 37 PM

After loading: Screenshot 2025-09-27 at 11 54 53 PM

Resuspended after loading: Screenshot 2025-09-27 at 11 55 07 PM

--- .../src/backend/fiber/renderer.js | 7 +- .../views/Components/InspectedElement.js | 9 ++- .../Components/InspectedElementPropsTree.js | 15 +++- .../Components/InspectedElementSuspendedBy.js | 11 +++ .../InspectedElementSuspenseToggle.js | 72 ------------------- .../views/Components/InspectedElementView.js | 9 --- 6 files changed, 33 insertions(+), 90 deletions(-) delete mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 222baa0dae0..ba214db05c7 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -6596,9 +6596,6 @@ export function attach( rootType = fiberRoot._debugRootType; } - const isTimedOutSuspense = - tag === SuspenseComponent && memoizedState !== null; - let isErrored = false; if (isErrorBoundary(fiber)) { // if the current inspected element is an error boundary, @@ -6670,7 +6667,7 @@ export function attach( if ( fiberInstance.suspenseNode !== null && fiberInstance.suspenseNode.hasUnknownSuspenders && - !isTimedOutSuspense + !isSuspended ) { // Something unknown threw to suspended this boundary. Let's figure out why that might be. if (renderer.bundleType === 0) { @@ -6708,7 +6705,7 @@ export function attach( supportsTogglingSuspense && hasSuspenseBoundary && // If it's showing the real content, we can always flip fallback. - (!isTimedOutSuspense || + (!isSuspended || // If it's showing fallback because we previously forced it to, // allow toggling it back to remove the fallback override. forceFallbackForFibers.has(fiber) || diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index 08bba4f9da4..88aeab7bfd4 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js @@ -269,18 +269,21 @@ export default function InspectedElementWrapper(_: Props): React.Node { )} - {canToggleSuspense && ( + {canToggleSuspense || isSuspended ? ( - )} + ) : null} {store.supportsInspectMatchingDOMElement && (

+ ); + } return null; } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js deleted file mode 100644 index ebb4b5bcd54..00000000000 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -import * as React from 'react'; -import {OptionsContext} from '../context'; -import EditableValue from './EditableValue'; -import Store from '../../store'; -import {ElementTypeSuspense} from 'react-devtools-shared/src/frontend/types'; -import styles from './InspectedElementSharedStyles.css'; - -import type {InspectedElement} from 'react-devtools-shared/src/frontend/types'; -import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; - -type Props = { - bridge: FrontendBridge, - inspectedElement: InspectedElement, - store: Store, -}; - -export default function InspectedElementSuspenseToggle({ - bridge, - inspectedElement, - store, -}: Props): React.Node { - const {readOnly} = React.useContext(OptionsContext); - - const {id, isSuspended, type} = inspectedElement; - const canToggleSuspense = !readOnly && inspectedElement.canToggleSuspense; - - if (type !== ElementTypeSuspense) { - return null; - } - - const toggleSuspense = (path: any, value: boolean) => { - const rendererID = store.getRendererIDForElement(id); - if (rendererID !== null) { - bridge.send('overrideSuspense', { - id, - rendererID, - forceFallback: value, - }); - } - }; - - return ( -

suspense

- Suspended - {canToggleSuspense ? ( - // key is required to keep and header row toggle button in sync - - ) : ( - {isSuspended ? 'true' : 'false'} - )} -

- ); -} diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js index 7e2175db741..fef9a04985e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js @@ -17,7 +17,6 @@ import InspectedElementHooksTree from './InspectedElementHooksTree'; import InspectedElementPropsTree from './InspectedElementPropsTree'; import InspectedElementStateTree from './InspectedElementStateTree'; import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin'; -import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle'; import InspectedElementSuspendedBy from './InspectedElementSuspendedBy'; import NativeStyleEditor from './NativeStyleEditor'; import {enableStyleXFeatures} from 'react-devtools-feature-flags'; @@ -95,14 +94,6 @@ export default function InspectedElementView({ />

- -

Date: Thu, 2 Oct 2025 15:29:38 -0400 Subject: [PATCH 013/276] [DevTools] Show Props as Read-only for Suspense/Activity but below (#34695) Somehow my last commit didn't make it in #34630. --- .../Components/InspectedElementPropsTree.js | 18 ++++----- .../views/Components/InspectedElementView.js | 37 +++++++++++++++---- 2 files changed, 36 insertions(+), 19 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js index dddc6e6a9de..59e5b8cc910 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js @@ -20,6 +20,7 @@ import styles from './InspectedElementSharedStyles.css'; import { ElementTypeClass, ElementTypeSuspense, + ElementTypeActivity, } from 'react-devtools-shared/src/frontend/types'; import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck'; @@ -50,20 +51,15 @@ export default function InspectedElementPropsTree({ type, } = inspectedElement; - if (type === ElementTypeSuspense) { - // Skip showing the props for Suspense. We want to give more real estate to the - // "Suspended by" for Suspense boundaries. We could maybe show it further below - // but in practice, the props of Suspense boundaries are not very useful to - // inspect because the name shows in the tree already. The children in the tree - // will be either the "fallback" or "children" prop which you can already inspect - // but resuspending the tree. - return null; - } - const canDeletePaths = type === ElementTypeClass || canEditFunctionPropsDeletePaths; const canEditValues = - !readOnly && (type === ElementTypeClass || canEditFunctionProps); + !readOnly && + (type === ElementTypeClass || canEditFunctionProps) && + // Make it read-only for Suspense to make it a bit cleaner. It's not + // useful to edit children anyway. + type !== ElementTypeSuspense && + type !== ElementTypeActivity; const canRenamePaths = type === ElementTypeClass || canEditFunctionPropsRenamePaths; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js index fef9a04985e..6d3d0d604fd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js @@ -24,6 +24,10 @@ import InspectedElementSourcePanel from './InspectedElementSourcePanel'; import StackTraceView from './StackTraceView'; import OwnerView from './OwnerView'; import Skeleton from './Skeleton'; +import { + ElementTypeSuspense, + ElementTypeActivity, +} from 'react-devtools-shared/src/frontend/types'; import styles from './InspectedElementView.css'; @@ -60,6 +64,7 @@ export default function InspectedElementView({ rootType, source, nativeTag, + type, } = inspectedElement; const bridge = useContext(BridgeContext); @@ -74,6 +79,17 @@ export default function InspectedElementView({ const showRenderedBy = showStack || showOwnersList || rendererLabel !== null || rootType !== null; + const propsSection = ( +

+ +

+ ); + return (

@@ -85,14 +101,12 @@ export default function InspectedElementView({ />

- -

+ { + // For Suspense and Activity we show the props further down. + type !== ElementTypeSuspense && type !== ElementTypeActivity + ? propsSection + : null + }

+ { + // For Suspense and Activity we show the props below suspended by to give that more priority. + type !== ElementTypeSuspense && type !== ElementTypeActivity + ? null + : propsSection + } + {showRenderedBy && (

Date: Thu, 2 Oct 2025 21:52:50 +0200 Subject: [PATCH 014/276] Fix DevTools regression tests (#34696) --- .../react-devtools-shared/src/__tests__/preprocessData-test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js index 2c20bbcd1c5..be2e0377d42 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -850,6 +850,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >= 19.1 // @reactVersion < 19.2 it('should process a sample createRoot render sequence', async () => { function App() { @@ -2158,6 +2159,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >= 19.1 // @reactVersion < 19.2 it('should process a sample createRoot render sequence', async () => { function App() { From 7d9f876cbc7e9363092e60436704cf8ae435b969 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Thu, 2 Oct 2025 13:21:57 -0700 Subject: [PATCH 015/276] [Fizz] Detatch boundary after flushing segment with boundary (#34694) When we flush a Suspense boundary we might not flush the fallback segment, it might only flush a placeholder instead. In this case the segment can flush again but we do not want to flush the boundary itself a second time. We now detach the boundary after flushing it. better solution to: https://github.com/facebook/react/pull/34668 --- .../src/__tests__/ReactDOMFizzServer-test.js | 52 +++++++++++++++++++ packages/react-server/src/ReactFizzServer.js | 8 ++- 2 files changed, 58 insertions(+), 2 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index d9b604c1750..b988bd72caf 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -10832,4 +10832,56 @@ Unfortunately that previous paragraph wasn't quite long enough so I'll continue , ); }); + + it('not error when a suspended fallback segment directly inside another Suspense is abandoned', async () => { + function SuspendForever() { + React.use(new Promise(() => {})); + } + + let resolve = () => {}; + const suspendPromise = new Promise(r => { + resolve = r; + }); + function Suspend() { + return React.use(suspendPromise); + } + + function App() { + return ( + + + + }> + hello world + + + + + + + + ); + } + + await act(async () => { + const {pipe} = renderToPipeableStream(, { + onError() {}, + }); + pipe(writable); + }); + + await act(() => { + resolve('!'); + }); + + expect(getVisibleChildren(document)).toEqual( + + + + hello world + ! + + , + ); + }); }); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index b8184a19837..07408d64e88 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -342,7 +342,7 @@ type Segment = { // The context that this segment was created in. parentFormatContext: FormatContext, // If this segment represents a fallback, this is the content that will replace that fallback. - +boundary: null | SuspenseBoundary, + boundary: null | SuspenseBoundary, // used to discern when text separator boundaries are needed lastPushedText: boolean, textEmbedded: boolean, @@ -5681,6 +5681,10 @@ function flushSegment( return flushSubtree(request, destination, segment, hoistableState); } + // We're going to write the boundary. We don't need to maintain this reference since + // we might reflush this segment at a later time (if it aborts and we inlined) but + // we don't want to reflush the boundary + segment.boundary = null; boundary.parentFlushed = true; // This segment is a Suspense boundary. We need to decide whether to // emit the content or the fallback now. @@ -5952,7 +5956,7 @@ function flushPartiallyCompletedSegment( segment: Segment, ): boolean { if (segment.status === FLUSHED) { - // We've already flushed this inline. + // We've already flushed this inline return true; } From f89ed71ddf5f8cab28b202cfdc04927c683ad3cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 2 Oct 2025 17:06:52 -0400 Subject: [PATCH 016/276] [DevTools] Track whether to auto select when new timeline entries come on (#34698) This auto updates to select the last entry in the timeline until we make the first selection. That way when new content loads in, we show the last timeline of what is visible. --- .../views/SuspenseTab/SuspenseTreeContext.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js index bfe3f42bda6..60235e09f39 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js @@ -30,6 +30,7 @@ export type SuspenseTreeState = { hoveredTimelineIndex: number | -1, uniqueSuspendersOnly: boolean, playing: boolean, + autoSelect: boolean, }; type ACTION_SUSPENSE_TREE_MUTATION = { @@ -123,6 +124,7 @@ function getInitialState(store: Store): SuspenseTreeState { hoveredTimelineIndex: -1, uniqueSuspendersOnly, playing: false, + autoSelect: true, }; return initialState; @@ -181,7 +183,10 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedTimelineID === null || nextTimeline.length === 0 ? -1 : nextTimeline.indexOf(selectedTimelineID); - if (nextTimeline.length > 0 && nextTimelineIndex === -1) { + if ( + nextTimeline.length > 0 && + (nextTimelineIndex === -1 || state.autoSelect) + ) { nextTimelineIndex = nextTimeline.length - 1; selectedSuspenseID = nextTimeline[nextTimelineIndex]; } @@ -212,6 +217,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { ...state, selectedSuspenseID, playing: false, // pause + autoSelect: false, }; } case 'SET_SUSPENSE_LINEAGE': { @@ -223,6 +229,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { lineage, selectedSuspenseID: suspenseID, playing: false, // pause + autoSelect: false, }; } case 'SET_SUSPENSE_TIMELINE': { @@ -277,6 +284,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedSuspenseID: nextSelectedSuspenseID, timelineIndex: nextTimelineIndex, playing: false, // pause + autoSelect: false, }; } case 'SUSPENSE_SKIP_TIMELINE_INDEX': { @@ -299,6 +307,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedSuspenseID: nextSelectedSuspenseID, timelineIndex: nextTimelineIndex, playing: false, // pause + autoSelect: false, }; } case 'SUSPENSE_PLAY_PAUSE': { @@ -325,6 +334,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedSuspenseID: nextSelectedSuspenseID, timelineIndex: nextTimelineIndex, playing: mode === 'toggle' ? !state.playing : mode === 'play', + autoSelect: false, }; } case 'SUSPENSE_PLAY_TICK': { @@ -381,6 +391,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedSuspenseID: nextSelectedSuspenseID, timelineIndex: nextTimelineIndex, playing: false, // pause + autoSelect: false, }; } case 'HOVER_TIMELINE_FOR_ID': { From 6a8a8ef32692cc42b53d072d5ce6a6a84e190482 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Thu, 2 Oct 2025 23:14:52 +0200 Subject: [PATCH 017/276] [Flight] Add `` (#34697) --- .../src/__tests__/ActivityReactServer-test.js | 65 +++++++++++++++++++ .../ViewTransitionReactServer-test.js | 64 ++++++++++++++++++ .../ReactServer.experimental.development.js | 2 +- .../react/src/ReactServer.experimental.js | 2 +- packages/react/src/ReactServer.fb.js | 7 ++ packages/react/src/ReactServer.js | 2 + 6 files changed, 140 insertions(+), 2 deletions(-) create mode 100644 packages/react-reconciler/src/__tests__/ActivityReactServer-test.js create mode 100644 packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js diff --git a/packages/react-reconciler/src/__tests__/ActivityReactServer-test.js b/packages/react-reconciler/src/__tests__/ActivityReactServer-test.js new file mode 100644 index 00000000000..93f4e5683b6 --- /dev/null +++ b/packages/react-reconciler/src/__tests__/ActivityReactServer-test.js @@ -0,0 +1,65 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + * @jest-environment node + */ + +'use strict'; + +let act; +let Activity; +let React; +let ReactServer; +let ReactNoop; +let ReactNoopFlightClient; +let ReactNoopFlightServer; + +describe('ActivityReactServer', () => { + beforeEach(() => { + jest.resetModules(); + jest.mock('react', () => require('react/react.react-server')); + ReactServer = require('react'); + Activity = ReactServer.Activity; + ReactNoopFlightServer = require('react-noop-renderer/flight-server'); + + jest.resetModules(); + __unmockReact(); + React = require('react'); + ReactNoopFlightClient = require('react-noop-renderer/flight-client'); + ReactNoop = require('react-noop-renderer'); + const InternalTestUtils = require('internal-test-utils'); + act = InternalTestUtils.act; + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('can be rendered in React Server', async () => { + function App() { + return ReactServer.createElement( + Activity, + {mode: 'hidden'}, + ReactServer.createElement('div', null, 'Hello, Dave!'), + ); + } + + const transport = ReactNoopFlightServer.render( + ReactServer.createElement(App, null), + ); + + await act(async () => { + const app = await ReactNoopFlightClient.read(transport); + + ReactNoop.render(app); + }); + + expect(ReactNoop).toMatchRenderedOutput( + , + ); + }); +}); diff --git a/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js b/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js new file mode 100644 index 00000000000..8f1104a1283 --- /dev/null +++ b/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js @@ -0,0 +1,64 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + * @jest-environment node + */ + +'use strict'; + +let act; +let ViewTransition; +let React; +let ReactServer; +let ReactNoop; +let ReactNoopFlightClient; +let ReactNoopFlightServer; + +describe('ViewTransitionReactServer', () => { + beforeEach(() => { + jest.resetModules(); + jest.mock('react', () => require('react/react.react-server')); + ReactServer = require('react'); + ViewTransition = ReactServer.unstable_ViewTransition; + ReactNoopFlightServer = require('react-noop-renderer/flight-server'); + + jest.resetModules(); + __unmockReact(); + React = require('react'); + ReactNoopFlightClient = require('react-noop-renderer/flight-client'); + ReactNoop = require('react-noop-renderer'); + const InternalTestUtils = require('internal-test-utils'); + act = InternalTestUtils.act; + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); + + // @gate enableViewTransition || fb + it('can be rendered in React Server', async () => { + function App() { + return ReactServer.createElement( + ViewTransition, + {}, + ReactServer.createElement('div', null, 'Hello, Dave!'), + ); + } + + const transport = ReactNoopFlightServer.render( + ReactServer.createElement(App, null), + ); + + await act(async () => { + const app = await ReactNoopFlightClient.read(transport); + + ReactNoop.render(app); + }); + + expect(ReactNoop).toMatchRenderedOutput(

Hello, Dave!

); + }); +}); diff --git a/packages/react/src/ReactServer.experimental.development.js b/packages/react/src/ReactServer.experimental.development.js index 082eb58ccac..9e9417677bb 100644 --- a/packages/react/src/ReactServer.experimental.development.js +++ b/packages/react/src/ReactServer.experimental.development.js @@ -58,6 +58,7 @@ export { export { Children, + REACT_ACTIVITY_TYPE as Activity, REACT_FRAGMENT_TYPE as Fragment, REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, @@ -83,6 +84,5 @@ export { // Experimental REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, - REACT_ACTIVITY_TYPE as unstable_Activity, captureOwnerStack, // DEV-only }; diff --git a/packages/react/src/ReactServer.experimental.js b/packages/react/src/ReactServer.experimental.js index 4fe83248e2c..e380789d71b 100644 --- a/packages/react/src/ReactServer.experimental.js +++ b/packages/react/src/ReactServer.experimental.js @@ -57,6 +57,7 @@ export { export { Children, + REACT_ACTIVITY_TYPE as Activity, REACT_FRAGMENT_TYPE as Fragment, REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, @@ -82,5 +83,4 @@ export { // Experimental REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, - REACT_ACTIVITY_TYPE as Activity, }; diff --git a/packages/react/src/ReactServer.fb.js b/packages/react/src/ReactServer.fb.js index 998a7867983..fe6089fc160 100644 --- a/packages/react/src/ReactServer.fb.js +++ b/packages/react/src/ReactServer.fb.js @@ -12,10 +12,13 @@ export {default as __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRA import {forEach, map, count, toArray, only} from './ReactChildren'; import {captureOwnerStack as captureOwnerStackImpl} from './ReactOwnerStack'; import { + REACT_ACTIVITY_TYPE, REACT_FRAGMENT_TYPE, REACT_PROFILER_TYPE, REACT_STRICT_MODE_TYPE, REACT_SUSPENSE_TYPE, + REACT_SUSPENSE_LIST_TYPE, + REACT_VIEW_TRANSITION_TYPE, } from 'shared/ReactSymbols'; import { cloneElement, @@ -45,6 +48,7 @@ if (__DEV__) { export { Children, + REACT_ACTIVITY_TYPE as Activity, REACT_FRAGMENT_TYPE as Fragment, REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, @@ -65,4 +69,7 @@ export { useMemo, version, captureOwnerStack, // DEV-only + // Experimental + REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, + REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, }; diff --git a/packages/react/src/ReactServer.js b/packages/react/src/ReactServer.js index be5cd22d91b..f218074deea 100644 --- a/packages/react/src/ReactServer.js +++ b/packages/react/src/ReactServer.js @@ -11,6 +11,7 @@ export {default as __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRA import {forEach, map, count, toArray, only} from './ReactChildren'; import { + REACT_ACTIVITY_TYPE, REACT_FRAGMENT_TYPE, REACT_PROFILER_TYPE, REACT_STRICT_MODE_TYPE, @@ -40,6 +41,7 @@ const Children = { export { Children, + REACT_ACTIVITY_TYPE as Activity, REACT_FRAGMENT_TYPE as Fragment, REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, From 289f070d64c824a43a401762ec786f5502a0074e Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Thu, 2 Oct 2025 17:41:29 -0400 Subject: [PATCH 018/276] [playground] Improve DiffEditor scrollbar + view (#34691) The previous DiffEditor view of the playground looked broken and not cohesive. There would be parts of the scrollbar appearing on the left side for some reason, along with two scrollbars on the right side. This PR makes the DiffEditor look more cohesive. Previous: https://github.com/user-attachments/assets/1aa1c775-5940-43b2-a75a-9b46452fb78b After: https://github.com/user-attachments/assets/b5c04998-6a6c-4b52-b3c5-b2fef21729e0 --- .../apps/playground/components/AccordionWindow.tsx | 3 +-- .../apps/playground/components/Editor/EditorImpl.tsx | 6 +----- compiler/apps/playground/components/Editor/Output.tsx | 10 ++++++++-- compiler/apps/playground/styles/globals.css | 8 ++++++++ 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/compiler/apps/playground/components/AccordionWindow.tsx b/compiler/apps/playground/components/AccordionWindow.tsx index 09614bd505b..311bf2590dc 100644 --- a/compiler/apps/playground/components/AccordionWindow.tsx +++ b/compiler/apps/playground/components/AccordionWindow.tsx @@ -7,7 +7,6 @@ import {Resizable} from 're-resizable'; import React, { - useCallback, useId, unstable_ViewTransition as ViewTransition, unstable_addTransitionType as addTransitionType, @@ -66,7 +65,7 @@ function AccordionWindowItem({ const transitionName = `accordion-window-item-${id}`; - const toggleTabs = () => { + const toggleTabs = (): void => { startTransition(() => { addTransitionType(EXPAND_ACCORDION_TRANSITION); const nextState = new Set(tabsOpen); diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx index e7068534cd0..9f000f85564 100644 --- a/compiler/apps/playground/components/Editor/EditorImpl.tsx +++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx @@ -24,11 +24,7 @@ import BabelPluginReactCompiler, { printFunctionWithOutlined, type LoggerEvent, } from 'babel-plugin-react-compiler'; -import { - useDeferredValue, - useMemo, - unstable_ViewTransition as ViewTransition, -} from 'react'; +import {useDeferredValue, useMemo} from 'react'; import {useStore} from '../StoreContext'; import ConfigEditor from './ConfigEditor'; import Input from './Input'; diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx index 17da512e80f..8c22ca35fc9 100644 --- a/compiler/apps/playground/components/Editor/Output.tsx +++ b/compiler/apps/playground/components/Editor/Output.tsx @@ -372,12 +372,18 @@ function TextTabContent({ loading={''} options={{ ...monacoOptions, + scrollbar: { + vertical: 'hidden', + }, + dimension: { + width: 0, + height: 0, + }, readOnly: true, lineNumbers: 'off', glyphMargin: false, // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882 - lineDecorationsWidth: 0, - lineNumbersMinChars: 0, + overviewRulerLanes: 0, }} /> ) : ( diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css index 55f03c46d26..86b069f0579 100644 --- a/compiler/apps/playground/styles/globals.css +++ b/compiler/apps/playground/styles/globals.css @@ -124,3 +124,11 @@ ::view-transition-group(.expand-accordion) { overflow: clip; } + +/** + * For some reason, the original Monaco editor is still visible to the + * left of the DiffEditor. This is a workaround for better visual clarity. + */ +.monaco-diff-editor .editor.original{ + visibility: hidden !important; +} From 5cc3d49f72a9e78cce61f7fbfc1b7455f313cebe Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 2 Oct 2025 18:42:30 -0400 Subject: [PATCH 019/276] [eprh] Add compiler rules to recommended preset (#34675) Adds back the compiler rules to the recommended preset, intended for the next release. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34675). * #34703 * #34700 * #34699 * __->__ #34675 --- packages/eslint-plugin-react-hooks/src/index.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts index c01e22fb4bb..c63955fd667 100644 --- a/packages/eslint-plugin-react-hooks/src/index.ts +++ b/packages/eslint-plugin-react-hooks/src/index.ts @@ -7,7 +7,11 @@ import type {Linter, Rule} from 'eslint'; import ExhaustiveDeps from './rules/ExhaustiveDeps'; -import {allRules} from './shared/ReactCompiler'; +import { + allRules, + mapErrorSeverityToESlint, + recommendedRules, +} from './shared/ReactCompiler'; import RulesOfHooks from './rules/RulesOfHooks'; // All rules @@ -23,6 +27,15 @@ const rules = { const ruleConfigs = { 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', + // Compiler rules + ...Object.fromEntries( + Object.entries(recommendedRules).map(([name, ruleConfig]) => { + return [ + 'react-hooks/' + name, + mapErrorSeverityToESlint(ruleConfig.severity), + ]; + }), + ), } satisfies Linter.RulesRecord; const plugin = { From 056a586928fe1b6186d3693743ac7019ce39cb7b Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 2 Oct 2025 18:42:43 -0400 Subject: [PATCH 020/276] [fixtures] Update eslint fixture lockfiles (#34699) Updates the eslint fixture lockfiles. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34699). * #34703 * #34700 * __->__ #34699 * #34675 --- fixtures/eslint-v6/yarn.lock | 330 +------------------------------- fixtures/eslint-v7/yarn.lock | 340 +-------------------------------- fixtures/eslint-v8/yarn.lock | 353 +---------------------------------- fixtures/eslint-v9/yarn.lock | 353 +---------------------------------- 4 files changed, 8 insertions(+), 1368 deletions(-) diff --git a/fixtures/eslint-v6/yarn.lock b/fixtures/eslint-v6/yarn.lock index e8e670f47a0..5af9623e877 100644 --- a/fixtures/eslint-v6/yarn.lock +++ b/fixtures/eslint-v6/yarn.lock @@ -2,15 +2,7 @@ # yarn lockfile v1 -"@ampproject/remapping@^2.2.0": - version "2.3.0" - resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4" - integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw== - dependencies: - "@jridgewell/gen-mapping" "^0.3.5" - "@jridgewell/trace-mapping" "^0.3.24" - -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.26.2": +"@babel/code-frame@^7.0.0": version "7.26.2" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== @@ -19,228 +11,11 @@ js-tokens "^4.0.0" picocolors "^1.0.0" -"@babel/compat-data@^7.26.5": - version "7.26.8" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.8.tgz#821c1d35641c355284d4a870b8a4a7b0c141e367" - integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ== - -"@babel/core@^7.24.4": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.10.tgz#5c876f83c8c4dcb233ee4b670c0606f2ac3000f9" - integrity sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ== - dependencies: - "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.26.2" - "@babel/generator" "^7.26.10" - "@babel/helper-compilation-targets" "^7.26.5" - "@babel/helper-module-transforms" "^7.26.0" - "@babel/helpers" "^7.26.10" - "@babel/parser" "^7.26.10" - "@babel/template" "^7.26.9" - "@babel/traverse" "^7.26.10" - "@babel/types" "^7.26.10" - convert-source-map "^2.0.0" - debug "^4.1.0" - gensync "^1.0.0-beta.2" - json5 "^2.2.3" - semver "^6.3.1" - -"@babel/generator@^7.26.10": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.10.tgz#a60d9de49caca16744e6340c3658dfef6138c3f7" - integrity sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang== - dependencies: - "@babel/parser" "^7.26.10" - "@babel/types" "^7.26.10" - "@jridgewell/gen-mapping" "^0.3.5" - "@jridgewell/trace-mapping" "^0.3.25" - jsesc "^3.0.2" - -"@babel/helper-annotate-as-pure@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4" - integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g== - dependencies: - "@babel/types" "^7.25.9" - -"@babel/helper-compilation-targets@^7.26.5": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8" - integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA== - dependencies: - "@babel/compat-data" "^7.26.5" - "@babel/helper-validator-option" "^7.25.9" - browserslist "^4.24.0" - lru-cache "^5.1.1" - semver "^6.3.1" - -"@babel/helper-create-class-features-plugin@^7.25.9": - version "7.26.9" - resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.26.9.tgz#d6f83e3039547fbb39967e78043cd3c8b7820c71" - integrity sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg== - dependencies: - "@babel/helper-annotate-as-pure" "^7.25.9" - "@babel/helper-member-expression-to-functions" "^7.25.9" - "@babel/helper-optimise-call-expression" "^7.25.9" - "@babel/helper-replace-supers" "^7.26.5" - "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" - "@babel/traverse" "^7.26.9" - semver "^6.3.1" - -"@babel/helper-member-expression-to-functions@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3" - integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-module-imports@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715" - integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-module-transforms@^7.26.0": - version "7.26.0" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae" - integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw== - dependencies: - "@babel/helper-module-imports" "^7.25.9" - "@babel/helper-validator-identifier" "^7.25.9" - "@babel/traverse" "^7.25.9" - -"@babel/helper-optimise-call-expression@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e" - integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ== - dependencies: - "@babel/types" "^7.25.9" - -"@babel/helper-plugin-utils@^7.25.9": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35" - integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg== - -"@babel/helper-replace-supers@^7.26.5": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d" - integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg== - dependencies: - "@babel/helper-member-expression-to-functions" "^7.25.9" - "@babel/helper-optimise-call-expression" "^7.25.9" - "@babel/traverse" "^7.26.5" - -"@babel/helper-skip-transparent-expression-wrappers@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9" - integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-string-parser@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c" - integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== - "@babel/helper-validator-identifier@^7.25.9": version "7.25.9" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7" integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== -"@babel/helper-validator-option@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72" - integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw== - -"@babel/helpers@^7.26.10": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.10.tgz#6baea3cd62ec2d0c1068778d63cb1314f6637384" - integrity sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g== - dependencies: - "@babel/template" "^7.26.9" - "@babel/types" "^7.26.10" - -"@babel/parser@^7.24.4", "@babel/parser@^7.26.10", "@babel/parser@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.10.tgz#e9bdb82f14b97df6569b0b038edd436839c57749" - integrity sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA== - dependencies: - "@babel/types" "^7.26.10" - -"@babel/plugin-transform-private-methods@^7.24.4": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57" - integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.25.9" - "@babel/helper-plugin-utils" "^7.25.9" - -"@babel/template@^7.26.9": - version "7.26.9" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2" - integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA== - dependencies: - "@babel/code-frame" "^7.26.2" - "@babel/parser" "^7.26.9" - "@babel/types" "^7.26.9" - -"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.10", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.10.tgz#43cca33d76005dbaa93024fae536cc1946a4c380" - integrity sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A== - dependencies: - "@babel/code-frame" "^7.26.2" - "@babel/generator" "^7.26.10" - "@babel/parser" "^7.26.10" - "@babel/template" "^7.26.9" - "@babel/types" "^7.26.10" - debug "^4.3.1" - globals "^11.1.0" - -"@babel/types@^7.25.9", "@babel/types@^7.26.10", "@babel/types@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.10.tgz#396382f6335bd4feb65741eacfc808218f859259" - integrity sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ== - dependencies: - "@babel/helper-string-parser" "^7.25.9" - "@babel/helper-validator-identifier" "^7.25.9" - -"@jridgewell/gen-mapping@^0.3.5": - version "0.3.8" - resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142" - integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA== - dependencies: - "@jridgewell/set-array" "^1.2.1" - "@jridgewell/sourcemap-codec" "^1.4.10" - "@jridgewell/trace-mapping" "^0.3.24" - -"@jridgewell/resolve-uri@^3.1.0": - version "3.1.2" - resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" - integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== - -"@jridgewell/set-array@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280" - integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A== - -"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a" - integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== - -"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": - version "0.3.25" - resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0" - integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ== - dependencies: - "@jridgewell/resolve-uri" "^3.1.0" - "@jridgewell/sourcemap-codec" "^1.4.14" - acorn-jsx@^5.2.0: version "5.3.2" resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" @@ -317,26 +92,11 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -browserslist@^4.24.0: - version "4.24.4" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b" - integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A== - dependencies: - caniuse-lite "^1.0.30001688" - electron-to-chromium "^1.5.73" - node-releases "^2.0.19" - update-browserslist-db "^1.1.1" - callsites@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== -caniuse-lite@^1.0.30001688: - version "1.0.30001703" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001703.tgz#977cb4920598c158f491ecf4f4f2cfed9e354718" - integrity sha512-kRlAGTRWgPsOj7oARC9m1okJEXdL/8fekFVcxA8Hl7GH4r/sN4OJn/i6Flde373T50KS7Y37oFbMwlE8+F42kQ== - chalk@^2.1.0: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -400,11 +160,6 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= -convert-source-map@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" - integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== - cross-spawn@^6.0.5: version "6.0.6" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.6.tgz#30d0efa0712ddb7eb5a76e1e8721bffafa6b5d57" @@ -416,7 +171,7 @@ cross-spawn@^6.0.5: shebang-command "^1.2.0" which "^1.2.9" -debug@^4.0.1, debug@^4.1.0, debug@^4.3.1: +debug@^4.0.1: version "4.4.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a" integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA== @@ -435,11 +190,6 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -electron-to-chromium@^1.5.73: - version "1.5.114" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.114.tgz#f2bb4fda80a7db4ea273565e75b0ebbe19af0ac3" - integrity sha512-DFptFef3iktoKlFQK/afbo274/XNWD00Am0xa7M8FZUepHlHT8PEuiNBoRfFHbH1okqN58AlhbJ4QTkcnXorjA== - emoji-regex@^7.0.1: version "7.0.3" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" @@ -450,11 +200,6 @@ emoji-regex@^8.0.0: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== -escalade@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" - integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== - escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -632,11 +377,6 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g== -gensync@^1.0.0-beta.2: - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" - integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== - glob-parent@^5.0.0: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" @@ -656,11 +396,6 @@ glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" -globals@^11.1.0: - version "11.12.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" - integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== - globals@^12.1.0: version "12.4.0" resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8" @@ -678,18 +413,6 @@ has-flag@^4.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== -hermes-estree@0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" - integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== - -hermes-parser@^0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" - integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== - dependencies: - hermes-estree "0.25.1" - iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -787,11 +510,6 @@ js-yaml@^3.13.1: argparse "^1.0.7" esprima "^4.0.0" -jsesc@^3.0.2: - version "3.1.0" - resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d" - integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== - json-schema-traverse@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" @@ -802,11 +520,6 @@ json-stable-stringify-without-jsonify@^1.0.1: resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== -json5@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" - integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== - levn@^0.3.0, levn@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee" @@ -820,13 +533,6 @@ lodash@^4.17.14, lodash@^4.17.19: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -lru-cache@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" - integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== - dependencies: - yallist "^3.0.2" - mimic-fn@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" @@ -871,11 +577,6 @@ nice-try@^1.0.4: resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== -node-releases@^2.0.19: - version "2.0.19" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314" - integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw== - once@^1.3.0: version "1.4.0" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" @@ -924,7 +625,7 @@ path-key@^2.0.1: resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40" integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw== -picocolors@^1.0.0, picocolors@^1.1.1: +picocolors@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== @@ -991,7 +692,7 @@ semver@^5.5.0: resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== -semver@^6.1.2, semver@^6.3.1: +semver@^6.1.2: version "6.3.1" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== @@ -1127,14 +828,6 @@ type-fest@^0.8.1: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d" integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA== -update-browserslist-db@^1.1.1: - version "1.1.3" - resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420" - integrity sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw== - dependencies: - escalade "^3.2.0" - picocolors "^1.1.1" - uri-js@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0" @@ -1170,18 +863,3 @@ write@1.0.3: integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig== dependencies: mkdirp "^0.5.1" - -yallist@^3.0.2: - version "3.1.1" - resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" - integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== - -zod-validation-error@^3.0.3: - version "3.4.0" - resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.4.0.tgz#3a8a1f55c65579822d7faa190b51336c61bee2a6" - integrity sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ== - -zod@^3.22.4: - version "3.24.2" - resolved "https://registry.yarnpkg.com/zod/-/zod-3.24.2.tgz#8efa74126287c675e92f46871cfc8d15c34372b3" - integrity sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ== diff --git a/fixtures/eslint-v7/yarn.lock b/fixtures/eslint-v7/yarn.lock index d2323b7c0c1..4a191de947f 100644 --- a/fixtures/eslint-v7/yarn.lock +++ b/fixtures/eslint-v7/yarn.lock @@ -2,14 +2,6 @@ # yarn lockfile v1 -"@ampproject/remapping@^2.2.0": - version "2.3.0" - resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4" - integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw== - dependencies: - "@jridgewell/gen-mapping" "^0.3.5" - "@jridgewell/trace-mapping" "^0.3.24" - "@babel/code-frame@7.12.11": version "7.12.11" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f" @@ -17,160 +9,11 @@ dependencies: "@babel/highlight" "^7.10.4" -"@babel/code-frame@^7.26.2": - version "7.26.2" - resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" - integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== - dependencies: - "@babel/helper-validator-identifier" "^7.25.9" - js-tokens "^4.0.0" - picocolors "^1.0.0" - -"@babel/compat-data@^7.26.5": - version "7.26.8" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.8.tgz#821c1d35641c355284d4a870b8a4a7b0c141e367" - integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ== - -"@babel/core@^7.24.4": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.10.tgz#5c876f83c8c4dcb233ee4b670c0606f2ac3000f9" - integrity sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ== - dependencies: - "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.26.2" - "@babel/generator" "^7.26.10" - "@babel/helper-compilation-targets" "^7.26.5" - "@babel/helper-module-transforms" "^7.26.0" - "@babel/helpers" "^7.26.10" - "@babel/parser" "^7.26.10" - "@babel/template" "^7.26.9" - "@babel/traverse" "^7.26.10" - "@babel/types" "^7.26.10" - convert-source-map "^2.0.0" - debug "^4.1.0" - gensync "^1.0.0-beta.2" - json5 "^2.2.3" - semver "^6.3.1" - -"@babel/generator@^7.26.10": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.10.tgz#a60d9de49caca16744e6340c3658dfef6138c3f7" - integrity sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang== - dependencies: - "@babel/parser" "^7.26.10" - "@babel/types" "^7.26.10" - "@jridgewell/gen-mapping" "^0.3.5" - "@jridgewell/trace-mapping" "^0.3.25" - jsesc "^3.0.2" - -"@babel/helper-annotate-as-pure@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4" - integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g== - dependencies: - "@babel/types" "^7.25.9" - -"@babel/helper-compilation-targets@^7.26.5": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8" - integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA== - dependencies: - "@babel/compat-data" "^7.26.5" - "@babel/helper-validator-option" "^7.25.9" - browserslist "^4.24.0" - lru-cache "^5.1.1" - semver "^6.3.1" - -"@babel/helper-create-class-features-plugin@^7.25.9": - version "7.26.9" - resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.26.9.tgz#d6f83e3039547fbb39967e78043cd3c8b7820c71" - integrity sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg== - dependencies: - "@babel/helper-annotate-as-pure" "^7.25.9" - "@babel/helper-member-expression-to-functions" "^7.25.9" - "@babel/helper-optimise-call-expression" "^7.25.9" - "@babel/helper-replace-supers" "^7.26.5" - "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" - "@babel/traverse" "^7.26.9" - semver "^6.3.1" - -"@babel/helper-member-expression-to-functions@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3" - integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-module-imports@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715" - integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-module-transforms@^7.26.0": - version "7.26.0" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae" - integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw== - dependencies: - "@babel/helper-module-imports" "^7.25.9" - "@babel/helper-validator-identifier" "^7.25.9" - "@babel/traverse" "^7.25.9" - -"@babel/helper-optimise-call-expression@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e" - integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ== - dependencies: - "@babel/types" "^7.25.9" - -"@babel/helper-plugin-utils@^7.25.9": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35" - integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg== - -"@babel/helper-replace-supers@^7.26.5": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d" - integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg== - dependencies: - "@babel/helper-member-expression-to-functions" "^7.25.9" - "@babel/helper-optimise-call-expression" "^7.25.9" - "@babel/traverse" "^7.26.5" - -"@babel/helper-skip-transparent-expression-wrappers@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9" - integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-string-parser@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c" - integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== - "@babel/helper-validator-identifier@^7.25.9": version "7.25.9" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7" integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== -"@babel/helper-validator-option@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72" - integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw== - -"@babel/helpers@^7.26.10": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.10.tgz#6baea3cd62ec2d0c1068778d63cb1314f6637384" - integrity sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g== - dependencies: - "@babel/template" "^7.26.9" - "@babel/types" "^7.26.10" - "@babel/highlight@^7.10.4": version "7.25.9" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.9.tgz#8141ce68fc73757946f983b343f1231f4691acc6" @@ -181,51 +24,6 @@ js-tokens "^4.0.0" picocolors "^1.0.0" -"@babel/parser@^7.24.4", "@babel/parser@^7.26.10", "@babel/parser@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.10.tgz#e9bdb82f14b97df6569b0b038edd436839c57749" - integrity sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA== - dependencies: - "@babel/types" "^7.26.10" - -"@babel/plugin-transform-private-methods@^7.24.4": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57" - integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.25.9" - "@babel/helper-plugin-utils" "^7.25.9" - -"@babel/template@^7.26.9": - version "7.26.9" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2" - integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA== - dependencies: - "@babel/code-frame" "^7.26.2" - "@babel/parser" "^7.26.9" - "@babel/types" "^7.26.9" - -"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.10", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.10.tgz#43cca33d76005dbaa93024fae536cc1946a4c380" - integrity sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A== - dependencies: - "@babel/code-frame" "^7.26.2" - "@babel/generator" "^7.26.10" - "@babel/parser" "^7.26.10" - "@babel/template" "^7.26.9" - "@babel/types" "^7.26.10" - debug "^4.3.1" - globals "^11.1.0" - -"@babel/types@^7.25.9", "@babel/types@^7.26.10", "@babel/types@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.10.tgz#396382f6335bd4feb65741eacfc808218f859259" - integrity sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ== - dependencies: - "@babel/helper-string-parser" "^7.25.9" - "@babel/helper-validator-identifier" "^7.25.9" - "@eslint/eslintrc@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" @@ -255,38 +53,6 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== -"@jridgewell/gen-mapping@^0.3.5": - version "0.3.8" - resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142" - integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA== - dependencies: - "@jridgewell/set-array" "^1.2.1" - "@jridgewell/sourcemap-codec" "^1.4.10" - "@jridgewell/trace-mapping" "^0.3.24" - -"@jridgewell/resolve-uri@^3.1.0": - version "3.1.2" - resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" - integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== - -"@jridgewell/set-array@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280" - integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A== - -"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a" - integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== - -"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": - version "0.3.25" - resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0" - integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ== - dependencies: - "@jridgewell/resolve-uri" "^3.1.0" - "@jridgewell/sourcemap-codec" "^1.4.14" - acorn-jsx@^5.3.1: version "5.3.2" resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" @@ -366,26 +132,11 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -browserslist@^4.24.0: - version "4.24.4" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b" - integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A== - dependencies: - caniuse-lite "^1.0.30001688" - electron-to-chromium "^1.5.73" - node-releases "^2.0.19" - update-browserslist-db "^1.1.1" - callsites@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== -caniuse-lite@^1.0.30001688: - version "1.0.30001703" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001703.tgz#977cb4920598c158f491ecf4f4f2cfed9e354718" - integrity sha512-kRlAGTRWgPsOj7oARC9m1okJEXdL/8fekFVcxA8Hl7GH4r/sN4OJn/i6Flde373T50KS7Y37oFbMwlE8+F42kQ== - chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -432,11 +183,6 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= -convert-source-map@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" - integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== - cross-spawn@^7.0.2: version "7.0.6" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f" @@ -446,7 +192,7 @@ cross-spawn@^7.0.2: shebang-command "^2.0.0" which "^2.0.1" -debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1: +debug@^4.0.1, debug@^4.1.1: version "4.4.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a" integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA== @@ -465,11 +211,6 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -electron-to-chromium@^1.5.73: - version "1.5.114" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.114.tgz#f2bb4fda80a7db4ea273565e75b0ebbe19af0ac3" - integrity sha512-DFptFef3iktoKlFQK/afbo274/XNWD00Am0xa7M8FZUepHlHT8PEuiNBoRfFHbH1okqN58AlhbJ4QTkcnXorjA== - emoji-regex@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" @@ -483,11 +224,6 @@ enquirer@^2.3.5: ansi-colors "^4.1.1" strip-ansi "^6.0.1" -escalade@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" - integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== - escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -667,11 +403,6 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g== -gensync@^1.0.0-beta.2: - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" - integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== - glob-parent@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" @@ -691,11 +422,6 @@ glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" -globals@^11.1.0: - version "11.12.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" - integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== - globals@^13.6.0, globals@^13.9.0: version "13.24.0" resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171" @@ -713,18 +439,6 @@ has-flag@^4.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== -hermes-estree@0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" - integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== - -hermes-parser@^0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" - integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== - dependencies: - hermes-estree "0.25.1" - ignore@^4.0.6: version "4.0.6" resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" @@ -791,11 +505,6 @@ js-yaml@^3.13.1: argparse "^1.0.7" esprima "^4.0.0" -jsesc@^3.0.2: - version "3.1.0" - resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d" - integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== - json-buffer@3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13" @@ -816,11 +525,6 @@ json-stable-stringify-without-jsonify@^1.0.1: resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== -json5@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" - integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== - keyv@^4.5.3: version "4.5.4" resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93" @@ -846,13 +550,6 @@ lodash.truncate@^4.4.2: resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193" integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw== -lru-cache@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" - integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== - dependencies: - yallist "^3.0.2" - minimatch@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" @@ -870,11 +567,6 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= -node-releases@^2.0.19: - version "2.0.19" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314" - integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw== - once@^1.3.0: version "1.4.0" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" @@ -911,7 +603,7 @@ path-key@^3.1.0: resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== -picocolors@^1.0.0, picocolors@^1.1.1: +picocolors@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== @@ -953,11 +645,6 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" -semver@^6.3.1: - version "6.3.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" - integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== - semver@^7.2.1: version "7.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f" @@ -1052,14 +739,6 @@ type-fest@^0.20.2: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4" integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ== -update-browserslist-db@^1.1.1: - version "1.1.3" - resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420" - integrity sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw== - dependencies: - escalade "^3.2.0" - picocolors "^1.1.1" - uri-js@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0" @@ -1088,18 +767,3 @@ wrappy@1: version "1.0.2" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= - -yallist@^3.0.2: - version "3.1.1" - resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" - integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== - -zod-validation-error@^3.0.3: - version "3.4.0" - resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.4.0.tgz#3a8a1f55c65579822d7faa190b51336c61bee2a6" - integrity sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ== - -zod@^3.22.4: - version "3.24.2" - resolved "https://registry.yarnpkg.com/zod/-/zod-3.24.2.tgz#8efa74126287c675e92f46871cfc8d15c34372b3" - integrity sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ== diff --git a/fixtures/eslint-v8/yarn.lock b/fixtures/eslint-v8/yarn.lock index b2261f0e737..d5a947b6347 100644 --- a/fixtures/eslint-v8/yarn.lock +++ b/fixtures/eslint-v8/yarn.lock @@ -2,213 +2,6 @@ # yarn lockfile v1 -"@ampproject/remapping@^2.2.0": - version "2.3.0" - resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4" - integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw== - dependencies: - "@jridgewell/gen-mapping" "^0.3.5" - "@jridgewell/trace-mapping" "^0.3.24" - -"@babel/code-frame@^7.26.2": - version "7.26.2" - resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" - integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== - dependencies: - "@babel/helper-validator-identifier" "^7.25.9" - js-tokens "^4.0.0" - picocolors "^1.0.0" - -"@babel/compat-data@^7.26.5": - version "7.26.8" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.8.tgz#821c1d35641c355284d4a870b8a4a7b0c141e367" - integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ== - -"@babel/core@^7.24.4": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.10.tgz#5c876f83c8c4dcb233ee4b670c0606f2ac3000f9" - integrity sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ== - dependencies: - "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.26.2" - "@babel/generator" "^7.26.10" - "@babel/helper-compilation-targets" "^7.26.5" - "@babel/helper-module-transforms" "^7.26.0" - "@babel/helpers" "^7.26.10" - "@babel/parser" "^7.26.10" - "@babel/template" "^7.26.9" - "@babel/traverse" "^7.26.10" - "@babel/types" "^7.26.10" - convert-source-map "^2.0.0" - debug "^4.1.0" - gensync "^1.0.0-beta.2" - json5 "^2.2.3" - semver "^6.3.1" - -"@babel/generator@^7.26.10": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.10.tgz#a60d9de49caca16744e6340c3658dfef6138c3f7" - integrity sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang== - dependencies: - "@babel/parser" "^7.26.10" - "@babel/types" "^7.26.10" - "@jridgewell/gen-mapping" "^0.3.5" - "@jridgewell/trace-mapping" "^0.3.25" - jsesc "^3.0.2" - -"@babel/helper-annotate-as-pure@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4" - integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g== - dependencies: - "@babel/types" "^7.25.9" - -"@babel/helper-compilation-targets@^7.26.5": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8" - integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA== - dependencies: - "@babel/compat-data" "^7.26.5" - "@babel/helper-validator-option" "^7.25.9" - browserslist "^4.24.0" - lru-cache "^5.1.1" - semver "^6.3.1" - -"@babel/helper-create-class-features-plugin@^7.25.9": - version "7.26.9" - resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.26.9.tgz#d6f83e3039547fbb39967e78043cd3c8b7820c71" - integrity sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg== - dependencies: - "@babel/helper-annotate-as-pure" "^7.25.9" - "@babel/helper-member-expression-to-functions" "^7.25.9" - "@babel/helper-optimise-call-expression" "^7.25.9" - "@babel/helper-replace-supers" "^7.26.5" - "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" - "@babel/traverse" "^7.26.9" - semver "^6.3.1" - -"@babel/helper-member-expression-to-functions@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3" - integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-module-imports@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715" - integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-module-transforms@^7.26.0": - version "7.26.0" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae" - integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw== - dependencies: - "@babel/helper-module-imports" "^7.25.9" - "@babel/helper-validator-identifier" "^7.25.9" - "@babel/traverse" "^7.25.9" - -"@babel/helper-optimise-call-expression@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e" - integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ== - dependencies: - "@babel/types" "^7.25.9" - -"@babel/helper-plugin-utils@^7.25.9": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35" - integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg== - -"@babel/helper-replace-supers@^7.26.5": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d" - integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg== - dependencies: - "@babel/helper-member-expression-to-functions" "^7.25.9" - "@babel/helper-optimise-call-expression" "^7.25.9" - "@babel/traverse" "^7.26.5" - -"@babel/helper-skip-transparent-expression-wrappers@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9" - integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-string-parser@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c" - integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== - -"@babel/helper-validator-identifier@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7" - integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== - -"@babel/helper-validator-option@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72" - integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw== - -"@babel/helpers@^7.26.10": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.10.tgz#6baea3cd62ec2d0c1068778d63cb1314f6637384" - integrity sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g== - dependencies: - "@babel/template" "^7.26.9" - "@babel/types" "^7.26.10" - -"@babel/parser@^7.24.4", "@babel/parser@^7.26.10", "@babel/parser@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.10.tgz#e9bdb82f14b97df6569b0b038edd436839c57749" - integrity sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA== - dependencies: - "@babel/types" "^7.26.10" - -"@babel/plugin-transform-private-methods@^7.24.4": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57" - integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.25.9" - "@babel/helper-plugin-utils" "^7.25.9" - -"@babel/template@^7.26.9": - version "7.26.9" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2" - integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA== - dependencies: - "@babel/code-frame" "^7.26.2" - "@babel/parser" "^7.26.9" - "@babel/types" "^7.26.9" - -"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.10", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.10.tgz#43cca33d76005dbaa93024fae536cc1946a4c380" - integrity sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A== - dependencies: - "@babel/code-frame" "^7.26.2" - "@babel/generator" "^7.26.10" - "@babel/parser" "^7.26.10" - "@babel/template" "^7.26.9" - "@babel/types" "^7.26.10" - debug "^4.3.1" - globals "^11.1.0" - -"@babel/types@^7.25.9", "@babel/types@^7.26.10", "@babel/types@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.10.tgz#396382f6335bd4feb65741eacfc808218f859259" - integrity sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ== - dependencies: - "@babel/helper-string-parser" "^7.25.9" - "@babel/helper-validator-identifier" "^7.25.9" - "@eslint-community/eslint-utils@^4.2.0": version "4.4.1" resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56" @@ -260,38 +53,6 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3" integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA== -"@jridgewell/gen-mapping@^0.3.5": - version "0.3.8" - resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142" - integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA== - dependencies: - "@jridgewell/set-array" "^1.2.1" - "@jridgewell/sourcemap-codec" "^1.4.10" - "@jridgewell/trace-mapping" "^0.3.24" - -"@jridgewell/resolve-uri@^3.1.0": - version "3.1.2" - resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" - integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== - -"@jridgewell/set-array@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280" - integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A== - -"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a" - integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== - -"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": - version "0.3.25" - resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0" - integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ== - dependencies: - "@jridgewell/resolve-uri" "^3.1.0" - "@jridgewell/sourcemap-codec" "^1.4.14" - "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -368,26 +129,11 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -browserslist@^4.24.0: - version "4.24.4" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b" - integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A== - dependencies: - caniuse-lite "^1.0.30001688" - electron-to-chromium "^1.5.73" - node-releases "^2.0.19" - update-browserslist-db "^1.1.1" - callsites@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== -caniuse-lite@^1.0.30001688: - version "1.0.30001703" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001703.tgz#977cb4920598c158f491ecf4f4f2cfed9e354718" - integrity sha512-kRlAGTRWgPsOj7oARC9m1okJEXdL/8fekFVcxA8Hl7GH4r/sN4OJn/i6Flde373T50KS7Y37oFbMwlE8+F42kQ== - chalk@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -413,11 +159,6 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= -convert-source-map@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" - integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== - cross-spawn@^7.0.2: version "7.0.6" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f" @@ -427,7 +168,7 @@ cross-spawn@^7.0.2: shebang-command "^2.0.0" which "^2.0.1" -debug@^4.1.0, debug@^4.3.1, debug@^4.3.2: +debug@^4.3.1, debug@^4.3.2: version "4.4.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a" integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA== @@ -446,16 +187,6 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -electron-to-chromium@^1.5.73: - version "1.5.114" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.114.tgz#f2bb4fda80a7db4ea273565e75b0ebbe19af0ac3" - integrity sha512-DFptFef3iktoKlFQK/afbo274/XNWD00Am0xa7M8FZUepHlHT8PEuiNBoRfFHbH1okqN58AlhbJ4QTkcnXorjA== - -escalade@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" - integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== - escape-string-regexp@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" @@ -611,11 +342,6 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= -gensync@^1.0.0-beta.2: - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" - integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== - glob-parent@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3" @@ -635,11 +361,6 @@ glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" -globals@^11.1.0: - version "11.12.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" - integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== - globals@^13.19.0: version "13.24.0" resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171" @@ -657,18 +378,6 @@ has-flag@^4.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== -hermes-estree@0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" - integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== - -hermes-parser@^0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" - integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== - dependencies: - hermes-estree "0.25.1" - ignore@^5.2.0: version "5.3.2" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5" @@ -722,11 +431,6 @@ isexe@^2.0.0: resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw== -js-tokens@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" - integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== - js-yaml@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602" @@ -734,11 +438,6 @@ js-yaml@^4.1.0: dependencies: argparse "^2.0.1" -jsesc@^3.0.2: - version "3.1.0" - resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d" - integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== - json-buffer@3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13" @@ -754,11 +453,6 @@ json-stable-stringify-without-jsonify@^1.0.1: resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== -json5@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" - integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== - keyv@^4.5.3: version "4.5.4" resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93" @@ -786,13 +480,6 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lru-cache@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" - integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== - dependencies: - yallist "^3.0.2" - minimatch@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" @@ -817,11 +504,6 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= -node-releases@^2.0.19: - version "2.0.19" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314" - integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw== - once@^1.3.0: version "1.4.0" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" @@ -877,11 +559,6 @@ path-key@^3.1.0: resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== -picocolors@^1.0.0, picocolors@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" - integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== - prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -921,11 +598,6 @@ run-parallel@^1.1.9: dependencies: queue-microtask "^1.2.2" -semver@^6.3.1: - version "6.3.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" - integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== - shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -974,14 +646,6 @@ type-fest@^0.20.2: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4" integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ== -update-browserslist-db@^1.1.1: - version "1.1.3" - resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420" - integrity sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw== - dependencies: - escalade "^3.2.0" - picocolors "^1.1.1" - uri-js@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0" @@ -1006,22 +670,7 @@ wrappy@1: resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= -yallist@^3.0.2: - version "3.1.1" - resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" - integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== - yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== - -zod-validation-error@^3.0.3: - version "3.4.0" - resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.4.0.tgz#3a8a1f55c65579822d7faa190b51336c61bee2a6" - integrity sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ== - -zod@^3.22.4: - version "3.24.2" - resolved "https://registry.yarnpkg.com/zod/-/zod-3.24.2.tgz#8efa74126287c675e92f46871cfc8d15c34372b3" - integrity sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ== diff --git a/fixtures/eslint-v9/yarn.lock b/fixtures/eslint-v9/yarn.lock index a471aadd964..39baff0b532 100644 --- a/fixtures/eslint-v9/yarn.lock +++ b/fixtures/eslint-v9/yarn.lock @@ -2,213 +2,6 @@ # yarn lockfile v1 -"@ampproject/remapping@^2.2.0": - version "2.3.0" - resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4" - integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw== - dependencies: - "@jridgewell/gen-mapping" "^0.3.5" - "@jridgewell/trace-mapping" "^0.3.24" - -"@babel/code-frame@^7.26.2": - version "7.26.2" - resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" - integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== - dependencies: - "@babel/helper-validator-identifier" "^7.25.9" - js-tokens "^4.0.0" - picocolors "^1.0.0" - -"@babel/compat-data@^7.26.5": - version "7.26.8" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.8.tgz#821c1d35641c355284d4a870b8a4a7b0c141e367" - integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ== - -"@babel/core@^7.24.4": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.10.tgz#5c876f83c8c4dcb233ee4b670c0606f2ac3000f9" - integrity sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ== - dependencies: - "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.26.2" - "@babel/generator" "^7.26.10" - "@babel/helper-compilation-targets" "^7.26.5" - "@babel/helper-module-transforms" "^7.26.0" - "@babel/helpers" "^7.26.10" - "@babel/parser" "^7.26.10" - "@babel/template" "^7.26.9" - "@babel/traverse" "^7.26.10" - "@babel/types" "^7.26.10" - convert-source-map "^2.0.0" - debug "^4.1.0" - gensync "^1.0.0-beta.2" - json5 "^2.2.3" - semver "^6.3.1" - -"@babel/generator@^7.26.10": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.10.tgz#a60d9de49caca16744e6340c3658dfef6138c3f7" - integrity sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang== - dependencies: - "@babel/parser" "^7.26.10" - "@babel/types" "^7.26.10" - "@jridgewell/gen-mapping" "^0.3.5" - "@jridgewell/trace-mapping" "^0.3.25" - jsesc "^3.0.2" - -"@babel/helper-annotate-as-pure@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4" - integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g== - dependencies: - "@babel/types" "^7.25.9" - -"@babel/helper-compilation-targets@^7.26.5": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8" - integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA== - dependencies: - "@babel/compat-data" "^7.26.5" - "@babel/helper-validator-option" "^7.25.9" - browserslist "^4.24.0" - lru-cache "^5.1.1" - semver "^6.3.1" - -"@babel/helper-create-class-features-plugin@^7.25.9": - version "7.26.9" - resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.26.9.tgz#d6f83e3039547fbb39967e78043cd3c8b7820c71" - integrity sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg== - dependencies: - "@babel/helper-annotate-as-pure" "^7.25.9" - "@babel/helper-member-expression-to-functions" "^7.25.9" - "@babel/helper-optimise-call-expression" "^7.25.9" - "@babel/helper-replace-supers" "^7.26.5" - "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9" - "@babel/traverse" "^7.26.9" - semver "^6.3.1" - -"@babel/helper-member-expression-to-functions@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3" - integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-module-imports@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715" - integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-module-transforms@^7.26.0": - version "7.26.0" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae" - integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw== - dependencies: - "@babel/helper-module-imports" "^7.25.9" - "@babel/helper-validator-identifier" "^7.25.9" - "@babel/traverse" "^7.25.9" - -"@babel/helper-optimise-call-expression@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e" - integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ== - dependencies: - "@babel/types" "^7.25.9" - -"@babel/helper-plugin-utils@^7.25.9": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35" - integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg== - -"@babel/helper-replace-supers@^7.26.5": - version "7.26.5" - resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d" - integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg== - dependencies: - "@babel/helper-member-expression-to-functions" "^7.25.9" - "@babel/helper-optimise-call-expression" "^7.25.9" - "@babel/traverse" "^7.26.5" - -"@babel/helper-skip-transparent-expression-wrappers@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9" - integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA== - dependencies: - "@babel/traverse" "^7.25.9" - "@babel/types" "^7.25.9" - -"@babel/helper-string-parser@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c" - integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== - -"@babel/helper-validator-identifier@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7" - integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== - -"@babel/helper-validator-option@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72" - integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw== - -"@babel/helpers@^7.26.10": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.10.tgz#6baea3cd62ec2d0c1068778d63cb1314f6637384" - integrity sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g== - dependencies: - "@babel/template" "^7.26.9" - "@babel/types" "^7.26.10" - -"@babel/parser@^7.24.4", "@babel/parser@^7.26.10", "@babel/parser@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.10.tgz#e9bdb82f14b97df6569b0b038edd436839c57749" - integrity sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA== - dependencies: - "@babel/types" "^7.26.10" - -"@babel/plugin-transform-private-methods@^7.24.4": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57" - integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.25.9" - "@babel/helper-plugin-utils" "^7.25.9" - -"@babel/template@^7.26.9": - version "7.26.9" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.26.9.tgz#4577ad3ddf43d194528cff4e1fa6b232fa609bb2" - integrity sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA== - dependencies: - "@babel/code-frame" "^7.26.2" - "@babel/parser" "^7.26.9" - "@babel/types" "^7.26.9" - -"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.10", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.10.tgz#43cca33d76005dbaa93024fae536cc1946a4c380" - integrity sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A== - dependencies: - "@babel/code-frame" "^7.26.2" - "@babel/generator" "^7.26.10" - "@babel/parser" "^7.26.10" - "@babel/template" "^7.26.9" - "@babel/types" "^7.26.10" - debug "^4.3.1" - globals "^11.1.0" - -"@babel/types@^7.25.9", "@babel/types@^7.26.10", "@babel/types@^7.26.9": - version "7.26.10" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.10.tgz#396382f6335bd4feb65741eacfc808218f859259" - integrity sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ== - dependencies: - "@babel/helper-string-parser" "^7.25.9" - "@babel/helper-validator-identifier" "^7.25.9" - "@eslint-community/eslint-utils@^4.2.0": version "4.4.1" resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56" @@ -303,38 +96,6 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.2.tgz#1860473de7dfa1546767448f333db80cb0ff2161" integrity sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ== -"@jridgewell/gen-mapping@^0.3.5": - version "0.3.8" - resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142" - integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA== - dependencies: - "@jridgewell/set-array" "^1.2.1" - "@jridgewell/sourcemap-codec" "^1.4.10" - "@jridgewell/trace-mapping" "^0.3.24" - -"@jridgewell/resolve-uri@^3.1.0": - version "3.1.2" - resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" - integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== - -"@jridgewell/set-array@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280" - integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A== - -"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a" - integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== - -"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": - version "0.3.25" - resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0" - integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ== - dependencies: - "@jridgewell/resolve-uri" "^3.1.0" - "@jridgewell/sourcemap-codec" "^1.4.14" - "@types/estree@^1.0.6": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50" @@ -395,26 +156,11 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -browserslist@^4.24.0: - version "4.24.4" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b" - integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A== - dependencies: - caniuse-lite "^1.0.30001688" - electron-to-chromium "^1.5.73" - node-releases "^2.0.19" - update-browserslist-db "^1.1.1" - callsites@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== -caniuse-lite@^1.0.30001688: - version "1.0.30001703" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001703.tgz#977cb4920598c158f491ecf4f4f2cfed9e354718" - integrity sha512-kRlAGTRWgPsOj7oARC9m1okJEXdL/8fekFVcxA8Hl7GH4r/sN4OJn/i6Flde373T50KS7Y37oFbMwlE8+F42kQ== - chalk@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -440,11 +186,6 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= -convert-source-map@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" - integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== - cross-spawn@^7.0.6: version "7.0.6" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f" @@ -454,7 +195,7 @@ cross-spawn@^7.0.6: shebang-command "^2.0.0" which "^2.0.1" -debug@^4.1.0, debug@^4.3.1, debug@^4.3.2: +debug@^4.3.1, debug@^4.3.2: version "4.4.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a" integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA== @@ -466,16 +207,6 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== -electron-to-chromium@^1.5.73: - version "1.5.114" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.114.tgz#f2bb4fda80a7db4ea273565e75b0ebbe19af0ac3" - integrity sha512-DFptFef3iktoKlFQK/afbo274/XNWD00Am0xa7M8FZUepHlHT8PEuiNBoRfFHbH1okqN58AlhbJ4QTkcnXorjA== - -escalade@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" - integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== - escape-string-regexp@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" @@ -634,11 +365,6 @@ flatted@^3.2.9: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27" integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA== -gensync@^1.0.0-beta.2: - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" - integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== - glob-parent@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3" @@ -646,11 +372,6 @@ glob-parent@^6.0.2: dependencies: is-glob "^4.0.3" -globals@^11.1.0: - version "11.12.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" - integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== - globals@^14.0.0: version "14.0.0" resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e" @@ -661,18 +382,6 @@ has-flag@^4.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== -hermes-estree@0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" - integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== - -hermes-parser@^0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" - integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== - dependencies: - hermes-estree "0.25.1" - ignore@^5.2.0: version "5.3.2" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5" @@ -713,11 +422,6 @@ jiti@^2.4.2: resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.4.2.tgz#d19b7732ebb6116b06e2038da74a55366faef560" integrity sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A== -js-tokens@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" - integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== - js-yaml@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602" @@ -725,11 +429,6 @@ js-yaml@^4.1.0: dependencies: argparse "^2.0.1" -jsesc@^3.0.2: - version "3.1.0" - resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d" - integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== - json-buffer@3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13" @@ -745,11 +444,6 @@ json-stable-stringify-without-jsonify@^1.0.1: resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== -json5@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" - integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== - keyv@^4.5.4: version "4.5.4" resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93" @@ -777,13 +471,6 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lru-cache@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" - integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== - dependencies: - yallist "^3.0.2" - minimatch@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" @@ -801,11 +488,6 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= -node-releases@^2.0.19: - version "2.0.19" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314" - integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw== - optionator@^0.9.3: version "0.9.4" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734" @@ -849,11 +531,6 @@ path-key@^3.1.0: resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== -picocolors@^1.0.0, picocolors@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" - integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== - prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -869,11 +546,6 @@ resolve-from@^4.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== -semver@^6.3.1: - version "6.3.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" - integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== - shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -905,14 +577,6 @@ type-check@^0.4.0, type-check@~0.4.0: dependencies: prelude-ls "^1.2.1" -update-browserslist-db@^1.1.1: - version "1.1.3" - resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420" - integrity sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw== - dependencies: - escalade "^3.2.0" - picocolors "^1.1.1" - uri-js@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0" @@ -932,22 +596,7 @@ word-wrap@^1.2.5: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -yallist@^3.0.2: - version "3.1.1" - resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" - integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== - yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== - -zod-validation-error@^3.0.3: - version "3.4.0" - resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.4.0.tgz#3a8a1f55c65579822d7faa190b51336c61bee2a6" - integrity sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ== - -zod@^3.22.4: - version "3.24.2" - resolved "https://registry.yarnpkg.com/zod/-/zod-3.24.2.tgz#8efa74126287c675e92f46871cfc8d15c34372b3" - integrity sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ== From 26b177bc5e1d287c60c50fc1e185b2fb398488a0 Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 2 Oct 2025 18:52:52 -0400 Subject: [PATCH 021/276] [eprh] Fix `recommended` config for flat config compatibility (#34700) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously, the `recommended` config used the legacy ESLint format (plugins as an array of strings). This causes errors when used with ESLint v9's `defineConfig()` helper. This was following [eslint's own docs](https://eslint.org/docs/latest/extend/plugins#backwards-compatibility-for-legacy-configs): > With this approach, both configuration systems recognize "recommended". The old config system uses the recommended key while the current config system uses the flat/recommended key. The defineConfig() helper first looks at the recommended key, and if that is not in the correct format, it looks for the flat/recommended key. This allows you an upgrade path if you’d later like to rename flat/recommended to recommended when you no longer need to support the old config system. However, [`isLegacyConfig()`](https://github.com/eslint/rewrite/blob/main/packages/config-helpers/src/define-config.js#L73-L81) (also see [`eslintrcKeys`](https://github.com/eslint/rewrite/blob/main/packages/config-helpers/src/define-config.js#L24-L35)) function doesn't check for the `plugins` key, so our config was incorrectly treated as flat config despite being in legacy format. This PR fixes the issue, along with a few other fixes combined: 1. Convert `recommended` to flat config format 2. Separate basic rules (exhaustive-deps, rules-of-hooks) from compiler rules 3. Add `recommended-latest-legacy` config for non-flat config users who want all recommended rules (including compiler rules) 4. Adding more types for the exported config Our shipped presets in 6.x.x will essentially be: - `recommended-legacy`: legacy (non-flat), with basic rules only - `recommended-latest-legacy`: legacy (non-flat), all rules (basic + compiler) - `flat/recommended`: flat, basic rules only (now the same as recommended, but to avoid making a breaking change we'll just keep it around in 6.x.x) - `recommended-latest`: flat, all rules (basic + compiler) - `recommended`: flat, basic rules only In the next breaking release 7.x.x, we will collapse down the presets into three: - `recommended-legacy`: all recommended rules - `recommended`: all recommended rules - `recommended-experimental`: all recommended rules + new bleeding edge experimental rules Closes #34679 --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34700). * #34703 * __->__ #34700 --- fixtures/eslint-v6/.eslintrc.json | 5 +- fixtures/eslint-v6/index.js | 24 ++ fixtures/eslint-v7/.eslintrc.json | 5 +- fixtures/eslint-v7/index.js | 24 ++ fixtures/eslint-v8/.eslintrc.json | 5 +- fixtures/eslint-v8/index.js | 24 ++ fixtures/eslint-v9/eslint.config.ts | 2 - fixtures/eslint-v9/index.js | 24 ++ fixtures/eslint-v9/yarn.lock | 358 ++++++++++++++++++ .../eslint-plugin-react-hooks/src/index.ts | 67 +++- 10 files changed, 504 insertions(+), 34 deletions(-) diff --git a/fixtures/eslint-v6/.eslintrc.json b/fixtures/eslint-v6/.eslintrc.json index 33b2cfaacab..f76a20fea57 100644 --- a/fixtures/eslint-v6/.eslintrc.json +++ b/fixtures/eslint-v6/.eslintrc.json @@ -1,14 +1,11 @@ { "root": true, - "extends": ["plugin:react-hooks/recommended-legacy"], + "extends": ["plugin:react-hooks/recommended-latest-legacy"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } - }, - "rules": { - "react-hooks/exhaustive-deps": "error" } } diff --git a/fixtures/eslint-v6/index.js b/fixtures/eslint-v6/index.js index 6d4a7235dd2..23af4732160 100644 --- a/fixtures/eslint-v6/index.js +++ b/fixtures/eslint-v6/index.js @@ -141,3 +141,27 @@ function useHookInLoops() { useHook4(); } } + +/** + * Compiler Rules + */ +// Invalid: component factory +function InvalidComponentFactory() { + const DynamicComponent = () =>

Hello

; + // eslint-disable-next-line react-hooks/static-components + return ; +} + +// Invalid: mutating globals +function InvalidGlobals() { + // eslint-disable-next-line react-hooks/immutability + window.myGlobal = 42; + return

Done

; +} + +// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization +function InvalidUseMemo({items}) { + // eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps + const sorted = useMemo(() => [...items].sort(), []); + return

{sorted.length}

; +} diff --git a/fixtures/eslint-v7/.eslintrc.json b/fixtures/eslint-v7/.eslintrc.json index 33b2cfaacab..f76a20fea57 100644 --- a/fixtures/eslint-v7/.eslintrc.json +++ b/fixtures/eslint-v7/.eslintrc.json @@ -1,14 +1,11 @@ { "root": true, - "extends": ["plugin:react-hooks/recommended-legacy"], + "extends": ["plugin:react-hooks/recommended-latest-legacy"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } - }, - "rules": { - "react-hooks/exhaustive-deps": "error" } } diff --git a/fixtures/eslint-v7/index.js b/fixtures/eslint-v7/index.js index 6d4a7235dd2..23af4732160 100644 --- a/fixtures/eslint-v7/index.js +++ b/fixtures/eslint-v7/index.js @@ -141,3 +141,27 @@ function useHookInLoops() { useHook4(); } } + +/** + * Compiler Rules + */ +// Invalid: component factory +function InvalidComponentFactory() { + const DynamicComponent = () =>

Hello

Done

{sorted.length}

; +} diff --git a/fixtures/eslint-v8/.eslintrc.json b/fixtures/eslint-v8/.eslintrc.json index 33b2cfaacab..f76a20fea57 100644 --- a/fixtures/eslint-v8/.eslintrc.json +++ b/fixtures/eslint-v8/.eslintrc.json @@ -1,14 +1,11 @@ { "root": true, - "extends": ["plugin:react-hooks/recommended-legacy"], + "extends": ["plugin:react-hooks/recommended-latest-legacy"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } - }, - "rules": { - "react-hooks/exhaustive-deps": "error" } } diff --git a/fixtures/eslint-v8/index.js b/fixtures/eslint-v8/index.js index 6d4a7235dd2..23af4732160 100644 --- a/fixtures/eslint-v8/index.js +++ b/fixtures/eslint-v8/index.js @@ -141,3 +141,27 @@ function useHookInLoops() { useHook4(); } } + +/** + * Compiler Rules + */ +// Invalid: component factory +function InvalidComponentFactory() { + const DynamicComponent = () =>

Hello

Done

{sorted.length}

; +} diff --git a/fixtures/eslint-v9/eslint.config.ts b/fixtures/eslint-v9/eslint.config.ts index 66d2c087468..c13899e85b2 100644 --- a/fixtures/eslint-v9/eslint.config.ts +++ b/fixtures/eslint-v9/eslint.config.ts @@ -1,8 +1,6 @@ import {defineConfig} from 'eslint/config'; import reactHooks from 'eslint-plugin-react-hooks'; -console.log(reactHooks.configs['recommended-latest']); - export default defineConfig([ { languageOptions: { diff --git a/fixtures/eslint-v9/index.js b/fixtures/eslint-v9/index.js index 6d4a7235dd2..23af4732160 100644 --- a/fixtures/eslint-v9/index.js +++ b/fixtures/eslint-v9/index.js @@ -141,3 +141,27 @@ function useHookInLoops() { useHook4(); } } + +/** + * Compiler Rules + */ +// Invalid: component factory +function InvalidComponentFactory() { + const DynamicComponent = () =>

Hello

Done

{sorted.length}

; +} diff --git a/fixtures/eslint-v9/yarn.lock b/fixtures/eslint-v9/yarn.lock index 39baff0b532..93756d49016 100644 --- a/fixtures/eslint-v9/yarn.lock +++ b/fixtures/eslint-v9/yarn.lock @@ -2,6 +2,210 @@ # yarn lockfile v1 +"@babel/code-frame@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be" + integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg== + dependencies: + "@babel/helper-validator-identifier" "^7.27.1" + js-tokens "^4.0.0" + picocolors "^1.1.1" + +"@babel/compat-data@^7.27.2": + version "7.28.4" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.28.4.tgz#96fdf1af1b8859c8474ab39c295312bfb7c24b04" + integrity sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw== + +"@babel/core@^7.24.4": + version "7.28.4" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.28.4.tgz#12a550b8794452df4c8b084f95003bce1742d496" + integrity sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA== + dependencies: + "@babel/code-frame" "^7.27.1" + "@babel/generator" "^7.28.3" + "@babel/helper-compilation-targets" "^7.27.2" + "@babel/helper-module-transforms" "^7.28.3" + "@babel/helpers" "^7.28.4" + "@babel/parser" "^7.28.4" + "@babel/template" "^7.27.2" + "@babel/traverse" "^7.28.4" + "@babel/types" "^7.28.4" + "@jridgewell/remapping" "^2.3.5" + convert-source-map "^2.0.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.3" + semver "^6.3.1" + +"@babel/generator@^7.28.3": + version "7.28.3" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.28.3.tgz#9626c1741c650cbac39121694a0f2d7451b8ef3e" + integrity sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw== + dependencies: + "@babel/parser" "^7.28.3" + "@babel/types" "^7.28.2" + "@jridgewell/gen-mapping" "^0.3.12" + "@jridgewell/trace-mapping" "^0.3.28" + jsesc "^3.0.2" + +"@babel/helper-annotate-as-pure@^7.27.3": + version "7.27.3" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz#f31fd86b915fc4daf1f3ac6976c59be7084ed9c5" + integrity sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg== + dependencies: + "@babel/types" "^7.27.3" + +"@babel/helper-compilation-targets@^7.27.2": + version "7.27.2" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz#46a0f6efab808d51d29ce96858dd10ce8732733d" + integrity sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ== + dependencies: + "@babel/compat-data" "^7.27.2" + "@babel/helper-validator-option" "^7.27.1" + browserslist "^4.24.0" + lru-cache "^5.1.1" + semver "^6.3.1" + +"@babel/helper-create-class-features-plugin@^7.18.6": + version "7.28.3" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.3.tgz#3e747434ea007910c320c4d39a6b46f20f371d46" + integrity sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg== + dependencies: + "@babel/helper-annotate-as-pure" "^7.27.3" + "@babel/helper-member-expression-to-functions" "^7.27.1" + "@babel/helper-optimise-call-expression" "^7.27.1" + "@babel/helper-replace-supers" "^7.27.1" + "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1" + "@babel/traverse" "^7.28.3" + semver "^6.3.1" + +"@babel/helper-globals@^7.28.0": + version "7.28.0" + resolved "https://registry.yarnpkg.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz#b9430df2aa4e17bc28665eadeae8aa1d985e6674" + integrity sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw== + +"@babel/helper-member-expression-to-functions@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz#ea1211276be93e798ce19037da6f06fbb994fa44" + integrity sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA== + dependencies: + "@babel/traverse" "^7.27.1" + "@babel/types" "^7.27.1" + +"@babel/helper-module-imports@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz#7ef769a323e2655e126673bb6d2d6913bbead204" + integrity sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w== + dependencies: + "@babel/traverse" "^7.27.1" + "@babel/types" "^7.27.1" + +"@babel/helper-module-transforms@^7.28.3": + version "7.28.3" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz#a2b37d3da3b2344fe085dab234426f2b9a2fa5f6" + integrity sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw== + dependencies: + "@babel/helper-module-imports" "^7.27.1" + "@babel/helper-validator-identifier" "^7.27.1" + "@babel/traverse" "^7.28.3" + +"@babel/helper-optimise-call-expression@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz#c65221b61a643f3e62705e5dd2b5f115e35f9200" + integrity sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw== + dependencies: + "@babel/types" "^7.27.1" + +"@babel/helper-plugin-utils@^7.18.6": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz#ddb2f876534ff8013e6c2b299bf4d39b3c51d44c" + integrity sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw== + +"@babel/helper-replace-supers@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz#b1ed2d634ce3bdb730e4b52de30f8cccfd692bc0" + integrity sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA== + dependencies: + "@babel/helper-member-expression-to-functions" "^7.27.1" + "@babel/helper-optimise-call-expression" "^7.27.1" + "@babel/traverse" "^7.27.1" + +"@babel/helper-skip-transparent-expression-wrappers@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz#62bb91b3abba8c7f1fec0252d9dbea11b3ee7a56" + integrity sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg== + dependencies: + "@babel/traverse" "^7.27.1" + "@babel/types" "^7.27.1" + +"@babel/helper-string-parser@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687" + integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA== + +"@babel/helper-validator-identifier@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8" + integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow== + +"@babel/helper-validator-option@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz#fa52f5b1e7db1ab049445b421c4471303897702f" + integrity sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg== + +"@babel/helpers@^7.28.4": + version "7.28.4" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.28.4.tgz#fe07274742e95bdf7cf1443593eeb8926ab63827" + integrity sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w== + dependencies: + "@babel/template" "^7.27.2" + "@babel/types" "^7.28.4" + +"@babel/parser@^7.24.4", "@babel/parser@^7.27.2", "@babel/parser@^7.28.3", "@babel/parser@^7.28.4": + version "7.28.4" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.4.tgz#da25d4643532890932cc03f7705fe19637e03fa8" + integrity sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg== + dependencies: + "@babel/types" "^7.28.4" + +"@babel/plugin-proposal-private-methods@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea" + integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.18.6" + "@babel/helper-plugin-utils" "^7.18.6" + +"@babel/template@^7.27.2": + version "7.27.2" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d" + integrity sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw== + dependencies: + "@babel/code-frame" "^7.27.1" + "@babel/parser" "^7.27.2" + "@babel/types" "^7.27.1" + +"@babel/traverse@^7.27.1", "@babel/traverse@^7.28.3", "@babel/traverse@^7.28.4": + version "7.28.4" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.28.4.tgz#8d456101b96ab175d487249f60680221692b958b" + integrity sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ== + dependencies: + "@babel/code-frame" "^7.27.1" + "@babel/generator" "^7.28.3" + "@babel/helper-globals" "^7.28.0" + "@babel/parser" "^7.28.4" + "@babel/template" "^7.27.2" + "@babel/types" "^7.28.4" + debug "^4.3.1" + +"@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.2", "@babel/types@^7.28.4": + version "7.28.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.4.tgz#0a4e618f4c60a7cd6c11cb2d48060e4dbe38ac3a" + integrity sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q== + dependencies: + "@babel/helper-string-parser" "^7.27.1" + "@babel/helper-validator-identifier" "^7.27.1" + "@eslint-community/eslint-utils@^4.2.0": version "4.4.1" resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56" @@ -96,6 +300,40 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.2.tgz#1860473de7dfa1546767448f333db80cb0ff2161" integrity sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ== +"@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5": + version "0.3.13" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f" + integrity sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA== + dependencies: + "@jridgewell/sourcemap-codec" "^1.5.0" + "@jridgewell/trace-mapping" "^0.3.24" + +"@jridgewell/remapping@^2.3.5": + version "2.3.5" + resolved "https://registry.yarnpkg.com/@jridgewell/remapping/-/remapping-2.3.5.tgz#375c476d1972947851ba1e15ae8f123047445aa1" + integrity sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ== + dependencies: + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.24" + +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" + integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== + +"@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0": + version "1.5.5" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba" + integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og== + +"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.28": + version "0.3.31" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz#db15d6781c931f3a251a3dac39501c98a6082fd0" + integrity sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + "@types/estree@^1.0.6": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50" @@ -148,6 +386,11 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= +baseline-browser-mapping@^2.8.9: + version "2.8.10" + resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz#32eb5e253d633fa3fa3ffb1685fabf41680d9e8a" + integrity sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -156,11 +399,27 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" +browserslist@^4.24.0: + version "4.26.3" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.26.3.tgz#40fbfe2d1cd420281ce5b1caa8840049c79afb56" + integrity sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w== + dependencies: + baseline-browser-mapping "^2.8.9" + caniuse-lite "^1.0.30001746" + electron-to-chromium "^1.5.227" + node-releases "^2.0.21" + update-browserslist-db "^1.1.3" + callsites@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== +caniuse-lite@^1.0.30001746: + version "1.0.30001746" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001746.tgz#199d20f04f5369825e00ff7067d45d5dfa03aee7" + integrity sha512-eA7Ys/DGw+pnkWWSE/id29f2IcPHVoE8wxtvE5JdvD2V28VTDPy1yEeo11Guz0sJ4ZeGRcm3uaTcAqK1LXaphA== + chalk@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -186,6 +445,11 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= +convert-source-map@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" + integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== + cross-spawn@^7.0.6: version "7.0.6" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f" @@ -195,6 +459,13 @@ cross-spawn@^7.0.6: shebang-command "^2.0.0" which "^2.0.1" +debug@^4.1.0: + version "4.4.3" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a" + integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA== + dependencies: + ms "^2.1.3" + debug@^4.3.1, debug@^4.3.2: version "4.4.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a" @@ -207,6 +478,16 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +electron-to-chromium@^1.5.227: + version "1.5.228" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.228.tgz#38b849bc8714bd21fb64f5ad56bf8cfd8638e1e9" + integrity sha512-nxkiyuqAn4MJ1QbobwqJILiDtu/jk14hEAWaMiJmNPh1Z+jqoFlBFZjdXwLWGeVSeu9hGLg6+2G9yJaW8rBIFA== + +escalade@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" + integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA== + escape-string-regexp@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" @@ -365,6 +646,11 @@ flatted@^3.2.9: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27" integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA== +gensync@^1.0.0-beta.2: + version "1.0.0-beta.2" + resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" + integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== + glob-parent@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3" @@ -382,6 +668,18 @@ has-flag@^4.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== +hermes-estree@0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" + integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== + +hermes-parser@^0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" + integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== + dependencies: + hermes-estree "0.25.1" + ignore@^5.2.0: version "5.3.2" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5" @@ -422,6 +720,11 @@ jiti@^2.4.2: resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.4.2.tgz#d19b7732ebb6116b06e2038da74a55366faef560" integrity sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A== +js-tokens@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== + js-yaml@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602" @@ -429,6 +732,11 @@ js-yaml@^4.1.0: dependencies: argparse "^2.0.1" +jsesc@^3.0.2: + version "3.1.0" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d" + integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== + json-buffer@3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13" @@ -444,6 +752,11 @@ json-stable-stringify-without-jsonify@^1.0.1: resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== +json5@^2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" + integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== + keyv@^4.5.4: version "4.5.4" resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93" @@ -471,6 +784,13 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lru-cache@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" + integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== + dependencies: + yallist "^3.0.2" + minimatch@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" @@ -488,6 +808,11 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= +node-releases@^2.0.21: + version "2.0.21" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.21.tgz#f59b018bc0048044be2d4c4c04e4c8b18160894c" + integrity sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw== + optionator@^0.9.3: version "0.9.4" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734" @@ -531,6 +856,11 @@ path-key@^3.1.0: resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== +picocolors@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -546,6 +876,11 @@ resolve-from@^4.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== +semver@^6.3.1: + version "6.3.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -577,6 +912,14 @@ type-check@^0.4.0, type-check@~0.4.0: dependencies: prelude-ls "^1.2.1" +update-browserslist-db@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420" + integrity sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw== + dependencies: + escalade "^3.2.0" + picocolors "^1.1.1" + uri-js@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0" @@ -596,7 +939,22 @@ word-wrap@^1.2.5: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== +yallist@^3.0.2: + version "3.1.1" + resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" + integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== + yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +zod-validation-error@^3.0.3: + version "3.5.3" + resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.5.3.tgz#85ba33290200d8db9f043621e284f40dddefb7e5" + integrity sha512-OT5Y8lbUadqVZCsnyFaTQ4/O2mys4tj7PqhdbBCp7McPwvIEKfPtdA6QfPeFQK2/Rz5LgwmAXRJTugBNBi0btw== + +zod@^3.22.4: + version "3.25.76" + resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.76.tgz#26841c3f6fd22a6a2760e7ccb719179768471e34" + integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ== diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts index c63955fd667..81c21a22e05 100644 --- a/packages/eslint-plugin-react-hooks/src/index.ts +++ b/packages/eslint-plugin-react-hooks/src/index.ts @@ -23,33 +23,56 @@ const rules = { ), } satisfies Record; -// Config rules -const ruleConfigs = { +// Basic hooks rules (for recommended config) +const basicRuleConfigs = { 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', - // Compiler rules - ...Object.fromEntries( - Object.entries(recommendedRules).map(([name, ruleConfig]) => { - return [ - 'react-hooks/' + name, - mapErrorSeverityToESlint(ruleConfig.severity), - ]; - }), - ), -} satisfies Linter.RulesRecord; +} as const satisfies Linter.RulesRecord; + +const compilerRuleConfigs = Object.fromEntries( + Object.entries(recommendedRules).map(([name, ruleConfig]) => { + return [ + `react-hooks/${name}` as const, + mapErrorSeverityToESlint(ruleConfig.severity), + ] as const; + }), +) as Record<`react-hooks/${string}`, Linter.RuleEntry>; + +// All rules including compiler rules (for recommended-latest config) +const allRuleConfigs: Linter.RulesRecord = { + ...basicRuleConfigs, + ...compilerRuleConfigs, +}; const plugin = { meta: { name: 'eslint-plugin-react-hooks', }, - configs: {}, rules, + configs: {} as { + 'recommended-legacy': { + plugins: Array; + rules: Linter.RulesRecord; + }; + 'recommended-latest-legacy': { + plugins: Array; + rules: Linter.RulesRecord; + }; + 'flat/recommended': Array; + 'recommended-latest': Array; + recommended: Array; + }, }; Object.assign(plugin.configs, { 'recommended-legacy': { plugins: ['react-hooks'], - rules: ruleConfigs, + rules: basicRuleConfigs, + }, + + 'recommended-latest-legacy': { + plugins: ['react-hooks'], + rules: allRuleConfigs, }, 'flat/recommended': [ @@ -57,7 +80,7 @@ Object.assign(plugin.configs, { plugins: { 'react-hooks': plugin, }, - rules: ruleConfigs, + rules: basicRuleConfigs, }, ], @@ -66,14 +89,18 @@ Object.assign(plugin.configs, { plugins: { 'react-hooks': plugin, }, - rules: ruleConfigs, + rules: allRuleConfigs, }, ], - recommended: { - plugins: ['react-hooks'], - rules: ruleConfigs, - }, + recommended: [ + { + plugins: { + 'react-hooks': plugin, + }, + rules: basicRuleConfigs, + }, + ], }); export default plugin; From 19f65ff179d377ff0c9284704dff2fce370745be Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 2 Oct 2025 19:19:01 -0400 Subject: [PATCH 022/276] [eprh] Remove NoUnusedOptOutDirectives (#34703) This rule was a leftover from a while ago and doesn't actually lint anything useful. Specifically, you get a lint error if you try to opt out a component that isn't already bailing out. If there's a bailout the compiler already safely skips over it, so adding `'use no memo'` there is unnecessary. Fixes #31407 --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34703). * __->__ #34703 * #34700 --- .../__tests__/NoUnusedDirectivesRule-test.ts | 58 ----------------- .../src/rules/ReactCompilerRule.ts | 64 +++---------------- .../src/shared/RunReactCompiler.ts | 55 +--------------- .../src/shared/ReactCompiler.ts | 46 +------------ .../src/shared/RunReactCompiler.ts | 53 +-------------- 5 files changed, 14 insertions(+), 262 deletions(-) delete mode 100644 compiler/packages/eslint-plugin-react-compiler/__tests__/NoUnusedDirectivesRule-test.ts diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/NoUnusedDirectivesRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoUnusedDirectivesRule-test.ts deleted file mode 100644 index 77f6dd93fbf..00000000000 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/NoUnusedDirectivesRule-test.ts +++ /dev/null @@ -1,58 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import {NoUnusedDirectivesRule} from '../src/rules/ReactCompilerRule'; -import {normalizeIndent, testRule} from './shared-utils'; - -testRule('no unused directives rule', NoUnusedDirectivesRule, { - valid: [], - invalid: [ - { - name: "Unused 'use no forget' directive is reported when no errors are present on components", - code: normalizeIndent` - function Component() { - 'use no forget'; - return

Hello world

- } - `, - errors: [ - { - message: "Unused 'use no forget' directive", - suggestions: [ - { - output: - // yuck - '\nfunction Component() {\n \n return

Hello world

\n}\n', - }, - ], - }, - ], - }, - - { - name: "Unused 'use no forget' directive is reported when no errors are present on non-components or hooks", - code: normalizeIndent` - function notacomponent() { - 'use no forget'; - return 1 + 1; - } - `, - errors: [ - { - message: "Unused 'use no forget' directive", - suggestions: [ - { - output: - // yuck - '\nfunction notacomponent() {\n \n return 1 + 1;\n}\n', - }, - ], - }, - ], - }, - ], -}); diff --git a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts index 3eb6dfa0c71..7dacbe6d190 100644 --- a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts +++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts @@ -161,69 +161,21 @@ function makeRule(rule: LintRule): Rule.RuleModule { }; } -export const NoUnusedDirectivesRule: Rule.RuleModule = { - meta: { - type: 'suggestion', - docs: { - recommended: true, - }, - fixable: 'code', - hasSuggestions: true, - // validation is done at runtime with zod - schema: [{type: 'object', additionalProperties: true}], - }, - create(context: Rule.RuleContext): Rule.RuleListener { - const results = getReactCompilerResult(context); - - for (const directive of results.unusedOptOutDirectives) { - context.report({ - message: `Unused '${directive.directive}' directive`, - loc: directive.loc, - suggest: [ - { - desc: 'Remove the directive', - fix(fixer): Rule.Fix { - return fixer.removeRange(directive.range); - }, - }, - ], - }); - } - return {}; - }, -}; - type RulesConfig = { [name: string]: {rule: Rule.RuleModule; severity: ErrorSeverity}; }; -export const allRules: RulesConfig = LintRules.reduce( - (acc, rule) => { - acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; - return acc; - }, - { - 'no-unused-directives': { - rule: NoUnusedDirectivesRule, - severity: ErrorSeverity.Error, - }, - } as RulesConfig, -); +export const allRules: RulesConfig = LintRules.reduce((acc, rule) => { + acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; + return acc; +}, {} as RulesConfig); export const recommendedRules: RulesConfig = LintRules.filter( rule => rule.recommended, -).reduce( - (acc, rule) => { - acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; - return acc; - }, - { - 'no-unused-directives': { - rule: NoUnusedDirectivesRule, - severity: ErrorSeverity.Error, - }, - } as RulesConfig, -); +).reduce((acc, rule) => { + acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; + return acc; +}, {} as RulesConfig); export function mapErrorSeverityToESlint( severity: ErrorSeverity, diff --git a/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts b/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts index f11d0b910d4..53d2f31e0f4 100644 --- a/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts +++ b/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts @@ -5,20 +5,18 @@ * LICENSE file in the root directory of this source tree. */ -import {transformFromAstSync, traverse} from '@babel/core'; +import {transformFromAstSync} from '@babel/core'; import {parse as babelParse} from '@babel/parser'; -import {Directive, File} from '@babel/types'; +import {File} from '@babel/types'; // @ts-expect-error: no types available import PluginProposalPrivateMethods from '@babel/plugin-proposal-private-methods'; import BabelPluginReactCompiler, { parsePluginOptions, validateEnvironmentConfig, - OPT_OUT_DIRECTIVES, type PluginOptions, } from 'babel-plugin-react-compiler/src'; import {Logger, LoggerEvent} from 'babel-plugin-react-compiler/src/Entrypoint'; import type {SourceCode} from 'eslint'; -import {SourceLocation} from 'estree'; // @ts-expect-error: no types available import * as HermesParser from 'hermes-parser'; import {isDeepStrictEqual} from 'util'; @@ -45,17 +43,11 @@ const COMPILER_OPTIONS: PluginOptions = { }), }; -export type UnusedOptOutDirective = { - loc: SourceLocation; - range: [number, number]; - directive: string; -}; export type RunCacheEntry = { sourceCode: string; filename: string; userOpts: PluginOptions; flowSuppressions: Array<{line: number; code: string}>; - unusedOptOutDirectives: Array; events: Array; }; @@ -87,25 +79,6 @@ function getFlowSuppressions( return results; } -function filterUnusedOptOutDirectives( - directives: ReadonlyArray, -): Array { - const results: Array = []; - for (const directive of directives) { - if ( - OPT_OUT_DIRECTIVES.has(directive.value.value) && - directive.loc != null - ) { - results.push({ - loc: directive.loc, - directive: directive.value.value, - range: [directive.start!, directive.end!], - }); - } - } - return results; -} - function runReactCompilerImpl({ sourceCode, filename, @@ -125,7 +98,6 @@ function runReactCompilerImpl({ filename, userOpts, flowSuppressions: [], - unusedOptOutDirectives: [], events: [], }; const userLogger: Logger | null = options.logger; @@ -181,29 +153,6 @@ function runReactCompilerImpl({ configFile: false, babelrc: false, }); - - if (results.events.filter(e => e.kind === 'CompileError').length === 0) { - traverse(babelAST, { - FunctionDeclaration(path) { - path.node; - results.unusedOptOutDirectives.push( - ...filterUnusedOptOutDirectives(path.node.body.directives), - ); - }, - ArrowFunctionExpression(path) { - if (path.node.body.type === 'BlockStatement') { - results.unusedOptOutDirectives.push( - ...filterUnusedOptOutDirectives(path.node.body.directives), - ); - } - }, - FunctionExpression(path) { - results.unusedOptOutDirectives.push( - ...filterUnusedOptOutDirectives(path.node.body.directives), - ); - }, - }); - } } catch (err) { /* errors handled by injected logger */ } diff --git a/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts index dec46457cce..cdb3af38489 100644 --- a/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts +++ b/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts @@ -160,38 +160,6 @@ function makeRule(rule: LintRule): Rule.RuleModule { }; } -export const NoUnusedDirectivesRule: Rule.RuleModule = { - meta: { - type: 'suggestion', - docs: { - recommended: true, - }, - fixable: 'code', - hasSuggestions: true, - // validation is done at runtime with zod - schema: [{type: 'object', additionalProperties: true}], - }, - create(context: Rule.RuleContext): Rule.RuleListener { - const results = getReactCompilerResult(context); - - for (const directive of results.unusedOptOutDirectives) { - context.report({ - message: `Unused '${directive.directive}' directive`, - loc: directive.loc, - suggest: [ - { - desc: 'Remove the directive', - fix(fixer): Rule.Fix { - return fixer.removeRange(directive.range); - }, - }, - ], - }); - } - return {}; - }, -}; - type RulesConfig = { [name: string]: {rule: Rule.RuleModule; severity: ErrorSeverity}; }; @@ -201,12 +169,7 @@ export const allRules: RulesConfig = LintRules.reduce( acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; return acc; }, - { - 'no-unused-directives': { - rule: NoUnusedDirectivesRule, - severity: ErrorSeverity.Error, - }, - } as RulesConfig, + {} as RulesConfig, ); export const recommendedRules: RulesConfig = LintRules.filter( @@ -216,12 +179,7 @@ export const recommendedRules: RulesConfig = LintRules.filter( acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; return acc; }, - { - 'no-unused-directives': { - rule: NoUnusedDirectivesRule, - severity: ErrorSeverity.Error, - }, - } as RulesConfig, + {} as RulesConfig, ); export function mapErrorSeverityToESlint( diff --git a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts index f46528cd606..fc9067d2740 100644 --- a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts +++ b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts @@ -6,21 +6,19 @@ */ /* eslint-disable no-for-of-loops/no-for-of-loops */ -import {transformFromAstSync, traverse} from '@babel/core'; +import {transformFromAstSync} from '@babel/core'; import {parse as babelParse} from '@babel/parser'; -import {Directive, File} from '@babel/types'; +import {File} from '@babel/types'; // @ts-expect-error: no types available import PluginProposalPrivateMethods from '@babel/plugin-proposal-private-methods'; import BabelPluginReactCompiler, { parsePluginOptions, validateEnvironmentConfig, - OPT_OUT_DIRECTIVES, type PluginOptions, Logger, LoggerEvent, } from 'babel-plugin-react-compiler'; import type {SourceCode} from 'eslint'; -import {SourceLocation} from 'estree'; import * as HermesParser from 'hermes-parser'; import {isDeepStrictEqual} from 'util'; import type {ParseResult} from '@babel/parser'; @@ -46,17 +44,11 @@ const COMPILER_OPTIONS: PluginOptions = { }, }; -export type UnusedOptOutDirective = { - loc: SourceLocation; - range: [number, number]; - directive: string; -}; export type RunCacheEntry = { sourceCode: string; filename: string; userOpts: PluginOptions; flowSuppressions: Array<{line: number; code: string}>; - unusedOptOutDirectives: Array; events: Array; }; @@ -88,24 +80,6 @@ function getFlowSuppressions( return results; } -function filterUnusedOptOutDirectives( - directives: ReadonlyArray, -): Array { - const results: Array = []; - for (const directive of directives) { - if ( - OPT_OUT_DIRECTIVES.has(directive.value.value) && - directive.loc != null - ) { - results.push({ - loc: directive.loc, - directive: directive.value.value, - range: [directive.start!, directive.end!], - }); - } - } - return results; -} function runReactCompilerImpl({ sourceCode, @@ -126,7 +100,6 @@ function runReactCompilerImpl({ filename, userOpts, flowSuppressions: [], - unusedOptOutDirectives: [], events: [], }; const userLogger: Logger | null = options.logger; @@ -182,28 +155,6 @@ function runReactCompilerImpl({ configFile: false, babelrc: false, }); - - if (results.events.filter(e => e.kind === 'CompileError').length === 0) { - traverse(babelAST, { - FunctionDeclaration(path) { - results.unusedOptOutDirectives.push( - ...filterUnusedOptOutDirectives(path.node.body.directives), - ); - }, - ArrowFunctionExpression(path) { - if (path.node.body.type === 'BlockStatement') { - results.unusedOptOutDirectives.push( - ...filterUnusedOptOutDirectives(path.node.body.directives), - ); - } - }, - FunctionExpression(path) { - results.unusedOptOutDirectives.push( - ...filterUnusedOptOutDirectives(path.node.body.directives), - ); - }, - }); - } } catch (err) { /* errors handled by injected logger */ } From e866b1d1e9b8a1dc7a43f1be0c510784566b9bb1 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Fri, 3 Oct 2025 09:48:37 -0400 Subject: [PATCH 023/276] Add getRootNode to fabric fragment instance (#34544) Stacked on #34533 for root fragment handling This is the same approach as DOM, where we call getRootNode on the parent. Tests are in react-native using Fantom. --- .../src/ReactFiberConfigFabric.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js index 40ff26ff89b..e6ac1901c52 100644 --- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js +++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js @@ -645,6 +645,9 @@ export type FragmentInstanceType = { observeUsing: (observer: IntersectionObserver) => void, unobserveUsing: (observer: IntersectionObserver) => void, compareDocumentPosition: (otherNode: PublicInstance) => number, + getRootNode(getRootNodeOptions?: { + composed: boolean, + }): Node | FragmentInstanceType, }; function FragmentInstance(this: FragmentInstanceType, fragmentFiber: Fiber) { @@ -754,6 +757,21 @@ function collectChildren(child: Fiber, collection: Array): boolean { return false; } +// $FlowFixMe[prop-missing] +FragmentInstance.prototype.getRootNode = function ( + this: FragmentInstanceType, + getRootNodeOptions?: {composed: boolean}, +): Node | FragmentInstanceType { + const parentHostFiber = getFragmentParentHostFiber(this._fragmentFiber); + if (parentHostFiber === null) { + return this; + } + const parentHostInstance = getPublicInstanceFromHostFiber(parentHostFiber); + // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque + const rootNode = (parentHostInstance.getRootNode(getRootNodeOptions): Node); + return rootNode; +}; + export function createFragmentInstance( fragmentFiber: Fiber, ): FragmentInstanceType { From 74dee8ef641c7a0a67db192f83c11ac0d9f279ff Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Fri, 3 Oct 2025 09:54:33 -0400 Subject: [PATCH 024/276] Add getClientRects to fabric fragment instance (#34545) Stacked on #34544 We only have getBoundingClientRect available from RN currently. This should work as a substitute for this case because the equivalent of multi-rect elements in RN is a nested Text component. We only include the rects of top-level host components here so we can assume that calling getBoundingClientRect on each child is the same result. Tested in react-native with Fantom. --- .../src/ReactFiberConfigFabric.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js index e6ac1901c52..0f334eea860 100644 --- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js +++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js @@ -648,6 +648,7 @@ export type FragmentInstanceType = { getRootNode(getRootNodeOptions?: { composed: boolean, }): Node | FragmentInstanceType, + getClientRects: () => Array, }; function FragmentInstance(this: FragmentInstanceType, fragmentFiber: Fiber) { @@ -772,6 +773,27 @@ FragmentInstance.prototype.getRootNode = function ( return rootNode; }; +// $FlowFixMe[prop-missing] +FragmentInstance.prototype.getClientRects = function ( + this: FragmentInstanceType, +): Array { + const rects: Array = []; + traverseFragmentInstance(this._fragmentFiber, collectClientRects, rects); + return rects; +}; +function collectClientRects(child: Fiber, rects: Array): boolean { + const instance = getPublicInstanceFromHostFiber(child); + + // getBoundingClientRect is available on Fabric instances while getClientRects is not. + // This should work as a substitute in this case because the only equivalent of a multi-rect + // element in RN would be a nested Text component. + // Since we only use top-level nodes here, we can assume that getBoundingClientRect is sufficient. + // $FlowFixMe[method-unbinding] + // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque + rects.push(instance.getBoundingClientRect()); + return false; +} + export function createFragmentInstance( fragmentFiber: Fiber, ): FragmentInstanceType { From 0eebd37041a5712f841edd5fad558e0516e5af61 Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Fri, 3 Oct 2025 10:52:36 -0400 Subject: [PATCH 025/276] [playground] Config panel quality fixes (#34611) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed two small issues with the config panel in the compiler playground: 1. Object descriptions were being confined in the config box and most of it would not be visible upon hover 2. Changed it so that "Applied Configs" would only display a valid set of configs, rather than switching between "Invalid Configs" and the set of options. This would be less visually jarring for users as the Output panel already displays errors. Additionally, if users want to see the list of config options but have a currently broken config, they would previously not know how to fix it. Object hover before: Screenshot 2025-09-26 at 10 41 03 AM

Hover after: Screenshot 2025-09-26 at 10 40 37 AM

Applied Configs always displays the last valid set of configs: https://github.com/user-attachments/assets/2fb9232f-7388-4488-9b7a-bb48bf09e4ca --- .../components/Editor/ConfigEditor.tsx | 49 +-- .../components/Editor/EditorImpl.tsx | 319 +----------------- .../components/Editor/monacoOptions.ts | 11 + compiler/apps/playground/lib/compilation.ts | 308 +++++++++++++++++ 4 files changed, 349 insertions(+), 338 deletions(-) create mode 100644 compiler/apps/playground/lib/compilation.ts diff --git a/compiler/apps/playground/components/Editor/ConfigEditor.tsx b/compiler/apps/playground/components/Editor/ConfigEditor.tsx index d922f27c978..18f904d225f 100644 --- a/compiler/apps/playground/components/Editor/ConfigEditor.tsx +++ b/compiler/apps/playground/components/Editor/ConfigEditor.tsx @@ -6,7 +6,6 @@ */ import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react'; -import {PluginOptions} from 'babel-plugin-react-compiler'; import type {editor} from 'monaco-editor'; import * as monaco from 'monaco-editor'; import React, { @@ -18,9 +17,8 @@ import React, { } from 'react'; import {Resizable} from 're-resizable'; import {useStore, useStoreDispatch} from '../StoreContext'; -import {monacoOptions} from './monacoOptions'; +import {monacoConfigOptions} from './monacoOptions'; import {IconChevron} from '../Icons/IconChevron'; -import prettyFormat from 'pretty-format'; import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes'; // @ts-expect-error - webpack asset/source loader handles .d.ts files as strings @@ -29,9 +27,9 @@ import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts'; loader.config({monaco}); export default function ConfigEditor({ - appliedOptions, + formattedAppliedConfig, }: { - appliedOptions: PluginOptions | null; + formattedAppliedConfig: string; }): React.ReactElement { const [isExpanded, setIsExpanded] = useState(false); @@ -49,7 +47,7 @@ export default function ConfigEditor({ setIsExpanded(false); }); }} - appliedOptions={appliedOptions} + formattedAppliedConfig={formattedAppliedConfig} />

void; - appliedOptions: PluginOptions | null; + onToggle: (expanded: boolean) => void; + formattedAppliedConfig: string; }): React.ReactElement { const store = useStore(); const dispatchStore = useStoreDispatch(); @@ -122,13 +120,6 @@ function ExpandedEditor({ }); }; - const formattedAppliedOptions = appliedOptions - ? prettyFormat(appliedOptions, { - printFunctionName: false, - printBasicPrototype: false, - }) - : 'Invalid configs'; - return ( @@ -158,7 +149,7 @@ function ExpandedEditor({ Config Overrides

@@ -186,23 +168,16 @@ function ExpandedEditor({ Applied Configs

diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx index 9f000f85564..5b39b91654e 100644 --- a/compiler/apps/playground/components/Editor/EditorImpl.tsx +++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx @@ -5,312 +5,17 @@ * LICENSE file in the root directory of this source tree. */ -import {parse as babelParse, ParseResult} from '@babel/parser'; -import * as HermesParser from 'hermes-parser'; -import * as t from '@babel/types'; -import BabelPluginReactCompiler, { - CompilerError, +import { CompilerErrorDetail, CompilerDiagnostic, - Effect, - ErrorCategory, - parseConfigPragmaForTests, - ValueKind, - type Hook, - PluginOptions, - CompilerPipelineValue, - parsePluginOptions, - printReactiveFunctionWithOutlined, - printFunctionWithOutlined, - type LoggerEvent, } from 'babel-plugin-react-compiler'; -import {useDeferredValue, useMemo} from 'react'; +import {useDeferredValue, useMemo, useState} from 'react'; import {useStore} from '../StoreContext'; import ConfigEditor from './ConfigEditor'; import Input from './Input'; -import { - CompilerOutput, - CompilerTransformOutput, - default as Output, - PrintedCompilerPipelineValue, -} from './Output'; -import {transformFromAstSync} from '@babel/core'; - -function parseInput( - input: string, - language: 'flow' | 'typescript', -): ParseResult { - // Extract the first line to quickly check for custom test directives - if (language === 'flow') { - return HermesParser.parse(input, { - babel: true, - flow: 'all', - sourceType: 'module', - enableExperimentalComponentSyntax: true, - }); - } else { - return babelParse(input, { - plugins: ['typescript', 'jsx'], - sourceType: 'module', - }) as ParseResult; - } -} - -function invokeCompiler( - source: string, - language: 'flow' | 'typescript', - options: PluginOptions, -): CompilerTransformOutput { - const ast = parseInput(source, language); - let result = transformFromAstSync(ast, source, { - filename: '_playgroundFile.js', - highlightCode: false, - retainLines: true, - plugins: [[BabelPluginReactCompiler, options]], - ast: true, - sourceType: 'module', - configFile: false, - sourceMaps: true, - babelrc: false, - }); - if (result?.ast == null || result?.code == null || result?.map == null) { - throw new Error('Expected successful compilation'); - } - return { - code: result.code, - sourceMaps: result.map, - language, - }; -} - -const COMMON_HOOKS: Array<[string, Hook]> = [ - [ - 'useFragment', - { - valueKind: ValueKind.Frozen, - effectKind: Effect.Freeze, - noAlias: true, - transitiveMixedData: true, - }, - ], - [ - 'usePaginationFragment', - { - valueKind: ValueKind.Frozen, - effectKind: Effect.Freeze, - noAlias: true, - transitiveMixedData: true, - }, - ], - [ - 'useRefetchableFragment', - { - valueKind: ValueKind.Frozen, - effectKind: Effect.Freeze, - noAlias: true, - transitiveMixedData: true, - }, - ], - [ - 'useLazyLoadQuery', - { - valueKind: ValueKind.Frozen, - effectKind: Effect.Freeze, - noAlias: true, - transitiveMixedData: true, - }, - ], - [ - 'usePreloadedQuery', - { - valueKind: ValueKind.Frozen, - effectKind: Effect.Freeze, - noAlias: true, - transitiveMixedData: true, - }, - ], -]; - -function parseOptions( - source: string, - mode: 'compiler' | 'linter', - configOverrides: string, -): PluginOptions { - // Extract the first line to quickly check for custom test directives - const pragma = source.substring(0, source.indexOf('\n')); - - const parsedPragmaOptions = parseConfigPragmaForTests(pragma, { - compilationMode: 'infer', - environment: - mode === 'linter' - ? { - // enabled in compiler - validateRefAccessDuringRender: false, - // enabled in linter - validateNoSetStateInRender: true, - validateNoSetStateInEffects: true, - validateNoJSXInTryStatements: true, - validateNoImpureFunctionsInRender: true, - validateStaticComponents: true, - validateNoFreezingKnownMutableFunctions: true, - validateNoVoidUseMemo: true, - } - : { - /* use defaults for compiler mode */ - }, - }); - - // Parse config overrides from config editor - let configOverrideOptions: any = {}; - const configMatch = configOverrides.match(/^\s*import.*?\n\n$(.*)$/s); - if (configOverrides.trim()) { - if (configMatch && configMatch[1]) { - const configString = configMatch[1].replace(/satisfies.*$/, '').trim(); - configOverrideOptions = new Function(`return (${configString})`)(); - } else { - throw new Error('Invalid override format'); - } - } - - const opts: PluginOptions = parsePluginOptions({ - ...parsedPragmaOptions, - ...configOverrideOptions, - environment: { - ...parsedPragmaOptions.environment, - ...configOverrideOptions.environment, - customHooks: new Map([...COMMON_HOOKS]), - }, - }); - - return opts; -} - -function compile( - source: string, - mode: 'compiler' | 'linter', - configOverrides: string, -): [CompilerOutput, 'flow' | 'typescript', PluginOptions | null] { - const results = new Map>(); - const error = new CompilerError(); - const otherErrors: Array = []; - const upsert: (result: PrintedCompilerPipelineValue) => void = result => { - const entry = results.get(result.name); - if (Array.isArray(entry)) { - entry.push(result); - } else { - results.set(result.name, [result]); - } - }; - let language: 'flow' | 'typescript'; - if (source.match(/\@flow/)) { - language = 'flow'; - } else { - language = 'typescript'; - } - let transformOutput; - - let baseOpts: PluginOptions | null = null; - try { - baseOpts = parseOptions(source, mode, configOverrides); - } catch (err) { - error.details.push( - new CompilerErrorDetail({ - category: ErrorCategory.Config, - reason: `Unexpected failure when transforming configs! \n${err}`, - loc: null, - suggestions: null, - }), - ); - } - if (baseOpts) { - try { - const logIR = (result: CompilerPipelineValue): void => { - switch (result.kind) { - case 'ast': { - break; - } - case 'hir': { - upsert({ - kind: 'hir', - fnName: result.value.id, - name: result.name, - value: printFunctionWithOutlined(result.value), - }); - break; - } - case 'reactive': { - upsert({ - kind: 'reactive', - fnName: result.value.id, - name: result.name, - value: printReactiveFunctionWithOutlined(result.value), - }); - break; - } - case 'debug': { - upsert({ - kind: 'debug', - fnName: null, - name: result.name, - value: result.value, - }); - break; - } - default: { - const _: never = result; - throw new Error(`Unhandled result ${result}`); - } - } - }; - // Add logger options to the parsed options - const opts = { - ...baseOpts, - logger: { - debugLogIRs: logIR, - logEvent: (_filename: string | null, event: LoggerEvent): void => { - if (event.kind === 'CompileError') { - otherErrors.push(event.detail); - } - }, - }, - }; - transformOutput = invokeCompiler(source, language, opts); - } catch (err) { - /** - * error might be an invariant violation or other runtime error - * (i.e. object shape that is not CompilerError) - */ - if (err instanceof CompilerError && err.details.length > 0) { - error.merge(err); - } else { - /** - * Handle unexpected failures by logging (to get a stack trace) - * and reporting - */ - error.details.push( - new CompilerErrorDetail({ - category: ErrorCategory.Invariant, - reason: `Unexpected failure when transforming input! \n${err}`, - loc: null, - suggestions: null, - }), - ); - } - } - } - // Only include logger errors if there weren't other errors - if (!error.hasErrors() && otherErrors.length !== 0) { - otherErrors.forEach(e => error.details.push(e)); - } - if (error.hasErrors()) { - return [{kind: 'err', results, error}, language, baseOpts]; - } - return [ - {kind: 'ok', results, transformOutput, errors: error.details}, - language, - baseOpts, - ]; -} +import {CompilerOutput, default as Output} from './Output'; +import {compile} from '../../lib/compilation'; +import prettyFormat from 'pretty-format'; export default function Editor(): JSX.Element { const store = useStore(); @@ -323,6 +28,7 @@ export default function Editor(): JSX.Element { () => compile(deferredStore.source, 'linter', deferredStore.config), [deferredStore.source, deferredStore.config], ); + const [formattedAppliedConfig, setFormattedAppliedConfig] = useState(''); let mergedOutput: CompilerOutput; let errors: Array; @@ -336,11 +42,22 @@ export default function Editor(): JSX.Element { mergedOutput = compilerOutput; errors = compilerOutput.error.details; } + + if (appliedOptions) { + const formatted = prettyFormat(appliedOptions, { + printFunctionName: false, + printBasicPrototype: false, + }); + if (formatted !== formattedAppliedConfig) { + setFormattedAppliedConfig(formatted); + } + } + return ( <>

- +

diff --git a/compiler/apps/playground/components/Editor/monacoOptions.ts b/compiler/apps/playground/components/Editor/monacoOptions.ts index 7fed1b7875f..d52c8bbedfa 100644 --- a/compiler/apps/playground/components/Editor/monacoOptions.ts +++ b/compiler/apps/playground/components/Editor/monacoOptions.ts @@ -32,3 +32,14 @@ export const monacoOptions: Partial = { tabSize: 2, }; + +export const monacoConfigOptions: Partial = { + ...monacoOptions, + lineNumbers: 'off', + renderLineHighlight: 'none', + overviewRulerBorder: false, + overviewRulerLanes: 0, + fontSize: 12, + scrollBeyondLastLine: false, + glyphMargin: false, +}; diff --git a/compiler/apps/playground/lib/compilation.ts b/compiler/apps/playground/lib/compilation.ts new file mode 100644 index 00000000000..10bf0164c0e --- /dev/null +++ b/compiler/apps/playground/lib/compilation.ts @@ -0,0 +1,308 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {parse as babelParse, ParseResult} from '@babel/parser'; +import * as HermesParser from 'hermes-parser'; +import * as t from '@babel/types'; +import BabelPluginReactCompiler, { + CompilerError, + CompilerErrorDetail, + CompilerDiagnostic, + Effect, + ErrorCategory, + parseConfigPragmaForTests, + ValueKind, + type Hook, + PluginOptions, + CompilerPipelineValue, + parsePluginOptions, + printReactiveFunctionWithOutlined, + printFunctionWithOutlined, + type LoggerEvent, +} from 'babel-plugin-react-compiler'; +import {transformFromAstSync} from '@babel/core'; +import type { + CompilerOutput, + CompilerTransformOutput, + PrintedCompilerPipelineValue, +} from '../components/Editor/Output'; + +function parseInput( + input: string, + language: 'flow' | 'typescript', +): ParseResult { + // Extract the first line to quickly check for custom test directives + if (language === 'flow') { + return HermesParser.parse(input, { + babel: true, + flow: 'all', + sourceType: 'module', + enableExperimentalComponentSyntax: true, + }); + } else { + return babelParse(input, { + plugins: ['typescript', 'jsx'], + sourceType: 'module', + }) as ParseResult; + } +} + +function invokeCompiler( + source: string, + language: 'flow' | 'typescript', + options: PluginOptions, +): CompilerTransformOutput { + const ast = parseInput(source, language); + let result = transformFromAstSync(ast, source, { + filename: '_playgroundFile.js', + highlightCode: false, + retainLines: true, + plugins: [[BabelPluginReactCompiler, options]], + ast: true, + sourceType: 'module', + configFile: false, + sourceMaps: true, + babelrc: false, + }); + if (result?.ast == null || result?.code == null || result?.map == null) { + throw new Error('Expected successful compilation'); + } + return { + code: result.code, + sourceMaps: result.map, + language, + }; +} + +const COMMON_HOOKS: Array<[string, Hook]> = [ + [ + 'useFragment', + { + valueKind: ValueKind.Frozen, + effectKind: Effect.Freeze, + noAlias: true, + transitiveMixedData: true, + }, + ], + [ + 'usePaginationFragment', + { + valueKind: ValueKind.Frozen, + effectKind: Effect.Freeze, + noAlias: true, + transitiveMixedData: true, + }, + ], + [ + 'useRefetchableFragment', + { + valueKind: ValueKind.Frozen, + effectKind: Effect.Freeze, + noAlias: true, + transitiveMixedData: true, + }, + ], + [ + 'useLazyLoadQuery', + { + valueKind: ValueKind.Frozen, + effectKind: Effect.Freeze, + noAlias: true, + transitiveMixedData: true, + }, + ], + [ + 'usePreloadedQuery', + { + valueKind: ValueKind.Frozen, + effectKind: Effect.Freeze, + noAlias: true, + transitiveMixedData: true, + }, + ], +]; + +function parseOptions( + source: string, + mode: 'compiler' | 'linter', + configOverrides: string, +): PluginOptions { + // Extract the first line to quickly check for custom test directives + const pragma = source.substring(0, source.indexOf('\n')); + + const parsedPragmaOptions = parseConfigPragmaForTests(pragma, { + compilationMode: 'infer', + environment: + mode === 'linter' + ? { + // enabled in compiler + validateRefAccessDuringRender: false, + // enabled in linter + validateNoSetStateInRender: true, + validateNoSetStateInEffects: true, + validateNoJSXInTryStatements: true, + validateNoImpureFunctionsInRender: true, + validateStaticComponents: true, + validateNoFreezingKnownMutableFunctions: true, + validateNoVoidUseMemo: true, + } + : { + /* use defaults for compiler mode */ + }, + }); + + // Parse config overrides from config editor + let configOverrideOptions: any = {}; + const configMatch = configOverrides.match(/^\s*import.*?\n\n$(.*)$/s); + if (configOverrides.trim()) { + if (configMatch && configMatch[1]) { + const configString = configMatch[1].replace(/satisfies.*$/, '').trim(); + configOverrideOptions = new Function(`return (${configString})`)(); + } else { + throw new Error('Invalid override format'); + } + } + + const opts: PluginOptions = parsePluginOptions({ + ...parsedPragmaOptions, + ...configOverrideOptions, + environment: { + ...parsedPragmaOptions.environment, + ...configOverrideOptions.environment, + customHooks: new Map([...COMMON_HOOKS]), + }, + }); + + return opts; +} + +export function compile( + source: string, + mode: 'compiler' | 'linter', + configOverrides: string, +): [CompilerOutput, 'flow' | 'typescript', PluginOptions | null] { + const results = new Map>(); + const error = new CompilerError(); + const otherErrors: Array = []; + const upsert: (result: PrintedCompilerPipelineValue) => void = result => { + const entry = results.get(result.name); + if (Array.isArray(entry)) { + entry.push(result); + } else { + results.set(result.name, [result]); + } + }; + let language: 'flow' | 'typescript'; + if (source.match(/\@flow/)) { + language = 'flow'; + } else { + language = 'typescript'; + } + let transformOutput; + + let baseOpts: PluginOptions | null = null; + try { + baseOpts = parseOptions(source, mode, configOverrides); + } catch (err) { + error.details.push( + new CompilerErrorDetail({ + category: ErrorCategory.Config, + reason: `Unexpected failure when transforming configs! \n${err}`, + loc: null, + suggestions: null, + }), + ); + } + if (baseOpts) { + try { + const logIR = (result: CompilerPipelineValue): void => { + switch (result.kind) { + case 'ast': { + break; + } + case 'hir': { + upsert({ + kind: 'hir', + fnName: result.value.id, + name: result.name, + value: printFunctionWithOutlined(result.value), + }); + break; + } + case 'reactive': { + upsert({ + kind: 'reactive', + fnName: result.value.id, + name: result.name, + value: printReactiveFunctionWithOutlined(result.value), + }); + break; + } + case 'debug': { + upsert({ + kind: 'debug', + fnName: null, + name: result.name, + value: result.value, + }); + break; + } + default: { + const _: never = result; + throw new Error(`Unhandled result ${result}`); + } + } + }; + // Add logger options to the parsed options + const opts = { + ...baseOpts, + logger: { + debugLogIRs: logIR, + logEvent: (_filename: string | null, event: LoggerEvent): void => { + if (event.kind === 'CompileError') { + otherErrors.push(event.detail); + } + }, + }, + }; + transformOutput = invokeCompiler(source, language, opts); + } catch (err) { + /** + * error might be an invariant violation or other runtime error + * (i.e. object shape that is not CompilerError) + */ + if (err instanceof CompilerError && err.details.length > 0) { + error.merge(err); + } else { + /** + * Handle unexpected failures by logging (to get a stack trace) + * and reporting + */ + error.details.push( + new CompilerErrorDetail({ + category: ErrorCategory.Invariant, + reason: `Unexpected failure when transforming input! \n${err}`, + loc: null, + suggestions: null, + }), + ); + } + } + } + // Only include logger errors if there weren't other errors + if (!error.hasErrors() && otherErrors.length !== 0) { + otherErrors.forEach(e => error.details.push(e)); + } + if (error.hasErrors()) { + return [{kind: 'err', results, error}, language, baseOpts]; + } + return [ + {kind: 'ok', results, transformOutput, errors: error.details}, + language, + baseOpts, + ]; +} From 02bd4458f77e60b5631ff2f0e30b05b8b3a56d6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Fri, 3 Oct 2025 11:52:44 -0400 Subject: [PATCH 026/276] [DevTools] Double clicking the root should jump to the beginning of the timeline (#34704) Unlike the rects, this never toggles. It just jumps. --- .../src/devtools/views/SuspenseTab/SuspenseRects.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 8e43944e7a7..f949631be84 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -330,12 +330,25 @@ function SuspenseRectsContainer(): React$Node { }); } + function handleDoubleClick(event: SyntheticMouseEvent) { + if (event.defaultPrevented) { + // Already clicked on an inner rect + return; + } + event.preventDefault(); + suspenseTreeDispatch({ + type: 'SUSPENSE_SET_TIMELINE_INDEX', + payload: 0, + }); + } + const isRootSelected = roots.includes(inspectedElementID); return (

Date: Fri, 3 Oct 2025 09:13:55 -0700 Subject: [PATCH 027/276] [compiler] Remove @babel/plugin-proposal-private-methods (#34715) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit redo of #34458 but fixing up prettier Co-authored-by: Arnaud Barré --- .../eslint-plugin-react-compiler/babel.config.js | 1 - .../packages/eslint-plugin-react-compiler/package.json | 1 - .../src/shared/RunReactCompiler.ts | 7 +------ .../eslint-plugin-react-compiler/tsup.config.ts | 8 +------- compiler/yarn.lock | 10 +--------- packages/eslint-plugin-react-hooks/package.json | 1 - .../src/shared/RunReactCompiler.ts | 7 +------ scripts/rollup/bundles.js | 1 - yarn.lock | 8 -------- 9 files changed, 4 insertions(+), 40 deletions(-) diff --git a/compiler/packages/eslint-plugin-react-compiler/babel.config.js b/compiler/packages/eslint-plugin-react-compiler/babel.config.js index 8fc8dfbc24c..9be68a85b7f 100644 --- a/compiler/packages/eslint-plugin-react-compiler/babel.config.js +++ b/compiler/packages/eslint-plugin-react-compiler/babel.config.js @@ -10,6 +10,5 @@ module.exports = { plugins: [ ['@babel/plugin-transform-private-property-in-object', {loose: true}], ['@babel/plugin-transform-class-properties', {loose: true}], - ['@babel/plugin-transform-private-methods', {loose: true}], ], }; diff --git a/compiler/packages/eslint-plugin-react-compiler/package.json b/compiler/packages/eslint-plugin-react-compiler/package.json index e5402611e2b..6f15237c832 100644 --- a/compiler/packages/eslint-plugin-react-compiler/package.json +++ b/compiler/packages/eslint-plugin-react-compiler/package.json @@ -14,7 +14,6 @@ "dependencies": { "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", - "@babel/plugin-proposal-private-methods": "^7.18.6", "hermes-parser": "^0.25.1", "zod": "^3.22.4", "zod-validation-error": "^3.0.3" diff --git a/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts b/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts index 53d2f31e0f4..419dc3841c7 100644 --- a/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts +++ b/compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts @@ -8,8 +8,6 @@ import {transformFromAstSync} from '@babel/core'; import {parse as babelParse} from '@babel/parser'; import {File} from '@babel/types'; -// @ts-expect-error: no types available -import PluginProposalPrivateMethods from '@babel/plugin-proposal-private-methods'; import BabelPluginReactCompiler, { parsePluginOptions, validateEnvironmentConfig, @@ -145,10 +143,7 @@ function runReactCompilerImpl({ filename, highlightCode: false, retainLines: true, - plugins: [ - [PluginProposalPrivateMethods, {loose: true}], - [BabelPluginReactCompiler, options], - ], + plugins: [[BabelPluginReactCompiler, options]], sourceType: 'module', configFile: false, babelrc: false, diff --git a/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts b/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts index 3e3b1b13131..4b4f5264394 100644 --- a/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts +++ b/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts @@ -10,13 +10,7 @@ import {defineConfig} from 'tsup'; export default defineConfig({ entry: ['./src/index.ts'], outDir: './dist', - external: [ - '@babel/core', - '@babel/plugin-proposal-private-methods', - 'hermes-parser', - 'zod', - 'zod-validation-error', - ], + external: ['@babel/core', 'hermes-parser', 'zod', 'zod-validation-error'], splitting: false, sourcemap: false, dts: false, diff --git a/compiler/yarn.lock b/compiler/yarn.lock index 696261cbf53..09828954196 100644 --- a/compiler/yarn.lock +++ b/compiler/yarn.lock @@ -326,7 +326,7 @@ lru-cache "^5.1.1" semver "^6.3.1" -"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.25.9", "@babel/helper-create-class-features-plugin@^7.27.0": +"@babel/helper-create-class-features-plugin@^7.25.9", "@babel/helper-create-class-features-plugin@^7.27.0": version "7.27.0" resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.0.tgz" integrity sha512-vSGCvMecvFCd/BdpGlhpXYNhhC4ccxyvQWpbGL4CWbvfEoLFWUZuSuf7s9Aw70flgQF+6vptvgK2IfOnKlRmBg== @@ -706,14 +706,6 @@ "@babel/helper-plugin-utils" "^7.25.9" "@babel/traverse" "^7.25.9" -"@babel/plugin-proposal-private-methods@^7.18.6": - version "7.18.6" - resolved "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz" - integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" - "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2": version "7.21.0-placeholder-for-preset-env.2" resolved "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz" diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index 8f7cfc361d1..06b15baf89d 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -41,7 +41,6 @@ "dependencies": { "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", - "@babel/plugin-proposal-private-methods": "^7.18.6", "hermes-parser": "^0.25.1", "zod": "^3.22.4", "zod-validation-error": "^3.0.3" diff --git a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts index fc9067d2740..acf0564d913 100644 --- a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts +++ b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts @@ -9,8 +9,6 @@ import {transformFromAstSync} from '@babel/core'; import {parse as babelParse} from '@babel/parser'; import {File} from '@babel/types'; -// @ts-expect-error: no types available -import PluginProposalPrivateMethods from '@babel/plugin-proposal-private-methods'; import BabelPluginReactCompiler, { parsePluginOptions, validateEnvironmentConfig, @@ -147,10 +145,7 @@ function runReactCompilerImpl({ filename, highlightCode: false, retainLines: true, - plugins: [ - [PluginProposalPrivateMethods, {loose: true}], - [BabelPluginReactCompiler, options], - ], + plugins: [[BabelPluginReactCompiler, options]], sourceType: 'module', configFile: false, babelrc: false, diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 33bce79e4c7..c66b43797f1 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -1253,7 +1253,6 @@ const bundles = [ preferBuiltins: true, externals: [ '@babel/core', - '@babel/plugin-proposal-private-methods', 'hermes-parser', 'zod', 'zod-validation-error', diff --git a/yarn.lock b/yarn.lock index d2f2e8d017c..568aebc99e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1108,14 +1108,6 @@ "@babel/helper-create-class-features-plugin" "^7.10.4" "@babel/helper-plugin-utils" "^7.10.4" -"@babel/plugin-proposal-private-methods@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea" - integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" - "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2": version "7.21.0-placeholder-for-preset-env.2" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703" From f24d3bbc70ae6544b5aafd250f22f0a68b4a3107 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Fri, 3 Oct 2025 09:47:34 -0700 Subject: [PATCH 028/276] Update readme for eprh (#34714) --- packages/eslint-plugin-react-hooks/README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md index 20d32fe9fd1..afd89ab2263 100644 --- a/packages/eslint-plugin-react-hooks/README.md +++ b/packages/eslint-plugin-react-hooks/README.md @@ -1,8 +1,6 @@ # `eslint-plugin-react-hooks` -This ESLint plugin enforces the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks). - -It is a part of the [Hooks API](https://react.dev/reference/react/hooks) for React. +The official ESLint plugin for [React](https://react.dev) which enforces the [Rules of React](https://react.dev/reference/eslint-plugin-react-hooks) and other best practices. ## Installation @@ -89,7 +87,7 @@ If you're using a version earlier than 5.2.0, the legacy config was simply `reco ### Custom Configuration -If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file: +If you want more fine-grained configuration, you can instead choose to enable specific rules. However, we strongly encourage using the recommended presets — see above — so that you will automatically receive new recommended rules as we add them in future versions of the plugin. #### Flat Config (eslint.config.js|ts) From 71753ac90a009ddefe2f7653165902d55edd1898 Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 3 Oct 2025 12:58:00 -0400 Subject: [PATCH 029/276] [eprh] Remove hermes-parser (#34719) We will be focusing eslint-plugin-react-hooks as the primary OSS-only package for our lint plugin. eslint-plugin-react-compiler will remain as a Meta only package as some limitations of our internal infra require us to use packages that aren't widely adopted by the rest of the industry. This PR removes `hermes-parser`, which was meant to support parsing Flow syntax. --- .../eslint-plugin-react-hooks/package.json | 9 +++--- .../src/shared/RunReactCompiler.ts | 31 +++++-------------- yarn.lock | 12 ------- 3 files changed, 12 insertions(+), 40 deletions(-) diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index 06b15baf89d..99abe449472 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -41,7 +41,6 @@ "dependencies": { "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", - "hermes-parser": "^0.25.1", "zod": "^3.22.4", "zod-validation-error": "^3.0.3" }, @@ -50,14 +49,14 @@ "@babel/preset-typescript": "^7.26.0", "@babel/types": "^7.19.0", "@tsconfig/strictest": "^2.0.5", - "@typescript-eslint/parser-v2": "npm:@typescript-eslint/parser@^2.26.0", - "@typescript-eslint/parser-v3": "npm:@typescript-eslint/parser@^3.10.0", - "@typescript-eslint/parser-v4": "npm:@typescript-eslint/parser@^4.1.0", - "@typescript-eslint/parser-v5": "npm:@typescript-eslint/parser@^5.62.0", "@types/eslint": "^8.56.12", "@types/estree": "^1.0.6", "@types/estree-jsx": "^1.0.5", "@types/node": "^20.2.5", + "@typescript-eslint/parser-v2": "npm:@typescript-eslint/parser@^2.26.0", + "@typescript-eslint/parser-v3": "npm:@typescript-eslint/parser@^3.10.0", + "@typescript-eslint/parser-v4": "npm:@typescript-eslint/parser@^4.1.0", + "@typescript-eslint/parser-v5": "npm:@typescript-eslint/parser@^5.62.0", "babel-eslint": "^10.0.3", "eslint-v7": "npm:eslint@^7.7.0", "eslint-v8": "npm:eslint@^8.57.1", diff --git a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts index acf0564d913..7755dbe947f 100644 --- a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts +++ b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts @@ -17,7 +17,6 @@ import BabelPluginReactCompiler, { LoggerEvent, } from 'babel-plugin-react-compiler'; import type {SourceCode} from 'eslint'; -import * as HermesParser from 'hermes-parser'; import {isDeepStrictEqual} from 'util'; import type {ParseResult} from '@babel/parser'; @@ -78,7 +77,6 @@ function getFlowSuppressions( return results; } - function runReactCompilerImpl({ sourceCode, filename, @@ -115,27 +113,14 @@ function runReactCompilerImpl({ } let babelAST: ParseResult | null = null; - if (filename.endsWith('.tsx') || filename.endsWith('.ts')) { - try { - babelAST = babelParse(sourceCode.text, { - sourceFilename: filename, - sourceType: 'unambiguous', - plugins: ['typescript', 'jsx'], - }); - } catch { - /* empty */ - } - } else { - try { - babelAST = HermesParser.parse(sourceCode.text, { - babel: true, - enableExperimentalComponentSyntax: true, - sourceFilename: filename, - sourceType: 'module', - }); - } catch { - /* empty */ - } + try { + babelAST = babelParse(sourceCode.text, { + sourceFilename: filename, + sourceType: 'unambiguous', + plugins: ['typescript', 'jsx'], + }); + } catch (err: unknown) { + /* empty */ } if (babelAST != null) { diff --git a/yarn.lock b/yarn.lock index 568aebc99e6..f5ac1f649dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10190,11 +10190,6 @@ hermes-eslint@^0.32.0: hermes-estree "0.32.0" hermes-parser "0.32.0" -hermes-estree@0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" - integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== - hermes-estree@0.29.1: version "0.29.1" resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.29.1.tgz#043c7db076e0e8ef8c5f6ed23828d1ba463ebcc5" @@ -10219,13 +10214,6 @@ hermes-parser@0.32.0, hermes-parser@^0.32.0: dependencies: hermes-estree "0.32.0" -hermes-parser@^0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" - integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== - dependencies: - hermes-estree "0.25.1" - homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8" From d6eb735938bc67b41ad723206ea395ba4d761139 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Fri, 3 Oct 2025 10:08:20 -0700 Subject: [PATCH 030/276] [compiler] Update for Zod v3/v4 compatibility (#34717) Partial redo of #34710. The changes there tried to use `z.function(args, return)` to be compatible across Zod v3 and v4, but Zod 4's function API has completely changed. Instead, I've updated to just use `z.any()` where we expect a function, and manually validate that it's a function before we call the value. We already have validation of the return type (also using Zod). Co-authored-by: kolvian --- .../babel-plugin-react-compiler/package.json | 4 +- .../src/HIR/Environment.ts | 10 +++- .../src/__tests__/envConfig-test.ts | 4 +- .../eslint-plugin-react-compiler/package.json | 4 +- .../react-compiler-healthcheck/package.json | 4 +- .../packages/react-mcp-server/package.json | 2 +- compiler/yarn.lock | 49 +++++-------------- .../eslint-plugin-react-hooks/package.json | 4 +- 8 files changed, 31 insertions(+), 50 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/package.json b/compiler/packages/babel-plugin-react-compiler/package.json index 75cf3ba53ce..8d3f1c8ae68 100644 --- a/compiler/packages/babel-plugin-react-compiler/package.json +++ b/compiler/packages/babel-plugin-react-compiler/package.json @@ -52,8 +52,8 @@ "react-dom": "0.0.0-experimental-4beb1fd8-20241118", "ts-jest": "^29.1.1", "ts-node": "^10.9.2", - "zod": "^3.22.4", - "zod-validation-error": "^2.1.0" + "zod": "^3.22.4 || ^4.0.0", + "zod-validation-error": "^3.0.3 || ^4.0.0" }, "resolutions": { "./**/@babel/parser": "7.7.4", diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index 9fa88680ca2..7889e13c2f8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -159,7 +159,7 @@ export const EnvironmentConfigSchema = z.object({ * A function that, given the name of a module, can optionally return a description * of that module's type signature. */ - moduleTypeProvider: z.nullable(z.function().args(z.string())).default(null), + moduleTypeProvider: z.nullable(z.any()).default(null), /** * A list of functions which the application compiles as macros, where @@ -249,7 +249,7 @@ export const EnvironmentConfigSchema = z.object({ * Allows specifying a function that can populate HIR with type information from * Flow */ - flowTypeProvider: z.nullable(z.function().args(z.string())).default(null), + flowTypeProvider: z.nullable(z.any()).default(null), /** * Enables inference of optional dependency chains. Without this flag @@ -906,6 +906,12 @@ export class Environment { if (moduleTypeProvider == null) { return null; } + if (typeof moduleTypeProvider !== 'function') { + CompilerError.throwInvalidConfig({ + reason: `Expected a function for \`moduleTypeProvider\``, + loc, + }); + } const unparsedModuleConfig = moduleTypeProvider(moduleName); if (unparsedModuleConfig != null) { const parsedModuleConfig = TypeSchema.safeParse(unparsedModuleConfig); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/envConfig-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/envConfig-test.ts index f8a6330977f..933990b6bdd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/envConfig-test.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/envConfig-test.ts @@ -20,7 +20,7 @@ describe('parseConfigPragma()', () => { validateHooksUsage: 1, } as any); }).toThrowErrorMatchingInlineSnapshot( - `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: Expected boolean, received number at "validateHooksUsage"."`, + `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: Invalid input: expected boolean, received number at "validateHooksUsage"."`, ); }); @@ -38,7 +38,7 @@ describe('parseConfigPragma()', () => { ], } as any); }).toThrowErrorMatchingInlineSnapshot( - `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: autodepsIndex must be > 0 at "inferEffectDependencies[0].autodepsIndex"."`, + `"Error: Could not validate environment config. Update React Compiler config to fix the error. Validation error: AutodepsIndex must be > 0 at "inferEffectDependencies[0].autodepsIndex"."`, ); }); diff --git a/compiler/packages/eslint-plugin-react-compiler/package.json b/compiler/packages/eslint-plugin-react-compiler/package.json index 6f15237c832..6c95bf495c6 100644 --- a/compiler/packages/eslint-plugin-react-compiler/package.json +++ b/compiler/packages/eslint-plugin-react-compiler/package.json @@ -15,8 +15,8 @@ "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "hermes-parser": "^0.25.1", - "zod": "^3.22.4", - "zod-validation-error": "^3.0.3" + "zod": "^3.22.4 || ^4.0.0", + "zod-validation-error": "^3.0.3 || ^4.0.0" }, "devDependencies": { "@babel/preset-env": "^7.22.4", diff --git a/compiler/packages/react-compiler-healthcheck/package.json b/compiler/packages/react-compiler-healthcheck/package.json index 2f6d625eb83..61825b73d83 100644 --- a/compiler/packages/react-compiler-healthcheck/package.json +++ b/compiler/packages/react-compiler-healthcheck/package.json @@ -17,8 +17,8 @@ "fast-glob": "^3.3.2", "ora": "5.4.1", "yargs": "^17.7.2", - "zod": "^3.22.4", - "zod-validation-error": "^3.0.3" + "zod": "^3.22.4 || ^4.0.0", + "zod-validation-error": "^3.0.3 || ^4.0.0" }, "devDependencies": {}, "engines": { diff --git a/compiler/packages/react-mcp-server/package.json b/compiler/packages/react-mcp-server/package.json index 191ff4f9e19..4d744c1d667 100644 --- a/compiler/packages/react-mcp-server/package.json +++ b/compiler/packages/react-mcp-server/package.json @@ -24,7 +24,7 @@ "html-to-text": "^9.0.5", "prettier": "^3.3.3", "puppeteer": "^24.7.2", - "zod": "^3.23.8" + "zod": "^3.22.4 || ^4.0.0" }, "devDependencies": { "@types/html-to-text": "^9.0.4", diff --git a/compiler/yarn.lock b/compiler/yarn.lock index 09828954196..daafc705fdc 100644 --- a/compiler/yarn.lock +++ b/compiler/yarn.lock @@ -10486,16 +10486,7 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -10568,14 +10559,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11352,7 +11336,7 @@ workerpool@^6.5.1: resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.5.1.tgz" integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -11370,15 +11354,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz" @@ -11530,17 +11505,17 @@ zod-to-json-schema@^3.24.1: resolved "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.5.tgz" integrity sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g== -zod-validation-error@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-2.1.0.tgz" - integrity sha512-VJh93e2wb4c3tWtGgTa0OF/dTt/zoPCPzXq4V11ZjxmEAFaPi/Zss1xIZdEB5RD8GD00U0/iVXgqkF77RV7pdQ== +"zod-validation-error@^3.0.3 || ^4.0.0": + version "4.0.2" + resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918" + integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ== -zod-validation-error@^3.0.3: - version "3.0.3" - resolved "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.0.3.tgz" - integrity sha512-cETTrcMq3Ze58vhdR0zD37uJm/694I6mAxcf/ei5bl89cC++fBNxrC2z8lkFze/8hVMPwrbtrwXHR2LB50fpHw== +"zod@^3.22.4 || ^4.0.0": + version "4.1.11" + resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.11.tgz#4aab62f76cfd45e6c6166519ba31b2ea019f75f5" + integrity sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg== -zod@^3.22.4, zod@^3.23.8, zod@^3.24.1: +zod@^3.23.8, zod@^3.24.1: version "3.24.3" resolved "https://registry.npmjs.org/zod/-/zod-3.24.3.tgz" integrity sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg== diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index 99abe449472..557e48af65f 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -41,8 +41,8 @@ "dependencies": { "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", - "zod": "^3.22.4", - "zod-validation-error": "^3.0.3" + "zod": "^3.22.4 || ^4.0.0", + "zod-validation-error": "^3.0.3 || ^4.0.0" }, "devDependencies": { "@babel/eslint-parser": "^7.11.4", From 614a945d9d1031fadcf211a632cb2d7fda495a4f Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Fri, 3 Oct 2025 19:48:28 +0200 Subject: [PATCH 031/276] React DevTools 7.0.0 (#34692) [Preview](https://github.com/eps1lon/react/blob/sebbie/09-28-react_devtools_7.0.0/packages/react-devtools/CHANGELOG.md#700) Suspense tab is omitted since that's gated on Canary or 19.3. Will draft a separate blog post for suspended by and open-in-editor instructions while the extension is in review. --- packages/react-devtools-core/package.json | 2 +- packages/react-devtools-inline/package.json | 2 +- packages/react-devtools-timeline/package.json | 2 +- packages/react-devtools/CHANGELOG.md | 43 +++++++++++++++++++ packages/react-devtools/package.json | 2 +- 5 files changed, 47 insertions(+), 4 deletions(-) diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json index 8ce8f436e81..c8facd1a24d 100644 --- a/packages/react-devtools-core/package.json +++ b/packages/react-devtools-core/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-core", - "version": "6.1.5", + "version": "7.0.0", "description": "Use react-devtools outside of the browser", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index 9d207527b81..0363530cd10 100644 --- a/packages/react-devtools-inline/package.json +++ b/packages/react-devtools-inline/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-inline", - "version": "6.1.5", + "version": "7.0.0", "description": "Embed react-devtools within a website", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json index 6663eafd3fe..2f54399ce25 100644 --- a/packages/react-devtools-timeline/package.json +++ b/packages/react-devtools-timeline/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "react-devtools-timeline", - "version": "6.1.5", + "version": "7.0.0", "license": "MIT", "dependencies": { "@elg/speedscope": "1.9.0-a6f84db", diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md index 1acf089bf9c..0fc637b9946 100644 --- a/packages/react-devtools/CHANGELOG.md +++ b/packages/react-devtools/CHANGELOG.md @@ -4,6 +4,49 @@ --- +### 7.0.0 +Oct 2, 2025 + +Add a "suspended by" section showing all causes of why the inspected element suspended. This includes: + +- `await` in Server Components +- `React.lazy` +- `use()` +- suspensey images, CSS, and fonts + +Add a Code Editor Sidebar Pane in the Chrome Sources Tab (@sebmarkbage [#33968](https://github.com/facebook/react/pull/33968), [#33987](https://github.com/facebook/react/pull/33987), [#33988](https://github.com/facebook/react/pull/33988)) + +Add Option to Open Local Files directly in External Editor (@sebmarkbage [#33983](https://github.com/facebook/react/pull/33983), [#33985](https://github.com/facebook/react/pull/33985), [#33965](https://github.com/facebook/react/pull/33965)) + +#### Other changes + +- Allow inspection of React tree before streaming has finished (@eps1lon [#34360](https://github.com/facebook/react/pull/34360)) +- Always attempt to mount dehydrated roots (@eps1lon [#34209](https://github.com/facebook/react/pull/34209)) +- Show `name` prop of Suspense / Activity in the Components Tree view (@sebmarkbage [#34135](https://github.com/facebook/react/pull/34135)) +- 1st class support of used Thenables (@sebmarkbage, @eps1lon: [#32989](https://github.com/facebook/react/pull/32989), [#34097](https://github.com/facebook/react/pull/34097)) +- Allow inspecting cause, name, message, stack of Errors in props (@eps1lon [#33023](https://github.com/facebook/react/pull/33023)) +- Allow Introspection of React Elements and React.lazy (@sebmarkbage [#34129](https://github.com/facebook/react/pull/34129)) +- Fix "View source" for sources with URLs that aren't normalized (@eps1lon [#32951](https://github.com/facebook/react/pull/32951)) +- Fix symbolication with Index Source Maps (@eps1lon [#34300](https://github.com/facebook/react/pull/34300)) +- Ignore List Stack Traces (@sebmarkbage [#34210](https://github.com/facebook/react/pull/34210)) +- Linkify Source View (@sebmarkbage [#33954](https://github.com/facebook/react/pull/33954)) +- Only show state for ClassComponents (@sebmarkbage [#34091](https://github.com/facebook/react/pull/34091)) +- Show Owner Stacks in "rendered by" View (@sebmarkbage [#34130](https://github.com/facebook/react/pull/34130)) +- Stop mounting empty roots (@eps1lon [#34467](https://github.com/facebook/react/pull/34467)) +- Show changed hooks names in the Profiler tab (@piotrski [#31398](https://github.com/facebook/react/pull/31398)) +- Display native tag for host components for Native (@ruslan [#32762](https://github.com/facebook/react/pull/32762)) +- Static Components panel layout (@ruslan [#33696](https://github.com/facebook/react/pull/33696), [#33517](https://github.com/facebook/react/pull/33517), [#34088](https://github.com/facebook/react/pull/34088)) +- Add Badge to Owners and sometimes stack traces (@sebmarkbage [#34106](https://github.com/facebook/react/pull/34106)) +- Make a non-editable name of KeyValue clickable ([34095](https://github.com/facebook/react/pull/34095)) +- Only inspect elements on left mouseclick (@eps1lon [#34361](https://github.com/facebook/react/pull/34361)) +- Rerender when the browser theme changes (@sebmarkbage [#33992](https://github.com/facebook/react/pull/33992)) +- Stop using native `title` for buttons/icons (@eps1lon [#34379](https://github.com/facebook/react/pull/34379)) +- Style clickable Owner components with angle brackets and bold (@sebmarkbage [#34096](https://github.com/facebook/react/pull/34096)) +- Swap Components tab layout based on container size (@eps1lon [#34035](https://github.com/facebook/react/pull/34035)) +- Use Visually Lighter Skeletons (@sebmarkbage [#34185](https://github.com/facebook/react/pull/34185)) + +--- + ### 6.1.5 July 4, 2025 diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json index 01d6e39c5e1..17c4c836e60 100644 --- a/packages/react-devtools/package.json +++ b/packages/react-devtools/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools", - "version": "6.1.5", + "version": "7.0.0", "description": "Use react-devtools outside of the browser", "license": "MIT", "repository": { From 4fdf7cf249ecb205d20b65b5208d113ea664cb9a Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 3 Oct 2025 14:41:34 -0400 Subject: [PATCH 032/276] [ci] Fix runtime_prereleases (#34722) When using the "only" or "skip" option in the workflow, we were adding the `--skipTests` param, but that isn't an actual option: https://github.com/facebook/react/blob/1de32a5e75fe96ac3c1b728a117010e11673f6ed/scripts/release/publish-commands/parse-params.js --- .github/workflows/runtime_prereleases.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/runtime_prereleases.yml b/.github/workflows/runtime_prereleases.yml index ee340e079f3..235108996d3 100644 --- a/.github/workflows/runtime_prereleases.yml +++ b/.github/workflows/runtime_prereleases.yml @@ -82,7 +82,6 @@ jobs: run: | scripts/release/publish.js \ --ci \ - --skipTests \ --tags=${{ inputs.dist_tag }} \ --onlyPackages=${{ inputs.only_packages }} ${{ (inputs.dry && '') || '\'}} ${{ inputs.dry && '--dry' || '' }} @@ -91,7 +90,6 @@ jobs: run: | scripts/release/publish.js \ --ci \ - --skipTests \ --tags=${{ inputs.dist_tag }} \ --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}} ${{ inputs.dry && '--dry' || '' }} From bc2356176bca3e42e84ce8d196fdc525677cc36b Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 3 Oct 2025 16:37:55 -0400 Subject: [PATCH 033/276] [ci] Fix incorrect filtering logic for prereleases (#34725) The workflow was correctly publishing the package(s) specified in `only`, but due to incorrect logic it would also run the 'Publish all packages' step. --- .github/workflows/runtime_prereleases.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/runtime_prereleases.yml b/.github/workflows/runtime_prereleases.yml index 235108996d3..6559b144997 100644 --- a/.github/workflows/runtime_prereleases.yml +++ b/.github/workflows/runtime_prereleases.yml @@ -93,7 +93,7 @@ jobs: --tags=${{ inputs.dist_tag }} \ --skipPackages=${{ inputs.skip_packages }} ${{ (inputs.dry && '') || '\'}} ${{ inputs.dry && '--dry' || '' }} - - if: '${{ !(inputs.skip_packages && inputs.only_packages) }}' + - if: '${{ !inputs.skip_packages && !inputs.only_packages }}' name: 'Publish all packages' run: | scripts/release/publish.js \ From d3f84a433a57562be1fc2b3331ddc54bdb946582 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Fri, 3 Oct 2025 22:03:48 +0100 Subject: [PATCH 034/276] [DevTools] Bump version for extensions (#34723) `./scripts/devtools/prepare-release.js` actually does automate the version bump, but only path / minor ones. --- packages/react-devtools-extensions/chrome/manifest.json | 4 ++-- packages/react-devtools-extensions/edge/manifest.json | 4 ++-- packages/react-devtools-extensions/firefox/manifest.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 127185f73e4..0b5285e91a9 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/packages/react-devtools-extensions/chrome/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Chrome Developer Tools.", - "version": "6.1.5", - "version_name": "6.1.5", + "version": "7.0.0", + "version_name": "7.0.0", "minimum_chrome_version": "114", "icons": { "16": "icons/16-production.png", diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json index f930a6d0ac7..342af4abb3a 100644 --- a/packages/react-devtools-extensions/edge/manifest.json +++ b/packages/react-devtools-extensions/edge/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.", - "version": "6.1.5", - "version_name": "6.1.5", + "version": "7.0.0", + "version_name": "7.0.0", "minimum_chrome_version": "114", "icons": { "16": "icons/16-production.png", diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index 24b5b11323f..bc12ac0fcde 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Firefox Developer Tools.", - "version": "6.1.5", + "version": "7.0.0", "browser_specific_settings": { "gecko": { "id": "@react-devtools", From a2329c10ffc153303ad5a65b99d91d8500ceabdd Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 3 Oct 2025 17:58:06 -0400 Subject: [PATCH 035/276] [eprh] 6.1.1 changelog (#34726) Update changelog for 6.1.1 --- packages/eslint-plugin-react-hooks/CHANGELOG.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md index b4243fbfddb..cd376cd4dca 100644 --- a/packages/eslint-plugin-react-hooks/CHANGELOG.md +++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md @@ -1,6 +1,17 @@ +## 6.1.1 + +**Note:** 6.1.0 accidentally allowed use of `recommended` without flat config, causing errors when used with ESLint v9's `defineConfig()` helper. This has been fixed in 6.1.1. + +- Fix `recommended` config for flat config compatibility. The `recommended` config has been converted to flat config format. Non-flat config users should use `recommended-legacy` instead. ([@poteto](https://github.com/poteto) in [#34700](https://github.com/facebook/react/pull/34700)) +- Add `recommended-latest` and `recommended-latest-legacy` configs that include React Compiler rules. ([@poteto](https://github.com/poteto) in [#34675](https://github.com/facebook/react/pull/34675)) +- Remove unused `NoUnusedOptOutDirectives` rule. ([@poteto](https://github.com/poteto) in [#34703](https://github.com/facebook/react/pull/34703)) +- Remove `hermes-parser` and dependency. ([@poteto](https://github.com/poteto) in [#34719](https://github.com/facebook/react/pull/34719)) +- Remove `@babel/plugin-proposal-private-methods` dependency. ([@ArnaudBarre](https://github.com/ArnaudBarre) and [@josephsavona](https://github.com/josephsavona) in [#34715](https://github.com/facebook/react/pull/34715)) +- Update for Zod v3/v4 compatibility. ([@kolian](https://github.com/kolvian) and [@josephsavona](https://github.com/josephsavona) in [#34717](https://github.com/facebook/react/pull/34717)) + ## 6.1.0 -**Note:** Version 6.0.0 was mistakenly released and immediately deprecated and untagged on npm. This is the first official 6.x major release and includes breaking changes. +**Note:** Version 6.0.0 was mistakenly released and immediately deprecated and untagged on npm. This is the first official 6.x major release and includes breaking changes. - **Breaking:** Require Node.js 18 or newer. ([@michaelfaith](https://github.com/michaelfaith) in [#32458](https://github.com/facebook/react/pull/32458)) - **Breaking:** Flat config is now the default `recommended` preset. Legacy config moved to `recommended-legacy`. ([@michaelfaith](https://github.com/michaelfaith) in [#32457](https://github.com/facebook/react/pull/32457)) From 0e79784702927f1d1c6c212475e7c5141fa13a8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Sun, 5 Oct 2025 08:13:22 -0400 Subject: [PATCH 036/276] [DevTools] Use documentElement to override cmd+F (#34734) We override Cmd+F to jump to our search input instead of searching through the HTML. This is ofc critical since our view virtualized. However, Chrome DevTools installs its own listener on the document as well (in the bubble phase) so if we prevent it at the document level it's too late and it ends up stealing the focus instead. If we instead listen at the documentElement it works as intended. --- .../src/devtools/views/SearchInput.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js index d50026d73be..3d94128bd67 100644 --- a/packages/react-devtools-shared/src/devtools/views/SearchInput.js +++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js @@ -64,8 +64,9 @@ export default function SearchInput({ const handleKeyDown = (event: KeyboardEvent) => { const {key, metaKey} = event; if (key === 'f' && metaKey) { - if (inputRef.current !== null) { - inputRef.current.focus(); + const inputElement = inputRef.current; + if (inputElement !== null) { + inputElement.focus(); event.preventDefault(); event.stopPropagation(); } @@ -75,10 +76,14 @@ export default function SearchInput({ // It's important to listen to the ownerDocument to support the browser extension. // Here we use portals to render individual tabs (e.g. Profiler), // and the root document might belong to a different window. - const ownerDocument = inputRef.current.ownerDocument; - ownerDocument.addEventListener('keydown', handleKeyDown); + const ownerDocumentElement = inputRef.current.ownerDocument.documentElement; + if (ownerDocumentElement === null) { + return; + } + ownerDocumentElement.addEventListener('keydown', handleKeyDown); - return () => ownerDocument.removeEventListener('keydown', handleKeyDown); + return () => + ownerDocumentElement.removeEventListener('keydown', handleKeyDown); }, []); return ( From 62ff1e61fce3eca9346716715679e7604477d84d Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Sun, 5 Oct 2025 13:35:07 +0100 Subject: [PATCH 037/276] Revert "[DevTools] Always include the root in the timeline and select it by default" (#34739) Reverts facebook/react#34654 --- .../devtools/views/SuspenseTab/SuspenseTab.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index f698f0ae165..f7b63fa2c62 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -34,10 +34,6 @@ import { SuspenseTreeStateContext, } from './SuspenseTreeContext'; import {StoreContext, OptionsContext} from '../context'; -import { - TreeDispatcherContext, - TreeStateContext, -} from '../Components/TreeContext'; import Button from '../Button'; import Toggle from '../Toggle'; import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent'; @@ -185,18 +181,6 @@ function SuspenseTab(_: {}) { treeListHorizontalFraction, } = state; - const {inspectedElementID} = useContext(TreeStateContext); - const {timeline} = useContext(SuspenseTreeStateContext); - const treeDispatch = useContext(TreeDispatcherContext); - useLayoutEffect(() => { - // If the inspected element is still null and we've loaded a timeline, we can set the initial selection. - // TODO: This tab should use its own source of truth instead so we only show suspense boundaries. - if (inspectedElementID === null && timeline.length > 0) { - const milestone = timeline[timeline.length - 1]; - treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: milestone}); - } - }, [timeline, inspectedElementID]); - useLayoutEffect(() => { const wrapperElement = wrapperTreeRef.current; From 3b2a3981068e0438ca75ae34b2a98616fdaf62ac Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Sun, 5 Oct 2025 13:45:41 +0100 Subject: [PATCH 038/276] [DevTools] Bump version of react-devtools-core for react-devtools (#34740) This one was overlooked and yarn.lock was not synced. Related: - https://github.com/facebook/react/pull/34692 - https://github.com/facebook/react/pull/34723 --- packages/react-devtools/package.json | 2 +- yarn.lock | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json index 17c4c836e60..ea8bab1c95e 100644 --- a/packages/react-devtools/package.json +++ b/packages/react-devtools/package.json @@ -26,7 +26,7 @@ "electron": "^23.1.2", "internal-ip": "^6.2.0", "minimist": "^1.2.3", - "react-devtools-core": "6.1.5", + "react-devtools-core": "7.0.0", "update-notifier": "^2.1.0" } } diff --git a/yarn.lock b/yarn.lock index f5ac1f649dd..ffb13120b80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18233,12 +18233,12 @@ zip-stream@^2.1.2: compress-commons "^2.1.1" readable-stream "^3.4.0" -zod-validation-error@^3.0.3: - version "3.4.0" - resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.4.0.tgz#3a8a1f55c65579822d7faa190b51336c61bee2a6" - integrity sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ== +"zod-validation-error@^3.0.3 || ^4.0.0": + version "4.0.2" + resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918" + integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ== -zod@^3.22.4: - version "3.24.2" - resolved "https://registry.yarnpkg.com/zod/-/zod-3.24.2.tgz#8efa74126287c675e92f46871cfc8d15c34372b3" - integrity sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ== +"zod@^3.22.4 || ^4.0.0": + version "4.1.11" + resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.11.tgz#4aab62f76cfd45e6c6166519ba31b2ea019f75f5" + integrity sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg== From 1be3ce9996f05ceb74fd8c11f08a84a5e57098f3 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Mon, 6 Oct 2025 01:13:22 +0200 Subject: [PATCH 039/276] [Fiber] Bail out of diffing wide objects and arrays (#34742) --- .../__tests__/ReactPerformanceTrack-test.js | 327 ++++++++++++++++++ .../shared/ReactPerformanceTrackProperties.js | 71 +++- 2 files changed, 395 insertions(+), 3 deletions(-) create mode 100644 packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js diff --git a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js new file mode 100644 index 00000000000..72310812482 --- /dev/null +++ b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js @@ -0,0 +1,327 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + * @jest-environment node + */ + +let React; +let ReactNoop; +let Scheduler; +let act; +let useEffect; + +describe('ReactPerformanceTracks', () => { + beforeEach(() => { + Object.defineProperty(performance, 'measure', { + value: jest.fn(), + configurable: true, + }); + console.timeStamp = () => {}; + jest.spyOn(console, 'timeStamp').mockImplementation(() => {}); + + jest.resetModules(); + + React = require('react'); + ReactNoop = require('react-noop-renderer'); + Scheduler = require('scheduler'); + act = require('internal-test-utils').act; + useEffect = React.useEffect; + }); + + // @gate __DEV__ && enableComponentPerformanceTrack + it('shows a hint if an update is triggered by a deeply equal object', async () => { + const App = function App({items}) { + Scheduler.unstable_advanceTime(10); + useEffect(() => {}, [items]); + }; + + Scheduler.unstable_advanceTime(1); + const items = ['one', 'two']; + await act(() => { + ReactNoop.render(); + }); + + expect(performance.measure.mock.calls).toEqual([ + [ + 'Mount', + { + detail: { + devtools: { + color: 'warning', + properties: null, + tooltipText: 'Mount', + track: 'Components ⚛', + }, + }, + end: 11, + start: 1, + }, + ], + ]); + performance.measure.mockClear(); + + Scheduler.unstable_advanceTime(10); + await act(() => { + ReactNoop.render(); + }); + + expect(performance.measure.mock.calls).toEqual([ + [ + 'App', + { + detail: { + devtools: { + color: 'primary-dark', + properties: [ + ['Changed Props', ''], + [' items', 'Array'], + ['+ 2', '…'], + ], + tooltipText: 'App', + track: 'Components ⚛', + }, + }, + end: 31, + start: 21, + }, + ], + ]); + }); + + // @gate __DEV__ && enableComponentPerformanceTrack + it('bails out of diffing wide arrays', async () => { + const App = function App({items}) { + Scheduler.unstable_advanceTime(10); + React.useEffect(() => {}, [items]); + }; + + Scheduler.unstable_advanceTime(1); + const items = Array.from({length: 1000}, (_, i) => i); + await act(() => { + ReactNoop.render(); + }); + + expect(performance.measure.mock.calls).toEqual([ + [ + 'Mount', + { + detail: { + devtools: { + color: 'warning', + properties: null, + tooltipText: 'Mount', + track: 'Components ⚛', + }, + }, + end: 11, + start: 1, + }, + ], + ]); + performance.measure.mockClear(); + + Scheduler.unstable_advanceTime(10); + await act(() => { + ReactNoop.render(); + }); + + expect(performance.measure.mock.calls).toEqual([ + [ + 'App', + { + detail: { + devtools: { + color: 'primary-dark', + properties: [ + ['Changed Props', ''], + [' items', 'Array'], + [ + 'Previous object has more than 100 properties. React will not attempt to diff objects with too many properties.', + '', + ], + [ + 'Next object has more than 100 properties. React will not attempt to diff objects with too many properties.', + '', + ], + ], + tooltipText: 'App', + track: 'Components ⚛', + }, + }, + end: 31, + start: 21, + }, + ], + ]); + }); + + // @gate __DEV__ && enableComponentPerformanceTrack + it('does not show all properties of wide objects', async () => { + const App = function App({items}) { + Scheduler.unstable_advanceTime(10); + React.useEffect(() => {}, [items]); + }; + + Scheduler.unstable_advanceTime(1); + await act(() => { + ReactNoop.render(); + }); + + expect(performance.measure.mock.calls).toEqual([ + [ + 'Mount', + { + detail: { + devtools: { + color: 'warning', + properties: null, + tooltipText: 'Mount', + track: 'Components ⚛', + }, + }, + end: 11, + start: 1, + }, + ], + ]); + performance.measure.mockClear(); + + Scheduler.unstable_advanceTime(10); + + const bigData = new Uint8Array(1000); + await act(() => { + ReactNoop.render(); + }); + + expect(performance.measure.mock.calls).toEqual([ + [ + 'App', + { + detail: { + devtools: { + color: 'primary-dark', + properties: [ + ['Changed Props', ''], + [' data', ''], + ['– buffer', 'null'], + ['+ buffer', 'Uint8Array'], + ['+ 0', '0'], + ['+ 1', '0'], + ['+ 2', '0'], + ['+ 3', '0'], + ['+ 4', '0'], + ['+ 5', '0'], + ['+ 6', '0'], + ['+ 7', '0'], + ['+ 8', '0'], + ['+ 9', '0'], + ['+ 10', '0'], + ['+ 11', '0'], + ['+ 12', '0'], + ['+ 13', '0'], + ['+ 14', '0'], + ['+ 15', '0'], + ['+ 16', '0'], + ['+ 17', '0'], + ['+ 18', '0'], + ['+ 19', '0'], + ['+ 20', '0'], + ['+ 21', '0'], + ['+ 22', '0'], + ['+ 23', '0'], + ['+ 24', '0'], + ['+ 25', '0'], + ['+ 26', '0'], + ['+ 27', '0'], + ['+ 28', '0'], + ['+ 29', '0'], + ['+ 30', '0'], + ['+ 31', '0'], + ['+ 32', '0'], + ['+ 33', '0'], + ['+ 34', '0'], + ['+ 35', '0'], + ['+ 36', '0'], + ['+ 37', '0'], + ['+ 38', '0'], + ['+ 39', '0'], + ['+ 40', '0'], + ['+ 41', '0'], + ['+ 42', '0'], + ['+ 43', '0'], + ['+ 44', '0'], + ['+ 45', '0'], + ['+ 46', '0'], + ['+ 47', '0'], + ['+ 48', '0'], + ['+ 49', '0'], + ['+ 50', '0'], + ['+ 51', '0'], + ['+ 52', '0'], + ['+ 53', '0'], + ['+ 54', '0'], + ['+ 55', '0'], + ['+ 56', '0'], + ['+ 57', '0'], + ['+ 58', '0'], + ['+ 59', '0'], + ['+ 60', '0'], + ['+ 61', '0'], + ['+ 62', '0'], + ['+ 63', '0'], + ['+ 64', '0'], + ['+ 65', '0'], + ['+ 66', '0'], + ['+ 67', '0'], + ['+ 68', '0'], + ['+ 69', '0'], + ['+ 70', '0'], + ['+ 71', '0'], + ['+ 72', '0'], + ['+ 73', '0'], + ['+ 74', '0'], + ['+ 75', '0'], + ['+ 76', '0'], + ['+ 77', '0'], + ['+ 78', '0'], + ['+ 79', '0'], + ['+ 80', '0'], + ['+ 81', '0'], + ['+ 82', '0'], + ['+ 83', '0'], + ['+ 84', '0'], + ['+ 85', '0'], + ['+ 86', '0'], + ['+ 87', '0'], + ['+ 88', '0'], + ['+ 89', '0'], + ['+ 90', '0'], + ['+ 91', '0'], + ['+ 92', '0'], + ['+ 93', '0'], + ['+ 94', '0'], + ['+ 95', '0'], + ['+ 96', '0'], + ['+ 97', '0'], + ['+ 98', '0'], + ['+ 99', '0'], + [ + '+ Only 100 properties are shown. React will not log more properties of this object.', + '', + ], + ], + tooltipText: 'App', + track: 'Components ⚛', + }, + }, + end: 31, + start: 21, + }, + ], + ]); + }); +}); diff --git a/packages/shared/ReactPerformanceTrackProperties.js b/packages/shared/ReactPerformanceTrackProperties.js index 160c839c3ed..87231c20c49 100644 --- a/packages/shared/ReactPerformanceTrackProperties.js +++ b/packages/shared/ReactPerformanceTrackProperties.js @@ -18,9 +18,13 @@ const EMPTY_ARRAY = 0; const COMPLEX_ARRAY = 1; const PRIMITIVE_ARRAY = 2; // Primitive values only const ENTRIES_ARRAY = 3; // Tuple arrays of string and value (like Headers, Map, etc) + +// Showing wider objects in the devtools is not useful. +const OBJECT_WIDTH_LIMIT = 100; + function getArrayKind(array: Object): 0 | 1 | 2 | 3 { let kind: 0 | 1 | 2 | 3 = EMPTY_ARRAY; - for (let i = 0; i < array.length; i++) { + for (let i = 0; i < array.length && i < OBJECT_WIDTH_LIMIT; i++) { const value = array[i]; if (typeof value === 'object' && value !== null) { if ( @@ -55,10 +59,23 @@ export function addObjectToProperties( indent: number, prefix: string, ): void { + let addedProperties = 0; for (const key in object) { if (hasOwnProperty.call(object, key) && key[0] !== '_') { + addedProperties++; const value = object[key]; addValueToProperties(key, value, properties, indent, prefix); + if (addedProperties >= OBJECT_WIDTH_LIMIT) { + properties.push([ + prefix + + '\xa0\xa0'.repeat(indent) + + 'Only ' + + OBJECT_WIDTH_LIMIT + + ' properties are shown. React will not log more properties of this object.', + '', + ]); + break; + } } } } @@ -103,7 +120,9 @@ export function addValueToProperties( addValueToProperties('key', key, properties, indent + 1, prefix); } let hasChildren = false; + let addedProperties = 0; for (const propKey in props) { + addedProperties++; if (propKey === 'children') { if ( props.children != null && @@ -123,6 +142,10 @@ export function addValueToProperties( prefix, ); } + + if (addedProperties >= OBJECT_WIDTH_LIMIT) { + break; + } } properties.push([ '', @@ -135,16 +158,21 @@ export function addValueToProperties( let objectName = objectToString.slice(8, objectToString.length - 1); if (objectName === 'Array') { const array: Array = (value: any); + const didTruncate = array.length > OBJECT_WIDTH_LIMIT; const kind = getArrayKind(array); if (kind === PRIMITIVE_ARRAY || kind === EMPTY_ARRAY) { - desc = JSON.stringify(array); + desc = JSON.stringify( + didTruncate + ? array.slice(0, OBJECT_WIDTH_LIMIT).concat('…') + : array, + ); break; } else if (kind === ENTRIES_ARRAY) { properties.push([ prefix + '\xa0\xa0'.repeat(indent) + propertyName, '', ]); - for (let i = 0; i < array.length; i++) { + for (let i = 0; i < array.length && i < OBJECT_WIDTH_LIMIT; i++) { const entry = array[i]; addValueToProperties( entry[0], @@ -154,6 +182,15 @@ export function addValueToProperties( prefix, ); } + if (didTruncate) { + addValueToProperties( + OBJECT_WIDTH_LIMIT.toString(), + '…', + properties, + indent + 1, + prefix, + ); + } return; } } @@ -254,13 +291,39 @@ export function addObjectDiffToProperties( // If a property is added or removed, we just emit the property name and omit the value it had. // Mainly for performance. We need to minimize to only relevant information. let isDeeplyEqual = true; + let prevPropertiesChecked = 0; for (const key in prev) { + if (prevPropertiesChecked > OBJECT_WIDTH_LIMIT) { + properties.push([ + 'Previous object has more than ' + + OBJECT_WIDTH_LIMIT + + ' properties. React will not attempt to diff objects with too many properties.', + '', + ]); + isDeeplyEqual = false; + break; + } + if (!(key in next)) { properties.push([REMOVED + '\xa0\xa0'.repeat(indent) + key, '\u2026']); isDeeplyEqual = false; } + prevPropertiesChecked++; } + + let nextPropertiesChecked = 0; for (const key in next) { + if (nextPropertiesChecked > OBJECT_WIDTH_LIMIT) { + properties.push([ + 'Next object has more than ' + + OBJECT_WIDTH_LIMIT + + ' properties. React will not attempt to diff objects with too many properties.', + '', + ]); + isDeeplyEqual = false; + break; + } + if (key in prev) { const prevValue = prev[key]; const nextValue = next[key]; @@ -368,6 +431,8 @@ export function addObjectDiffToProperties( properties.push([ADDED + '\xa0\xa0'.repeat(indent) + key, '\u2026']); isDeeplyEqual = false; } + + nextPropertiesChecked++; } return isDeeplyEqual; } From c78625842239f29ff130136fff2729fd4c7c2e91 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 6 Oct 2025 00:53:21 -0400 Subject: [PATCH 040/276] [eprh] Fix config type not being exported correctly (#34746) Another attempt to fix #34745. I updated our fixture for eslint-v9 to include running tsc. I believe there were 2 issues: 1. `export * from './cjs/eslint-plugin-react-hooks'` in npm/index.d.ts was no longer correct as we updated index.ts to export default instead of named exports 2. After fixing ^ there was a typescript error which I fixed by making some small tweaks --- fixtures/eslint-v9/eslint.config.ts | 5 +- fixtures/eslint-v9/package.json | 5 +- fixtures/eslint-v9/tsconfig.json | 18 ++++ fixtures/eslint-v9/yarn.lock | 100 +++--------------- .../eslint-plugin-react-hooks/npm/index.d.ts | 2 +- .../eslint-plugin-react-hooks/src/index.ts | 11 +- 6 files changed, 46 insertions(+), 95 deletions(-) diff --git a/fixtures/eslint-v9/eslint.config.ts b/fixtures/eslint-v9/eslint.config.ts index c13899e85b2..5a69593befa 100644 --- a/fixtures/eslint-v9/eslint.config.ts +++ b/fixtures/eslint-v9/eslint.config.ts @@ -12,10 +12,7 @@ export default defineConfig([ }, }, }, - plugins: { - 'react-hooks': reactHooks, - }, - extends: ['react-hooks/recommended-latest'], + extends: [reactHooks.configs['recommended-latest']], rules: { 'react-hooks/exhaustive-deps': 'error', }, diff --git a/fixtures/eslint-v9/package.json b/fixtures/eslint-v9/package.json index c09d7ec99bd..e5c111bd4cc 100644 --- a/fixtures/eslint-v9/package.json +++ b/fixtures/eslint-v9/package.json @@ -8,6 +8,9 @@ }, "scripts": { "build": "node build.mjs && yarn", - "lint": "eslint index.js --report-unused-disable-directives" + "lint": "tsc --noEmit && eslint index.js --report-unused-disable-directives" + }, + "devDependencies": { + "typescript": "^5.4.3" } } diff --git a/fixtures/eslint-v9/tsconfig.json b/fixtures/eslint-v9/tsconfig.json index 2c63c085104..b81887fc175 100644 --- a/fixtures/eslint-v9/tsconfig.json +++ b/fixtures/eslint-v9/tsconfig.json @@ -1,2 +1,20 @@ { + "compilerOptions": { + "lib": [ + "es2022" + ], + "module": "nodenext", + "moduleResolution": "nodenext", + "target": "es2022", + "typeRoots": [ + "./node_modules/@types" + ], + "skipLibCheck": true + }, + "exclude": [ + "node_modules", + "**/node_modules", + "../node_modules", + "../../node_modules" + ] } diff --git a/fixtures/eslint-v9/yarn.lock b/fixtures/eslint-v9/yarn.lock index 93756d49016..936b5336938 100644 --- a/fixtures/eslint-v9/yarn.lock +++ b/fixtures/eslint-v9/yarn.lock @@ -48,13 +48,6 @@ "@jridgewell/trace-mapping" "^0.3.28" jsesc "^3.0.2" -"@babel/helper-annotate-as-pure@^7.27.3": - version "7.27.3" - resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz#f31fd86b915fc4daf1f3ac6976c59be7084ed9c5" - integrity sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg== - dependencies: - "@babel/types" "^7.27.3" - "@babel/helper-compilation-targets@^7.27.2": version "7.27.2" resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz#46a0f6efab808d51d29ce96858dd10ce8732733d" @@ -66,32 +59,11 @@ lru-cache "^5.1.1" semver "^6.3.1" -"@babel/helper-create-class-features-plugin@^7.18.6": - version "7.28.3" - resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.3.tgz#3e747434ea007910c320c4d39a6b46f20f371d46" - integrity sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg== - dependencies: - "@babel/helper-annotate-as-pure" "^7.27.3" - "@babel/helper-member-expression-to-functions" "^7.27.1" - "@babel/helper-optimise-call-expression" "^7.27.1" - "@babel/helper-replace-supers" "^7.27.1" - "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1" - "@babel/traverse" "^7.28.3" - semver "^6.3.1" - "@babel/helper-globals@^7.28.0": version "7.28.0" resolved "https://registry.yarnpkg.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz#b9430df2aa4e17bc28665eadeae8aa1d985e6674" integrity sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw== -"@babel/helper-member-expression-to-functions@^7.27.1": - version "7.27.1" - resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz#ea1211276be93e798ce19037da6f06fbb994fa44" - integrity sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA== - dependencies: - "@babel/traverse" "^7.27.1" - "@babel/types" "^7.27.1" - "@babel/helper-module-imports@^7.27.1": version "7.27.1" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz#7ef769a323e2655e126673bb6d2d6913bbead204" @@ -109,35 +81,6 @@ "@babel/helper-validator-identifier" "^7.27.1" "@babel/traverse" "^7.28.3" -"@babel/helper-optimise-call-expression@^7.27.1": - version "7.27.1" - resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz#c65221b61a643f3e62705e5dd2b5f115e35f9200" - integrity sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw== - dependencies: - "@babel/types" "^7.27.1" - -"@babel/helper-plugin-utils@^7.18.6": - version "7.27.1" - resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz#ddb2f876534ff8013e6c2b299bf4d39b3c51d44c" - integrity sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw== - -"@babel/helper-replace-supers@^7.27.1": - version "7.27.1" - resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz#b1ed2d634ce3bdb730e4b52de30f8cccfd692bc0" - integrity sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA== - dependencies: - "@babel/helper-member-expression-to-functions" "^7.27.1" - "@babel/helper-optimise-call-expression" "^7.27.1" - "@babel/traverse" "^7.27.1" - -"@babel/helper-skip-transparent-expression-wrappers@^7.27.1": - version "7.27.1" - resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz#62bb91b3abba8c7f1fec0252d9dbea11b3ee7a56" - integrity sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg== - dependencies: - "@babel/traverse" "^7.27.1" - "@babel/types" "^7.27.1" - "@babel/helper-string-parser@^7.27.1": version "7.27.1" resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687" @@ -168,14 +111,6 @@ dependencies: "@babel/types" "^7.28.4" -"@babel/plugin-proposal-private-methods@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea" - integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" - "@babel/template@^7.27.2": version "7.27.2" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d" @@ -198,7 +133,7 @@ "@babel/types" "^7.28.4" debug "^4.3.1" -"@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.2", "@babel/types@^7.28.4": +"@babel/types@^7.27.1", "@babel/types@^7.28.2", "@babel/types@^7.28.4": version "7.28.4" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.4.tgz#0a4e618f4c60a7cd6c11cb2d48060e4dbe38ac3a" integrity sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q== @@ -668,18 +603,6 @@ has-flag@^4.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== -hermes-estree@0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" - integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== - -hermes-parser@^0.25.1: - version "0.25.1" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" - integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== - dependencies: - hermes-estree "0.25.1" - ignore@^5.2.0: version "5.3.2" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5" @@ -912,6 +835,11 @@ type-check@^0.4.0, type-check@~0.4.0: dependencies: prelude-ls "^1.2.1" +typescript@^5.4.3: + version "5.9.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.3.tgz#5b4f59e15310ab17a216f5d6cf53ee476ede670f" + integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw== + update-browserslist-db@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz#348377dd245216f9e7060ff50b15a1b740b75420" @@ -949,12 +877,12 @@ yocto-queue@^0.1.0: resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== -zod-validation-error@^3.0.3: - version "3.5.3" - resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.5.3.tgz#85ba33290200d8db9f043621e284f40dddefb7e5" - integrity sha512-OT5Y8lbUadqVZCsnyFaTQ4/O2mys4tj7PqhdbBCp7McPwvIEKfPtdA6QfPeFQK2/Rz5LgwmAXRJTugBNBi0btw== +"zod-validation-error@^3.0.3 || ^4.0.0": + version "4.0.2" + resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918" + integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ== -zod@^3.22.4: - version "3.25.76" - resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.76.tgz#26841c3f6fd22a6a2760e7ccb719179768471e34" - integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ== +"zod@^3.22.4 || ^4.0.0": + version "4.1.11" + resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.11.tgz#4aab62f76cfd45e6c6166519ba31b2ea019f75f5" + integrity sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg== diff --git a/packages/eslint-plugin-react-hooks/npm/index.d.ts b/packages/eslint-plugin-react-hooks/npm/index.d.ts index 17bdf95c515..c883d6f8adf 100644 --- a/packages/eslint-plugin-react-hooks/npm/index.d.ts +++ b/packages/eslint-plugin-react-hooks/npm/index.d.ts @@ -5,4 +5,4 @@ * LICENSE file in the root directory of this source tree. */ -export * from './cjs/eslint-plugin-react-hooks'; +export {default} from './cjs/eslint-plugin-react-hooks'; diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts index 81c21a22e05..e26fa5aed7a 100644 --- a/packages/eslint-plugin-react-hooks/src/index.ts +++ b/packages/eslint-plugin-react-hooks/src/index.ts @@ -44,6 +44,11 @@ const allRuleConfigs: Linter.RulesRecord = { ...compilerRuleConfigs, }; +type FlatConfig = { + plugins: Record; + rules: Linter.RulesRecord; +}; + const plugin = { meta: { name: 'eslint-plugin-react-hooks', @@ -58,9 +63,9 @@ const plugin = { plugins: Array; rules: Linter.RulesRecord; }; - 'flat/recommended': Array; - 'recommended-latest': Array; - recommended: Array; + 'flat/recommended': Array; + 'recommended-latest': Array; + recommended: Array; }, }; From b65e6fc58b8c9a35e2c2ea7d1952fc1499cef09b Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 6 Oct 2025 12:43:39 -0400 Subject: [PATCH 041/276] Revert [eprh] Remove hermes-parser (#34747) Adds back HermesParser to eslint-plugin-react-hooks. There are still [external users of Flow](https://github.com/facebook/react/pull/34719#issuecomment-3368137743) using the plugin, so we shouldn't break the plugin for them. However, we still have the problem of double parsing: once from eslint (which we discard) and then another via babel/hermes parser. In the long run we should investigate a translation layer from estree to babel (or alternatively, update the compiler to take estree as input). But for now, I am reverting the PR. This does mean that [Sandpack in react.dev](https://github.com/reactjs/react.dev/blob/11cb6b591571caf5fa2a192117b6a6445c3f2027/src/components/MDX/Sandpack/runESLint.tsx#L31) cannot update to the latest eprh as HermesParser does not appear to be able to be run in a browser. I discovered this while trying to update eprh on react.dev last week, but didn't investigate deeply. I'll need to double check that again to find out more. --- .../eslint-plugin-react-hooks/package.json | 1 + .../src/shared/RunReactCompiler.ts | 31 ++++++++++++++----- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index 557e48af65f..fdea3928203 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -41,6 +41,7 @@ "dependencies": { "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", + "hermes-parser": "^0.25.1", "zod": "^3.22.4 || ^4.0.0", "zod-validation-error": "^3.0.3 || ^4.0.0" }, diff --git a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts index 7755dbe947f..02fd68badf6 100644 --- a/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts +++ b/packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts @@ -17,6 +17,7 @@ import BabelPluginReactCompiler, { LoggerEvent, } from 'babel-plugin-react-compiler'; import type {SourceCode} from 'eslint'; +import * as HermesParser from 'hermes-parser'; import {isDeepStrictEqual} from 'util'; import type {ParseResult} from '@babel/parser'; @@ -113,14 +114,28 @@ function runReactCompilerImpl({ } let babelAST: ParseResult | null = null; - try { - babelAST = babelParse(sourceCode.text, { - sourceFilename: filename, - sourceType: 'unambiguous', - plugins: ['typescript', 'jsx'], - }); - } catch (err: unknown) { - /* empty */ + + if (filename.endsWith('.tsx') || filename.endsWith('.ts')) { + try { + babelAST = babelParse(sourceCode.text, { + sourceFilename: filename, + sourceType: 'unambiguous', + plugins: ['typescript', 'jsx'], + }); + } catch { + /* empty */ + } + } else { + try { + babelAST = HermesParser.parse(sourceCode.text, { + babel: true, + enableExperimentalComponentSyntax: true, + sourceFilename: filename, + sourceType: 'module', + }); + } catch { + /* empty */ + } } if (babelAST != null) { From 6a8c7fb6f1108577c97eeb5703018ece915dcdeb Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Tue, 7 Oct 2025 06:23:34 +0200 Subject: [PATCH 042/276] Release `` to Canary (#34712) ## Overview This PR ships the View Transition APIs to `react@canary`: - [``](https://react.dev/reference/react/ViewTransition) - [`addTransitionType`](https://react.dev/reference/react/addTransitionType) This means these APIs are ready for final feedback and prepare for semver stable release. ## What this means Shipping `` and `addTransitionType` to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like `` with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like ``. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like `` as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions) blog post, and [the new docs for ``](https://react.dev/reference/react/ViewTransition) and [`addTransitionType`](https://react.dev/reference/react/addTransitionType) for more info. --- fixtures/view-transition/src/components/App.js | 2 +- fixtures/view-transition/src/components/Page.js | 4 ++-- .../src/__tests__/storeComponentFilters-test.js | 3 ++- .../src/__tests__/ReactDOMFizzViewTransition-test.js | 2 +- .../react-reconciler/src/__tests__/ReactErrorStacks-test.js | 2 +- .../src/__tests__/ReactLazy-test.internal.js | 4 ++-- .../src/__tests__/ViewTransitionReactServer-test.js | 2 +- packages/react/index.development.js | 2 ++ packages/react/index.experimental.development.js | 4 ++-- packages/react/index.experimental.js | 4 ++-- packages/react/index.fb.js | 6 ++++-- packages/react/index.js | 4 ++-- packages/react/index.stable.development.js | 2 ++ packages/react/index.stable.js | 2 ++ packages/react/src/ReactClient.js | 4 ++-- packages/react/src/ReactServer.experimental.development.js | 2 +- packages/react/src/ReactServer.experimental.js | 2 +- packages/react/src/ReactServer.fb.js | 3 ++- packages/react/src/ReactServer.js | 2 ++ packages/shared/ReactFeatureFlags.js | 2 +- packages/shared/forks/ReactFeatureFlags.native-oss.js | 2 +- 21 files changed, 36 insertions(+), 24 deletions(-) diff --git a/fixtures/view-transition/src/components/App.js b/fixtures/view-transition/src/components/App.js index 6b41bdf4eac..80e0c45c911 100644 --- a/fixtures/view-transition/src/components/App.js +++ b/fixtures/view-transition/src/components/App.js @@ -3,7 +3,7 @@ import React, { useLayoutEffect, useEffect, useState, - unstable_addTransitionType as addTransitionType, + addTransitionType, } from 'react'; import Chrome from './Chrome.js'; diff --git a/fixtures/view-transition/src/components/Page.js b/fixtures/view-transition/src/components/Page.js index d411bb24530..fbaa9017171 100644 --- a/fixtures/view-transition/src/components/Page.js +++ b/fixtures/view-transition/src/components/Page.js @@ -1,6 +1,6 @@ import React, { - unstable_addTransitionType as addTransitionType, - unstable_ViewTransition as ViewTransition, + addTransitionType, + ViewTransition, Activity, useLayoutEffect, useEffect, diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js index b5cf97a4730..439315dc858 100644 --- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js @@ -251,7 +251,8 @@ describe('Store component filters', () => { }); it('should filter ViewTransition', async () => { - const ViewTransition = React.unstable_ViewTransition; + const ViewTransition = + React.ViewTransition || React.unstable_ViewTransition; if (ViewTransition != null) { await actAsync(async () => diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js index 6ca7cfd4dc0..ee87fdac9ce 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js @@ -40,7 +40,7 @@ describe('ReactDOMFizzViewTransition', () => { Stream = require('stream'); Suspense = React.Suspense; - ViewTransition = React.unstable_ViewTransition; + ViewTransition = React.ViewTransition; // Test Environment const jsdom = new JSDOM( diff --git a/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js b/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js index 5f74de7af0f..5b96ad1ee67 100644 --- a/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js +++ b/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js @@ -29,7 +29,7 @@ describe('ReactFragment', () => { React = require('react'); Suspense = React.Suspense; Activity = React.Activity; - ViewTransition = React.unstable_ViewTransition; + ViewTransition = React.ViewTransition; ReactNoop = require('react-noop-renderer'); const InternalTestUtils = require('internal-test-utils'); waitForAll = InternalTestUtils.waitForAll; diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js index ec88184d40a..3afb0008ab5 100644 --- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js @@ -941,7 +941,7 @@ describe('ReactLazy', () => { // @gate enableViewTransition it('throws with a useful error when wrapping ViewTransition with lazy()', async () => { - const BadLazy = lazy(() => fakeImport(React.unstable_ViewTransition)); + const BadLazy = lazy(() => fakeImport(React.ViewTransition)); const root = ReactTestRenderer.create( }> @@ -954,7 +954,7 @@ describe('ReactLazy', () => { await waitForAll(['Loading...']); - await resolveFakeImport(React.unstable_ViewTransition); + await resolveFakeImport(React.ViewTransition); root.update( }> diff --git a/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js b/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js index 8f1104a1283..f6fa939e844 100644 --- a/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js +++ b/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js @@ -23,7 +23,7 @@ describe('ViewTransitionReactServer', () => { jest.resetModules(); jest.mock('react', () => require('react/react.react-server')); ReactServer = require('react'); - ViewTransition = ReactServer.unstable_ViewTransition; + ViewTransition = ReactServer.ViewTransition; ReactNoopFlightServer = require('react-noop-renderer/flight-server'); jest.resetModules(); diff --git a/packages/react/index.development.js b/packages/react/index.development.js index a2ec2857433..ed4a5a325d9 100644 --- a/packages/react/index.development.js +++ b/packages/react/index.development.js @@ -45,6 +45,8 @@ export { startTransition, unstable_LegacyHidden, Activity, + ViewTransition, + addTransitionType, unstable_Scope, unstable_SuspenseList, unstable_TracingMarker, diff --git a/packages/react/index.experimental.development.js b/packages/react/index.experimental.development.js index 211f1c5dfb4..b2374493073 100644 --- a/packages/react/index.experimental.development.js +++ b/packages/react/index.experimental.development.js @@ -33,9 +33,9 @@ export { unstable_postpone, unstable_getCacheForType, unstable_SuspenseList, - unstable_ViewTransition, + ViewTransition, unstable_startGestureTransition, - unstable_addTransitionType, + addTransitionType, unstable_useCacheRefresh, useId, useCallback, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index 0330dde744c..37800ede07a 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -34,9 +34,9 @@ export { unstable_postpone, unstable_getCacheForType, unstable_SuspenseList, - unstable_ViewTransition, + ViewTransition, unstable_startGestureTransition, - unstable_addTransitionType, + addTransitionType, unstable_useCacheRefresh, useId, useCallback, diff --git a/packages/react/index.fb.js b/packages/react/index.fb.js index 10e2ca4b90c..d61af001a53 100644 --- a/packages/react/index.fb.js +++ b/packages/react/index.fb.js @@ -39,9 +39,11 @@ export { unstable_LegacyHidden, unstable_Scope, unstable_SuspenseList, - unstable_ViewTransition, + ViewTransition, + ViewTransition as unstable_ViewTransition, unstable_TracingMarker, - unstable_addTransitionType, + addTransitionType, + addTransitionType as unstable_addTransitionType, unstable_useCacheRefresh, use, useActionState, diff --git a/packages/react/index.js b/packages/react/index.js index 804853b3319..78b11b809e7 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -48,8 +48,8 @@ export { unstable_Scope, unstable_SuspenseList, unstable_TracingMarker, - unstable_ViewTransition, - unstable_addTransitionType, + ViewTransition, + addTransitionType, unstable_getCacheForType, unstable_useCacheRefresh, useId, diff --git a/packages/react/index.stable.development.js b/packages/react/index.stable.development.js index 29df69ff3f8..5fd89390bca 100644 --- a/packages/react/index.stable.development.js +++ b/packages/react/index.stable.development.js @@ -18,6 +18,8 @@ export { PureComponent, StrictMode, Suspense, + ViewTransition, + addTransitionType, cloneElement, createContext, createElement, diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js index 76edd14e05b..830a4e9bb5d 100644 --- a/packages/react/index.stable.js +++ b/packages/react/index.stable.js @@ -18,6 +18,8 @@ export { PureComponent, StrictMode, Suspense, + ViewTransition, + addTransitionType, cloneElement, createContext, createElement, diff --git a/packages/react/src/ReactClient.js b/packages/react/src/ReactClient.js index b505dc49fca..9f7c5dce36d 100644 --- a/packages/react/src/ReactClient.js +++ b/packages/react/src/ReactClient.js @@ -125,8 +125,8 @@ export { // enableTransitionTracing REACT_TRACING_MARKER_TYPE as unstable_TracingMarker, // enableViewTransition - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, - addTransitionType as unstable_addTransitionType, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, + addTransitionType as addTransitionType, // enableGestureTransition startGestureTransition as unstable_startGestureTransition, // DEV-only diff --git a/packages/react/src/ReactServer.experimental.development.js b/packages/react/src/ReactServer.experimental.development.js index 9e9417677bb..df8b3d79b3a 100644 --- a/packages/react/src/ReactServer.experimental.development.js +++ b/packages/react/src/ReactServer.experimental.development.js @@ -63,6 +63,7 @@ export { REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_SUSPENSE_TYPE as Suspense, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, cloneElement, createElement, createRef, @@ -83,6 +84,5 @@ export { version, // Experimental REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, captureOwnerStack, // DEV-only }; diff --git a/packages/react/src/ReactServer.experimental.js b/packages/react/src/ReactServer.experimental.js index e380789d71b..06c0a9bf896 100644 --- a/packages/react/src/ReactServer.experimental.js +++ b/packages/react/src/ReactServer.experimental.js @@ -62,6 +62,7 @@ export { REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_SUSPENSE_TYPE as Suspense, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, cloneElement, createElement, createRef, @@ -82,5 +83,4 @@ export { version, // Experimental REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, }; diff --git a/packages/react/src/ReactServer.fb.js b/packages/react/src/ReactServer.fb.js index fe6089fc160..5a4ea8145d9 100644 --- a/packages/react/src/ReactServer.fb.js +++ b/packages/react/src/ReactServer.fb.js @@ -53,6 +53,8 @@ export { REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_SUSPENSE_TYPE as Suspense, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, + REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, cloneElement, createElement, createRef, @@ -71,5 +73,4 @@ export { captureOwnerStack, // DEV-only // Experimental REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, }; diff --git a/packages/react/src/ReactServer.js b/packages/react/src/ReactServer.js index f218074deea..81d83cbf453 100644 --- a/packages/react/src/ReactServer.js +++ b/packages/react/src/ReactServer.js @@ -16,6 +16,7 @@ import { REACT_PROFILER_TYPE, REACT_STRICT_MODE_TYPE, REACT_SUSPENSE_TYPE, + REACT_VIEW_TRANSITION_TYPE, } from 'shared/ReactSymbols'; import { cloneElement, @@ -46,6 +47,7 @@ export { REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_SUSPENSE_TYPE as Suspense, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, cloneElement, createElement, createRef, diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 89095e73183..8f01217eae0 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -84,7 +84,7 @@ export const enablePostpone = __EXPERIMENTAL__; export const enableHalt: boolean = true; -export const enableViewTransition = __EXPERIMENTAL__; +export const enableViewTransition: boolean = true; export const enableGestureTransition = __EXPERIMENTAL__; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 8335ca5857b..37f196b9fb4 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -62,7 +62,7 @@ export const enableHydrationLaneScheduling: boolean = true; export const enableYieldingBeforePassive: boolean = false; export const enableThrottledScheduling: boolean = false; -export const enableViewTransition: boolean = false; +export const enableViewTransition: boolean = true; export const enableGestureTransition: boolean = false; export const enableScrollEndPolyfill: boolean = true; export const enableSuspenseyImages: boolean = false; From a4eb2dfa6fec3da5a947eb84c99b059890bb5241 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Tue, 7 Oct 2025 06:24:24 +0200 Subject: [PATCH 043/276] Release Fragment refs to Canary (#34720) ## Overview This PR adds the `ref` prop to `` in `react@canary`. This means this API is ready for final feedback and prepared for a semver stable release. ## What this means Shipping Fragment refs to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like Fragment refs with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like Fragment refs. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like Fragment refs as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs) blog post, and [the new docs for Fragment refs`](https://react.dev/reference/react/Fragment#fragmentinstance) for more info. --- .../fragment-refs/ScrollIntoViewCase.js | 4 ++-- .../src/client/ReactFiberConfigDOM.js | 4 ++-- .../__tests__/ReactDOMFragmentRefs-test.js | 24 +++++++++---------- packages/shared/ReactFeatureFlags.js | 4 ++-- .../forks/ReactFeatureFlags.native-oss.js | 2 +- .../forks/ReactFeatureFlags.test-renderer.js | 4 ++-- scripts/error-codes/codes.json | 2 +- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js index 3b1f21ef686..e08b9ec50fe 100644 --- a/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js +++ b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js @@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() { const scrollContainerRef = useRef(null); const scrollVertical = () => { - fragmentRef.current.experimental_scrollIntoView(alignToTop); + fragmentRef.current.scrollIntoView(alignToTop); }; const scrollVerticalNoChildren = () => { - noChildRef.current.experimental_scrollIntoView(alignToTop); + noChildRef.current.scrollIntoView(alignToTop); }; useEffect(() => { diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 0f75d5f8cd7..0af810924bb 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree( if (enableFragmentRefsScrollIntoView) { // $FlowFixMe[prop-missing] - FragmentInstance.prototype.experimental_scrollIntoView = function ( + FragmentInstance.prototype.scrollIntoView = function ( this: FragmentInstanceType, alignToTop?: boolean, ): void { if (typeof alignToTop === 'object') { throw new Error( - 'FragmentInstance.experimental_scrollIntoView() does not support ' + + 'FragmentInstance.scrollIntoView() does not support ' + 'scrollIntoViewOptions. Use the alignToTop boolean instead.', ); } diff --git a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js index 26de45076f3..90dfa9d2f30 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js @@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => { }); expect(() => { - fragmentRef.current.experimental_scrollIntoView({block: 'start'}); + fragmentRef.current.scrollIntoView({block: 'start'}); }).toThrowError( - 'FragmentInstance.experimental_scrollIntoView() does not support ' + + 'FragmentInstance.scrollIntoView() does not support ' + 'scrollIntoViewOptions. Use the alignToTop boolean instead.', ); }); @@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => { }); // Default call - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expectLast(logs, 'childA'); logs = []; // alignToTop=true - fragmentRef.current.experimental_scrollIntoView(true); + fragmentRef.current.scrollIntoView(true); expectLast(logs, 'childA'); }); @@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => { logs.push('childB'); }); - fragmentRef.current.experimental_scrollIntoView(false); + fragmentRef.current.scrollIntoView(false); expectLast(logs, 'childB'); }); @@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => { }); // Default call - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expectLast(logs, 'childA'); }); @@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => { }); // Default call - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expectLast(logs, 'header'); childARef.current.scrollIntoView.mockClear(); @@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => { logs = []; // // alignToTop=false - fragmentRef.current.experimental_scrollIntoView(false); + fragmentRef.current.scrollIntoView(false); expectLast(logs, 'C'); }); }); @@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => { siblingBRef.current.scrollIntoView = jest.fn(); // Default call - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0); expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1); siblingBRef.current.scrollIntoView.mockClear(); // alignToTop=true - fragmentRef.current.experimental_scrollIntoView(true); + fragmentRef.current.scrollIntoView(true); expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0); expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1); }); @@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => { siblingBRef.current.scrollIntoView = jest.fn(); // alignToTop=false - fragmentRef.current.experimental_scrollIntoView(false); + fragmentRef.current.scrollIntoView(false); expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1); expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0); }); @@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => { }); parentRef.current.scrollIntoView = jest.fn(); - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 8f01217eae0..4e08b56d114 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000; */ export const enableInfiniteRenderLoopDetection: boolean = false; -export const enableFragmentRefs = __EXPERIMENTAL__; -export const enableFragmentRefsScrollIntoView = __EXPERIMENTAL__; +export const enableFragmentRefs: boolean = true; +export const enableFragmentRefsScrollIntoView: boolean = true; // ----------------------------------------------------------------------------- // Ready for next major. diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 37f196b9fb4..7cabeb526a2 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false; export const enableDefaultTransitionIndicator: boolean = false; export const ownerStackLimit = 1e4; -export const enableFragmentRefs: boolean = false; +export const enableFragmentRefs: boolean = true; export const enableFragmentRefsScrollIntoView: boolean = false; // Profiling Only diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 865fa139afa..9d2e73024d1 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false; export const enableDefaultTransitionIndicator: boolean = false; export const ownerStackLimit = 1e4; -export const enableFragmentRefs: boolean = false; -export const enableFragmentRefsScrollIntoView: boolean = false; +export const enableFragmentRefs: boolean = true; +export const enableFragmentRefsScrollIntoView: boolean = true; // TODO: This must be in sync with the main ReactFeatureFlags file because // the Test Renderer's value must be the same as the one used by the diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index c19b95db788..e87d750ecaf 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -551,5 +551,5 @@ "563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.", "564": "Unknown command. The debugChannel was not wired up properly.", "565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.", - "566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead." + "566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead." } From 3025aa39649ef5106c34cc7896a63d63b2edee91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Tue, 7 Oct 2025 09:59:34 -0400 Subject: [PATCH 044/276] [Flight] Don't serialize toJSON in Debug path and omit wide arrays (#34759) There's a couple of issues with serializing Buffer in the debug renders. For one, the Node.js Buffer has a `toJSON` on it which turns the binary data into a JSON array which is very inefficient to serialize compared to the real buffer. For debug info we never really want to resolve these and unlike the regular render we can't error. So this uses the trick where we read the original value. It's still unfortunate that this intermediate gets created at all but at least now we're not serializing it. Second, we have a limit on depth of objects but we didn't have a limit on width like large arrays or typed arrays. This omits large arrays from the payload when possible and make them deferred when there's a debug channel. --- .../react-server/src/ReactFlightServer.js | 89 ++- .../ReactFlightAsyncDebugInfo-test.js | 700 +++++++++++------- .../react-server/src/__tests__/test-file.txt | 31 + 3 files changed, 529 insertions(+), 291 deletions(-) create mode 100644 packages/react-server/src/__tests__/test-file.txt diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index d170787dc79..546e1bbb64f 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -849,6 +849,49 @@ export function resolveRequest(): null | Request { return null; } +function isTypedArray(value: any): boolean { + if (value instanceof ArrayBuffer) { + return true; + } + if (value instanceof Int8Array) { + return true; + } + if (value instanceof Uint8Array) { + return true; + } + if (value instanceof Uint8ClampedArray) { + return true; + } + if (value instanceof Int16Array) { + return true; + } + if (value instanceof Uint16Array) { + return true; + } + if (value instanceof Int32Array) { + return true; + } + if (value instanceof Uint32Array) { + return true; + } + if (value instanceof Float32Array) { + return true; + } + if (value instanceof Float64Array) { + return true; + } + if (value instanceof BigInt64Array) { + return true; + } + if (value instanceof BigUint64Array) { + return true; + } + if (value instanceof DataView) { + return true; + } + return false; +} + function serializeDebugThenable( request: Request, counter: {objectLimit: number}, @@ -906,6 +949,17 @@ function serializeDebugThenable( enqueueFlush(request); return; } + if ( + (isArray(value) && value.length > 200) || + (isTypedArray(value) && value.byteLength > 1000) + ) { + // If this should be deferred, but we don't have a debug channel installed + // it would get omitted. We can't omit outlined models but we can avoid + // resolving the Promise at all by halting it. + emitDebugHaltChunk(request, id); + enqueueFlush(request); + return; + } emitOutlinedDebugModelChunk(request, id, counter, value); enqueueFlush(request); }, @@ -3066,6 +3120,10 @@ function serializeDebugTypedArray( tag: string, typedArray: $ArrayBufferView, ): string { + if (typedArray.byteLength > 1000 && !doNotLimit.has(typedArray)) { + // Defer large typed arrays. + return serializeDeferredObject(request, typedArray); + } request.pendingDebugChunks++; const bufferId = request.nextChunkId++; emitTypedArrayChunk(request, bufferId, tag, typedArray, true); @@ -4820,9 +4878,17 @@ function renderDebugModel( } if (isArray(value)) { + if (value.length > 200 && !doNotLimit.has(value)) { + // Defer large arrays. They're heavy to serialize. + // TODO: Consider doing the same for objects with many properties too. + return serializeDeferredObject(request, value); + } return value; } + if (value instanceof Date) { + return serializeDate(value); + } if (value instanceof Map) { return serializeDebugMap(request, counter, value); } @@ -4930,15 +4996,6 @@ function renderDebugModel( } if (typeof value === 'string') { - if (value[value.length - 1] === 'Z') { - // Possibly a Date, whose toJSON automatically calls toISOString - // Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us - // $FlowFixMe[incompatible-use] - const originalValue = parent[parentPropertyName]; - if (originalValue instanceof Date) { - return serializeDateFromDateJSON(value); - } - } if (value.length >= 1024) { // Large strings are counted towards the object limit. if (counter.objectLimit <= 0) { @@ -5036,10 +5093,6 @@ function renderDebugModel( return serializeBigInt(value); } - if (value instanceof Date) { - return serializeDate(value); - } - return 'unknown type ' + typeof value; } @@ -5058,12 +5111,15 @@ function serializeDebugModel( value: ReactClientValue, ): ReactJSONValue { try { + // By-pass toJSON and use the original value. + // $FlowFixMe[incompatible-use] + const originalValue = this[parentPropertyName]; return renderDebugModel( request, counter, this, parentPropertyName, - value, + originalValue, ); } catch (x) { return ( @@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk( value: ReactClientValue, ): ReactJSONValue { try { + // By-pass toJSON and use the original value. + // $FlowFixMe[incompatible-use] + const originalValue = this[parentPropertyName]; return renderDebugModel( request, counter, this, parentPropertyName, - value, + originalValue, ); } catch (x) { return ( diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index b7d7959f21d..9253371f54a 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -5,6 +5,9 @@ import {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate'; +import fs from 'fs/promises'; +import path from 'path'; + let React; let ReactServer; let cache; @@ -156,9 +159,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 125, + 128, 109, - 105, + 108, 50, ], ], @@ -180,9 +183,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 125, + 128, 109, - 105, + 108, 50, ], ], @@ -191,25 +194,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 107, + 110, 13, - 106, + 109, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 114, + 117, 26, - 113, + 116, 5, ], ], @@ -228,9 +231,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 125, + 128, 109, - 105, + 108, 50, ], ], @@ -239,17 +242,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 107, + 110, 13, - 106, + 109, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 114, + 117, 26, - 113, + 116, 5, ], ], @@ -274,9 +277,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 125, + 128, 109, - 105, + 108, 50, ], ], @@ -285,25 +288,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 108, + 111, 21, - 106, + 109, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 114, + 117, 20, - 113, + 116, 5, ], ], @@ -322,9 +325,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 125, + 128, 109, - 105, + 108, 50, ], ], @@ -333,17 +336,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 109, + 112, 21, - 106, + 109, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 114, + 117, 20, - 113, + 116, 5, ], ], @@ -363,9 +366,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 116, + 119, 60, - 113, + 116, 5, ], ], @@ -387,9 +390,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 125, + 128, 109, - 105, + 108, 50, ], ], @@ -398,17 +401,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 108, + 111, 21, - 106, + 109, 5, ], ], @@ -427,9 +430,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 116, + 119, 60, - 113, + 116, 5, ], ], @@ -438,9 +441,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "InnerComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 122, + 125, 35, - 119, + 122, 5, ], ], @@ -621,9 +624,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 585, + 588, 40, - 566, + 569, 49, ], [ @@ -653,9 +656,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 585, + 588, 40, - 566, + 569, 49, ], [ @@ -672,25 +675,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 568, + 571, 13, - 567, + 570, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 573, + 576, 36, - 572, + 575, 5, ], ], @@ -709,9 +712,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 585, + 588, 40, - 566, + 569, 49, ], [ @@ -728,17 +731,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 568, + 571, 13, - 567, + 570, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 573, + 576, 36, - 572, + 575, 5, ], ], @@ -758,9 +761,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 575, + 578, 60, - 572, + 575, 5, ], ], @@ -779,9 +782,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 585, + 588, 40, - 566, + 569, 49, ], [ @@ -798,25 +801,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 568, + 571, 13, - 567, + 570, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 574, + 577, 22, - 572, + 575, 5, ], ], @@ -835,9 +838,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 575, + 578, 60, - 572, + 575, 5, ], ], @@ -846,9 +849,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "InnerComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 581, + 584, 40, - 578, + 581, 5, ], ], @@ -923,9 +926,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 892, + 895, 109, - 879, + 882, 80, ], ], @@ -944,9 +947,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 892, + 895, 109, - 879, + 882, 80, ], ], @@ -963,9 +966,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 892, + 895, 109, - 879, + 882, 80, ], ], @@ -1037,9 +1040,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1006, + 1009, 109, - 997, + 1000, 94, ], ], @@ -1122,9 +1125,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1091, + 1094, 109, - 1067, + 1070, 50, ], ], @@ -1218,9 +1221,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1190, 109, - 1170, + 1173, 63, ], ], @@ -1237,17 +1240,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 90, + 93, 40, - 88, + 91, 3, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1183, + 1186, 24, - 1182, + 1185, 5, ], ], @@ -1269,17 +1272,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 90, + 93, 40, - 88, + 91, 3, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1183, + 1186, 24, - 1182, + 1185, 5, ], ], @@ -1288,25 +1291,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1172, + 1175, 13, - 1171, + 1174, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1178, + 1181, 24, - 1177, + 1180, 5, ], ], @@ -1325,17 +1328,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 90, + 93, 40, - 88, + 91, 3, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1183, + 1186, 24, - 1182, + 1185, 5, ], ], @@ -1344,17 +1347,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1172, + 1175, 13, - 1171, + 1174, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1178, + 1181, 24, - 1177, + 1180, 5, ], ], @@ -1379,17 +1382,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 90, + 93, 40, - 88, + 91, 3, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1183, + 1186, 24, - 1182, + 1185, 5, ], ], @@ -1398,25 +1401,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1173, + 1176, 13, - 1171, + 1174, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1178, + 1181, 18, - 1177, + 1180, 5, ], ], @@ -1435,17 +1438,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "fetchThirdParty", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 90, + 93, 40, - 88, + 91, 3, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1183, + 1186, 24, - 1182, + 1185, 5, ], ], @@ -1454,17 +1457,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1173, + 1176, 13, - 1171, + 1174, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1178, + 1181, 18, - 1177, + 1180, 5, ], ], @@ -1562,9 +1565,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1526, + 1529, 40, - 1509, + 1512, 62, ], [ @@ -1594,9 +1597,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1526, + 1529, 40, - 1509, + 1512, 62, ], [ @@ -1613,25 +1616,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1511, + 1514, 13, - 1510, + 1513, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1521, + 1524, 13, - 1520, + 1523, 5, ], ], @@ -1650,9 +1653,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1526, + 1529, 40, - 1509, + 1512, 62, ], [ @@ -1669,17 +1672,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1511, + 1514, 13, - 1510, + 1513, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1521, + 1524, 13, - 1520, + 1523, 5, ], ], @@ -1699,9 +1702,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1522, + 1525, 60, - 1520, + 1523, 5, ], ], @@ -1723,9 +1726,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1526, + 1529, 40, - 1509, + 1512, 62, ], [ @@ -1742,25 +1745,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1511, + 1514, 13, - 1510, + 1513, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1521, + 1524, 13, - 1520, + 1523, 5, ], ], @@ -1779,9 +1782,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1522, + 1525, 60, - 1520, + 1523, 5, ], ], @@ -1790,9 +1793,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Child", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1516, + 1519, 28, - 1515, + 1518, 5, ], ], @@ -1875,9 +1878,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1839, + 1842, 40, - 1823, + 1826, 57, ], [ @@ -1907,9 +1910,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1839, + 1842, 40, - 1823, + 1826, 57, ], [ @@ -1926,25 +1929,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1825, + 1828, 13, - 1824, + 1827, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1834, + 1837, 23, - 1833, + 1836, 5, ], ], @@ -1963,9 +1966,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1839, + 1842, 40, - 1823, + 1826, 57, ], [ @@ -1982,17 +1985,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1825, + 1828, 13, - 1824, + 1827, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1834, + 1837, 23, - 1833, + 1836, 5, ], ], @@ -2012,9 +2015,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1835, + 1838, 60, - 1833, + 1836, 5, ], ], @@ -2033,9 +2036,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1839, + 1842, 40, - 1823, + 1826, 57, ], [ @@ -2052,25 +2055,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1825, + 1828, 13, - 1824, + 1827, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1834, + 1837, 23, - 1833, + 1836, 5, ], ], @@ -2084,9 +2087,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1835, + 1838, 60, - 1833, + 1836, 5, ], ], @@ -2171,9 +2174,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2135, + 2138, 40, - 2117, + 2120, 80, ], [ @@ -2203,9 +2206,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2135, + 2138, 40, - 2117, + 2120, 80, ], [ @@ -2222,25 +2225,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2125, + 2128, 13, - 2123, + 2126, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2130, + 2133, 13, - 2129, + 2132, 5, ], ], @@ -2259,9 +2262,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2135, + 2138, 40, - 2117, + 2120, 80, ], [ @@ -2278,17 +2281,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2125, + 2128, 13, - 2123, + 2126, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2130, + 2133, 13, - 2129, + 2132, 5, ], ], @@ -2310,9 +2313,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2135, + 2138, 40, - 2117, + 2120, 80, ], [ @@ -2329,33 +2332,33 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2119, + 2122, 13, - 2118, + 2121, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2124, + 2127, 15, - 2123, + 2126, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2130, + 2133, 13, - 2129, + 2132, 5, ], ], @@ -2374,9 +2377,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2135, + 2138, 40, - 2117, + 2120, 80, ], [ @@ -2393,25 +2396,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2119, + 2122, 13, - 2118, + 2121, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2124, + 2127, 15, - 2123, + 2126, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2130, + 2133, 13, - 2129, + 2132, 5, ], ], @@ -2433,9 +2436,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2135, + 2138, 40, - 2117, + 2120, 80, ], [ @@ -2452,17 +2455,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2120, + 2123, 13, - 2118, + 2121, 5, ], ], @@ -2481,9 +2484,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2135, + 2138, 40, - 2117, + 2120, 80, ], [ @@ -2500,9 +2503,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2120, + 2123, 13, - 2118, + 2121, 5, ], ], @@ -2575,9 +2578,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2544, + 2547, 109, - 2533, + 2536, 58, ], ], @@ -2599,9 +2602,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2544, + 2547, 109, - 2533, + 2536, 58, ], ], @@ -2610,25 +2613,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2535, + 2538, 14, - 2534, + 2537, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2541, + 2544, 20, - 2540, + 2543, 5, ], ], @@ -2647,9 +2650,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2544, + 2547, 109, - 2533, + 2536, 58, ], ], @@ -2658,17 +2661,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2535, + 2538, 23, - 2534, + 2537, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2541, + 2544, 20, - 2540, + 2543, 5, ], ], @@ -2747,9 +2750,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2711, + 2714, 40, - 2699, + 2702, 56, ], [ @@ -2779,9 +2782,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2711, + 2714, 40, - 2699, + 2702, 56, ], [ @@ -2798,17 +2801,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delay", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 83, + 86, 12, - 82, + 85, 3, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2707, + 2710, 20, - 2706, + 2709, 5, ], ], @@ -2827,9 +2830,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2711, + 2714, 40, - 2699, + 2702, 56, ], [ @@ -2846,9 +2849,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2707, + 2710, 20, - 2706, + 2709, 5, ], ], @@ -2941,9 +2944,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2900, + 2903, 40, - 2879, + 2882, 42, ], [ @@ -2973,9 +2976,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2900, + 2903, 40, - 2879, + 2882, 42, ], [ @@ -2992,17 +2995,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2886, + 2889, 15, - 2885, + 2888, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2895, + 2898, 19, - 2894, + 2897, 5, ], ], @@ -3021,9 +3024,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2900, + 2903, 40, - 2879, + 2882, 42, ], [ @@ -3040,17 +3043,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2886, + 2889, 15, - 2885, + 2888, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2895, + 2898, 19, - 2894, + 2897, 5, ], ], @@ -3072,9 +3075,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2900, + 2903, 40, - 2879, + 2882, 42, ], [ @@ -3091,9 +3094,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2895, + 2898, 25, - 2894, + 2897, 5, ], ], @@ -3112,9 +3115,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2900, + 2903, 40, - 2879, + 2882, 42, ], [ @@ -3131,9 +3134,154 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2895, + 2898, 25, - 2894, + 2897, + 5, + ], + ], + }, + { + "time": 0, + }, + { + "time": 0, + }, + { + "awaited": { + "byteSize": 0, + "end": 0, + "name": "RSC stream", + "owner": null, + "start": 0, + "value": { + "value": "stream", + }, + }, + }, + ] + `); + } + }); + + it('can track async file reads', async () => { + const filename = path.join(__dirname, 'test-file.txt'); + async function Component() { + const buffer = await fs + .readFile(filename) // This loads a Buffer. + // TODO: For some reason, without this we're extracting the wrong promise. + .then(v => v); + const text = buffer.toString('utf8'); + return text.slice(0, 26); + } + + const stream = ReactServerDOMServer.renderToPipeableStream( + , + {}, + ); + + const readable = new Stream.PassThrough(streamOptions); + + const result = ReactServerDOMClient.createFromNodeStream(readable, { + moduleMap: {}, + moduleLoading: {}, + }); + stream.pipe(readable); + + expect(await result).toBe('Lorem ipsum dolor sit amet'); + + await finishLoadingStream(readable); + if ( + __DEV__ && + gate( + flags => + flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo, + ) + ) { + expect(getDebugInfo(result)).toMatchInlineSnapshot(` + [ + { + "time": 0, + }, + { + "env": "Server", + "key": null, + "name": "Component", + "props": {}, + "stack": [ + [ + "Object.", + "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", + 3179, + 40, + 3167, + 36, + ], + ], + }, + { + "time": 0, + }, + { + "awaited": { + "end": 0, + "env": "Server", + "name": "Object.readFile", + "owner": { + "env": "Server", + "key": null, + "name": "Component", + "props": {}, + "stack": [ + [ + "Object.", + "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", + 3179, + 40, + 3167, + 36, + ], + ], + }, + "stack": [ + [ + "Component", + "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", + 3171, + 7, + 3169, + 5, + ], + ], + "start": 0, + "value": { + "status": "halted", + }, + }, + "env": "Server", + "owner": { + "env": "Server", + "key": null, + "name": "Component", + "props": {}, + "stack": [ + [ + "Object.", + "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", + 3179, + 40, + 3167, + 36, + ], + ], + }, + "stack": [ + [ + "Component", + "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", + 3173, + 7, + 3169, 5, ], ], diff --git a/packages/react-server/src/__tests__/test-file.txt b/packages/react-server/src/__tests__/test-file.txt new file mode 100644 index 00000000000..fb4f66d7e87 --- /dev/null +++ b/packages/react-server/src/__tests__/test-file.txt @@ -0,0 +1,31 @@ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius diam ut lectus suscipit, ac faucibus tellus fermentum. Phasellus rutrum bibendum tellus, eu malesuada metus dignissim sed. Pellentesque et quam libero. Donec ultricies massa vitae justo maximus, ultricies ultrices diam dictum. Ut in lectus non diam porttitor accumsan ac hendrerit tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a massa augue. Sed vitae purus id sapien luctus mattis. Maecenas imperdiet vehicula rhoncus. + +Etiam non tincidunt sapien, rhoncus fermentum ipsum. Cras id gravida felis. Phasellus finibus, mauris eu viverra auctor, augue tellus elementum sem, a vestibulum ligula purus vel erat. Nulla facilisi. Curabitur nulla ligula, viverra et elementum quis, sollicitudin sit amet nisl. Aenean vitae tortor mauris. Fusce iaculis risus eget lacus faucibus, quis congue dolor egestas. Integer viverra tellus tortor, vitae malesuada lorem ultricies vitae. Ut lacinia diam non ante pellentesque posuere. Suspendisse at posuere nunc, eget viverra elit. Vestibulum sit amet maximus lorem. + +Proin fermentum lacus non convallis gravida. Morbi a blandit nisi. Nam posuere lacus vitae molestie aliquam. Cras enim orci, elementum et urna vel, vehicula gravida neque. Etiam quis odio at odio aliquet lobortis ac et sapien. Nulla commodo, ante eget sodales facilisis, magna elit pretium odio, a consectetur dui tortor at erat. Morbi quis laoreet metus. Sed iaculis sodales nisi, ut pharetra magna laoreet eu. + +In iaculis, dolor quis consectetur fringilla, justo quam viverra turpis, eget dictum lectus nisl nec mi. Phasellus suscipit, leo ut tincidunt molestie, odio purus ornare ex, sagittis ornare erat nunc vel magna. Morbi malesuada risus nec turpis ultricies molestie dapibus nec justo. Vestibulum tempus bibendum purus, nec sodales libero convallis at. Fusce ipsum nibh, fringilla at sapien sit amet, malesuada suscipit lorem. Fusce et libero a dui gravida ultrices. Vestibulum quis lobortis velit. Morbi ut nisl lobortis, tempus sapien et, convallis mi. Integer varius, felis eu egestas dignissim, risus augue tristique elit, ultricies interdum arcu nibh et lectus. Integer enim mi, viverra eget scelerisque at, gravida eget justo. Nullam eget dolor id orci fringilla ultricies. In id luctus erat. Donec quis magna quis neque congue venenatis sit amet vel turpis. Donec congue tortor eu massa ullamcorper, ut imperdiet lectus posuere. Maecenas quis lorem quis nulla vehicula varius. + +Suspendisse tristique elit et luctus suscipit. Nunc quis justo luctus, malesuada velit vitae, accumsan tellus. Nunc ex sem, efficitur vitae semper et, consectetur quis turpis. Donec et tincidunt est, vitae varius sem. Aliquam at luctus dolor. Etiam pretium justo lectus, quis tempus quam feugiat ac. Suspendisse vitae sollicitudin erat, ut interdum felis. Cras lacinia tincidunt tempus. Vivamus congue et lectus quis suscipit. Fusce ultricies justo eget mi elementum, vitae consectetur lacus varius. Praesent fermentum in risus sit amet malesuada. Mauris semper sapien ornare pulvinar venenatis. Suspendisse potenti. + +Donec vestibulum purus et est cursus hendrerit. Vivamus pharetra ligula dolor, ut commodo felis accumsan sed. Integer pulvinar mollis metus, at cursus turpis laoreet ac. Maecenas lectus felis, dapibus eu ligula at, lacinia pharetra ex. Duis id tortor a metus pulvinar tincidunt. Suspendisse at lacus a nulla feugiat malesuada. Ut tincidunt interdum placerat. Fusce tincidunt elit in convallis elementum. Etiam commodo felis ut neque dapibus, ac finibus ante auctor. Sed tincidunt massa vitae sapien semper suscipit. + +Donec euismod sagittis lacus, eu lacinia tortor rutrum eu. Donec et sapien lacus. Aliquam non commodo magna, vitae commodo tortor. Vivamus vel urna eget ante varius condimentum. Etiam non purus pharetra, pharetra sem eu, maximus felis. Integer nec urna justo. Etiam a dolor tempor, posuere odio non, maximus metus. Vivamus malesuada mi libero, a viverra velit tempus vitae. Quisque accumsan sed nisi a venenatis. Donec malesuada erat at lacus tincidunt, sed euismod est ultricies. Fusce id posuere nisl. Aliquam erat volutpat. Morbi non erat iaculis turpis interdum facilisis. Nunc risus elit, laoreet quis ante sed, aliquam pharetra massa. Fusce cursus urna nec pharetra interdum. + +Etiam pharetra, metus nec malesuada efficitur, dui ipsum blandit felis, id cursus elit orci at eros. Phasellus suscipit lobortis est. Praesent egestas, est et scelerisque consectetur, neque velit dapibus elit, quis hendrerit nisi felis a nulla. Quisque facilisis rutrum varius. Integer quis libero sit amet erat tincidunt semper a vel quam. Curabitur rutrum fringilla consequat. Fusce in metus ut odio luctus viverra viverra et nulla. Vestibulum a lacinia augue, feugiat egestas diam. Proin elit arcu, venenatis quis elementum in, rutrum quis tortor. Integer vel lacus urna. Suspendisse pharetra sapien at ullamcorper hendrerit. Etiam nibh ipsum, vulputate eu pulvinar nec, pulvinar id odio. + +Proin tincidunt, augue id tristique dictum, nisi sem congue orci, non faucibus erat nibh ac metus. Curabitur leo massa, hendrerit a venenatis sed, aliquam ac ligula. Fusce facilisis vulputate dui ut sollicitudin. Phasellus tellus lacus, viverra at dui sit amet, facilisis accumsan nisi. Phasellus dui lectus, lobortis consequat convallis sed, luctus non dui. Duis tempus urna sed libero ullamcorper, placerat luctus enim dignissim. Mauris vitae odio mauris. Donec eget tortor vitae nibh laoreet viverra at eget urna. Integer in ex arcu. Vestibulum tellus erat, tempus sit amet neque nec, tristique maximus neque. Vivamus efficitur nisi massa, ut tempus lacus interdum quis. Cras posuere erat nec convallis viverra. Aenean efficitur nibh et augue maximus pretium. Aliquam hendrerit nulla dui. Donec elit enim, hendrerit ultricies orci sed, blandit elementum quam. + +Donec fringilla pretium ligula, sed imperdiet orci mattis quis. Mauris ullamcorper fermentum libero fringilla molestie. Sed laoreet, nisl in viverra convallis, enim tortor tincidunt elit, in consequat diam metus non libero. Quisque eleifend lobortis lobortis. Donec porta eget justo faucibus sagittis. Phasellus lacus diam, convallis tristique metus at, placerat luctus justo. Fusce vestibulum urna eget dictum vulputate. Nam non nisl bibendum risus vehicula rutrum nec vel purus. Morbi nec diam laoreet quam sodales malesuada. Suspendisse efficitur, magna vel sodales semper, neque nulla aliquam nisi, hendrerit mollis justo libero vel mi. + +Etiam tellus neque, vulputate quis justo sit amet, dapibus suscipit est. Morbi pulvinar ipsum risus, eu lacinia felis viverra eget. Quisque massa justo, aliquam non ornare sit amet, maximus maximus dui. Pellentesque aliquam fermentum libero sed aliquet. Nulla consequat ultrices commodo. Donec condimentum consectetur nulla, id euismod metus facilisis eget. Fusce at mauris blandit, mollis ex nec, dignissim ex. Proin nec facilisis arcu. In vestibulum at erat vel ultrices. Mauris lacinia elementum nibh rhoncus egestas. Duis lobortis magna eget sem consequat, ac malesuada orci gravida. Duis cursus quam augue, a condimentum velit scelerisque eget. Donec dapibus pellentesque tellus. Nulla malesuada, purus id efficitur volutpat, felis odio faucibus metus, scelerisque hendrerit enim velit in urna. + +Nulla massa felis, semper eget consectetur ac, scelerisque vitae mi. Praesent sit amet sagittis metus. Curabitur mollis ex quis erat faucibus mattis. Nullam risus lacus, suscipit sed luctus vel, dictum id odio. In et dictum elit. Aliquam quis consectetur metus. In feugiat, urna ac porttitor auctor, est arcu porta est, vel lobortis erat elit quis nunc. Nulla quis nibh vel sem fringilla semper sed quis ipsum. Morbi vehicula, urna non rhoncus hendrerit, velit purus accumsan purus, vel elementum arcu dui sit amet leo. Aenean ultricies orci ac ante placerat, id auctor magna sodales. Nam sit amet laoreet lectus. Etiam ligula velit, dignissim vel tincidunt at, dictum nec lacus. Nam non eleifend enim, sit amet dictum lectus. Suspendisse potenti. Suspendisse eget ante a mauris placerat lobortis sed eu dui. + +Nam et porta elit, vel interdum mauris. Vivamus eu elit nec nisl bibendum hendrerit. Morbi ornare mollis lacus non finibus. Praesent id orci ex. Donec commodo viverra dictum. Phasellus in lacus tellus. Curabitur at lorem efficitur leo dignissim varius at eu est. Vivamus justo erat, hendrerit id volutpat nec, euismod eget odio. Mauris et vulputate tellus, in maximus nunc. Vestibulum ante ligula, suscipit nec nibh in, placerat pellentesque neque. + +Nunc in accumsan ligula, quis accumsan diam. Fusce tincidunt neque a turpis ornare, id convallis quam convallis. Donec at luctus ipsum. Nam id enim ante. Fusce condimentum consectetur justo, in hendrerit lacus vehicula ut. Vestibulum ut hendrerit risus. Donec blandit ut magna eget aliquet. Donec sit amet faucibus ante. Suspendisse condimentum, mauris id aliquam ultricies, erat mi tincidunt eros, sit amet blandit urna purus vitae orci. Maecenas in faucibus ipsum, quis gravida ex. Sed tincidunt in ipsum id dignissim. Duis dui nisl, interdum at est non, rutrum porttitor felis. Sed at nibh dolor. Etiam cursus scelerisque leo. + +Morbi vel arcu ullamcorper, tristique eros sed, condimentum sapien. Duis suscipit consequat tincidunt. Proin commodo erat in velit cursus lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id metus luctus, commodo sapien iaculis, pharetra massa. Phasellus fringilla sagittis lacus, ac laoreet massa sollicitudin ac. Aliquam luctus ex non semper dictum. Morbi vel arcu vel purus aliquet tempus. Curabitur ultrices rutrum facilisis. Morbi enim lectus, ornare quis sem bibendum, aliquet imperdiet ex. Vestibulum commodo sed neque et fermentum. Vestibulum enim elit, lobortis vitae convallis ut, auctor in velit. + +Vestibulum semper vulputate elit, at volutpat quam. Nullam id scelerisque libero, nec facilisis lacus. Nulla quis rhoncus arcu. Aliquam erat volutpat. In viverra, diam id rutrum volutpat, ligula dui tristique ex, et pulvinar elit ex a est. Cras magna augue, porta vel tempus vitae, placerat et felis. In ex elit, mattis vitae molestie pretium, tempus vitae tortor. Integer vehicula orci magna, in ultrices nulla volutpat sit amet. Pellentesque odio erat, hendrerit at lacinia sit amet, tempus sit amet risus. Curabitur ut laoreet justo, nec fermentum nibh. Integer tincidunt mattis sem eu cursus. From 1384ea8230641e3fc569a510b5f1c73f3f28302d Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 7 Oct 2025 14:14:50 -0400 Subject: [PATCH 045/276] [compiler] Update release script for latest tag (#34763) Updates our release script so we can publish to the `latest` tag. --- compiler/scripts/release/publish.js | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/compiler/scripts/release/publish.js b/compiler/scripts/release/publish.js index 99c47384251..f9c42d15636 100755 --- a/compiler/scripts/release/publish.js +++ b/compiler/scripts/release/publish.js @@ -68,7 +68,7 @@ async function main() { .option('tag', { description: 'Tag to publish to npm', type: 'choices', - choices: ['experimental', 'beta', 'rc'], + choices: ['experimental', 'beta', 'rc', 'latest'], default: 'experimental', }) .option('tag-version', { @@ -181,21 +181,9 @@ async function main() { if (otp != null) { opts.push(`--otp=${otp}`); } - /** - * Typically, the `latest` tag is reserved for stable package versions. Since the the compiler - * is still pre-release, until we have a stable release let's only add the - * `latest` tag to non-experimental releases. - * - * `latest` is added by default, so we only override it for experimental releases so that - * those don't get the `latest` tag. - * - * TODO: Update this when we have a stable release. - */ - if (argv.tag === 'experimental') { - opts.push('--tag=experimental'); - } else { - opts.push('--tag=latest'); - } + + opts.push(`--tag=${argv.tag}`); + try { await spawnHelper( 'npm', From a664f5f2ee225eab810fb1a1cc36de3a68bbf47c Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 7 Oct 2025 14:32:51 -0400 Subject: [PATCH 046/276] [compiler] Fix incorrect version name (#34764) Script was using the wrong version name. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34764). * #34765 * __->__ #34764 --- compiler/scripts/release/publish.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/compiler/scripts/release/publish.js b/compiler/scripts/release/publish.js index f9c42d15636..4ff332d300a 100755 --- a/compiler/scripts/release/publish.js +++ b/compiler/scripts/release/publish.js @@ -145,10 +145,15 @@ async function main() { files: {exclude: ['.DS_Store']}, }); const truncatedHash = hash.slice(0, 7); - let newVersion = - argv.tagVersion == null || argv.tagVersion === '' - ? `${argv.versionName}-${argv.tag}` - : `${argv.versionName}-${argv.tag}.${argv.tagVersion}`; + let newVersion; + if (argv.tag === 'latest') { + newVersion = argv.versionName; + } else { + newVersion = + argv.tagVersion == null || argv.tagVersion === '' + ? `${argv.versionName}-${argv.tag}` + : `${argv.versionName}-${argv.tag}.${argv.tagVersion}`; + } if (argv.tag === 'experimental' || argv.tag === 'beta') { newVersion = `${newVersion}-${truncatedHash}-${dateString}`; } From 69b4cb8df4d3c612f927942098475c7907c70808 Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 7 Oct 2025 14:44:46 -0400 Subject: [PATCH 047/276] [ci] Allow dry run (#34765) Allow running the compiler release script as dry run. --- .github/workflows/compiler_prereleases.yml | 11 ++++++++++- .github/workflows/compiler_prereleases_manual.yml | 4 ++++ .github/workflows/compiler_prereleases_nightly.yml | 1 + 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/.github/workflows/compiler_prereleases.yml b/.github/workflows/compiler_prereleases.yml index bd6d003a4cc..6f60aac23c1 100644 --- a/.github/workflows/compiler_prereleases.yml +++ b/.github/workflows/compiler_prereleases.yml @@ -19,6 +19,9 @@ on: tag_version: required: false type: string + dry_run: + required: false + type: boolean secrets: NPM_TOKEN: required: true @@ -55,7 +58,13 @@ jobs: key: compiler-node_modules-v6-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('compiler/yarn.lock') }} - run: yarn install --frozen-lockfile if: steps.node_modules.outputs.cache-hit != 'true' - - name: Publish packages to npm + - if: inputs.dry_run == true + name: Publish packages to npm (dry run) + run: | + cp ./scripts/release/ci-npmrc ~/.npmrc + scripts/release/publish.js --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }} + - if: inputs.dry_run != true + name: Publish packages to npm run: | cp ./scripts/release/ci-npmrc ~/.npmrc scripts/release/publish.js --frfr --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }} diff --git a/.github/workflows/compiler_prereleases_manual.yml b/.github/workflows/compiler_prereleases_manual.yml index 268b8f24f40..c4a7a16aca3 100644 --- a/.github/workflows/compiler_prereleases_manual.yml +++ b/.github/workflows/compiler_prereleases_manual.yml @@ -17,6 +17,9 @@ on: tag_version: required: false type: string + dry_run: + required: false + type: boolean permissions: {} @@ -33,5 +36,6 @@ jobs: dist_tag: ${{ inputs.dist_tag }} version_name: ${{ inputs.version_name }} tag_version: ${{ inputs.tag_version }} + dry_run: ${{ inputs.dry_run }} secrets: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/compiler_prereleases_nightly.yml b/.github/workflows/compiler_prereleases_nightly.yml index 07919d7843b..ca2b5589def 100644 --- a/.github/workflows/compiler_prereleases_nightly.yml +++ b/.github/workflows/compiler_prereleases_nightly.yml @@ -19,5 +19,6 @@ jobs: release_channel: experimental dist_tag: experimental version_name: '0.0.0' + dry_run: false secrets: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} From 5c15c1cd3442f28044217703b5625f98c40042ee Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 7 Oct 2025 15:16:18 -0400 Subject: [PATCH 048/276] [ci] Dry run with debug mode (#34767) Adds `--debug` to our dry run command so we can see the npm dry run output --- .github/workflows/compiler_prereleases.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/compiler_prereleases.yml b/.github/workflows/compiler_prereleases.yml index 6f60aac23c1..76cd3310b1a 100644 --- a/.github/workflows/compiler_prereleases.yml +++ b/.github/workflows/compiler_prereleases.yml @@ -62,7 +62,7 @@ jobs: name: Publish packages to npm (dry run) run: | cp ./scripts/release/ci-npmrc ~/.npmrc - scripts/release/publish.js --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }} + scripts/release/publish.js --frfr --debug --ci --versionName=${{ inputs.version_name }} --tag=${{ inputs.dist_tag }} ${{ inputs.tag_version && format('--tagVersion={0}', inputs.tag_version) || '' }} - if: inputs.dry_run != true name: Publish packages to npm run: | From 848e0e3a4f12022d396ddbc2b52fd8fa7ac31fa9 Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 7 Oct 2025 16:23:56 -0400 Subject: [PATCH 049/276] [eprh] Update plugin config to be compatible with flat and legacy (#34762) This has been incredibly frustrating as [ESLint's own docs](https://eslint.org/docs/latest/extend/plugins#backwards-compatibility-for-legacy-configs) are clearly wrong (see #34679). This PR uses [eslint-plugin-react's setup](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/index.js) as a reference, where the presets are assigned to `configs.flat` (not documented by eslint). --- fixtures/eslint-v9/eslint.config.ts | 2 +- .../eslint-plugin-react-hooks/package.json | 2 +- .../eslint-plugin-react-hooks/src/index.ts | 95 +++++++++---------- yarn.lock | 20 +++- 4 files changed, 63 insertions(+), 56 deletions(-) diff --git a/fixtures/eslint-v9/eslint.config.ts b/fixtures/eslint-v9/eslint.config.ts index 5a69593befa..f7d0bddac44 100644 --- a/fixtures/eslint-v9/eslint.config.ts +++ b/fixtures/eslint-v9/eslint.config.ts @@ -2,6 +2,7 @@ import {defineConfig} from 'eslint/config'; import reactHooks from 'eslint-plugin-react-hooks'; export default defineConfig([ + reactHooks.configs.flat['recommended-latest'], { languageOptions: { ecmaVersion: 'latest', @@ -12,7 +13,6 @@ export default defineConfig([ }, }, }, - extends: [reactHooks.configs['recommended-latest']], rules: { 'react-hooks/exhaustive-deps': 'error', }, diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index fdea3928203..ea39fb49032 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -50,7 +50,7 @@ "@babel/preset-typescript": "^7.26.0", "@babel/types": "^7.19.0", "@tsconfig/strictest": "^2.0.5", - "@types/eslint": "^8.56.12", + "@types/eslint": "^9.6.1", "@types/estree": "^1.0.6", "@types/estree-jsx": "^1.0.5", "@types/node": "^20.2.5", diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts index e26fa5aed7a..838b1081a7e 100644 --- a/packages/eslint-plugin-react-hooks/src/index.ts +++ b/packages/eslint-plugin-react-hooks/src/index.ts @@ -14,7 +14,6 @@ import { } from './shared/ReactCompiler'; import RulesOfHooks from './rules/RulesOfHooks'; -// All rules const rules = { 'exhaustive-deps': ExhaustiveDeps, 'rules-of-hooks': RulesOfHooks, @@ -23,7 +22,6 @@ const rules = { ), } satisfies Record; -// Basic hooks rules (for recommended config) const basicRuleConfigs = { 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', @@ -38,74 +36,71 @@ const compilerRuleConfigs = Object.fromEntries( }), ) as Record<`react-hooks/${string}`, Linter.RuleEntry>; -// All rules including compiler rules (for recommended-latest config) const allRuleConfigs: Linter.RulesRecord = { ...basicRuleConfigs, ...compilerRuleConfigs, }; -type FlatConfig = { +const plugins = ['react-hooks']; + +type ReactHooksFlatConfig = { plugins: Record; rules: Linter.RulesRecord; }; +const configs = { + 'recommended-legacy': { + plugins, + rules: basicRuleConfigs, + }, + 'recommended-latest-legacy': { + plugins, + rules: allRuleConfigs, + }, + 'flat/recommended': { + plugins, + rules: basicRuleConfigs, + }, + 'recommended-latest': { + plugins, + rules: allRuleConfigs, + }, + recommended: { + plugins, + rules: basicRuleConfigs, + }, + flat: {} as Record, +}; + const plugin = { meta: { name: 'eslint-plugin-react-hooks', }, rules, - configs: {} as { - 'recommended-legacy': { - plugins: Array; - rules: Linter.RulesRecord; - }; - 'recommended-latest-legacy': { - plugins: Array; - rules: Linter.RulesRecord; - }; - 'flat/recommended': Array; - 'recommended-latest': Array; - recommended: Array; - }, + configs, }; -Object.assign(plugin.configs, { +Object.assign(configs.flat, { 'recommended-legacy': { - plugins: ['react-hooks'], - rules: basicRuleConfigs, + plugins: {'react-hooks': plugin}, + rules: configs['recommended-legacy'].rules, }, - 'recommended-latest-legacy': { - plugins: ['react-hooks'], - rules: allRuleConfigs, + plugins: {'react-hooks': plugin}, + rules: configs['recommended-latest-legacy'].rules, + }, + 'flat/recommended': { + plugins: {'react-hooks': plugin}, + rules: configs['flat/recommended'].rules, + }, + 'recommended-latest': { + plugins: {'react-hooks': plugin}, + rules: configs['recommended-latest'].rules, + }, + recommended: { + plugins: {'react-hooks': plugin}, + rules: configs.recommended.rules, }, - - 'flat/recommended': [ - { - plugins: { - 'react-hooks': plugin, - }, - rules: basicRuleConfigs, - }, - ], - - 'recommended-latest': [ - { - plugins: { - 'react-hooks': plugin, - }, - rules: allRuleConfigs, - }, - ], - - recommended: [ - { - plugins: { - 'react-hooks': plugin, - }, - rules: basicRuleConfigs, - }, - ], }); export default plugin; diff --git a/yarn.lock b/yarn.lock index ffb13120b80..73519b9f695 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3907,10 +3907,10 @@ "@types/estree" "*" "@types/json-schema" "*" -"@types/eslint@^8.56.12": - version "8.56.12" - resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.12.tgz#1657c814ffeba4d2f84c0d4ba0f44ca7ea1ca53a" - integrity sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g== +"@types/eslint@^9.6.1": + version "9.6.1" + resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584" + integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag== dependencies: "@types/estree" "*" "@types/json-schema" "*" @@ -10190,6 +10190,11 @@ hermes-eslint@^0.32.0: hermes-estree "0.32.0" hermes-parser "0.32.0" +hermes-estree@0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480" + integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw== + hermes-estree@0.29.1: version "0.29.1" resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.29.1.tgz#043c7db076e0e8ef8c5f6ed23828d1ba463ebcc5" @@ -10214,6 +10219,13 @@ hermes-parser@0.32.0, hermes-parser@^0.32.0: dependencies: hermes-estree "0.32.0" +hermes-parser@^0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1" + integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA== + dependencies: + hermes-estree "0.25.1" + homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8" From 9724e3e66e4ad3cc82c728e5c732c21986825b06 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Wed, 8 Oct 2025 05:47:50 -0700 Subject: [PATCH 050/276] [DevTools] Gate SuspenseTab (#34754) --- .../src/devtools/views/DevTools.js | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js index 91a17dcad2b..6ddacef5637 100644 --- a/packages/react-devtools-shared/src/devtools/views/DevTools.js +++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js @@ -361,15 +361,17 @@ export default function DevTools({ } />

- + {enableSuspenseTab && ( + + )}

{editorPortalContainer ? ( Date: Wed, 8 Oct 2025 15:17:31 -0400 Subject: [PATCH 051/276] [eprh] Prepare for 7.0.0 (#34757) For 7.0.0: Slim down presets to just 2 configurations: - `recommended`: legacy and flat config with all recommended rules, and - `recommended-latest`: legacy and flat config with all recommended rules plus new bleeding edge experimental compiler rules Removed: - `recommended-latest-legacy` - `flat/recommended` Please see the README for new install instructions. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34757). * #34783 * #34782 * __->__ #34757 --- ReactVersions.js | 2 +- fixtures/eslint-v6/.eslintrc.json | 2 +- fixtures/eslint-v7/.eslintrc.json | 2 +- fixtures/eslint-v8/.eslintrc.json | 2 +- .../eslint-plugin-react-hooks/CHANGELOG.md | 6 ++ packages/eslint-plugin-react-hooks/README.md | 89 ++++++++++--------- .../eslint-plugin-react-hooks/package.json | 2 +- .../eslint-plugin-react-hooks/src/index.ts | 29 +----- 8 files changed, 60 insertions(+), 74 deletions(-) diff --git a/ReactVersions.js b/ReactVersions.js index c657857cbbc..ba7b222bf06 100644 --- a/ReactVersions.js +++ b/ReactVersions.js @@ -33,7 +33,7 @@ const canaryChannelLabel = 'canary'; const rcNumber = 0; const stablePackages = { - 'eslint-plugin-react-hooks': '6.2.0', + 'eslint-plugin-react-hooks': '7.0.0', 'jest-react': '0.18.0', react: ReactVersion, 'react-art': ReactVersion, diff --git a/fixtures/eslint-v6/.eslintrc.json b/fixtures/eslint-v6/.eslintrc.json index f76a20fea57..672da7a085a 100644 --- a/fixtures/eslint-v6/.eslintrc.json +++ b/fixtures/eslint-v6/.eslintrc.json @@ -1,6 +1,6 @@ { "root": true, - "extends": ["plugin:react-hooks/recommended-latest-legacy"], + "extends": ["plugin:react-hooks/recommended"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", diff --git a/fixtures/eslint-v7/.eslintrc.json b/fixtures/eslint-v7/.eslintrc.json index f76a20fea57..672da7a085a 100644 --- a/fixtures/eslint-v7/.eslintrc.json +++ b/fixtures/eslint-v7/.eslintrc.json @@ -1,6 +1,6 @@ { "root": true, - "extends": ["plugin:react-hooks/recommended-latest-legacy"], + "extends": ["plugin:react-hooks/recommended"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", diff --git a/fixtures/eslint-v8/.eslintrc.json b/fixtures/eslint-v8/.eslintrc.json index f76a20fea57..672da7a085a 100644 --- a/fixtures/eslint-v8/.eslintrc.json +++ b/fixtures/eslint-v8/.eslintrc.json @@ -1,6 +1,6 @@ { "root": true, - "extends": ["plugin:react-hooks/recommended-latest-legacy"], + "extends": ["plugin:react-hooks/recommended"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md index cd376cd4dca..0aba9e00561 100644 --- a/packages/eslint-plugin-react-hooks/CHANGELOG.md +++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md @@ -1,3 +1,9 @@ +## 7.0.0 + +This release slims down presets to just 2 configurations (`recommended` and `recommended-latest`), and all compiler rules are enabled by default. + +- **Breaking:** Removed `recommended-latest-legacy` and `flat/recommended` configs. The plugin now provides `recommended` (legacy and flat configs with all recommended rules), and `recommended-latest` (legacy and flat configs with all recommended rules plus new bleeding edge experimental compiler rules). ([@poteto](https://github.com/poteto) in [#34757](https://github.com/facebook/react/pull/34757)) + ## 6.1.1 **Note:** 6.1.0 accidentally allowed use of `recommended` without flat config, causing errors when used with ESLint v9's `defineConfig()` helper. This has been fixed in 6.1.1. diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md index afd89ab2263..a1b4bcabb59 100644 --- a/packages/eslint-plugin-react-hooks/README.md +++ b/packages/eslint-plugin-react-hooks/README.md @@ -4,8 +4,6 @@ The official ESLint plugin for [React](https://react.dev) which enforces the [Ru ## Installation -**Note: If you're using Create React App, please use `react-scripts` >= 3 instead of adding it directly.** - Assuming you already have ESLint installed, run: ```sh @@ -18,9 +16,7 @@ yarn add eslint-plugin-react-hooks --dev ### Flat Config (eslint.config.js|ts) -#### >= 6.0.0 - -For users of 6.0 and beyond, add the `recommended` config. +Add the `recommended` config for all recommended rules: ```js // eslint.config.js @@ -28,61 +24,32 @@ import reactHooks from 'eslint-plugin-react-hooks'; import { defineConfig } from 'eslint/config'; export default defineConfig([ - { - files: ["src/**/*.{js,jsx,ts,tsx}"], - plugins: { - 'react-hooks': reactHooks, - }, - extends: ['react-hooks/recommended'], - }, + reactHooks.configs.flat.recommended, ]); ``` -#### 5.2.0 - -For users of 5.2.0 (the first version with flat config support), add the `recommended-latest` config. +If you want to try bleeding edge experimental compiler rules, use `recommended-latest`. ```js +// eslint.config.js import reactHooks from 'eslint-plugin-react-hooks'; import { defineConfig } from 'eslint/config'; export default defineConfig([ - { - files: ["src/**/*.{js,jsx,ts,tsx}"], - plugins: { - 'react-hooks': reactHooks, - }, - extends: ['react-hooks/recommended-latest'], - }, + reactHooks.configs.flat['recommended-latest'], ]); ``` ### Legacy Config (.eslintrc) -#### >= 5.2.0 - -If you are still using ESLint below 9.0.0, you can use `recommended-legacy` for accessing a legacy version of the recommended config. +If you are still using ESLint below 9.0.0, the `recommended` preset can also be used to enable all recommended rules. ```js { - "extends": [ - // ... - "plugin:react-hooks/recommended-legacy" - ] + "extends": ["plugin:react-hooks/recommended"], + // ... } -``` - -#### < 5.2.0 - -If you're using a version earlier than 5.2.0, the legacy config was simply `recommended`. -```js -{ - "extends": [ - // ... - "plugin:react-hooks/recommended" - ] -} ``` ### Custom Configuration @@ -92,7 +59,7 @@ If you want more fine-grained configuration, you can instead choose to enable sp #### Flat Config (eslint.config.js|ts) ```js -import * as reactHooks from 'eslint-plugin-react-hooks'; +import reactHooks from 'eslint-plugin-react-hooks'; export default [ { @@ -100,8 +67,26 @@ export default [ plugins: { 'react-hooks': reactHooks }, // ... rules: { + // Core hooks rules 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', + + // React Compiler rules + 'react-hooks/config': 'error', + 'react-hooks/error-boundaries': 'error', + 'react-hooks/component-hook-factories': 'error', + 'react-hooks/gating': 'error', + 'react-hooks/globals': 'error', + 'react-hooks/immutability': 'error', + 'react-hooks/preserve-manual-memoization': 'error', + 'react-hooks/purity': 'error', + 'react-hooks/refs': 'error', + 'react-hooks/set-state-in-effect': 'error', + 'react-hooks/set-state-in-render': 'error', + 'react-hooks/static-components': 'error', + 'react-hooks/unsupported-syntax': 'warn', + 'react-hooks/use-memo': 'error', + 'react-hooks/incompatible-library': 'warn', } }, ]; @@ -116,8 +101,26 @@ export default [ ], "rules": { // ... + // Core hooks rules "react-hooks/rules-of-hooks": "error", - "react-hooks/exhaustive-deps": "warn" + "react-hooks/exhaustive-deps": "warn", + + // React Compiler rules + "react-hooks/config": "error", + "react-hooks/error-boundaries": "error", + "react-hooks/component-hook-factories": "error", + "react-hooks/gating": "error", + "react-hooks/globals": "error", + "react-hooks/immutability": "error", + "react-hooks/preserve-manual-memoization": "error", + "react-hooks/purity": "error", + "react-hooks/refs": "error", + "react-hooks/set-state-in-effect": "error", + "react-hooks/set-state-in-render": "error", + "react-hooks/static-components": "error", + "react-hooks/unsupported-syntax": "warn", + "react-hooks/use-memo": "error", + "react-hooks/incompatible-library": "warn" } } ``` diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index ea39fb49032..a22448f11c7 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -1,7 +1,7 @@ { "name": "eslint-plugin-react-hooks", "description": "ESLint rules for React Hooks", - "version": "5.2.0", + "version": "7.0.0", "repository": { "type": "git", "url": "https://github.com/facebook/react.git", diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts index 838b1081a7e..2de0141a8e5 100644 --- a/packages/eslint-plugin-react-hooks/src/index.ts +++ b/packages/eslint-plugin-react-hooks/src/index.ts @@ -44,55 +44,32 @@ const allRuleConfigs: Linter.RulesRecord = { const plugins = ['react-hooks']; type ReactHooksFlatConfig = { - plugins: Record; + plugins: {react: any}; rules: Linter.RulesRecord; }; const configs = { - 'recommended-legacy': { - plugins, - rules: basicRuleConfigs, - }, - 'recommended-latest-legacy': { + recommended: { plugins, rules: allRuleConfigs, }, - 'flat/recommended': { - plugins, - rules: basicRuleConfigs, - }, 'recommended-latest': { plugins, rules: allRuleConfigs, }, - recommended: { - plugins, - rules: basicRuleConfigs, - }, flat: {} as Record, }; const plugin = { meta: { name: 'eslint-plugin-react-hooks', + version: '7.0.0', }, rules, configs, }; Object.assign(configs.flat, { - 'recommended-legacy': { - plugins: {'react-hooks': plugin}, - rules: configs['recommended-legacy'].rules, - }, - 'recommended-latest-legacy': { - plugins: {'react-hooks': plugin}, - rules: configs['recommended-latest-legacy'].rules, - }, - 'flat/recommended': { - plugins: {'react-hooks': plugin}, - rules: configs['flat/recommended'].rules, - }, 'recommended-latest': { plugins: {'react-hooks': plugin}, rules: configs['recommended-latest'].rules, From 3e1b34dc51dfc3cbada2cdd0ead5acee6998f444 Mon Sep 17 00:00:00 2001 From: lauren Date: Wed, 8 Oct 2025 15:45:22 -0400 Subject: [PATCH 052/276] [compiler] Setup RecommendedLatest preset (#34782) Renames the `recommended` property on LintRule to `preset`, to allow exporting rules for different presets. For now the `Recommended` and `RecommendedLatest` presets are the same, but in the next PR I will enable more rules for the latest preset. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34782). * #34783 * __->__ #34782 --- .../src/CompilerError.ts | 74 +++++++++++-------- .../babel-plugin-react-compiler/src/index.ts | 1 + .../src/rules/ReactCompilerRule.ts | 14 +++- .../eslint-plugin-react-hooks/src/index.ts | 24 ++++-- .../src/shared/ReactCompiler.ts | 36 +++++---- 5 files changed, 96 insertions(+), 53 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts index 2e7acac2542..0db911dbe56 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts @@ -669,6 +669,21 @@ export enum ErrorCategory { FBT = 'FBT', } +export enum LintRulePreset { + /** + * Rules that are stable and included in the `recommended` preset. + */ + Recommended = 'recommended', + /** + * Rules that are more experimental and only included in the `recommended-latest` preset. + */ + RecommendedLatest = 'recommended-latest', + /** + * Rules that are disabled. + */ + Off = 'off', +} + export type LintRule = { // Stores the category the rule corresponds to, used to filter errors when reporting category: ErrorCategory; @@ -689,15 +704,14 @@ export type LintRule = { description: string; /** - * If true, this rule will automatically appear in the default, "recommended" ESLint - * rule set. Otherwise it will be part of an `allRules` export that developers can - * use to opt-in to showing output of all possible rules. + * Configures the preset in which the rule is enabled. If 'off', the rule will not be included in + * any preset. * * NOTE: not all validations are enabled by default! Setting this flag only affects * whether a given rule is part of the recommended set. The corresponding validation * also should be enabled by default if you want the error to actually show up! */ - recommended: boolean; + preset: LintRulePreset; }; const RULE_NAME_PATTERN = /^[a-z]+(-[a-z]+)*$/; @@ -720,7 +734,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'automatic-effect-dependencies', description: 'Verifies that automatic effect dependencies are compiled if opted-in', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.CapitalizedCalls: { @@ -730,7 +744,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'capitalized-calls', description: 'Validates against calling capitalized functions/methods instead of using JSX', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.Config: { @@ -739,7 +753,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'config', description: 'Validates the compiler configuration options', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.EffectDependencies: { @@ -748,7 +762,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'memoized-effect-dependencies', description: 'Validates that effect dependencies are memoized', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.EffectDerivationsOfState: { @@ -758,7 +772,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'no-deriving-state-in-effects', description: 'Validates against deriving values from state in an effect', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.EffectSetState: { @@ -768,7 +782,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'set-state-in-effect', description: 'Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.ErrorBoundaries: { @@ -778,7 +792,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'error-boundaries', description: 'Validates usage of error boundaries instead of try/catch for errors in child components', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.Factories: { @@ -789,7 +803,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { description: 'Validates against higher order functions defining nested components or hooks. ' + 'Components and hooks should be defined at the module level', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.FBT: { @@ -798,7 +812,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'fbt', description: 'Validates usage of fbt', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.Fire: { @@ -807,7 +821,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'fire', description: 'Validates usage of `fire`', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.Gating: { @@ -817,7 +831,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'gating', description: 'Validates configuration of [gating mode](https://react.dev/reference/react-compiler/gating)', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.Globals: { @@ -828,7 +842,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { description: 'Validates against assignment/mutation of globals during render, part of ensuring that ' + '[side effects must render outside of render](https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.Hooks: { @@ -842,7 +856,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { * We need to dedeupe these (moving the remaining bits into the compiler) and then enable * this rule. */ - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.Immutability: { @@ -852,7 +866,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'immutability', description: 'Validates against mutating props, state, and other values that [are immutable](https://react.dev/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable)', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.Invariant: { @@ -861,7 +875,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'invariant', description: 'Internal invariants', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.PreserveManualMemo: { @@ -873,7 +887,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { 'Validates that existing manual memoized is preserved by the compiler. ' + 'React Compiler will only compile components and hooks if its inference ' + '[matches or exceeds the existing manual memoization](https://react.dev/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo)', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.Purity: { @@ -883,7 +897,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'purity', description: 'Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.Refs: { @@ -893,7 +907,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'refs', description: 'Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.RenderSetState: { @@ -903,7 +917,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'set-state-in-render', description: 'Validates against setting state during render, which can trigger additional renders and potential infinite render loops', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.StaticComponents: { @@ -913,7 +927,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'static-components', description: 'Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.Suppression: { @@ -922,7 +936,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'rule-suppression', description: 'Validates against suppression of other rules', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.Syntax: { @@ -931,7 +945,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'syntax', description: 'Validates against invalid syntax', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.Todo: { @@ -940,7 +954,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Hint, name: 'todo', description: 'Unimplemented features', - recommended: false, + preset: LintRulePreset.Off, }; } case ErrorCategory.UnsupportedSyntax: { @@ -950,7 +964,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'unsupported-syntax', description: 'Validates against syntax that we do not plan to support in React Compiler', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.UseMemo: { @@ -960,7 +974,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'use-memo', description: 'Validates usage of the useMemo() hook against common mistakes. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.', - recommended: true, + preset: LintRulePreset.Recommended, }; } case ErrorCategory.IncompatibleLibrary: { @@ -970,7 +984,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { name: 'incompatible-library', description: 'Validates against usage of libraries which are incompatible with memoization (manual or automatic)', - recommended: true, + preset: LintRulePreset.Recommended, }; } default: { diff --git a/compiler/packages/babel-plugin-react-compiler/src/index.ts b/compiler/packages/babel-plugin-react-compiler/src/index.ts index c5d8c4cb6e8..d2abd744d6b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/index.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/index.ts @@ -14,6 +14,7 @@ export { ErrorSeverity, ErrorCategory, LintRules, + LintRulePreset, type CompilerErrorDetailOptions, type CompilerDiagnosticOptions, type CompilerDiagnosticDetail, diff --git a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts index 7dacbe6d190..8f41b3afaba 100644 --- a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts +++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts @@ -15,6 +15,7 @@ import type {Linter, Rule} from 'eslint'; import runReactCompiler, {RunCacheEntry} from '../shared/RunReactCompiler'; import { ErrorSeverity, + LintRulePreset, LintRules, type LintRule, } from 'babel-plugin-react-compiler/src/CompilerError'; @@ -150,7 +151,7 @@ function makeRule(rule: LintRule): Rule.RuleModule { type: 'problem', docs: { description: rule.description, - recommended: rule.recommended, + recommended: rule.preset === LintRulePreset.Recommended, }, fixable: 'code', hasSuggestions: true, @@ -171,7 +172,16 @@ export const allRules: RulesConfig = LintRules.reduce((acc, rule) => { }, {} as RulesConfig); export const recommendedRules: RulesConfig = LintRules.filter( - rule => rule.recommended, + rule => rule.preset === LintRulePreset.Recommended, +).reduce((acc, rule) => { + acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; + return acc; +}, {} as RulesConfig); + +export const recommendedLatestRules: RulesConfig = LintRules.filter( + rule => + rule.preset === LintRulePreset.Recommended || + rule.preset === LintRulePreset.RecommendedLatest, ).reduce((acc, rule) => { acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; return acc; diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts index 2de0141a8e5..6d72c1daa57 100644 --- a/packages/eslint-plugin-react-hooks/src/index.ts +++ b/packages/eslint-plugin-react-hooks/src/index.ts @@ -11,6 +11,7 @@ import { allRules, mapErrorSeverityToESlint, recommendedRules, + recommendedLatestRules, } from './shared/ReactCompiler'; import RulesOfHooks from './rules/RulesOfHooks'; @@ -27,7 +28,7 @@ const basicRuleConfigs = { 'react-hooks/exhaustive-deps': 'warn', } as const satisfies Linter.RulesRecord; -const compilerRuleConfigs = Object.fromEntries( +const recommendedCompilerRuleConfigs = Object.fromEntries( Object.entries(recommendedRules).map(([name, ruleConfig]) => { return [ `react-hooks/${name}` as const, @@ -36,9 +37,22 @@ const compilerRuleConfigs = Object.fromEntries( }), ) as Record<`react-hooks/${string}`, Linter.RuleEntry>; -const allRuleConfigs: Linter.RulesRecord = { +const recommendedLatestCompilerRuleConfigs = Object.fromEntries( + Object.entries(recommendedLatestRules).map(([name, ruleConfig]) => { + return [ + `react-hooks/${name}` as const, + mapErrorSeverityToESlint(ruleConfig.severity), + ] as const; + }), +) as Record<`react-hooks/${string}`, Linter.RuleEntry>; + +const recommendedRuleConfigs: Linter.RulesRecord = { + ...basicRuleConfigs, + ...recommendedCompilerRuleConfigs, +}; +const recommendedLatestRuleConfigs: Linter.RulesRecord = { ...basicRuleConfigs, - ...compilerRuleConfigs, + ...recommendedLatestCompilerRuleConfigs, }; const plugins = ['react-hooks']; @@ -51,11 +65,11 @@ type ReactHooksFlatConfig = { const configs = { recommended: { plugins, - rules: allRuleConfigs, + rules: recommendedRuleConfigs, }, 'recommended-latest': { plugins, - rules: allRuleConfigs, + rules: recommendedLatestRuleConfigs, }, flat: {} as Record, }; diff --git a/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts index cdb3af38489..854e26149f7 100644 --- a/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts +++ b/packages/eslint-plugin-react-hooks/src/shared/ReactCompiler.ts @@ -14,6 +14,7 @@ import { LintRules, type LintRule, ErrorSeverity, + LintRulePreset, } from 'babel-plugin-react-compiler'; import {type Linter, type Rule} from 'eslint'; import runReactCompiler, {RunCacheEntry} from './RunReactCompiler'; @@ -149,7 +150,7 @@ function makeRule(rule: LintRule): Rule.RuleModule { type: 'problem', docs: { description: rule.description, - recommended: rule.recommended, + recommended: rule.preset === LintRulePreset.Recommended, }, fixable: 'code', hasSuggestions: true, @@ -164,23 +165,26 @@ type RulesConfig = { [name: string]: {rule: Rule.RuleModule; severity: ErrorSeverity}; }; -export const allRules: RulesConfig = LintRules.reduce( - (acc, rule) => { - acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; - return acc; - }, - {} as RulesConfig, -); +export const allRules: RulesConfig = LintRules.reduce((acc, rule) => { + acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; + return acc; +}, {} as RulesConfig); export const recommendedRules: RulesConfig = LintRules.filter( - rule => rule.recommended, -).reduce( - (acc, rule) => { - acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; - return acc; - }, - {} as RulesConfig, -); + rule => rule.preset === LintRulePreset.Recommended, +).reduce((acc, rule) => { + acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; + return acc; +}, {} as RulesConfig); + +export const recommendedLatestRules: RulesConfig = LintRules.filter( + rule => + rule.preset === LintRulePreset.Recommended || + rule.preset === LintRulePreset.RecommendedLatest, +).reduce((acc, rule) => { + acc[rule.name] = {rule: makeRule(rule), severity: rule.severity}; + return acc; +}, {} as RulesConfig); export function mapErrorSeverityToESlint( severity: ErrorSeverity, From 4b3e662e4ce54eb54a8701c48a967cc84a389501 Mon Sep 17 00:00:00 2001 From: lauren Date: Wed, 8 Oct 2025 15:55:13 -0400 Subject: [PATCH 053/276] [compiler] Add VoidUseMemo rule to RecommendedLatest (#34783) Adds a new error category VoidUseMemo which is only enabled in the RecommendedLatest preset for now. --- .../src/CompilerError.ts | 17 ++++++++++++++++- .../src/Inference/DropManualMemoization.ts | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts index 0db911dbe56..1c077edd8d8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts @@ -536,7 +536,8 @@ function printErrorSummary(category: ErrorCategory, message: string): string { case ErrorCategory.StaticComponents: case ErrorCategory.Suppression: case ErrorCategory.Syntax: - case ErrorCategory.UseMemo: { + case ErrorCategory.UseMemo: + case ErrorCategory.VoidUseMemo: { heading = 'Error'; break; } @@ -582,6 +583,10 @@ export enum ErrorCategory { * Checking for valid usage of manual memoization */ UseMemo = 'UseMemo', + /** + * Checking that useMemos always return a value + */ + VoidUseMemo = 'VoidUseMemo', /** * Checking for higher order functions acting as factories for components/hooks */ @@ -977,6 +982,16 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { preset: LintRulePreset.Recommended, }; } + case ErrorCategory.VoidUseMemo: { + return { + category, + severity: ErrorSeverity.Error, + name: 'void-use-memo', + description: + 'Validates that useMemos always return a value. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.', + preset: LintRulePreset.RecommendedLatest, + }; + } case ErrorCategory.IncompatibleLibrary: { return { category, diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts index 3eaeb5e4aa0..f86747618dd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts @@ -454,7 +454,7 @@ export function dropManualMemoization( if (!hasNonVoidReturn(funcToCheck.loweredFunc.func)) { errors.pushDiagnostic( CompilerDiagnostic.create({ - category: ErrorCategory.UseMemo, + category: ErrorCategory.VoidUseMemo, reason: 'useMemo() callbacks must return a value', description: `This ${ manualMemo.loadInstr.value.kind === 'PropertyLoad' From 91e5c3daf11408262e1345cbbbbadd943859b748 Mon Sep 17 00:00:00 2001 From: Anatole-Godard <48732483+Anatole-Godard@users.noreply.github.com> Date: Thu, 9 Oct 2025 19:38:23 +0200 Subject: [PATCH 054/276] fix(devtools): remove duplicated "Display density" field in General settings (#34792) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary This pull request fixes a small UI issue in the React Developer Tools settings panel. The “Display density” field was appearing twice in the General tab. Fix : https://github.com/facebook/react/issues/34791 --- .../src/devtools/views/Settings/GeneralSettings.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js index 6823dd9f619..d8f50a9cdc7 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js @@ -104,18 +104,6 @@ export default function GeneralSettings(_: {}): React.Node { ) : null}

Display density

- -

- {supportsTraceUpdates && (

From 06fcc8f380c6a905c7bc18d94453f623cf8cbc81 Mon Sep 17 00:00:00 2001 From: Ian Duvall Date: Thu, 9 Oct 2025 12:02:55 -0700 Subject: [PATCH 055/276] [playground] Fix syntax error from crashing the Compiler playground (#34623) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Fixes a syntax error causing the Compiler playground to crash. Resolves https://github.com/facebook/react/issues/34622. ## How did you test this change? Tested locally and added a test. Screenshot 2025-09-27 at 8 13 07 AM

--- .../playground/__tests__/e2e/page.spec.ts | 30 +++++++++++++++++++ compiler/apps/playground/lib/compilation.ts | 2 +- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/compiler/apps/playground/__tests__/e2e/page.spec.ts b/compiler/apps/playground/__tests__/e2e/page.spec.ts index 94abe40eeb8..8ad9f122aab 100644 --- a/compiler/apps/playground/__tests__/e2e/page.spec.ts +++ b/compiler/apps/playground/__tests__/e2e/page.spec.ts @@ -314,6 +314,36 @@ test('disableMemoizationForDebugging flag works as expected', async ({ expect(output).toMatchSnapshot('disableMemoizationForDebugging-output.txt'); }); +test('error is displayed when source has syntax error', async ({page}) => { + const syntaxErrorSource = `function TestComponent(props) { + const oops = props. + return ( + <>{oops} + ); +}`; + const store: Store = { + source: syntaxErrorSource, + config: defaultConfig, + showInternals: false, + }; + const hash = encodeStore(store); + await page.goto(`/#${hash}`); + await page.waitForFunction(isMonacoLoaded); + await expandConfigs(page); + await page.screenshot({ + fullPage: true, + path: 'test-results/08-source-syntax-error.png', + }); + + const text = + (await page.locator('.monaco-editor-output').allInnerTexts()) ?? []; + const output = text.join(''); + + expect(output.replace(/\s+/g, ' ')).toContain( + 'Expected identifier to be defined before being used', + ); +}); + TEST_CASE_INPUTS.forEach((t, idx) => test(`playground compiles: ${t.name}`, async ({page}) => { const store: Store = { diff --git a/compiler/apps/playground/lib/compilation.ts b/compiler/apps/playground/lib/compilation.ts index 10bf0164c0e..f668c05dde2 100644 --- a/compiler/apps/playground/lib/compilation.ts +++ b/compiler/apps/playground/lib/compilation.ts @@ -297,7 +297,7 @@ export function compile( if (!error.hasErrors() && otherErrors.length !== 0) { otherErrors.forEach(e => error.details.push(e)); } - if (error.hasErrors()) { + if (error.hasErrors() || !transformOutput) { return [{kind: 'err', results, error}, language, baseOpts]; } return [ From 8454a32f3cacdcb11465cfd14d68fb3eb613815f Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Fri, 10 Oct 2025 14:05:49 -0400 Subject: [PATCH 056/276] devtools: fix ellipsis truncation for key values (#34796) before Screenshot 2025-10-09 at 11 38 03

after

--- .../src/devtools/views/Components/Element.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js index 35f0d077c73..24ce695cfcf 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js @@ -181,9 +181,7 @@ export default function Element({data, index, style}: Props): React.Node { className={styles.KeyValue} title={key} onDoubleClick={handleKeyDoubleClick}> -

-                
-

+ " @@ -196,9 +194,7 @@ export default function Element({data, index, style}: Props): React.Node { className={styles.KeyValue} title={nameProp} onDoubleClick={handleKeyDoubleClick}> -

-                
-

+ " From d44659744fd09736793c73e93ea79048f45570ea Mon Sep 17 00:00:00 2001 From: Hendrik Liebau Date: Fri, 10 Oct 2025 21:40:56 +0200 Subject: [PATCH 057/276] [Flight] Fix preload `as` attribute for stylesheets (#34760) Follow-up to #34604. For a stylesheet, we need to render ``, and not ``. ([ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preload#what_types_of_content_can_be_preloaded)) fixes vercel/next.js#84569 --- .../react-dom-bindings/src/server/ReactFlightServerConfigDOM.js | 2 +- .../src/__tests__/ReactFlightDOM-test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js index 1c9b4763f52..e5c1c22c190 100644 --- a/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFlightServerConfigDOM.js @@ -169,7 +169,7 @@ function processLink(props: Object, formatContext: FormatContext): void { return; } case 'stylesheet': { - preload(href, 'stylesheet', { + preload(href, 'style', { crossOrigin: props.crossOrigin, integrity: props.integrity, nonce: props.nonce, diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js index 9fe9c7aaf32..a2e08383264 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js @@ -2087,7 +2087,7 @@ describe('ReactFlightDOM', () => { media="(orientation: landscape)" /> - +

hello world

From ead92181bdbecc332a98daa808f341726dcaa414 Mon Sep 17 00:00:00 2001 From: Hendrik Liebau Date: Fri, 10 Oct 2025 21:44:28 +0200 Subject: [PATCH 058/276] [Flight] Avoid unnecessary indirection when serializing debug info (#34797) When a debug channel is hooked up, and we're serializing debug models, if the result is an already outlined reference, we can emit it directly, without also outlining the reference. This would create an unnecessary indirection. Before: ``` :N1760023808330.2688 0:D"$2" 0:D"$3" 0:D"$4" 0:"hi" 1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}} 2:{"time":3.0989999999999327} 3:"$1" 4:{"time":3.261792000000014} ``` After: ``` :N1760023786873.8916 0:D"$2" 0:D"$1" 0:D"$3" 0:"hi" 1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}} 2:{"time":2.4145829999999933} 3:{"time":2.5488749999999527} ``` Notice how the second debug info chunk is now directly referencing chunk `1` in the debug channel, without outlining and referencing `"$1"` as its own debug chunk `3`. This not only simplifies the RSC payload, and reduces overhead. But more importantly it helps the client resolve cyclic references when a model has debug info that has a reference back to the model. The client is currently not able to resolve such a cycle when those chunk indirections are involved. Ideally, it would also be able to resolve them regardless, but that requires more work. In the meantime, this fixes an immediate issue. --- .../__tests__/ReactFlightDOMBrowser-test.js | 56 +++++++++++++++++++ .../react-server/src/ReactFlightServer.js | 23 +++++--- 2 files changed, 71 insertions(+), 8 deletions(-) diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index 9c7b5b62b19..40ee3971298 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => { `); } }); + + it('should resolve a cycle between debug info and the value it produces when using a debug channel', async () => { + // Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel. + + function Inner({style}) { + return

; + } + + function Component({style}) { + return ; + } + + const style = {}; + const element = ; + style.element = element; + + let debugReadableStreamController; + + const debugReadableStream = new ReadableStream({ + start(controller) { + debugReadableStreamController = controller; + }, + }); + + const rscStream = await serverAct(() => + ReactServerDOMServer.renderToReadableStream(element, webpackMap, { + debugChannel: { + writable: new WritableStream({ + write(chunk) { + debugReadableStreamController.enqueue(chunk); + }, + close() { + debugReadableStreamController.close(); + }, + }), + }, + }), + ); + + function ClientRoot({response}) { + return use(response); + } + + const response = ReactServerDOMClient.createFromReadableStream(rscStream, { + debugChannel: {readable: debugReadableStream}, + }); + + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + + await act(() => { + root.render(); + }); + + expect(container.innerHTML).toBe('

'); + }); }); diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 546e1bbb64f..152be2eecca 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -4300,14 +4300,21 @@ function emitDebugChunk( const json: string = serializeDebugModel(request, 500, debugInfo); if (request.debugDestination !== null) { - // Outline the actual timing information to the debug channel. - const outlinedId = request.nextChunkId++; - const debugRow = outlinedId.toString(16) + ':' + json + '\n'; - request.pendingDebugChunks++; - request.completedDebugChunks.push(stringToChunk(debugRow)); - const row = - serializeRowHeader('D', id) + '"$' + outlinedId.toString(16) + '"\n'; - request.completedRegularChunks.push(stringToChunk(row)); + if (json[0] === '"' && json[1] === '$') { + // This is already an outlined reference so we can just emit it directly, + // without an unnecessary indirection. + const row = serializeRowHeader('D', id) + json + '\n'; + request.completedRegularChunks.push(stringToChunk(row)); + } else { + // Outline the debug information to the debug channel. + const outlinedId = request.nextChunkId++; + const debugRow = outlinedId.toString(16) + ':' + json + '\n'; + request.pendingDebugChunks++; + request.completedDebugChunks.push(stringToChunk(debugRow)); + const row = + serializeRowHeader('D', id) + '"$' + outlinedId.toString(16) + '"\n'; + request.completedRegularChunks.push(stringToChunk(row)); + } } else { const row = serializeRowHeader('D', id) + json + '\n'; request.completedRegularChunks.push(stringToChunk(row)); From 1d68bce19c9409ed70604d1d16b70b68ce71dc4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Sun, 12 Oct 2025 19:50:06 -0400 Subject: [PATCH 059/276] [Fiber] Don't unhide a node if a direct parent offscreen is still hidden (#34821) If an inner Offscreen commits an unhide, but an outer Offscreen is still hidden but they're controlling the same DOM node then we shouldn't unhide the DOM node yet. This keeps track of whether we're directly inside a hidden offscreen. It might be better to just do the tree search instead of keeping the stack state since it's a rare case. Although this hide/unhide path does trigger a lot of times even when there's no change. This was technically a bug with Suspense too but it doesn't appear because a suspended Suspense boundary never commits its partial state. If it did, it would trigger this same path. But it can happen with an outer Activity and inner Suspense. --- .../src/ReactFiberCommitWork.js | 20 +++- .../src/__tests__/Activity-test.js | 68 +++++++++++++ .../ReactSuspenseEffectsSemantics-test.js | 99 +++++++++++++++++++ 3 files changed, 184 insertions(+), 3 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index c98edc7a0bc..825b814db51 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -292,6 +292,9 @@ import type {Flags} from './ReactFiberFlags'; // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor. let offscreenSubtreeIsHidden: boolean = false; let offscreenSubtreeWasHidden: boolean = false; +// Track whether there's a hidden offscreen above with no HostComponent between. If so, +// it overrides the hiddenness of the HostComponent below. +let offscreenDirectParentIsHidden: boolean = false; // Used to track if a form needs to be reset at the end of the mutation phase. let needsFormReset = false; @@ -2141,8 +2144,14 @@ function commitMutationEffectsOnFiber( // Fall through } case HostComponent: { + // We've hit a host component, so it's no longer a direct parent. + const prevOffscreenDirectParentIsHidden = offscreenDirectParentIsHidden; + offscreenDirectParentIsHidden = false; + recursivelyTraverseMutationEffects(root, finishedWork, lanes); + offscreenDirectParentIsHidden = prevOffscreenDirectParentIsHidden; + commitReconciliationEffects(finishedWork, lanes); if (flags & Ref) { @@ -2422,10 +2431,14 @@ function commitMutationEffectsOnFiber( // effects again. const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden; const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden; + const prevOffscreenDirectParentIsHidden = offscreenDirectParentIsHidden; offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden || isHidden; + offscreenDirectParentIsHidden = + prevOffscreenDirectParentIsHidden || isHidden; offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden; recursivelyTraverseMutationEffects(root, finishedWork, lanes); offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden; + offscreenDirectParentIsHidden = prevOffscreenDirectParentIsHidden; offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden; if ( @@ -2504,9 +2517,10 @@ function commitMutationEffectsOnFiber( } if (supportsMutation) { - // TODO: This needs to run whenever there's an insertion or update - // inside a hidden Offscreen tree. - hideOrUnhideAllChildren(finishedWork, isHidden); + // If it's trying to unhide but the parent is still hidden, then we should not unhide. + if (isHidden || !offscreenDirectParentIsHidden) { + hideOrUnhideAllChildren(finishedWork, isHidden); + } } } diff --git a/packages/react-reconciler/src/__tests__/Activity-test.js b/packages/react-reconciler/src/__tests__/Activity-test.js index 01311217e24..2fdcc16701d 100644 --- a/packages/react-reconciler/src/__tests__/Activity-test.js +++ b/packages/react-reconciler/src/__tests__/Activity-test.js @@ -14,6 +14,7 @@ let waitForPaint; let waitFor; let assertLog; let assertConsoleErrorDev; +let Suspense; describe('Activity', () => { beforeEach(() => { @@ -25,6 +26,7 @@ describe('Activity', () => { act = require('internal-test-utils').act; LegacyHidden = React.unstable_LegacyHidden; Activity = React.Activity; + Suspense = React.Suspense; useState = React.useState; useInsertionEffect = React.useInsertionEffect; useLayoutEffect = React.useLayoutEffect; @@ -1424,6 +1426,72 @@ describe('Activity', () => { ); }); + // @gate enableActivity + it('reveal an inner Activity boundary without revealing an outer one on the same host child', async () => { + // This ensures that no update is scheduled, which would cover up the bug if the parent + // then re-hides the child on the way up. + const memoizedElement =

; + function App({showOuter, showInner}) { + return ( + + + {memoizedElement} + + + ); + } + + const root = ReactNoop.createRoot(); + + // Prerender the whole tree. + await act(() => { + root.render(); + }); + expect(root).toMatchRenderedOutput(

); + + await act(() => { + root.render(); + }); + expect(root).toMatchRenderedOutput(

); + }); + + // @gate enableActivity + it('reveal an inner Suspense boundary without revealing an outer Activity on the same host child', async () => { + // This ensures that no update is scheduled, which would cover up the bug if the parent + // then re-hides the child on the way up. + const memoizedElement =

; + const promise = new Promise(() => {}); + function App({showOuter, showInner}) { + return ( + + + {memoizedElement} + {showInner ? null : promise} + + + ); + } + + const root = ReactNoop.createRoot(); + + // Prerender the whole tree. + await act(() => { + root.render(); + }); + expect(root).toMatchRenderedOutput(

); + + // Resuspend the inner. + await act(() => { + root.render(); + }); + expect(root).toMatchRenderedOutput(

); + + await act(() => { + root.render(); + }); + expect(root).toMatchRenderedOutput(

); + }); + // @gate enableActivity it('insertion effects are not disconnected when the visibility changes', async () => { function Child({step}) { diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js index 9fc94d7d0ee..eeb00ac9850 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js @@ -1401,6 +1401,105 @@ describe('ReactSuspenseEffectsSemantics', () => { ); }); + // @gate enableLegacyCache + it('should wait to reveal an inner child when inner one reveals first', async () => { + function App({outerChildren, innerChildren}) { + return ( + } name="Outer"> + } name="Inner"> +

{innerChildren}

+ + {outerChildren} + + ); + } + + // Mount + await act(() => { + ReactNoop.render(); + }); + assertLog([]); + expect(ReactNoop).toMatchRenderedOutput(

); + + // Resuspend inner boundary + await act(() => { + ReactNoop.render( + } + />, + ); + }); + assertLog([ + 'Suspend:InnerAsync', + 'Text:InnerFallback render', + 'Text:InnerFallback create insertion', + 'Text:InnerFallback create layout', + 'Text:InnerFallback create passive', + 'Suspend:InnerAsync', + ]); + expect(ReactNoop).toMatchRenderedOutput( + <> +

+ + , + ); + + // Resuspend both boundaries + await act(() => { + ReactNoop.render( + } + innerChildren={} + />, + ); + }); + assertLog([ + 'Suspend:InnerAsync', + 'Text:InnerFallback render', + 'Suspend:OuterAsync', + 'Text:OuterFallback render', + 'Text:InnerFallback destroy layout', + 'Text:OuterFallback create insertion', + 'Text:OuterFallback create layout', + 'Text:OuterFallback create passive', + 'Suspend:InnerAsync', + 'Text:InnerFallback render', + 'Suspend:OuterAsync', + ]); + expect(ReactNoop).toMatchRenderedOutput( + <> +

+ + + , + ); + + // Unsuspend the inner Suspense subtree only + // Interestingly, this never commits because the tree is left suspended. + // If it did commit, it would potentially cause the div to incorrectly reappear. + await act(() => { + ReactNoop.render( + } + innerChildren={null} + />, + ); + }); + assertLog([ + 'Suspend:OuterAsync', + 'Text:OuterFallback render', + 'Suspend:OuterAsync', + ]); + expect(ReactNoop).toMatchRenderedOutput( + <> +

+ + + , + ); + }); + // @gate enableLegacyCache it('should show nested host nodes if multiple boundaries resolve at the same time', async () => { function App({innerChildren = null, outerChildren = null}) { From 93d4458fdc054929e54fb25017d237ed85415533 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Mon, 13 Oct 2025 17:58:43 +0200 Subject: [PATCH 060/276] [Fiber] Ensure `useEffectEvent` reads latest values in `forwardRef` and `memo()` Components (#34831) --- .../src/ReactFiberCommitWork.js | 8 +- .../src/__tests__/useEffectEvent-test.js | 78 +++++++++++++++++++ 2 files changed, 81 insertions(+), 5 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 825b814db51..adff6647f6d 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -496,7 +496,9 @@ function commitBeforeMutationEffectsOnFiber( } switch (finishedWork.tag) { - case FunctionComponent: { + case FunctionComponent: + case ForwardRef: + case SimpleMemoComponent: { if (enableUseEffectEventHook) { if ((flags & Update) !== NoFlags) { const updateQueue: FunctionComponentUpdateQueue | null = @@ -513,10 +515,6 @@ function commitBeforeMutationEffectsOnFiber( } break; } - case ForwardRef: - case SimpleMemoComponent: { - break; - } case ClassComponent: { if ((flags & Snapshot) !== NoFlags) { if (current !== null) { diff --git a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js index 17b8d6d421f..f263c9af269 100644 --- a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js +++ b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js @@ -850,4 +850,82 @@ describe('useEffectEvent', () => { ); assertLog(['Add to cart', 'url: /shop/2, numberOfItems: 1']); }); + + it('reads the latest context value in memo Components', async () => { + const MyContext = createContext('default'); + + let logContextValue; + const ContextReader = React.memo(function ContextReader() { + const value = useContext(MyContext); + Scheduler.log('ContextReader: ' + value); + const fireLogContextValue = useEffectEvent(() => { + Scheduler.log('ContextReader (Effect event): ' + value); + }); + useEffect(() => { + logContextValue = fireLogContextValue; + }, []); + return null; + }); + + function App({value}) { + return ( + + + + ); + } + + const root = ReactNoop.createRoot(); + await act(() => root.render()); + assertLog(['ContextReader: first']); + + logContextValue(); + + assertLog(['ContextReader (Effect event): first']); + + await act(() => root.render()); + assertLog(['ContextReader: second']); + + logContextValue(); + assertLog(['ContextReader (Effect event): second']); + }); + + it('reads the latest context value in forwardRef Components', async () => { + const MyContext = createContext('default'); + + let logContextValue; + const ContextReader = React.forwardRef(function ContextReader(props, ref) { + const value = useContext(MyContext); + Scheduler.log('ContextReader: ' + value); + const fireLogContextValue = useEffectEvent(() => { + Scheduler.log('ContextReader (Effect event): ' + value); + }); + useEffect(() => { + logContextValue = fireLogContextValue; + }, []); + return null; + }); + + function App({value}) { + return ( + + + + ); + } + + const root = ReactNoop.createRoot(); + await act(() => root.render()); + assertLog(['ContextReader: first']); + + logContextValue(); + + assertLog(['ContextReader (Effect event): first']); + + await act(() => root.render()); + assertLog(['ContextReader: second']); + + logContextValue(); + assertLog(['ContextReader (Effect event): second']); + }); }); From b467c6e9493a484d89b4c4c09d61add968a0b3c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Mon, 13 Oct 2025 12:09:45 -0400 Subject: [PATCH 061/276] [DevTools] Explicitly say which id to scroll to and only once (#34823) This ensures that we don't scroll on changes to the timeline such as when loading a new page or while the timeline is still loading. We only auto scroll to a boundary when we perform an explicit operation from the user. --- .../views/SuspenseTab/SuspenseTimeline.js | 27 +++++++++---------- .../views/SuspenseTab/SuspenseTreeContext.js | 7 +++++ 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index 30ca21476f2..8ebb06899d6 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -8,7 +8,7 @@ */ import * as React from 'react'; -import {useContext, useEffect, useRef} from 'react'; +import {useContext, useEffect} from 'react'; import {BridgeContext} from '../context'; import {TreeDispatcherContext} from '../Components/TreeContext'; import {useHighlightHostInstance, useScrollToHostInstance} from '../hooks'; @@ -29,9 +29,8 @@ function SuspenseTimelineInput() { useHighlightHostInstance(); const scrollToHostInstance = useScrollToHostInstance(); - const {timeline, timelineIndex, hoveredTimelineIndex, playing} = useContext( - SuspenseTreeStateContext, - ); + const {timeline, timelineIndex, hoveredTimelineIndex, playing, autoScroll} = + useContext(SuspenseTreeStateContext); const min = 0; const max = timeline.length > 0 ? timeline.length - 1 : 0; @@ -102,7 +101,6 @@ function SuspenseTimelineInput() { }); } - const isInitialMount = useRef(true); // TODO: useEffectEvent here once it's supported in all versions DevTools supports. // For now we just exclude it from deps since we don't lint those anyway. function changeTimelineIndex(newIndex: number) { @@ -115,22 +113,21 @@ function SuspenseTimelineInput() { bridge.send('overrideSuspenseMilestone', { suspendedSet, }); - if (isInitialMount.current) { - // Skip scrolling on initial mount. Only when we're changing the timeline. - isInitialMount.current = false; - } else { - // When we're scrubbing through the timeline, scroll the current boundary - // into view as it was just revealed. This is after we override the milestone - // to reveal it. - const selectedSuspenseID = timeline[timelineIndex]; - scrollToHostInstance(selectedSuspenseID); - } } useEffect(() => { changeTimelineIndex(timelineIndex); }, [timelineIndex]); + useEffect(() => { + if (autoScroll.id > 0) { + const scrollToId = autoScroll.id; + // Consume the scroll ref so that we only trigger this scroll once. + autoScroll.id = 0; + scrollToHostInstance(scrollToId); + } + }, [autoScroll]); + useEffect(() => { if (!playing) { return undefined; diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js index 60235e09f39..484a336c349 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js @@ -31,6 +31,7 @@ export type SuspenseTreeState = { uniqueSuspendersOnly: boolean, playing: boolean, autoSelect: boolean, + autoScroll: {id: number}, // Ref that's set to 0 after scrolling once. }; type ACTION_SUSPENSE_TREE_MUTATION = { @@ -125,6 +126,7 @@ function getInitialState(store: Store): SuspenseTreeState { uniqueSuspendersOnly, playing: false, autoSelect: true, + autoScroll: {id: 0}, // Don't auto-scroll initially }; return initialState; @@ -218,6 +220,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedSuspenseID, playing: false, // pause autoSelect: false, + autoScroll: {id: selectedSuspenseID}, // scroll }; } case 'SET_SUSPENSE_LINEAGE': { @@ -285,6 +288,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { timelineIndex: nextTimelineIndex, playing: false, // pause autoSelect: false, + autoScroll: {id: nextSelectedSuspenseID}, // scroll }; } case 'SUSPENSE_SKIP_TIMELINE_INDEX': { @@ -308,6 +312,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { timelineIndex: nextTimelineIndex, playing: false, // pause autoSelect: false, + autoScroll: {id: nextSelectedSuspenseID}, // scroll }; } case 'SUSPENSE_PLAY_PAUSE': { @@ -359,6 +364,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedSuspenseID: nextSelectedSuspenseID, timelineIndex: nextTimelineIndex, playing: nextPlaying, + autoScroll: {id: nextSelectedSuspenseID}, // scroll }; } case 'TOGGLE_TIMELINE_FOR_ID': { @@ -392,6 +398,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { timelineIndex: nextTimelineIndex, playing: false, // pause autoSelect: false, + autoScroll: {id: nextSelectedSuspenseID}, }; } case 'HOVER_TIMELINE_FOR_ID': { From 34b15674272b153f34d3bf535bcdb7a36b4b391e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Mon, 13 Oct 2025 12:10:54 -0400 Subject: [PATCH 062/276] [DevTools] Ignore suspense boundaries, without visual representation, in the timeline (#34824) This ignore a Suspense boundary from the timeline when it has no visual representation. No rect. In effect, this is not blocking the user experience. Technically it could be an effect that mounts which can have a side-effect which is visible. It could also be a meta-data tag like `` which is visible. We could hoistables a virtual representation by giving them a virtual rect. E.g. at the top of the page. This could be added after the fact. --- .../react-devtools-shared/src/devtools/store.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 99971f6a1a6..eeb6da60f8a 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -51,6 +51,7 @@ import type { ComponentFilter, ElementType, SuspenseNode, + Rect, } from 'react-devtools-shared/src/frontend/types'; import type { FrontendBridge, @@ -99,6 +100,10 @@ export type Capabilities = { supportsAdvancedProfiling: AdvancedProfiling, }; +function isNonZeroRect(rect: Rect) { + return rect.width > 0 || rect.height > 0 || rect.x > 0 || rect.y > 0; +} + /** * The store is the single source of truth for updates from the backend. * ContextProviders can subscribe to the Store for specific things they want to provide. @@ -918,7 +923,15 @@ export default class Store extends EventEmitter<{ if (current === undefined) { continue; } + // Ignore any suspense boundaries that has no visual representation as this is not + // part of the visible loading sequence. + // TODO: Consider making visible meta data and other side-effects get virtual rects. + const hasRects = + current.rects !== null && + current.rects.length > 0 && + current.rects.some(isNonZeroRect); if ( + hasRects && (!uniqueSuspendersOnly || current.hasUniqueSuspenders) && // Roots are already included as part of the Screen current.id !== rootID From e2ce64acb94968d8ca464f37fab2a7ed77848fa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 13 Oct 2025 12:11:52 -0400 Subject: [PATCH 063/276] [DevTools] Don't show the root as being non-compliant (#34827) `isStrictModeNonCompliant` on the root just means that it supports strict mode. It's inherited by other nodes. It's not possible to opt-in to strict mode on the root itself but rather right below it. So we should not mark the root as being non-compliant. This lets you select the root in the suspense tab and it shouldn't show as red with a warning. --- .../src/devtools/views/Components/InspectedElement.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index 88aeab7bfd4..633a4d382eb 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js @@ -194,7 +194,7 @@ export default function InspectedElementWrapper(_: Props): React.Node { } let strictModeBadge = null; - if (element.isStrictModeNonCompliant) { + if (element.isStrictModeNonCompliant && element.parentID !== 0) { strictModeBadge = ( <Tooltip label="This component is not running in StrictMode. Click to learn more."> <a @@ -237,7 +237,7 @@ export default function InspectedElementWrapper(_: Props): React.Node { <div className={styles.SelectedComponentName}> <div className={ - element.isStrictModeNonCompliant + element.isStrictModeNonCompliant && element.parentID !== 0 ? `${styles.ComponentName} ${styles.StrictModeNonCompliantComponentName}` : styles.ComponentName } From d7215b4970858ea45db924e1ec435a9a3e5cff40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 13 Oct 2025 12:12:12 -0400 Subject: [PATCH 064/276] [DevTools] Preserve the original index when sorting suspended by (#34829) The index is both used as the key and for hydration purposes. Previously we didn't preserve the index when sorting so the index didn't line up which caused hydration to be the wrong slot when sorted. --- .../Components/InspectedElementSuspendedBy.js | 35 +++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index d1da51a0cf1..19cc47f982c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -300,9 +300,31 @@ type Props = { store: Store, }; -function compareTime(a: SerializedAsyncInfo, b: SerializedAsyncInfo): number { - const ioA = a.awaited; - const ioB = b.awaited; +function withIndex( + value: SerializedAsyncInfo, + index: number, +): { + index: number, + value: SerializedAsyncInfo, +} { + return { + index, + value, + }; +} + +function compareTime( + a: { + index: number, + value: SerializedAsyncInfo, + }, + b: { + index: number, + value: SerializedAsyncInfo, + }, +): number { + const ioA = a.value.awaited; + const ioB = b.value.awaited; if (ioA.start === ioB.start) { return ioA.end - ioB.end; } @@ -364,7 +386,8 @@ export default function InspectedElementSuspendedBy({ minTime = maxTime - 25; } - const sortedSuspendedBy = suspendedBy === null ? [] : suspendedBy.slice(0); + const sortedSuspendedBy = + suspendedBy === null ? [] : suspendedBy.map(withIndex); sortedSuspendedBy.sort(compareTime); let unknownSuspenders = null; @@ -407,11 +430,11 @@ export default function InspectedElementSuspendedBy({ <ButtonIcon type="copy" /> </Button> </div> - {sortedSuspendedBy.map((asyncInfo, index) => ( + {sortedSuspendedBy.map(({value, index}) => ( <SuspendedByRow key={index} index={index} - asyncInfo={asyncInfo} + asyncInfo={value} bridge={bridge} element={element} inspectedElement={inspectedElement} From 026abeaa5f3fdb5f5fdef7ebd699e3ed8e64a506 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 13 Oct 2025 12:29:00 -0400 Subject: [PATCH 065/276] [Flight] Respect displayName of Promise instances on the server (#34825) This lets you assign a name to a Promise that's passed into first party code from third party since it otherwise would have no other stack frame to indicate its name since the whole creation stack would be in third party. We already respect the `displayName` on the client but it's more complicated on the server because we don't only consider the exact instance passed to `use()` but the whole await sequence and we can pick any Promise along the way for consideration. Therefore this also adds a change where we pick the Promise node for consideration if it has a name but no stack. Where we otherwise would've picked the I/O node. Another thing that this PR does is treat anonymous stack frames (empty url) as third party for purposes of heuristics like "hasUnfilteredFrame" and the name assignment. This lets you include these in the actual generated stacks (by overriding `filterStackFrame`) but we don't actually want them to be considered first party code in the heuristics since it ends up favoring those stacks and using internals like `Function.all` in name assignment. --- .../react-server/src/ReactFlightServer.js | 73 ++- .../ReactFlightAsyncDebugInfo-test.js | 590 +++++++++++------- 2 files changed, 415 insertions(+), 248 deletions(-) diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 152be2eecca..1c769c93ee7 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -252,7 +252,11 @@ function findCalledFunctionNameFromStackTrace( const url = devirtualizeURL(callsite[1]); const lineNumber = callsite[2]; const columnNumber = callsite[3]; - if (filterStackFrame(url, functionName, lineNumber, columnNumber)) { + if ( + filterStackFrame(url, functionName, lineNumber, columnNumber) && + // Don't consider anonymous code first party even if the filter wants to include them in the stack. + url !== '' + ) { if (bestMatch === '') { // If we had no good stack frames for internal calls, just use the last // first party function name. @@ -308,7 +312,10 @@ function hasUnfilteredFrame(request: Request, stack: ReactStackTrace): boolean { const isAsync = callsite[6]; if ( !isAsync && - filterStackFrame(url, functionName, lineNumber, columnNumber) + filterStackFrame(url, functionName, lineNumber, columnNumber) && + // Ignore anonymous stack frames like internals. They are also not in first party + // code even though it might be useful to include them in the final stack. + url !== '' ) { return true; } @@ -367,7 +374,10 @@ export function isAwaitInUserspace( const url = devirtualizeURL(callsite[1]); const lineNumber = callsite[2]; const columnNumber = callsite[3]; - return filterStackFrame(url, functionName, lineNumber, columnNumber); + return ( + filterStackFrame(url, functionName, lineNumber, columnNumber) && + url !== '' + ); } return false; } @@ -2347,6 +2357,7 @@ function visitAsyncNode( } const awaited = node.awaited; let match: void | null | PromiseNode | IONode = previousIONode; + const promise = node.promise.deref(); if (awaited !== null) { const ioNode = visitAsyncNode(request, task, awaited, visited, cutOff); if (ioNode === undefined) { @@ -2361,17 +2372,27 @@ function visitAsyncNode( if (ioNode.tag === PROMISE_NODE) { // If the ioNode was a Promise, then that means we found one in user space since otherwise // we would've returned an IO node. We assume this has the best stack. + // Note: This might also be a Promise with a displayName but potentially a worse stack. + // We could potentially favor the outer Promise if it has a stack but not the inner. match = ioNode; } else if ( - node.stack === null || - !hasUnfilteredFrame(request, node.stack) + (node.stack !== null && hasUnfilteredFrame(request, node.stack)) || + (promise !== undefined && + // $FlowFixMe[prop-missing] + typeof promise.displayName === 'string' && + (ioNode.stack === null || + !hasUnfilteredFrame(request, ioNode.stack))) ) { + // If this Promise has a stack trace then we favor that over the I/O node since we're + // mainly dealing with Promises as the abstraction. + // If it has no stack but at least has a displayName and the io doesn't have a better + // stack anyway, then also use this Promise instead since at least it has a name. + match = node; + } else { // If this Promise was created inside only third party code, then try to use // the inner I/O node instead. This could happen if third party calls into first // party to perform some I/O. match = ioNode; - } else { - match = node; } } else if (request.status === ABORTING) { if (node.start < request.abortTime && node.end > request.abortTime) { @@ -2379,8 +2400,11 @@ function visitAsyncNode( // Promise that was aborted. This won't necessarily have I/O associated with it but // it's a point of interest. if ( - node.stack !== null && - hasUnfilteredFrame(request, node.stack) + (node.stack !== null && + hasUnfilteredFrame(request, node.stack)) || + (promise !== undefined && + // $FlowFixMe[prop-missing] + typeof promise.displayName === 'string') ) { match = node; } @@ -2389,7 +2413,6 @@ function visitAsyncNode( } // We need to forward after we visit awaited nodes because what ever I/O we requested that's // the thing that generated this node and its virtual children. - const promise = node.promise.deref(); if (promise !== undefined) { const debugInfo = promise._debugInfo; if (debugInfo != null && !visited.has(debugInfo)) { @@ -4497,17 +4520,33 @@ function serializeIONode( let stack = null; let name = ''; + if (ioNode.promise !== null) { + // Pick an explicit name from the Promise itself if it exists. + // Note that we don't use the promiseRef passed in since that's sometimes the awaiting Promise + // which is the value observed but it's likely not the one with the name on it. + const promise = ioNode.promise.deref(); + if ( + promise !== undefined && + // $FlowFixMe[prop-missing] + typeof promise.displayName === 'string' + ) { + name = promise.displayName; + } + } if (ioNode.stack !== null) { // The stack can contain some leading internal frames for the construction of the promise that we skip. const fullStack = stripLeadingPromiseCreationFrames(ioNode.stack); stack = filterStackTrace(request, fullStack); - name = findCalledFunctionNameFromStackTrace(request, fullStack); - // The name can include the object that this was called on but sometimes that's - // just unnecessary context. - if (name.startsWith('Window.')) { - name = name.slice(7); - } else if (name.startsWith('<anonymous>.')) { - name = name.slice(7); + if (name === '') { + // If we didn't have an explicit name, try finding one from the stack. + name = findCalledFunctionNameFromStackTrace(request, fullStack); + // The name can include the object that this was called on but sometimes that's + // just unnecessary context. + if (name.startsWith('Window.')) { + name = name.slice(7); + } else if (name.startsWith('<anonymous>.')) { + name = name.slice(7); + } } } const owner = ioNode.owner; diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index 9253371f54a..992b58d3880 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -109,6 +109,7 @@ describe('ReactFlightAsyncDebugInfo', () => { async function getData(text) { await delay(1); const promise = delay(2); + promise.displayName = 'hello'; await Promise.all([promise]); return text.toUpperCase(); } @@ -159,7 +160,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -183,7 +184,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -210,9 +211,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 117, + 118, 26, - 116, + 117, 5, ], ], @@ -231,7 +232,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -250,9 +251,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 117, + 118, 26, - 116, + 117, 5, ], ], @@ -267,7 +268,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "end": 0, "env": "Server", - "name": "delay", + "name": "hello", "owner": { "env": "Server", "key": null, @@ -277,7 +278,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -304,9 +305,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 117, + 118, 20, - 116, + 117, 5, ], ], @@ -325,7 +326,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -336,7 +337,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 112, + 113, 21, 109, 5, @@ -344,9 +345,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 117, + 118, 20, - 116, + 117, 5, ], ], @@ -366,9 +367,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 119, + 120, 60, - 116, + 117, 5, ], ], @@ -380,7 +381,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "end": 0, "env": "Server", - "name": "delay", + "name": "hello", "owner": { "env": "Server", "key": null, @@ -390,7 +391,7 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 128, + 129, 109, 108, 50, @@ -430,9 +431,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 119, + 120, 60, - 116, + 117, 5, ], ], @@ -441,9 +442,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "InnerComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 125, + 126, 35, - 122, + 123, 5, ], ], @@ -624,9 +625,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 588, + 589, 40, - 569, + 570, 49, ], [ @@ -656,9 +657,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 588, + 589, 40, - 569, + 570, 49, ], [ @@ -683,17 +684,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 571, + 572, 13, - 570, + 571, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 576, + 577, 36, - 575, + 576, 5, ], ], @@ -712,9 +713,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 588, + 589, 40, - 569, + 570, 49, ], [ @@ -731,17 +732,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 571, + 572, 13, - 570, + 571, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 576, + 577, 36, - 575, + 576, 5, ], ], @@ -761,9 +762,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 578, + 579, 60, - 575, + 576, 5, ], ], @@ -782,9 +783,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 588, + 589, 40, - 569, + 570, 49, ], [ @@ -809,17 +810,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 571, + 572, 13, - 570, + 571, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 577, + 578, 22, - 575, + 576, 5, ], ], @@ -838,9 +839,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 578, + 579, 60, - 575, + 576, 5, ], ], @@ -849,9 +850,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "InnerComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 584, + 585, 40, - 581, + 582, 5, ], ], @@ -926,9 +927,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 895, + 896, 109, - 882, + 883, 80, ], ], @@ -947,9 +948,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 895, + 896, 109, - 882, + 883, 80, ], ], @@ -966,9 +967,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 895, + 896, 109, - 882, + 883, 80, ], ], @@ -1040,9 +1041,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1009, + 1010, 109, - 1000, + 1001, 94, ], ], @@ -1125,9 +1126,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1094, + 1095, 109, - 1070, + 1071, 50, ], ], @@ -1221,9 +1222,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1190, + 1191, 109, - 1173, + 1174, 63, ], ], @@ -1248,9 +1249,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1280,9 +1281,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1299,17 +1300,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1175, + 1176, 13, - 1174, + 1175, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1181, + 1182, 24, - 1180, + 1181, 5, ], ], @@ -1336,9 +1337,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1347,17 +1348,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1175, + 1176, 13, - 1174, + 1175, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1181, + 1182, 24, - 1180, + 1181, 5, ], ], @@ -1390,9 +1391,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1409,17 +1410,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1176, + 1177, 13, - 1174, + 1175, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1181, + 1182, 18, - 1180, + 1181, 5, ], ], @@ -1446,9 +1447,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1186, + 1187, 24, - 1185, + 1186, 5, ], ], @@ -1457,17 +1458,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1176, + 1177, 13, - 1174, + 1175, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1181, + 1182, 18, - 1180, + 1181, 5, ], ], @@ -1565,9 +1566,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1529, + 1530, 40, - 1512, + 1513, 62, ], [ @@ -1597,9 +1598,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1529, + 1530, 40, - 1512, + 1513, 62, ], [ @@ -1624,17 +1625,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1514, + 1515, 13, - 1513, + 1514, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1524, + 1525, 13, - 1523, + 1524, 5, ], ], @@ -1653,9 +1654,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1529, + 1530, 40, - 1512, + 1513, 62, ], [ @@ -1672,17 +1673,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1514, + 1515, 13, - 1513, + 1514, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1524, + 1525, 13, - 1523, + 1524, 5, ], ], @@ -1702,9 +1703,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1526, 60, - 1523, + 1524, 5, ], ], @@ -1726,9 +1727,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1529, + 1530, 40, - 1512, + 1513, 62, ], [ @@ -1753,17 +1754,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1514, + 1515, 13, - 1513, + 1514, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1524, + 1525, 13, - 1523, + 1524, 5, ], ], @@ -1782,9 +1783,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1526, 60, - 1523, + 1524, 5, ], ], @@ -1793,9 +1794,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Child", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1519, + 1520, 28, - 1518, + 1519, 5, ], ], @@ -1878,9 +1879,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1842, + 1843, 40, - 1826, + 1827, 57, ], [ @@ -1910,9 +1911,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1842, + 1843, 40, - 1826, + 1827, 57, ], [ @@ -1937,17 +1938,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1828, + 1829, 13, - 1827, + 1828, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1837, + 1838, 23, - 1836, + 1837, 5, ], ], @@ -1966,9 +1967,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1842, + 1843, 40, - 1826, + 1827, 57, ], [ @@ -1985,17 +1986,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1828, + 1829, 13, - 1827, + 1828, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1837, + 1838, 23, - 1836, + 1837, 5, ], ], @@ -2015,9 +2016,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1839, 60, - 1836, + 1837, 5, ], ], @@ -2036,9 +2037,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1842, + 1843, 40, - 1826, + 1827, 57, ], [ @@ -2063,17 +2064,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1828, + 1829, 13, - 1827, + 1828, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1837, + 1838, 23, - 1836, + 1837, 5, ], ], @@ -2087,9 +2088,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1839, 60, - 1836, + 1837, 5, ], ], @@ -2174,9 +2175,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2206,9 +2207,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2233,17 +2234,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2128, + 2129, 13, - 2126, + 2127, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2133, + 2134, 13, - 2132, + 2133, 5, ], ], @@ -2262,9 +2263,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2281,17 +2282,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2128, + 2129, 13, - 2126, + 2127, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2133, + 2134, 13, - 2132, + 2133, 5, ], ], @@ -2313,9 +2314,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2340,25 +2341,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2122, + 2123, 13, - 2121, + 2122, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2127, + 2128, 15, - 2126, + 2127, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2133, + 2134, 13, - 2132, + 2133, 5, ], ], @@ -2377,9 +2378,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2396,25 +2397,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2122, + 2123, 13, - 2121, + 2122, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2127, + 2128, 15, - 2126, + 2127, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2133, + 2134, 13, - 2132, + 2133, 5, ], ], @@ -2436,9 +2437,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2463,9 +2464,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2123, + 2124, 13, - 2121, + 2122, 5, ], ], @@ -2484,9 +2485,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2138, + 2139, 40, - 2120, + 2121, 80, ], [ @@ -2503,9 +2504,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2123, + 2124, 13, - 2121, + 2122, 5, ], ], @@ -2578,9 +2579,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2548, 109, - 2536, + 2537, 58, ], ], @@ -2602,9 +2603,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2548, 109, - 2536, + 2537, 58, ], ], @@ -2621,17 +2622,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2538, + 2539, 14, - 2537, + 2538, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2544, + 2545, 20, - 2543, + 2544, 5, ], ], @@ -2650,9 +2651,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2548, 109, - 2536, + 2537, 58, ], ], @@ -2661,17 +2662,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2538, + 2539, 23, - 2537, + 2538, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2544, + 2545, 20, - 2543, + 2544, 5, ], ], @@ -2750,9 +2751,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2714, + 2715, 40, - 2702, + 2703, 56, ], [ @@ -2782,9 +2783,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2714, + 2715, 40, - 2702, + 2703, 56, ], [ @@ -2809,9 +2810,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2710, + 2711, 20, - 2709, + 2710, 5, ], ], @@ -2830,9 +2831,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2714, + 2715, 40, - 2702, + 2703, 56, ], [ @@ -2849,9 +2850,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2710, + 2711, 20, - 2709, + 2710, 5, ], ], @@ -2944,9 +2945,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -2976,9 +2977,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -2995,17 +2996,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2889, + 2890, 15, - 2888, + 2889, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2898, + 2899, 19, - 2897, + 2898, 5, ], ], @@ -3024,9 +3025,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -3043,17 +3044,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2889, + 2890, 15, - 2888, + 2889, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2898, + 2899, 19, - 2897, + 2898, 5, ], ], @@ -3075,9 +3076,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -3094,9 +3095,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2898, + 2899, 25, - 2897, + 2898, 5, ], ], @@ -3115,9 +3116,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2903, + 2904, 40, - 2882, + 2883, 42, ], [ @@ -3134,9 +3135,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2898, + 2899, 25, - 2897, + 2898, 5, ], ], @@ -3212,9 +3213,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3179, + 3180, 40, - 3167, + 3168, 36, ], ], @@ -3236,9 +3237,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3179, + 3180, 40, - 3167, + 3168, 36, ], ], @@ -3247,9 +3248,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3171, + 3172, 7, - 3169, + 3170, 5, ], ], @@ -3268,9 +3269,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3179, + 3180, 40, - 3167, + 3168, 36, ], ], @@ -3279,9 +3280,136 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3173, + 3174, 7, - 3169, + 3170, + 5, + ], + ], + }, + { + "time": 0, + }, + { + "time": 0, + }, + { + "awaited": { + "byteSize": 0, + "end": 0, + "name": "RSC stream", + "owner": null, + "start": 0, + "value": { + "value": "stream", + }, + }, + }, + ] + `); + } + }); + + it('can track a promise created fully outside first party code', async function internal_test() { + async function internal_API(text, timeout) { + let resolve; + const promise = new Promise(r => { + resolve = r; + }); + promise.displayName = 'greeting'; + setTimeout(() => resolve(text), timeout); + return promise; + } + + async function Component({promise}) { + const result = await promise; + return result; + } + + const stream = ReactServerDOMServer.renderToPipeableStream( + <Component promise={internal_API('hello', 1)} />, + {}, + { + filterStackFrame, + }, + ); + + const readable = new Stream.PassThrough(streamOptions); + + const result = ReactServerDOMClient.createFromNodeStream(readable, { + moduleMap: {}, + moduleLoading: {}, + }); + stream.pipe(readable); + + expect(await result).toBe('hello'); + + await finishLoadingStream(readable); + if ( + __DEV__ && + gate( + flags => + flags.enableComponentPerformanceTrack && flags.enableAsyncDebugInfo, + ) + ) { + expect(getDebugInfo(result)).toMatchInlineSnapshot(` + [ + { + "time": 0, + }, + { + "env": "Server", + "key": null, + "name": "Component", + "props": {}, + "stack": [ + [ + "new Promise", + "", + 0, + 0, + 0, + 0, + ], + ], + }, + { + "time": 0, + }, + { + "awaited": { + "end": 0, + "env": "Server", + "name": "greeting", + "start": 0, + "value": { + "status": "halted", + }, + }, + "env": "Server", + "owner": { + "env": "Server", + "key": null, + "name": "Component", + "props": {}, + "stack": [ + [ + "new Promise", + "", + 0, + 0, + 0, + 0, + ], + ], + }, + "stack": [ + [ + "Component", + "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", + 3325, + 20, + 3324, 5, ], ], From 83ea655a0ba1de44c933368cd7f56c8f0418f07f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 13 Oct 2025 13:07:39 -0400 Subject: [PATCH 066/276] [DevTools] Group consecutive suspended by rows by the same name (#34830) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34829. This lets you get an overview more easily when there's lots of things like scripts downloading. Pluralized the name. E.g. `script` -> `scripts` or `fetch` -> `fetches`. This only groups them consecutively when they'd have the same place in the list anyway because otherwise it might cover up some kind of waterfall effects. <img width="404" height="225" alt="Screenshot 2025-10-13 at 12 06 51 AM" src="https://github.com/user-attachments/assets/da204a8e-d5f7-4eb0-8c51-4cc5bfd184c4" /> Expanded: <img width="407" height="360" alt="Screenshot 2025-10-13 at 12 07 00 AM" src="https://github.com/user-attachments/assets/de3c3de9-f314-4c87-b606-31bc49eb4aba" /> --- .../Components/InspectedElementSuspendedBy.js | 190 ++++++++++++++++-- .../src/devtools/views/utils.js | 36 ++++ 2 files changed, 210 insertions(+), 16 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index 19cc47f982c..fa2b6a95bed 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -13,7 +13,7 @@ import {useState, useTransition} from 'react'; import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import KeyValue from './KeyValue'; -import {serializeDataForCopy} from '../utils'; +import {serializeDataForCopy, pluralize} from '../utils'; import Store from '../../store'; import styles from './InspectedElementSharedStyles.css'; import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck'; @@ -44,6 +44,7 @@ type RowProps = { index: number, minTime: number, maxTime: number, + skipName?: boolean, }; function getShortDescription(name: string, description: string): string { @@ -99,6 +100,7 @@ function SuspendedByRow({ index, minTime, maxTime, + skipName, }: RowProps) { const [isOpen, setIsOpen] = useState(false); const [openIsPending, startOpenTransition] = useTransition(); @@ -166,8 +168,10 @@ function SuspendedByRow({ className={styles.CollapsableHeaderIcon} type={isOpen ? 'expanded' : 'collapsed'} /> - <span className={styles.CollapsableHeaderTitle}>{name}</span> - {shortDescription === '' ? null : ( + <span className={styles.CollapsableHeaderTitle}> + {skipName ? shortDescription : name} + </span> + {skipName || shortDescription === '' ? null : ( <> <span className={styles.CollapsableHeaderSeparator}>{' ('}</span> <span className={styles.CollapsableHeaderTitle}> @@ -331,6 +335,110 @@ function compareTime( return ioA.start - ioB.start; } +type GroupProps = { + bridge: FrontendBridge, + element: Element, + inspectedElement: InspectedElement, + store: Store, + name: string, + suspendedBy: Array<{ + index: number, + value: SerializedAsyncInfo, + }>, + minTime: number, + maxTime: number, +}; + +function SuspendedByGroup({ + bridge, + element, + inspectedElement, + store, + name, + suspendedBy, + minTime, + maxTime, +}: GroupProps) { + const [isOpen, setIsOpen] = useState(false); + let start = Infinity; + let end = -Infinity; + let isRejected = false; + for (let i = 0; i < suspendedBy.length; i++) { + const asyncInfo: SerializedAsyncInfo = suspendedBy[i].value; + const ioInfo = asyncInfo.awaited; + if (ioInfo.start < start) { + start = ioInfo.start; + } + if (ioInfo.end > end) { + end = ioInfo.end; + } + const value: any = ioInfo.value; + if ( + value !== null && + typeof value === 'object' && + value[meta.name] === 'rejected Thenable' + ) { + isRejected = true; + } + } + const timeScale = 100 / (maxTime - minTime); + let left = (start - minTime) * timeScale; + let width = (end - start) * timeScale; + if (width < 5) { + // Use at least a 5% width to avoid showing too small indicators. + width = 5; + if (left > 95) { + left = 95; + } + } + const pluralizedName = pluralize(name); + return ( + <div className={styles.CollapsableRow}> + <Button + className={styles.CollapsableHeader} + onClick={() => { + setIsOpen(prevIsOpen => !prevIsOpen); + }} + title={pluralizedName}> + <ButtonIcon + className={styles.CollapsableHeaderIcon} + type={isOpen ? 'expanded' : 'collapsed'} + /> + <span className={styles.CollapsableHeaderTitle}>{pluralizedName}</span> + <div className={styles.CollapsableHeaderFiller} /> + {isOpen ? null : ( + <div className={styles.TimeBarContainer}> + <div + className={ + !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored + } + style={{ + left: left.toFixed(2) + '%', + width: width.toFixed(2) + '%', + }} + /> + </div> + )} + </Button> + {isOpen && + suspendedBy.map(({value, index}) => ( + <SuspendedByRow + key={index} + index={index} + asyncInfo={value} + bridge={bridge} + element={element} + inspectedElement={inspectedElement} + store={store} + minTime={minTime} + maxTime={maxTime} + skipName={true} + /> + ))} + </div> + ); +} + export default function InspectedElementSuspendedBy({ bridge, element, @@ -390,6 +498,27 @@ export default function InspectedElementSuspendedBy({ suspendedBy === null ? [] : suspendedBy.map(withIndex); sortedSuspendedBy.sort(compareTime); + // Organize into groups of consecutive entries with the same name. + const groups = []; + let currentGroup = null; + let currentGroupName = null; + for (let i = 0; i < sortedSuspendedBy.length; i++) { + const entry = sortedSuspendedBy[i]; + const name = entry.value.awaited.name; + if ( + currentGroupName !== name || + !name || + name === 'Promise' || + currentGroup === null + ) { + // Create a new group. + currentGroupName = name; + currentGroup = []; + groups.push(currentGroup); + } + currentGroup.push(entry); + } + let unknownSuspenders = null; switch (inspectedElement.unknownSuspenders) { case UNKNOWN_SUSPENDERS_REASON_PRODUCTION: @@ -430,19 +559,48 @@ export default function InspectedElementSuspendedBy({ <ButtonIcon type="copy" /> </Button> </div> - {sortedSuspendedBy.map(({value, index}) => ( - <SuspendedByRow - key={index} - index={index} - asyncInfo={value} - bridge={bridge} - element={element} - inspectedElement={inspectedElement} - store={store} - minTime={minTime} - maxTime={maxTime} - /> - ))} + {groups.length === 1 + ? // If it's only one type of suspender we can flatten it. + groups[0].map(entry => ( + <SuspendedByRow + key={entry.index} + index={entry.index} + asyncInfo={entry.value} + bridge={bridge} + element={element} + inspectedElement={inspectedElement} + store={store} + minTime={minTime} + maxTime={maxTime} + /> + )) + : groups.map((entries, index) => + entries.length === 1 ? ( + <SuspendedByRow + key={entries[0].index} + index={entries[0].index} + asyncInfo={entries[0].value} + bridge={bridge} + element={element} + inspectedElement={inspectedElement} + store={store} + minTime={minTime} + maxTime={maxTime} + /> + ) : ( + <SuspendedByGroup + key={entries[0].index} + name={entries[0].value.awaited.name} + suspendedBy={entries} + bridge={bridge} + element={element} + inspectedElement={inspectedElement} + store={store} + minTime={minTime} + maxTime={maxTime} + /> + ), + )} {unknownSuspenders} </div> ); diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js index ed14b2c236b..3b0de4118a2 100644 --- a/packages/react-devtools-shared/src/devtools/views/utils.js +++ b/packages/react-devtools-shared/src/devtools/views/utils.js @@ -198,3 +198,39 @@ export function truncateText(text: string, maxLength: number): string { return text; } } + +export function pluralize(word: string): string { + if (!/^[a-z]+$/i.test(word)) { + // If it's not a single a-z word, give up. + return word; + } + + switch (word) { + case 'man': + return 'men'; + case 'woman': + return 'women'; + case 'child': + return 'children'; + case 'foot': + return 'feet'; + case 'tooth': + return 'teeth'; + case 'mouse': + return 'mice'; + case 'person': + return 'people'; + } + + // Words ending in s, x, z, ch, sh → add "es" + if (/(s|x|z|ch|sh)$/i.test(word)) return word + 'es'; + + // Words ending in consonant + y → replace y with "ies" + if (/[bcdfghjklmnpqrstvwxz]y$/i.test(word)) return word.slice(0, -1) + 'ies'; + + // Words ending in f or fe → replace with "ves" + if (/(?:f|fe)$/i.test(word)) return word.replace(/(?:f|fe)$/i, 'ves'); + + // Default: just add "s" + return word + 's'; +} From 7b971c0a5536f7cd4573ff574921463acf947b14 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Mon, 13 Oct 2025 23:14:51 +0200 Subject: [PATCH 067/276] Current behavior for excluding Component render with unchanged props from Components track (#34822) If we rerender with the same props, the render time will not be accounted for in the Components track. The attached test reproduces the behavior observed in https://codesandbox.io/p/sandbox/patient-fast-j94f2g: <img width="1118" height="354" alt="CleanShot 2025-10-13 at 00 13 41@2x" src="https://github.com/user-attachments/assets/4be10ee9-d529-4d98-9035-4f26f9587f52" /> --- .../__tests__/ReactPerformanceTrack-test.js | 135 ++++++++++++++++-- 1 file changed, 125 insertions(+), 10 deletions(-) diff --git a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js index 72310812482..827592bb80d 100644 --- a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js +++ b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js @@ -15,9 +15,20 @@ let act; let useEffect; describe('ReactPerformanceTracks', () => { + const performanceMeasureCalls = []; + beforeEach(() => { + performanceMeasureCalls.length = 0; Object.defineProperty(performance, 'measure', { - value: jest.fn(), + value: jest.fn((measureName, reusableOptions) => { + performanceMeasureCalls.push([ + measureName, + { + // React will mutate the options it passes to performance.measure. + ...reusableOptions, + }, + ]); + }), configurable: true, }); console.timeStamp = () => {}; @@ -32,6 +43,19 @@ describe('ReactPerformanceTracks', () => { useEffect = React.useEffect; }); + function getConsoleTimestampEntries() { + try { + return console.timeStamp.mock.calls.filter(call => { + const [, startTime, endTime] = call; + + const isRegisterTrackCall = startTime !== 0.003 && endTime !== 0.003; + return isRegisterTrackCall; + }); + } finally { + console.timeStamp.mockClear(); + } + } + // @gate __DEV__ && enableComponentPerformanceTrack it('shows a hint if an update is triggered by a deeply equal object', async () => { const App = function App({items}) { @@ -45,7 +69,7 @@ describe('ReactPerformanceTracks', () => { ReactNoop.render(<App items={items} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'Mount', { @@ -62,14 +86,14 @@ describe('ReactPerformanceTracks', () => { }, ], ]); - performance.measure.mockClear(); + performanceMeasureCalls.length = 0; Scheduler.unstable_advanceTime(10); await act(() => { ReactNoop.render(<App items={items.concat('4')} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'App', { @@ -105,7 +129,7 @@ describe('ReactPerformanceTracks', () => { ReactNoop.render(<App items={items} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'Mount', { @@ -122,14 +146,14 @@ describe('ReactPerformanceTracks', () => { }, ], ]); - performance.measure.mockClear(); + performanceMeasureCalls.length = 0; Scheduler.unstable_advanceTime(10); await act(() => { ReactNoop.render(<App items={items.concat('-1')} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'App', { @@ -171,7 +195,7 @@ describe('ReactPerformanceTracks', () => { ReactNoop.render(<App data={{buffer: null}} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'Mount', { @@ -188,7 +212,7 @@ describe('ReactPerformanceTracks', () => { }, ], ]); - performance.measure.mockClear(); + performanceMeasureCalls.length = 0; Scheduler.unstable_advanceTime(10); @@ -197,7 +221,7 @@ describe('ReactPerformanceTracks', () => { ReactNoop.render(<App data={{buffer: bigData}} />); }); - expect(performance.measure.mock.calls).toEqual([ + expect(performanceMeasureCalls).toEqual([ [ 'App', { @@ -324,4 +348,95 @@ describe('ReactPerformanceTracks', () => { ], ]); }); + + // @gate __DEV__ && enableComponentPerformanceTrack + it('includes spans for Components with no prop changes', async () => { + function Left({value}) { + Scheduler.unstable_advanceTime(5000); + } + function Right() { + Scheduler.unstable_advanceTime(10000); + } + + await act(() => { + ReactNoop.render( + <> + <Left value={1} /> + <Right /> + </>, + ); + }); + + expect(performanceMeasureCalls).toEqual([ + [ + 'Mount', + { + detail: { + devtools: { + color: 'warning', + properties: null, + tooltipText: 'Mount', + track: 'Components ⚛', + }, + }, + end: 5000, + start: 0, + }, + ], + [ + 'Mount', + { + detail: { + devtools: { + color: 'warning', + properties: null, + tooltipText: 'Mount', + track: 'Components ⚛', + }, + }, + end: 15000, + start: 5000, + }, + ], + ]); + performanceMeasureCalls.length = 0; + getConsoleTimestampEntries(); + + Scheduler.unstable_advanceTime(1000); + + await act(() => { + ReactNoop.render( + <> + <Left value={2} /> + <Right /> + </>, + ); + }); + + expect(performanceMeasureCalls).toEqual([ + [ + 'Left', + { + detail: { + devtools: { + color: 'error', + properties: [ + ['Changed Props', ''], + ['– value', '1'], + ['+ value', '2'], + ], + tooltipText: 'Left', + track: 'Components ⚛', + }, + }, + end: 21000, + start: 16000, + }, + ], + ]); + expect(getConsoleTimestampEntries()).toEqual([ + ['Render', 16000, 31000, 'Blocking', 'Scheduler ⚛', 'primary-dark'], + ]); + performanceMeasureCalls.length = 0; + }); }); From 47905a79507f9ae5fc1bf633f7cbbd1894b9523b Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 13 Oct 2025 17:23:04 -0400 Subject: [PATCH 068/276] Fix/add missing else branch for renders with no props change (#34837) Stacked on https://github.com/facebook/react/pull/34822. Fixes a bug introduced in https://github.com/facebook/react/pull/34370. Just copying the lower else branch to the `properties.length` else branch at the top. --- .../src/ReactFiberPerformanceTrack.js | 24 +++++++++++++++++++ .../__tests__/ReactPerformanceTrack-test.js | 3 ++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index 65cc7f04066..b2d165343a6 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -305,6 +305,30 @@ export function logComponentRender( } else { performance.measure('\u200b' + name, reusableComponentOptions); } + } else { + if (debugTask != null) { + debugTask.run( + // $FlowFixMe[method-unbinding] + console.timeStamp.bind( + console, + name, + startTime, + endTime, + COMPONENTS_TRACK, + undefined, + color, + ), + ); + } else { + console.timeStamp( + name, + startTime, + endTime, + COMPONENTS_TRACK, + undefined, + color, + ); + } } } else { if (debugTask != null) { diff --git a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js index 827592bb80d..0f5152e8d47 100644 --- a/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js +++ b/packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js @@ -350,7 +350,7 @@ describe('ReactPerformanceTracks', () => { }); // @gate __DEV__ && enableComponentPerformanceTrack - it('includes spans for Components with no prop changes', async () => { + it('includes console.timeStamp spans for Components with no prop changes', async () => { function Left({value}) { Scheduler.unstable_advanceTime(5000); } @@ -436,6 +436,7 @@ describe('ReactPerformanceTracks', () => { ]); expect(getConsoleTimestampEntries()).toEqual([ ['Render', 16000, 31000, 'Blocking', 'Scheduler ⚛', 'primary-dark'], + ['Right', 21000, 31000, 'Components ⚛', undefined, 'error'], ]); performanceMeasureCalls.length = 0; }); From b9ec735de248f46da181afbc12aa906422be0dba Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 13 Oct 2025 17:42:13 -0400 Subject: [PATCH 069/276] [Perf Tracks]: Clear potentially large measures (#34803) Fixes https://github.com/facebook/react/issues/34770. We need to clear measures at some point, otherwise all these copies of props that we end up recording will allocate too much memory in Chromium. This adds `performance.clearMeasures(...)` calls to such cases in DEV. Validated that entries are still shown on Performance panel timeline. --- .../src/ReactFlightPerformanceTrack.js | 37 ++++++++++++++----- .../src/ReactFiberPerformanceTrack.js | 29 +++++++++++---- 2 files changed, 48 insertions(+), 18 deletions(-) diff --git a/packages/react-client/src/ReactFlightPerformanceTrack.js b/packages/react-client/src/ReactFlightPerformanceTrack.js index 81474767363..fb29fb45d0b 100644 --- a/packages/react-client/src/ReactFlightPerformanceTrack.js +++ b/packages/react-client/src/ReactFlightPerformanceTrack.js @@ -102,6 +102,7 @@ export function logComponentRender( const entryName = isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']'; const debugTask = componentInfo.debugTask; + const measureName = '\u200b' + entryName; if (__DEV__ && debugTask) { const properties: Array<[string, string]> = []; if (componentInfo.key != null) { @@ -110,9 +111,10 @@ export function logComponentRender( if (componentInfo.props != null) { addObjectToProperties(componentInfo.props, properties, 0, ''); } + debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + entryName, { + performance.measure.bind(performance, measureName, { start: startTime < 0 ? 0 : startTime, end: childrenEndTime, detail: { @@ -125,9 +127,10 @@ export function logComponentRender( }, }), ); + performance.clearMeasures(measureName); } else { console.timeStamp( - '\u200b' + entryName, + measureName, startTime < 0 ? 0 : startTime, childrenEndTime, trackNames[trackIdx], @@ -152,6 +155,7 @@ export function logComponentAborted( const isPrimaryEnv = env === rootEnv; const entryName = isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']'; + const measureName = '\u200b' + entryName; if (__DEV__) { const properties: Array<[string, string]> = [ [ @@ -165,7 +169,8 @@ export function logComponentAborted( if (componentInfo.props != null) { addObjectToProperties(componentInfo.props, properties, 0, ''); } - performance.measure('\u200b' + entryName, { + + performance.measure(measureName, { start: startTime < 0 ? 0 : startTime, end: childrenEndTime, detail: { @@ -178,9 +183,10 @@ export function logComponentAborted( }, }, }); + performance.clearMeasures(measureName); } else { console.timeStamp( - entryName, + measureName, startTime < 0 ? 0 : startTime, childrenEndTime, trackNames[trackIdx], @@ -206,6 +212,7 @@ export function logComponentErrored( const isPrimaryEnv = env === rootEnv; const entryName = isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']'; + const measureName = '\u200b' + entryName; if (__DEV__) { const message = typeof error === 'object' && @@ -222,7 +229,8 @@ export function logComponentErrored( if (componentInfo.props != null) { addObjectToProperties(componentInfo.props, properties, 0, ''); } - performance.measure('\u200b' + entryName, { + + performance.measure(measureName, { start: startTime < 0 ? 0 : startTime, end: childrenEndTime, detail: { @@ -235,9 +243,10 @@ export function logComponentErrored( }, }, }); + performance.clearMeasures(measureName); } else { console.timeStamp( - entryName, + measureName, startTime < 0 ? 0 : startTime, childrenEndTime, trackNames[trackIdx], @@ -397,6 +406,7 @@ export function logComponentAwaitAborted( }, }), ); + performance.clearMeasures(entryName); } else { console.timeStamp( entryName, @@ -453,6 +463,7 @@ export function logComponentAwaitErrored( }, }), ); + performance.clearMeasures(entryName); } else { console.timeStamp( entryName, @@ -514,6 +525,7 @@ export function logComponentAwait( }, }), ); + performance.clearMeasures(entryName); } else { console.timeStamp( entryName, @@ -538,6 +550,7 @@ export function logIOInfoErrored( const description = getIODescription(error); const entryName = getIOShortName(ioInfo, description, ioInfo.env, rootEnv); const debugTask = ioInfo.debugTask; + const measureName = '\u200b' + entryName; if (__DEV__ && debugTask) { const message = typeof error === 'object' && @@ -550,9 +563,10 @@ export function logIOInfoErrored( const properties = [['rejected with', message]]; const tooltipText = getIOLongName(ioInfo, description, ioInfo.env, rootEnv) + ' Rejected'; + debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + entryName, { + performance.measure.bind(performance, measureName, { start: startTime < 0 ? 0 : startTime, end: endTime, detail: { @@ -565,9 +579,10 @@ export function logIOInfoErrored( }, }), ); + performance.clearMeasures(measureName); } else { console.timeStamp( - entryName, + measureName, startTime < 0 ? 0 : startTime, endTime, IO_TRACK, @@ -590,6 +605,7 @@ export function logIOInfo( const entryName = getIOShortName(ioInfo, description, ioInfo.env, rootEnv); const color = getIOColor(entryName); const debugTask = ioInfo.debugTask; + const measureName = '\u200b' + entryName; if (__DEV__ && debugTask) { const properties: Array<[string, string]> = []; if (typeof value === 'object' && value !== null) { @@ -605,7 +621,7 @@ export function logIOInfo( ); debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + entryName, { + performance.measure.bind(performance, measureName, { start: startTime < 0 ? 0 : startTime, end: endTime, detail: { @@ -618,9 +634,10 @@ export function logIOInfo( }, }), ); + performance.clearMeasures(measureName); } else { console.timeStamp( - entryName, + measureName, startTime < 0 ? 0 : startTime, endTime, IO_TRACK, diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index b2d165343a6..5f94bd35e02 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -133,6 +133,7 @@ function logComponentTrigger( } else { performance.measure(trigger, reusableComponentOptions); } + performance.clearMeasures(trigger); } } @@ -200,7 +201,7 @@ const reusableComponentOptions: PerformanceMeasureOptions = { }, }; -const resuableChangedPropsEntry = ['Changed Props', '']; +const reusableChangedPropsEntry = ['Changed Props', '']; const DEEP_EQUALITY_WARNING = 'This component received deeply equal props. It might benefit from useMemo or the React Compiler in its owner.'; @@ -261,7 +262,7 @@ export function logComponentRender( alternate.memoizedProps !== props ) { // If this is an update, we'll diff the props and emit which ones changed. - const properties: Array<[string, string]> = [resuableChangedPropsEntry]; + const properties: Array<[string, string]> = [reusableChangedPropsEntry]; const isDeeplyEqual = addObjectDiffToProperties( alternate.memoizedProps, props, @@ -293,18 +294,20 @@ export function logComponentRender( reusableComponentOptions.start = startTime; reusableComponentOptions.end = endTime; + const measureName = '\u200b' + name; if (debugTask != null) { debugTask.run( // $FlowFixMe[method-unbinding] performance.measure.bind( performance, - '\u200b' + name, + measureName, reusableComponentOptions, ), ); } else { - performance.measure('\u200b' + name, reusableComponentOptions); + performance.measure(measureName, reusableComponentOptions); } + performance.clearMeasures(measureName); } else { if (debugTask != null) { debugTask.run( @@ -421,14 +424,17 @@ export function logComponentErrored( }, }, }; + + const measureName = '\u200b' + name; if (__DEV__ && debugTask) { debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + name, options), + performance.measure.bind(performance, measureName, options), ); } else { - performance.measure('\u200b' + name, options); + performance.measure(measureName, options); } + performance.clearMeasures(measureName); } else { console.timeStamp( name, @@ -488,14 +494,16 @@ function logComponentEffectErrored( }, }; const debugTask = fiber._debugTask; + const measureName = '\u200b' + name; if (debugTask) { debugTask.run( // $FlowFixMe[method-unbinding] - performance.measure.bind(performance, '\u200b' + name, options), + performance.measure.bind(performance, measureName, options), ); } else { - performance.measure('\u200b' + name, options); + performance.measure(measureName, options); } + performance.clearMeasures(measureName); } else { console.timeStamp( name, @@ -762,6 +770,7 @@ export function logBlockingStart( } else { performance.measure(label, measureOptions); } + performance.clearMeasures(label); } else { console.timeStamp( label, @@ -867,6 +876,7 @@ export function logGestureStart( } else { performance.measure(label, measureOptions); } + performance.clearMeasures(label); } else { console.timeStamp( label, @@ -1007,6 +1017,7 @@ export function logTransitionStart( } else { performance.measure(label, measureOptions); } + performance.clearMeasures(label); } else { console.timeStamp( label, @@ -1238,6 +1249,7 @@ export function logRecoveredRenderPhase( } else { performance.measure('Recovered', options); } + performance.clearMeasures('Recovered'); } else { console.timeStamp( 'Recovered', @@ -1449,6 +1461,7 @@ export function logCommitErrored( } else { performance.measure('Errored', options); } + performance.clearMeasures('Errored'); } else { console.timeStamp( 'Errored', From 03a62b20fddb197876ce20ac5ea34994b0e5b242 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 14 Oct 2025 07:21:12 -0400 Subject: [PATCH 070/276] [Flight] Look for moved debugInfo when logging component performance track (#34839) --- .../react-client/src/ReactFlightClient.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 701d9df33cd..2121903b87e 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -4318,7 +4318,26 @@ function flushComponentPerformance( // First find the start time of the first component to know if it was running // in parallel with the previous. - const debugInfo = __DEV__ && root._debugInfo; + let debugInfo = null; + if (__DEV__) { + debugInfo = root._debugInfo; + if (debugInfo.length === 0 && root.status === 'fulfilled') { + const resolvedValue = resolveLazy(root.value); + if ( + typeof resolvedValue === 'object' && + resolvedValue !== null && + (isArray(resolvedValue) || + typeof resolvedValue[ASYNC_ITERATOR] === 'function' || + resolvedValue.$$typeof === REACT_ELEMENT_TYPE || + resolvedValue.$$typeof === REACT_LAZY_TYPE) && + isArray(resolvedValue._debugInfo) + ) { + // It's possible that the value has been given the debug info. + // In that case we need to look for it on the resolved value. + debugInfo = resolvedValue._debugInfo; + } + } + } if (debugInfo) { let startTime = 0; for (let i = 0; i < debugInfo.length; i++) { From 73507ec457349263bffa4c8132b2674664d5f421 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Tue, 14 Oct 2025 13:57:08 +0200 Subject: [PATCH 071/276] [DevTools] Exclude Suspense boundaries in hidden Activity (#34756) --- .../src/__tests__/store-test.js | 101 ++++++++++++++++++ .../src/backend/fiber/renderer.js | 44 ++++++-- 2 files changed, 138 insertions(+), 7 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index d5280c091c9..3638852c20b 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -3142,4 +3142,105 @@ describe('Store', () => { await actAsync(() => render(null)); expect(store).toMatchInlineSnapshot(``); }); + + // @reactVersion >= 19 + it('should keep suspended boundaries in the Suspense tree but not hidden Activity', async () => { + const Activity = React.Activity || React.unstable_Activity; + + const never = new Promise(() => {}); + function Never() { + readValue(never); + return null; + } + function Component({children}) { + return <div>{children}</div>; + } + + function App({hidden}) { + return ( + <> + <Activity mode={hidden ? 'hidden' : 'visible'}> + <React.Suspense name="inside-activity"> + <Component key="inside-activity">inside Activity</Component> + </React.Suspense> + </Activity> + <React.Suspense name="outer-suspense"> + <React.Suspense name="inner-suspense"> + <Component key="inside-suspense">inside Suspense</Component> + </React.Suspense> + {hidden ? <Never /> : null} + </React.Suspense> + </> + ); + } + + await actAsync(() => { + render(<App hidden={true} />); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + <Activity> + <Suspense name="outer-suspense"> + [suspense-root] rects={[{x:1,y:2,width:15,height:1}]} + <Suspense name="outer-suspense" rects={null}> + `); + + // mount as visible + await actAsync(() => { + render(null); + }); + await actAsync(() => { + render(<App hidden={false} />); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + ▾ <Activity> + ▾ <Suspense name="inside-activity"> + <Component key="inside-activity"> + ▾ <Suspense name="outer-suspense"> + ▾ <Suspense name="inner-suspense"> + <Component key="inside-suspense"> + [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} + <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + `); + + await actAsync(() => { + render(<App hidden={true} />); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + <Activity> + <Suspense name="outer-suspense"> + [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} + <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + `); + + await actAsync(() => { + render(<App hidden={false} />); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + ▾ <Activity> + ▾ <Suspense name="inside-activity"> + <Component key="inside-activity"> + ▾ <Suspense name="outer-suspense"> + ▾ <Suspense name="inner-suspense"> + <Component key="inside-suspense"> + [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} + <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}> + `); + }); }); diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index ba214db05c7..688f1b473bf 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -3144,12 +3144,30 @@ export function attach( } } + /** + * Offscreen of suspended Suspense + */ + function isSuspendedOffscreen(fiber: Fiber): boolean { + switch (fiber.tag) { + case LegacyHiddenComponent: + // fallthrough since all published implementations currently implement the same state as Offscreen. + case OffscreenComponent: + return ( + fiber.memoizedState !== null && + fiber.return !== null && + fiber.return.tag === SuspenseComponent + ); + default: + return false; + } + } + function unmountRemainingChildren() { if ( reconcilingParent !== null && (reconcilingParent.kind === FIBER_INSTANCE || reconcilingParent.kind === FILTERED_FIBER_INSTANCE) && - isHiddenOffscreen(reconcilingParent.data) && + isSuspendedOffscreen(reconcilingParent.data) && !isInDisconnectedSubtree ) { // This is a hidden offscreen, we need to execute this in the context of a disconnected subtree. @@ -4026,7 +4044,7 @@ export function attach( trackDebugInfoFromHostComponent(nearestInstance, fiber); } - if (isHiddenOffscreen(fiber)) { + if (isSuspendedOffscreen(fiber)) { // If an Offscreen component is hidden, mount its children as disconnected. const stashedDisconnected = isInDisconnectedSubtree; isInDisconnectedSubtree = true; @@ -4037,6 +4055,9 @@ export function attach( } finally { isInDisconnectedSubtree = stashedDisconnected; } + } else if (isHiddenOffscreen(fiber)) { + // hidden Activity is noisy. + // Including it may show overlapping Suspense rects } else if (fiber.tag === SuspenseComponent && OffscreenComponent === -1) { // Legacy Suspense without the Offscreen wrapper. For the modern Suspense we just handle the // Offscreen wrapper itself specially. @@ -4981,6 +5002,8 @@ export function attach( const prevWasHidden = isHiddenOffscreen(prevFiber); const nextIsHidden = isHiddenOffscreen(nextFiber); + const prevWasSuspended = isSuspendedOffscreen(prevFiber); + const nextIsSuspended = isSuspendedOffscreen(nextFiber); if (isLegacySuspense) { if ( @@ -5058,8 +5081,8 @@ export function attach( ); updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren; } - } else if (nextIsHidden) { - if (!prevWasHidden) { + } else if (nextIsSuspended) { + if (!prevWasSuspended) { // We're hiding the children. Disconnect them from the front end but keep state. if (fiberInstance !== null && !isInDisconnectedSubtree) { disconnectChildrenRecursively(remainingReconcilingChildren); @@ -5077,7 +5100,7 @@ export function attach( } finally { isInDisconnectedSubtree = stashedDisconnected; } - } else if (prevWasHidden && !nextIsHidden) { + } else if (prevWasSuspended && !nextIsSuspended) { // We're revealing the hidden children. We now need to update them to the latest state. // We do this while still in the disconnected state and then we reconnect the new ones. // This avoids reconnecting things that are about to be removed anyway. @@ -5103,6 +5126,13 @@ export function attach( // Children may have reordered while they were hidden. updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren; } + } else if (nextIsHidden) { + if (prevWasHidden) { + // still hidden. Nothing to do. + } else { + // We're hiding the children. Remove them from the Frontend + unmountRemainingChildren(); + } } else if ( nextFiber.tag === SuspenseComponent && OffscreenComponent !== -1 && @@ -5259,7 +5289,7 @@ export function attach( // We need to crawl the subtree for closest non-filtered Fibers // so that we can display them in a flat children set. if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) { - if (!nextIsHidden && !isInDisconnectedSubtree) { + if (!nextIsSuspended && !isInDisconnectedSubtree) { recordResetChildren(fiberInstance); } @@ -5335,7 +5365,7 @@ export function attach( if ( (child.kind === FIBER_INSTANCE || child.kind === FILTERED_FIBER_INSTANCE) && - isHiddenOffscreen(child.data) + isSuspendedOffscreen(child.data) ) { // This instance's children are already disconnected. } else { From 19b71673b103f49daa3c7fc0cd70a29356826143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 14 Oct 2025 07:57:48 -0400 Subject: [PATCH 072/276] [Flight] Forward the current environment when forwarding I/O entries (#34836) --- .../react-server/src/ReactFlightServer.js | 13 +- .../ReactFlightAsyncDebugInfo-test.js | 294 +++++++++--------- 2 files changed, 160 insertions(+), 147 deletions(-) diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 1c769c93ee7..587f38008f1 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -4493,6 +4493,12 @@ function outlineIOInfo(request: Request, ioInfo: ReactIOInfo): void { } else { debugStack = ioInfo.stack; } + let env = ioInfo.env; + if (env == null) { + // If we're forwarding IO info from this environment, an empty env is effectively the "client" side. + // The "client" from the perspective of our client will be this current environment. + env = (0, request.environmentName)(); + } emitIOInfoChunk( request, id, @@ -4500,7 +4506,7 @@ function outlineIOInfo(request: Request, ioInfo: ReactIOInfo): void { ioInfo.start, ioInfo.end, ioInfo.value, - ioInfo.env, + env, owner, debugStack, ); @@ -5388,6 +5394,11 @@ function forwardDebugInfo( if (info.env != null) { // $FlowFixMe[cannot-write] debugAsyncInfo.env = info.env; + } else { + // If we're forwarding IO info from this environment, an empty env is effectively the "client" side. + // The "client" from the perspective of our client will be this current environment. + // $FlowFixMe[cannot-write] + debugAsyncInfo.env = (0, request.environmentName)(); } if (info.owner != null) { // $FlowFixMe[cannot-write] diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index 992b58d3880..acc73ed223a 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -1483,12 +1483,14 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, + "env": "Server", "name": "RSC stream", "start": 0, "value": { "value": "stream", }, }, + "env": "Server", }, { "time": 0, @@ -1566,9 +1568,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1530, + 1532, 40, - 1513, + 1515, 62, ], [ @@ -1598,9 +1600,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1530, + 1532, 40, - 1513, + 1515, 62, ], [ @@ -1625,17 +1627,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1515, + 1517, 13, - 1514, + 1516, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1527, 13, - 1524, + 1526, 5, ], ], @@ -1654,9 +1656,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1530, + 1532, 40, - 1513, + 1515, 62, ], [ @@ -1673,17 +1675,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1515, + 1517, 13, - 1514, + 1516, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1527, 13, - 1524, + 1526, 5, ], ], @@ -1703,9 +1705,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1526, + 1528, 60, - 1524, + 1526, 5, ], ], @@ -1727,9 +1729,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1530, + 1532, 40, - 1513, + 1515, 62, ], [ @@ -1754,17 +1756,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1515, + 1517, 13, - 1514, + 1516, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1525, + 1527, 13, - 1524, + 1526, 5, ], ], @@ -1783,9 +1785,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1526, + 1528, 60, - 1524, + 1526, 5, ], ], @@ -1794,9 +1796,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Child", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1520, + 1522, 28, - 1519, + 1521, 5, ], ], @@ -1879,9 +1881,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1843, + 1845, 40, - 1827, + 1829, 57, ], [ @@ -1911,9 +1913,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1843, + 1845, 40, - 1827, + 1829, 57, ], [ @@ -1938,17 +1940,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1829, + 1831, 13, - 1828, + 1830, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1840, 23, - 1837, + 1839, 5, ], ], @@ -1967,9 +1969,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1843, + 1845, 40, - 1827, + 1829, 57, ], [ @@ -1986,17 +1988,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1829, + 1831, 13, - 1828, + 1830, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1840, 23, - 1837, + 1839, 5, ], ], @@ -2016,9 +2018,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1839, + 1841, 60, - 1837, + 1839, 5, ], ], @@ -2037,9 +2039,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1843, + 1845, 40, - 1827, + 1829, 57, ], [ @@ -2064,17 +2066,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1829, + 1831, 13, - 1828, + 1830, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1838, + 1840, 23, - 1837, + 1839, 5, ], ], @@ -2088,9 +2090,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1839, + 1841, 60, - 1837, + 1839, 5, ], ], @@ -2175,9 +2177,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2207,9 +2209,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2234,17 +2236,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2129, + 2131, 13, - 2127, + 2129, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2134, + 2136, 13, - 2133, + 2135, 5, ], ], @@ -2263,9 +2265,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2282,17 +2284,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2129, + 2131, 13, - 2127, + 2129, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2134, + 2136, 13, - 2133, + 2135, 5, ], ], @@ -2314,9 +2316,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2341,25 +2343,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2123, + 2125, 13, - 2122, + 2124, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2128, + 2130, 15, - 2127, + 2129, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2134, + 2136, 13, - 2133, + 2135, 5, ], ], @@ -2378,9 +2380,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2397,25 +2399,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2123, + 2125, 13, - 2122, + 2124, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2128, + 2130, 15, - 2127, + 2129, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2134, + 2136, 13, - 2133, + 2135, 5, ], ], @@ -2437,9 +2439,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2464,9 +2466,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2124, + 2126, 13, - 2122, + 2124, 5, ], ], @@ -2485,9 +2487,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2139, + 2141, 40, - 2121, + 2123, 80, ], [ @@ -2504,9 +2506,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2124, + 2126, 13, - 2122, + 2124, 5, ], ], @@ -2579,9 +2581,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2548, + 2550, 109, - 2537, + 2539, 58, ], ], @@ -2603,9 +2605,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2548, + 2550, 109, - 2537, + 2539, 58, ], ], @@ -2622,17 +2624,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2539, + 2541, 14, - 2538, + 2540, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2545, + 2547, 20, - 2544, + 2546, 5, ], ], @@ -2651,9 +2653,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2548, + 2550, 109, - 2537, + 2539, 58, ], ], @@ -2662,17 +2664,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2539, + 2541, 23, - 2538, + 2540, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2545, + 2547, 20, - 2544, + 2546, 5, ], ], @@ -2751,9 +2753,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2715, + 2717, 40, - 2703, + 2705, 56, ], [ @@ -2783,9 +2785,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2715, + 2717, 40, - 2703, + 2705, 56, ], [ @@ -2810,9 +2812,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2711, + 2713, 20, - 2710, + 2712, 5, ], ], @@ -2831,9 +2833,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2715, + 2717, 40, - 2703, + 2705, 56, ], [ @@ -2850,9 +2852,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2711, + 2713, 20, - 2710, + 2712, 5, ], ], @@ -2945,9 +2947,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -2977,9 +2979,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -2996,17 +2998,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2890, + 2892, 15, - 2889, + 2891, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2899, + 2901, 19, - 2898, + 2900, 5, ], ], @@ -3025,9 +3027,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -3044,17 +3046,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2890, + 2892, 15, - 2889, + 2891, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2899, + 2901, 19, - 2898, + 2900, 5, ], ], @@ -3076,9 +3078,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -3095,9 +3097,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2899, + 2901, 25, - 2898, + 2900, 5, ], ], @@ -3116,9 +3118,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2904, + 2906, 40, - 2883, + 2885, 42, ], [ @@ -3135,9 +3137,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2899, + 2901, 25, - 2898, + 2900, 5, ], ], @@ -3213,9 +3215,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3180, + 3182, 40, - 3168, + 3170, 36, ], ], @@ -3237,9 +3239,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3180, + 3182, 40, - 3168, + 3170, 36, ], ], @@ -3248,9 +3250,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3172, + 3174, 7, - 3170, + 3172, 5, ], ], @@ -3269,9 +3271,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3180, + 3182, 40, - 3168, + 3170, 36, ], ], @@ -3280,9 +3282,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3174, + 3176, 7, - 3170, + 3172, 5, ], ], @@ -3407,9 +3409,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3325, + 3327, 20, - 3324, + 3326, 5, ], ], From 56e846921d600878ae0ab7bb400fdeba97d81827 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 14 Oct 2025 08:28:47 -0400 Subject: [PATCH 073/276] [Flight] Exclude RSC Stream if the stream resolves in a task (#34838) --- .../react-client/src/ReactFlightClient.js | 78 ++-- .../__tests__/ReactFlightDOMBrowser-test.js | 12 - .../src/__tests__/ReactFlightDOMEdge-test.js | 5 - .../react-server/src/ReactFlightServer.js | 20 +- .../ReactFlightAsyncDebugInfo-test.js | 388 ++++++++---------- 5 files changed, 236 insertions(+), 267 deletions(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 2121903b87e..1c2151362d8 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -367,6 +367,7 @@ type Response = { _debugRootStack?: null | Error, // DEV-only _debugRootTask?: null | ConsoleTask, // DEV-only _debugStartTime: number, // DEV-only + _debugIOStarted: boolean, // DEV-only _debugFindSourceMapURL?: void | FindSourceMapURLCallback, // DEV-only _debugChannel?: void | DebugChannel, // DEV-only _blockedConsole?: null | SomeChunk<ConsoleEntry>, // DEV-only @@ -500,7 +501,7 @@ function createErrorChunk<T>( } function moveDebugInfoFromChunkToInnerValue<T>( - chunk: InitializedChunk<T>, + chunk: InitializedChunk<T> | InitializedStreamChunk<any>, value: T, ): void { // Remove the debug info from the initialized chunk, and add it to the inner @@ -1569,6 +1570,10 @@ function fulfillReference( initializedChunk.reason = handler.reason; // Used by streaming chunks if (resolveListeners !== null) { wakeChunk(resolveListeners, handler.value, initializedChunk); + } else { + if (__DEV__) { + moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value); + } } } } @@ -1818,6 +1823,10 @@ function loadServerReference<A: Iterable<any>, T>( initializedChunk.value = handler.value; if (resolveListeners !== null) { wakeChunk(resolveListeners, handler.value, initializedChunk); + } else { + if (__DEV__) { + moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value); + } } } } @@ -2536,6 +2545,10 @@ function missingCall() { ); } +function markIOStarted(this: Response) { + this._debugIOStarted = true; +} + function ResponseInstance( this: $FlowFixMe, bundlerConfig: ServerConsumerModuleMap, @@ -2609,6 +2622,10 @@ function ResponseInstance( // where as if you use createFromReadableStream from the body of the fetch // then the start time is when the headers resolved. this._debugStartTime = performance.now(); + this._debugIOStarted = false; + // We consider everything before the first setTimeout task to be cached data + // and is not considered I/O required to load the stream. + setTimeout(markIOStarted.bind(this), 0); } this._debugFindSourceMapURL = findSourceMapURL; this._debugChannel = debugChannel; @@ -2762,7 +2779,7 @@ function incrementChunkDebugInfo( } } -function addDebugInfo(chunk: SomeChunk<any>, debugInfo: ReactDebugInfo): void { +function addAsyncInfo(chunk: SomeChunk<any>, asyncInfo: ReactAsyncInfo): void { const value = resolveLazy(chunk.value); if ( typeof value === 'object' && @@ -2774,34 +2791,39 @@ function addDebugInfo(chunk: SomeChunk<any>, debugInfo: ReactDebugInfo): void { ) { if (isArray(value._debugInfo)) { // $FlowFixMe[method-unbinding] - value._debugInfo.push.apply(value._debugInfo, debugInfo); + value._debugInfo.push(asyncInfo); } else { Object.defineProperty((value: any), '_debugInfo', { configurable: false, enumerable: false, writable: true, - value: debugInfo, + value: [asyncInfo], }); } } else { // $FlowFixMe[method-unbinding] - chunk._debugInfo.push.apply(chunk._debugInfo, debugInfo); + chunk._debugInfo.push(asyncInfo); } } function resolveChunkDebugInfo( + response: Response, streamState: StreamState, chunk: SomeChunk<any>, ): void { if (__DEV__ && enableAsyncDebugInfo) { - // Add the currently resolving chunk's debug info representing the stream - // to the Promise that was waiting on the stream, or its underlying value. - const debugInfo: ReactDebugInfo = [{awaited: streamState._debugInfo}]; - if (chunk.status === PENDING || chunk.status === BLOCKED) { - const boundAddDebugInfo = addDebugInfo.bind(null, chunk, debugInfo); - chunk.then(boundAddDebugInfo, boundAddDebugInfo); - } else { - addDebugInfo(chunk, debugInfo); + // Only include stream information after a macrotask. Any chunk processed + // before that is considered cached data. + if (response._debugIOStarted) { + // Add the currently resolving chunk's debug info representing the stream + // to the Promise that was waiting on the stream, or its underlying value. + const asyncInfo: ReactAsyncInfo = {awaited: streamState._debugInfo}; + if (chunk.status === PENDING || chunk.status === BLOCKED) { + const boundAddAsyncInfo = addAsyncInfo.bind(null, chunk, asyncInfo); + chunk.then(boundAddAsyncInfo, boundAddAsyncInfo); + } else { + addAsyncInfo(chunk, asyncInfo); + } } } } @@ -2837,12 +2859,12 @@ function resolveModel( model, ); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } else { if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } resolveModelChunk(response, chunk, model); } @@ -2869,7 +2891,7 @@ function resolveText( } const newChunk = createInitializedTextChunk(response, text); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } @@ -2895,7 +2917,7 @@ function resolveBuffer( } const newChunk = createInitializedBufferChunk(response, buffer); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } @@ -2942,7 +2964,7 @@ function resolveModule( blockedChunk.status = BLOCKED; } if (__DEV__) { - resolveChunkDebugInfo(streamState, blockedChunk); + resolveChunkDebugInfo(response, streamState, blockedChunk); } promise.then( () => resolveModuleChunk(response, blockedChunk, clientReference), @@ -2952,12 +2974,12 @@ function resolveModule( if (!chunk) { const newChunk = createResolvedModuleChunk(response, clientReference); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } else { if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } // This can't actually happen because we don't have any forward // references to modules. @@ -2978,13 +3000,13 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>( if (!chunk) { const newChunk = createInitializedStreamChunk(response, stream, controller); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); return; } if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } if (chunk.status !== PENDING) { // We already resolved. We didn't expect to see this. @@ -3034,6 +3056,10 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>( resolvedChunk.reason = controller; if (resolveListeners !== null) { wakeChunk(resolveListeners, chunk.value, (chunk: any)); + } else { + if (__DEV__) { + moveDebugInfoFromChunkToInnerValue(resolvedChunk, stream); + } } } @@ -3433,12 +3459,12 @@ function resolvePostponeDev( postponeInstance, ); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } else { if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } triggerErrorOnChunk(response, chunk, postponeInstance); } @@ -3467,12 +3493,12 @@ function resolveErrorModel( errorWithDigest, ); if (__DEV__) { - resolveChunkDebugInfo(streamState, newChunk); + resolveChunkDebugInfo(response, streamState, newChunk); } chunks.set(id, newChunk); } else { if (__DEV__) { - resolveChunkDebugInfo(streamState, chunk); + resolveChunkDebugInfo(response, streamState, chunk); } triggerErrorOnChunk(response, chunk, errorWithDigest); } diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index 40ee3971298..d52003be1d7 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -3035,18 +3035,6 @@ describe('ReactFlightDOMBrowser', () => { { "time": 0, }, - { - "awaited": { - "byteSize": 0, - "end": 0, - "name": "RSC stream", - "owner": null, - "start": 0, - "value": { - "value": "stream", - }, - }, - }, ] `); } diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index 44b3256afe8..a47c9b086a1 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -1248,11 +1248,6 @@ describe('ReactFlightDOMEdge', () => { owner: greetInfo, }), {time: 14}, - expect.objectContaining({ - awaited: expect.objectContaining({ - name: 'RSC stream', - }), - }), ]); } // The owner that created the span was the outer server component. diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 587f38008f1..84008f6757a 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -2325,9 +2325,15 @@ function visitAsyncNode( return null; } visited.add(node); + if (node.end >= 0 && node.end <= request.timeOrigin) { + // This was already resolved when we started this render. It must have been either something + // that's part of a start up sequence or externally cached data. We exclude that information. + // The technique for debugging the effects of uncached data on the render is to simply uncache it. + return null; + } let previousIONode = null; // First visit anything that blocked this sequence to start in the first place. - if (node.previous !== null && node.end > request.timeOrigin) { + if (node.previous !== null) { previousIONode = visitAsyncNode( request, task, @@ -2349,12 +2355,6 @@ function visitAsyncNode( return previousIONode; } case PROMISE_NODE: { - if (node.end <= request.timeOrigin) { - // This was already resolved when we started this render. It must have been either something - // that's part of a start up sequence or externally cached data. We exclude that information. - // The technique for debugging the effects of uncached data on the render is to simply uncache it. - return previousIONode; - } const awaited = node.awaited; let match: void | null | PromiseNode | IONode = previousIONode; const promise = node.promise.deref(); @@ -2437,11 +2437,7 @@ function visitAsyncNode( } else if (ioNode !== null) { const startTime: number = node.start; const endTime: number = node.end; - if (endTime <= request.timeOrigin) { - // This was already resolved when we started this render. It must have been either something - // that's part of a start up sequence or externally cached data. We exclude that information. - return null; - } else if (startTime < cutOff) { + if (startTime < cutOff) { // We started awaiting this node before we started rendering this sequence. // This means that this particular await was never part of the current sequence. // If we have another await higher up in the chain it might have a more actionable stack diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index acc73ed223a..00c6f785035 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -1051,18 +1051,6 @@ describe('ReactFlightAsyncDebugInfo', () => { { "time": 0, }, - { - "awaited": { - "byteSize": 0, - "end": 0, - "name": "RSC stream", - "owner": null, - "start": 0, - "value": { - "value": "stream", - }, - }, - }, ] `); } @@ -1126,9 +1114,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1095, + 1083, 109, - 1071, + 1059, 50, ], ], @@ -1154,18 +1142,6 @@ describe('ReactFlightAsyncDebugInfo', () => { { "time": 0, }, - { - "awaited": { - "byteSize": 0, - "end": 0, - "name": "RSC stream", - "owner": null, - "start": 0, - "value": { - "value": "stream", - }, - }, - }, ] `); } @@ -1222,9 +1198,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1191, + 1167, 109, - 1174, + 1150, 63, ], ], @@ -1249,9 +1225,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1281,9 +1257,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1300,17 +1276,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1176, + 1152, 13, - 1175, + 1151, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1182, + 1158, 24, - 1181, + 1157, 5, ], ], @@ -1337,9 +1313,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1348,17 +1324,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1176, + 1152, 13, - 1175, + 1151, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1182, + 1158, 24, - 1181, + 1157, 5, ], ], @@ -1391,9 +1367,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1410,17 +1386,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1177, + 1153, 13, - 1175, + 1151, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1182, + 1158, 18, - 1181, + 1157, 5, ], ], @@ -1447,9 +1423,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1187, + 1163, 24, - 1186, + 1162, 5, ], ], @@ -1458,17 +1434,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1177, + 1153, 13, - 1175, + 1151, 5, ], [ "ThirdPartyComponent", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1182, + 1158, 18, - 1181, + 1157, 5, ], ], @@ -1568,9 +1544,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1532, + 1508, 40, - 1515, + 1491, 62, ], [ @@ -1600,9 +1576,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1532, + 1508, 40, - 1515, + 1491, 62, ], [ @@ -1627,17 +1603,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1517, + 1493, 13, - 1516, + 1492, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1527, + 1503, 13, - 1526, + 1502, 5, ], ], @@ -1656,9 +1632,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1532, + 1508, 40, - 1515, + 1491, 62, ], [ @@ -1675,17 +1651,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1517, + 1493, 13, - 1516, + 1492, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1527, + 1503, 13, - 1526, + 1502, 5, ], ], @@ -1705,9 +1681,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1528, + 1504, 60, - 1526, + 1502, 5, ], ], @@ -1729,9 +1705,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1532, + 1508, 40, - 1515, + 1491, 62, ], [ @@ -1756,17 +1732,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1517, + 1493, 13, - 1516, + 1492, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1527, + 1503, 13, - 1526, + 1502, 5, ], ], @@ -1785,9 +1761,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1528, + 1504, 60, - 1526, + 1502, 5, ], ], @@ -1796,9 +1772,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Child", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1522, + 1498, 28, - 1521, + 1497, 5, ], ], @@ -1881,9 +1857,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1845, + 1821, 40, - 1829, + 1805, 57, ], [ @@ -1913,9 +1889,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1845, + 1821, 40, - 1829, + 1805, 57, ], [ @@ -1940,17 +1916,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1831, + 1807, 13, - 1830, + 1806, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1840, + 1816, 23, - 1839, + 1815, 5, ], ], @@ -1969,9 +1945,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1845, + 1821, 40, - 1829, + 1805, 57, ], [ @@ -1988,17 +1964,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1831, + 1807, 13, - 1830, + 1806, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1840, + 1816, 23, - 1839, + 1815, 5, ], ], @@ -2018,9 +1994,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1841, + 1817, 60, - 1839, + 1815, 5, ], ], @@ -2039,9 +2015,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1845, + 1821, 40, - 1829, + 1805, 57, ], [ @@ -2066,17 +2042,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1831, + 1807, 13, - 1830, + 1806, 25, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1840, + 1816, 23, - 1839, + 1815, 5, ], ], @@ -2090,9 +2066,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 1841, + 1817, 60, - 1839, + 1815, 5, ], ], @@ -2177,9 +2153,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2209,9 +2185,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2236,17 +2212,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2131, + 2107, 13, - 2129, + 2105, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2136, + 2112, 13, - 2135, + 2111, 5, ], ], @@ -2265,9 +2241,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2284,17 +2260,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2131, + 2107, 13, - 2129, + 2105, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2136, + 2112, 13, - 2135, + 2111, 5, ], ], @@ -2316,9 +2292,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2343,25 +2319,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2125, + 2101, 13, - 2124, + 2100, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2130, + 2106, 15, - 2129, + 2105, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2136, + 2112, 13, - 2135, + 2111, 5, ], ], @@ -2380,9 +2356,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2399,25 +2375,25 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2125, + 2101, 13, - 2124, + 2100, 5, ], [ "delayTrice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2130, + 2106, 15, - 2129, + 2105, 5, ], [ "Bar", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2136, + 2112, 13, - 2135, + 2111, 5, ], ], @@ -2439,9 +2415,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2466,9 +2442,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2126, + 2102, 13, - 2124, + 2100, 5, ], ], @@ -2487,9 +2463,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2141, + 2117, 40, - 2123, + 2099, 80, ], [ @@ -2506,9 +2482,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "delayTwice", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2126, + 2102, 13, - 2124, + 2100, 5, ], ], @@ -2581,9 +2557,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2550, + 2526, 109, - 2539, + 2515, 58, ], ], @@ -2605,9 +2581,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2550, + 2526, 109, - 2539, + 2515, 58, ], ], @@ -2624,17 +2600,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2541, + 2517, 14, - 2540, + 2516, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2523, 20, - 2546, + 2522, 5, ], ], @@ -2653,9 +2629,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2550, + 2526, 109, - 2539, + 2515, 58, ], ], @@ -2664,17 +2640,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "getData", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2541, + 2517, 23, - 2540, + 2516, 5, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2547, + 2523, 20, - 2546, + 2522, 5, ], ], @@ -2753,9 +2729,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2717, + 2693, 40, - 2705, + 2681, 56, ], [ @@ -2785,9 +2761,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2717, + 2693, 40, - 2705, + 2681, 56, ], [ @@ -2812,9 +2788,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2713, + 2689, 20, - 2712, + 2688, 5, ], ], @@ -2833,9 +2809,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2717, + 2693, 40, - 2705, + 2681, 56, ], [ @@ -2852,9 +2828,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2713, + 2689, 20, - 2712, + 2688, 5, ], ], @@ -2947,9 +2923,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -2979,9 +2955,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -2998,17 +2974,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2892, + 2868, 15, - 2891, + 2867, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2901, + 2877, 19, - 2900, + 2876, 5, ], ], @@ -3027,9 +3003,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -3046,17 +3022,17 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2892, + 2868, 15, - 2891, + 2867, 15, ], [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2901, + 2877, 19, - 2900, + 2876, 5, ], ], @@ -3078,9 +3054,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -3097,9 +3073,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2901, + 2877, 25, - 2900, + 2876, 5, ], ], @@ -3118,9 +3094,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2906, + 2882, 40, - 2885, + 2861, 42, ], [ @@ -3137,9 +3113,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 2901, + 2877, 25, - 2900, + 2876, 5, ], ], @@ -3215,9 +3191,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3182, + 3158, 40, - 3170, + 3146, 36, ], ], @@ -3239,9 +3215,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3182, + 3158, 40, - 3170, + 3146, 36, ], ], @@ -3250,9 +3226,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3174, + 3150, 7, - 3172, + 3148, 5, ], ], @@ -3271,9 +3247,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Object.<anonymous>", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3182, + 3158, 40, - 3170, + 3146, 36, ], ], @@ -3282,9 +3258,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3176, + 3152, 7, - 3172, + 3148, 5, ], ], @@ -3409,9 +3385,9 @@ describe('ReactFlightAsyncDebugInfo', () => { [ "Component", "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js", - 3327, + 3303, 20, - 3326, + 3302, 5, ], ], @@ -3422,18 +3398,6 @@ describe('ReactFlightAsyncDebugInfo', () => { { "time": 0, }, - { - "awaited": { - "byteSize": 0, - "end": 0, - "name": "RSC stream", - "owner": null, - "start": 0, - "value": { - "value": "stream", - }, - }, - }, ] `); } From 5f2b571878ec3b5884f5739915a974b98d7384d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 14 Oct 2025 09:34:57 -0400 Subject: [PATCH 074/276] [DevTools] Filter out built-in stack frames (#34828) Treat fake eval anonymous stacks as built-in. Hide built-in stack frames unless they're used to call into a non-ignored stack frame. The two main things to fix here is that 1) we're showing a linkified stack for fake anonymous and 2) we're showing only built-ins when the stack is completely internal. Meaning framework code is all noise. --- .../views/Components/StackTraceView.css | 10 ++++++--- .../views/Components/StackTraceView.js | 22 ++++++++++++------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css index 20603ae7ccd..574ceb02369 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css @@ -2,13 +2,17 @@ padding: 0.25rem; } -.CallSite, .IgnoredCallSite { +.CallSite { display: block; padding-left: 1rem; } -.IgnoredCallSite { - opacity: 0.5; +.IgnoredCallSite, .BuiltInCallSite { + display: none; +} + +.CallSite + .BuiltInCallSite { + display: block; } .Link { diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js index 57b5c4eef04..d3d797f7810 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js @@ -60,16 +60,22 @@ export function CallSiteView({ symbolicatedCallSite !== null ? symbolicatedCallSite.location : callSite; const ignored = symbolicatedCallSite !== null ? symbolicatedCallSite.ignored : false; - if (ignored) { - // TODO: Make an option to be able to toggle the display of ignore listed rows. - // Ideally this UI should be higher than a single Stack Trace so that there's not - // multiple buttons in a single inspection taking up space. - return null; - } + // TODO: Make an option to be able to toggle the display of ignore listed rows. + // Ideally this UI should be higher than a single Stack Trace so that there's not + // multiple buttons in a single inspection taking up space. + + const isBuiltIn = url === '' || url.startsWith('<anonymous>'); // This looks like a fake anonymous through eval. return ( - <div className={ignored ? styles.IgnoredCallSite : styles.CallSite}> + <div + className={ + ignored + ? styles.IgnoredCallSite + : isBuiltIn + ? styles.BuiltInCallSite + : styles.CallSite + }> {functionName || virtualFunctionName} - {url !== '' && ( + {!isBuiltIn && ( <> {' @ '} <span From e7984651e4f123d8112f5abab39782ee70d8f4aa Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Tue, 14 Oct 2025 15:07:27 -0400 Subject: [PATCH 075/276] [playground] Allow accordion tabs to open on error (#34844) There was a bug where the other output passes (aside from the "Output" tab) were unable to open on compiler error. This PR still allows for the "Output" tab to automatically open on error, but also allows other tabs to be opened. https://github.com/user-attachments/assets/157bf5d6-c289-46fd-bafb-073c2e0ff52b --- .../playground/components/AccordionWindow.tsx | 5 +---- .../playground/components/Editor/Output.tsx | 22 +++++++++++++++---- .../playground/components/TabbedWindow.tsx | 8 ++----- 3 files changed, 21 insertions(+), 14 deletions(-) diff --git a/compiler/apps/playground/components/AccordionWindow.tsx b/compiler/apps/playground/components/AccordionWindow.tsx index 311bf2590dc..a239bb13465 100644 --- a/compiler/apps/playground/components/AccordionWindow.tsx +++ b/compiler/apps/playground/components/AccordionWindow.tsx @@ -22,7 +22,6 @@ export default function AccordionWindow(props: { tabsOpen: Set<string>; setTabsOpen: (newTab: Set<string>) => void; changedPasses: Set<string>; - isFailure: boolean; }): React.ReactElement { return ( <div className="flex-1 min-w-[550px] sm:min-w-0"> @@ -36,7 +35,6 @@ export default function AccordionWindow(props: { tabsOpen={props.tabsOpen} setTabsOpen={props.setTabsOpen} hasChanged={props.changedPasses.has(name)} - isFailure={props.isFailure} /> ); })} @@ -51,7 +49,6 @@ function AccordionWindowItem({ tabsOpen, setTabsOpen, hasChanged, - isFailure, }: { name: string; tabs: TabsRecord; @@ -61,7 +58,7 @@ function AccordionWindowItem({ isFailure: boolean; }): React.ReactElement { const id = useId(); - const isShow = isFailure ? name === 'Output' : tabsOpen.has(name); + const isShow = tabsOpen.has(name); const transitionName = `accordion-window-item-${id}`; diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx index 8c22ca35fc9..573ded92fc9 100644 --- a/compiler/apps/playground/components/Editor/Output.tsx +++ b/compiler/apps/playground/components/Editor/Output.tsx @@ -27,6 +27,8 @@ import { useState, Suspense, unstable_ViewTransition as ViewTransition, + unstable_addTransitionType as addTransitionType, + startTransition, } from 'react'; import AccordionWindow from '../AccordionWindow'; import TabbedWindow from '../TabbedWindow'; @@ -35,6 +37,7 @@ import {BabelFileResult} from '@babel/core'; import { CONFIG_PANEL_TRANSITION, TOGGLE_INTERNALS_TRANSITION, + EXPAND_ACCORDION_TRANSITION, } from '../../lib/transitionTypes'; import {LRUCache} from 'lru-cache'; @@ -265,8 +268,22 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element { * Update the active tab back to the output or errors tab when the compilation state * changes between success/failure. */ - + const [previousOutputKind, setPreviousOutputKind] = useState( + compilerOutput.kind, + ); const isFailure = compilerOutput.kind !== 'ok'; + + if (compilerOutput.kind !== previousOutputKind) { + setPreviousOutputKind(compilerOutput.kind); + if (isFailure) { + startTransition(() => { + addTransitionType(EXPAND_ACCORDION_TRANSITION); + setTabsOpen(prev => new Set(prev).add('Output')); + setActiveTab('Output'); + }); + } + } + const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold let lastResult: string = ''; for (const [passName, results] of compilerOutput.results) { @@ -295,8 +312,6 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element { tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} - // Display the Output tab on compilation failure - activeTabOverride={isFailure ? 'Output' : undefined} /> </ViewTransition> ); @@ -315,7 +330,6 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element { tabsOpen={tabsOpen} tabs={tabs} changedPasses={changedPasses} - isFailure={isFailure} /> </ViewTransition> ); diff --git a/compiler/apps/playground/components/TabbedWindow.tsx b/compiler/apps/playground/components/TabbedWindow.tsx index ceeb122dd33..30b7caa127f 100644 --- a/compiler/apps/playground/components/TabbedWindow.tsx +++ b/compiler/apps/playground/components/TabbedWindow.tsx @@ -17,15 +17,11 @@ export default function TabbedWindow({ tabs, activeTab, onTabChange, - activeTabOverride, }: { tabs: Map<string, React.ReactNode>; activeTab: string; onTabChange: (tab: string) => void; - activeTabOverride?: string; }): React.ReactElement { - const currentActiveTab = activeTabOverride ? activeTabOverride : activeTab; - const id = useId(); const transitionName = `tab-highlight-${id}`; @@ -41,7 +37,7 @@ export default function TabbedWindow({ <div className="flex flex-col h-full max-w-full"> <div className="flex p-2 flex-shrink-0"> {Array.from(tabs.keys()).map(tab => { - const isActive = currentActiveTab === tab; + const isActive = activeTab === tab; return ( <button key={tab} @@ -77,7 +73,7 @@ export default function TabbedWindow({ })} </div> <div className="flex-1 overflow-hidden w-full h-full"> - {tabs.get(currentActiveTab)} + {tabs.get(activeTab)} </div> </div> </div> From 6cfc9c1ff3138ba0d107b9e6249f47032c4da02d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:12:26 -0400 Subject: [PATCH 076/276] [DevTools] Don't measure fallbacks when suspended (#34850) We already do this in the update pass. That's what `shouldMeasureSuspenseNode` does. We also don't update measurements when we're inside an offscreen tree. However, we didn't check if the boundary itself was in a suspended state when in the `measureUnchangedSuspenseNodesRecursively` path. This caused boundaries to disappear when their fallback didn't have a rect (including their timeline entries). --- .../src/backend/fiber/renderer.js | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 688f1b473bf..6ff78a0ba68 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -3262,14 +3262,22 @@ export function attach( // We don't update rects inside disconnected subtrees. return; } - const nextRects = measureInstance(suspenseNode.instance); - const prevRects = suspenseNode.rects; - if (areEqualRects(prevRects, nextRects)) { - return; // Unchanged + const instance = suspenseNode.instance; + + const isSuspendedSuspenseComponent = + (instance.kind === FIBER_INSTANCE || + instance.kind === FILTERED_FIBER_INSTANCE) && + instance.data.tag === SuspenseComponent && + instance.data.memoizedState !== null; + if (isSuspendedSuspenseComponent) { + // This boundary itself was suspended and we don't measure those since that would measure + // the fallback. We want to keep a ghost of the rectangle of the content not currently shown. + return; } - // The rect has changed. While the bailed out root wasn't in a disconnected subtree, + + // While this boundary wasn't suspended and the bailed out root and wasn't in a disconnected subtree, // it's possible that this node was in one. So we need to check if we're offscreen. - let parent = suspenseNode.instance.parent; + let parent = instance.parent; while (parent !== null) { if ( (parent.kind === FIBER_INSTANCE || @@ -3285,6 +3293,13 @@ export function attach( } parent = parent.parent; } + + const nextRects = measureInstance(suspenseNode.instance); + const prevRects = suspenseNode.rects; + if (areEqualRects(prevRects, nextRects)) { + return; // Unchanged + } + // We changed inside a visible tree. // Since this boundary changed, it's possible it also affected its children so lets // measure them as well. From 751edd6e2cd2cb44aa302ffa667a0693e84e579d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:24:45 -0400 Subject: [PATCH 077/276] [DevTools] Measure text nodes (#34851) We can't measure Text nodes directly but we can measure a Range around them. This is useful since it's common, at least in examples, to use text nodes as children of a Suspense boundary. Especially fallbacks. --- .../src/backend/fiber/renderer.js | 21 +++++++++++++++++-- .../src/backend/views/Highlighter/Overlay.js | 7 +++++-- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 6ff78a0ba68..6e4426d3ee9 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2251,7 +2251,10 @@ export function attach( if (typeof instance !== 'object' || instance === null) { return null; } - if (typeof instance.getClientRects === 'function') { + if ( + typeof instance.getClientRects === 'function' || + instance.nodeType === 3 + ) { // DOM const doc = instance.ownerDocument; if (instance === doc.documentElement) { @@ -2273,7 +2276,21 @@ export function attach( const win = doc && doc.defaultView; const scrollX = win ? win.scrollX : 0; const scrollY = win ? win.scrollY : 0; - const rects = instance.getClientRects(); + let rects; + if (instance.nodeType === 3) { + // Text nodes cannot be measured directly but we can measure a Range. + if (typeof doc.createRange !== 'function') { + return null; + } + const range = doc.createRange(); + if (typeof range.getClientRects !== 'function') { + return null; + } + range.selectNodeContents(instance); + rects = range.getClientRects(); + } else { + rects = instance.getClientRects(); + } for (let i = 0; i < rects.length; i++) { const rect = rects[i]; result.push({ diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js index fdd059cc234..e55bdb4298c 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js @@ -187,10 +187,13 @@ export default class Overlay { } } - inspect(nodes: $ReadOnlyArray<HTMLElement>, name?: ?string) { + inspect(nodes: $ReadOnlyArray<HTMLElement | Text>, name?: ?string) { // We can't get the size of text nodes or comment nodes. React as of v15 // heavily uses comment nodes to delimit text. - const elements = nodes.filter(node => node.nodeType === Node.ELEMENT_NODE); + // TODO: We actually can measure text nodes. We should. + const elements: $ReadOnlyArray<HTMLElement> = (nodes.filter( + node => node.nodeType === Node.ELEMENT_NODE, + ): any); while (this.rects.length > elements.length) { const rect = this.rects.pop(); From 5747cadf44c0895a891f8c17489b8516829ef6ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:25:46 -0400 Subject: [PATCH 078/276] [DevTools] Don't hide overflow rectangles (#34852) I get the wish to click the shadow but not all child boundaries are within the bounds of the outer Suspense boundary's node. Sometimes they overflow naturally and if we make it overflow hidden we hide the boundaries. Maybe it would be ok if they're actually clipped by the real DOM but right now it covers up boundaries that should be there. Additionally, there's also a common case where the parent boundary shrinks when suspending the children. That then causes the suspended child boundaries to be clipped so that you can't restore them. Maybe the virtual boundary shouldn't shrink in this case. --- .../src/devtools/views/SuspenseTab/SuspenseRects.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index ba862051d95..bfc53d8b848 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -19,11 +19,6 @@ .SuspenseRectsBoundaryChildren { pointer-events: none; - /** - * So that the shadow of Boundaries within is clipped off. - * Otherwise it would look like this boundary is further elevated. - */ - overflow: hidden; } .SuspenseRectsScaledRect[data-visible='false'] > .SuspenseRectsBoundaryChildren { From 6773248311fca29669283e1059f11c9009f8f51b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:26:07 -0400 Subject: [PATCH 079/276] [DevTools] Track whether a boundary is currently suspended and make transparent (#34853) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This makes the rects that are currently in a suspended state appear ghostly so that you can see where along the timeline you are in the rects screen. <img width="451" height="407" alt="Screenshot 2025-10-14 at 11 43 20 PM" src="https://github.com/user-attachments/assets/f89e362b-a0d5-46e3-8171-564909715cd1" /> --- .../src/backend/fiber/renderer.js | 58 +++++++++++++++---- .../src/backend/legacy/renderer.js | 1 + .../src/devtools/store.js | 8 ++- .../views/Profiler/CommitTreeBuilder.js | 12 ++-- .../views/SuspenseTab/SuspenseRects.css | 4 ++ .../views/SuspenseTab/SuspenseRects.js | 6 +- .../src/frontend/types.js | 1 + packages/react-devtools-shared/src/utils.js | 10 ++-- 8 files changed, 76 insertions(+), 24 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 6e4426d3ee9..b7fe41b96c5 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2139,8 +2139,8 @@ export function attach( // Regular operations pendingOperations.length + // All suspender changes are batched in a single message. - // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders]] - (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 2 : 0), + // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, isSuspended]] + (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 3 : 0), ); // Identify which renderer this update is coming from. @@ -2225,6 +2225,14 @@ export function attach( } operations[i++] = fiberIdWithChanges; operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0; + const instance = suspense.instance; + const isSuspended = + // TODO: Track if other SuspenseNode like SuspenseList rows are suspended. + (instance.kind === FIBER_INSTANCE || + instance.kind === FILTERED_FIBER_INSTANCE) && + instance.data.tag === SuspenseComponent && + instance.data.memoizedState !== null; + operations[i++] = isSuspended ? 1 : 0; operations[i++] = suspense.environments.size; suspense.environments.forEach((count, env) => { operations[i++] = getStringID(env); @@ -2657,9 +2665,15 @@ export function attach( const fiber = fiberInstance.data; const props = fiber.memoizedProps; // TODO: Compute a fallback name based on Owner, key etc. - const name = props === null ? null : props.name || null; + const name = + fiber.tag !== SuspenseComponent || props === null + ? null + : props.name || null; const nameStringID = getStringID(name); + const isSuspended = + fiber.tag === SuspenseComponent && fiber.memoizedState !== null; + if (__DEBUG__) { console.log('recordSuspenseMount()', suspenseInstance); } @@ -2670,6 +2684,7 @@ export function attach( pushOperation(fiberID); pushOperation(parentID); pushOperation(nameStringID); + pushOperation(isSuspended ? 1 : 0); const rects = suspenseInstance.rects; if (rects === null) { @@ -5038,15 +5053,24 @@ export function attach( const nextIsSuspended = isSuspendedOffscreen(nextFiber); if (isLegacySuspense) { - if ( - fiberInstance !== null && - fiberInstance.suspenseNode !== null && - (prevFiber.stateNode === null) !== (nextFiber.stateNode === null) - ) { - trackThrownPromisesFromRetryCache( - fiberInstance.suspenseNode, - nextFiber.stateNode, - ); + if (fiberInstance !== null && fiberInstance.suspenseNode !== null) { + const suspenseNode = fiberInstance.suspenseNode; + if ( + (prevFiber.stateNode === null) !== + (nextFiber.stateNode === null) + ) { + trackThrownPromisesFromRetryCache( + suspenseNode, + nextFiber.stateNode, + ); + } + if ( + (prevFiber.memoizedState === null) !== + (nextFiber.memoizedState === null) + ) { + // Toggle suspended state. + recordSuspenseSuspenders(suspenseNode); + } } } // The logic below is inspired by the code paths in updateSuspenseComponent() @@ -5194,6 +5218,14 @@ export function attach( ); } + if ( + (prevFiber.memoizedState === null) !== + (nextFiber.memoizedState === null) + ) { + // Toggle suspended state. + recordSuspenseSuspenders(suspenseNode); + } + shouldMeasureSuspenseNode = false; updateFlags |= updateSuspenseChildrenRecursively( nextContentFiber, @@ -5220,6 +5252,8 @@ export function attach( } trackThrownPromisesFromRetryCache(suspenseNode, nextFiber.stateNode); + // Toggle suspended state. + recordSuspenseSuspenders(suspenseNode); mountSuspenseChildrenRecursively( nextContentFiber, diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 46709c9a804..1262a8d4647 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -417,6 +417,7 @@ export function attach( pushOperation(id); pushOperation(parentID); pushOperation(getStringID(null)); // name + pushOperation(0); // isSuspended // TODO: Measure rect of root pushOperation(-1); } else { diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index eeb6da60f8a..86961f5bd91 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1552,7 +1552,8 @@ export default class Store extends EventEmitter<{ const id = operations[i + 1]; const parentID = operations[i + 2]; const nameStringID = operations[i + 3]; - const numRects = ((operations[i + 4]: any): number); + const isSuspended = operations[i + 4] === 1; + const numRects = ((operations[i + 5]: any): number); let name = stringTable[nameStringID]; if (this._idToSuspense.has(id)) { @@ -1579,7 +1580,7 @@ export default class Store extends EventEmitter<{ } } - i += 5; + i += 6; let rects: SuspenseNode['rects']; if (numRects === -1) { rects = null; @@ -1625,6 +1626,7 @@ export default class Store extends EventEmitter<{ name, rects, hasUniqueSuspenders: false, + isSuspended: isSuspended, }); hasSuspenseTreeChanged = true; @@ -1801,6 +1803,7 @@ export default class Store extends EventEmitter<{ for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const id = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; const environmentNames = []; for ( @@ -1832,6 +1835,7 @@ export default class Store extends EventEmitter<{ } suspense.hasUniqueSuspenders = hasUniqueSuspenders; + suspense.isSuspended = isSuspended; // TODO: Recompute the environment names. } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js index 28be5f9e1c7..4addf109166 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js @@ -378,7 +378,8 @@ function updateTree( const fiberID = operations[i + 1]; const parentID = operations[i + 2]; const nameStringID = operations[i + 3]; - const numRects = operations[i + 4]; + const isSuspended = operations[i + 4]; + const numRects = operations[i + 5]; const name = stringTable[nameStringID]; if (__DEBUG__) { @@ -388,16 +389,16 @@ function updateTree( } else { rects = '[' + - operations.slice(i + 5, i + 5 + numRects * 4).join(',') + + operations.slice(i + 6, i + 6 + numRects * 4).join(',') + ']'; } debug( 'Add suspense', - `node ${fiberID} (name=${JSON.stringify(name)}, rects={${rects}}) under ${parentID}`, + `node ${fiberID} (name=${JSON.stringify(name)}, rects={${rects}}) under ${parentID} suspended ${isSuspended}`, ); } - i += 5 + (numRects === -1 ? 0 : numRects * 4); + i += 6 + (numRects === -1 ? 0 : numRects * 4); break; } @@ -459,12 +460,13 @@ function updateTree( for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const suspenseNodeId = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; i += environmentNamesLength; if (__DEBUG__) { debug( 'Suspender changes', - `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} with ${String(environmentNamesLength)} environments`, + `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, ); } } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index bfc53d8b848..591d908735e 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -44,6 +44,10 @@ outline-width: 0; } +.SuspenseRectsScaledRect[data-suspended='true'] { + opacity: 0.3; +} + /* highlight this boundary */ .SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect { background-color: var(--color-background-hover); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index f949631be84..5f07bb61001 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -35,11 +35,13 @@ function ScaledRect({ className, rect, visible, + suspended, ...props }: { className: string, rect: Rect, visible: boolean, + suspended: boolean, ... }): React$Node { const viewBox = useContext(ViewBox); @@ -53,6 +55,7 @@ function ScaledRect({ {...props} className={styles.SuspenseRectsScaledRect + ' ' + className} data-visible={visible} + data-suspended={suspended} style={{ width, height, @@ -145,7 +148,8 @@ function SuspenseRects({ <ScaledRect rect={boundingBox} className={styles.SuspenseRectsBoundary} - visible={visible}> + visible={visible} + suspended={suspense.isSuspended}> <ViewBox.Provider value={boundingBox}> {visible && suspense.rects !== null && diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js index 7762af43e00..2a012ce33a1 100644 --- a/packages/react-devtools-shared/src/frontend/types.js +++ b/packages/react-devtools-shared/src/frontend/types.js @@ -200,6 +200,7 @@ export type SuspenseNode = { name: string | null, rects: null | Array<Rect>, hasUniqueSuspenders: boolean, + isSuspended: boolean, }; // Serialized version of ReactIOInfo diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 007db77f220..29ff6d566bd 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -340,9 +340,10 @@ export function printOperationsArray(operations: Array<number>) { const fiberID = operations[i + 1]; const parentID = operations[i + 2]; const nameStringID = operations[i + 3]; - const numRects = operations[i + 4]; + const isSuspended = operations[i + 4]; + const numRects = operations[i + 5]; - i += 5; + i += 6; const name = stringTable[nameStringID]; let rects: string; @@ -368,7 +369,7 @@ export function printOperationsArray(operations: Array<number>) { } logs.push( - `Add suspense node ${fiberID} (${String(name)},rects={${rects}}) under ${parentID}`, + `Add suspense node ${fiberID} (${String(name)},rects={${rects}}) under ${parentID} suspended ${isSuspended}`, ); break; } @@ -431,10 +432,11 @@ export function printOperationsArray(operations: Array<number>) { for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const id = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; i += environmentNamesLength; logs.push( - `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} with ${String(environmentNamesLength)} environments`, + `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, ); } From 77b2f909f6261ec2c5de75dbe76287ec6fead0d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 10:26:46 -0400 Subject: [PATCH 080/276] [DevTools] Attempt at a better "unique suspender" text (#34854) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Nobody knows what this terminology means. Also, this tooltip component sucks: <img width="634" height="137" alt="Screenshot 2025-10-15 at 12 04 49 AM" src="https://github.com/user-attachments/assets/a1c33650-7c7d-441f-8f8b-0ea7ebea9351" /> --- .../src/devtools/views/SuspenseTab/SuspenseTab.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index f7b63fa2c62..9ade19c3307 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -85,7 +85,9 @@ function ToggleUniqueSuspenders() { <Toggle isChecked={uniqueSuspendersOnly} onChange={handleToggleUniqueSuspenders} - title={'Only include boundaries with unique suspenders'}> + title={ + 'Filter Suspense which does not suspend, or if the parent also suspend on the same.' + }> <ButtonIcon type={uniqueSuspendersOnly ? 'filter-on' : 'filter-off'} /> </Toggle> ); From 1873ad7960da8fd8d497d03da8050ad88b8bcacf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 11:42:03 -0400 Subject: [PATCH 081/276] [DevTools] The bridge event types should only be defined in one direction (#34859) This revealed that a lot of the event types were defined on the wrong end of the bridge. It was also a problem that events with the same name couldn't have different arguments. --- packages/react-devtools-shared/src/bridge.js | 21 +++++++++---------- .../Components/InspectHostNodesToggle.js | 2 +- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index b6229192c23..3162dc215ff 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -217,10 +217,15 @@ export type BackendEvents = { selectElement: [number], shutdown: [], stopInspectingHost: [boolean], - syncSelectionFromBuiltinElementsPanel: [], syncSelectionToBuiltinElementsPanel: [], unsupportedRendererVersion: [], + extensionComponentsPanelShown: [], + extensionComponentsPanelHidden: [], + + resumeElementPolling: [], + pauseElementPolling: [], + // React Native style editor plug-in. isNativeStyleEditorSupported: [ {isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>}, @@ -240,8 +245,6 @@ type FrontendEvents = { clearWarningsForElementID: [ElementAndRendererID], copyElementPath: [CopyElementPathParams], deletePath: [DeletePath], - extensionComponentsPanelShown: [], - extensionComponentsPanelHidden: [], getBackendVersion: [], getBridgeProtocol: [], getIfHasUnsupportedRendererVersion: [], @@ -265,7 +268,7 @@ type FrontendEvents = { shutdown: [], startInspectingHost: [], startProfiling: [StartProfilingParams], - stopInspectingHost: [boolean], + stopInspectingHost: [], scrollToHostInstance: [ScrollToHostInstance], stopProfiling: [], storeAsGlobal: [StoreAsGlobalParams], @@ -275,6 +278,8 @@ type FrontendEvents = { viewAttributeSource: [ViewAttributeSourceParams], viewElementSource: [ElementAndRendererID], + syncSelectionFromBuiltinElementsPanel: [], + // React Native style editor plug-in. NativeStyleEditor_measure: [ElementAndRendererID], NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams], @@ -295,19 +300,13 @@ type FrontendEvents = { overrideProps: [OverrideValue], overrideState: [OverrideValue], - resumeElementPolling: [], - pauseElementPolling: [], - getHookSettings: [], }; class Bridge< OutgoingEvents: Object, IncomingEvents: Object, -> extends EventEmitter<{ - ...IncomingEvents, - ...OutgoingEvents, -}> { +> extends EventEmitter<IncomingEvents> { _isShutdown: boolean = false; _messageQueue: Array<any> = []; _scheduledFlush: boolean = false; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js index 2f2b9e9e91d..17a7b049cc9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js @@ -26,7 +26,7 @@ export default function InspectHostNodesToggle(): React.Node { logEvent({event_name: 'inspect-element-button-clicked'}); bridge.send('startInspectingHost'); } else { - bridge.send('stopInspectingHost', false); + bridge.send('stopInspectingHost'); } }, [bridge], From e096403c595d67b689473908a52979c76bbefb9e Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Wed, 15 Oct 2025 09:45:06 -0700 Subject: [PATCH 082/276] [compiler] Infer types for properties after holes in array patterns (#34847) In InferTypes when we infer types for properties during destructuring, we were breaking out of the loop when we encounter a hole in the array. Instead we should just skip that element and continue inferring later properties. Closes #34748 --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34847). * #34855 * __->__ #34847 --- .../src/TypeInference/InferTypes.ts | 2 +- ...setState-in-render-unbound-state.expect.md | 41 ++++++++++++++ ...nvalid-setState-in-render-unbound-state.js | 13 +++++ .../fixtures/compiler/holey-array.expect.md | 35 ------------ .../fixtures/compiler/holey-array.js | 11 ---- ...use-memo-transition-no-ispending.expect.md | 52 ++++++++++++++++++ ...eserve-use-memo-transition-no-ispending.js | 15 +++++ .../preserve-use-memo-unused-state.expect.md | 55 +++++++++++++++++++ .../preserve-use-memo-unused-state.js | 15 +++++ 9 files changed, 192 insertions(+), 47 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts b/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts index 1c4443e5a49..55974db14ce 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts @@ -393,7 +393,7 @@ function* generateInstructionTypes( shapeId: BuiltInArrayId, }); } else { - break; + continue; } } } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md new file mode 100644 index 00000000000..423076cc3a4 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.expect.md @@ -0,0 +1,41 @@ + +## Input + +```javascript +function Component(props) { + // Intentionally don't bind state, this repros a bug where we didn't + // infer the type of destructured properties after a hole in the array + let [, setState] = useState(); + setState(1); + return props.foo; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: ['TodoAdd'], + isComponent: 'TodoAdd', +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: Calling setState during render may trigger an infinite loop + +Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState). + +error.invalid-setState-in-render-unbound-state.ts:5:2 + 3 | // infer the type of destructured properties after a hole in the array + 4 | let [, setState] = useState(); +> 5 | setState(1); + | ^^^^^^^^ Found setState() in render + 6 | return props.foo; + 7 | } + 8 | +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js new file mode 100644 index 00000000000..58e2837692a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-render-unbound-state.js @@ -0,0 +1,13 @@ +function Component(props) { + // Intentionally don't bind state, this repros a bug where we didn't + // infer the type of destructured properties after a hole in the array + let [, setState] = useState(); + setState(1); + return props.foo; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: ['TodoAdd'], + isComponent: 'TodoAdd', +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md deleted file mode 100644 index 160699b115b..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.expect.md +++ /dev/null @@ -1,35 +0,0 @@ - -## Input - -```javascript -function t(props) { - let [, setstate] = useState(); - setstate(1); - return props.foo; -} - -export const FIXTURE_ENTRYPOINT = { - fn: t, - params: ['TodoAdd'], - isComponent: 'TodoAdd', -}; - -``` - -## Code - -```javascript -function t(props) { - const [, setstate] = useState(); - setstate(1); - return props.foo; -} - -export const FIXTURE_ENTRYPOINT = { - fn: t, - params: ["TodoAdd"], - isComponent: "TodoAdd", -}; - -``` - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js deleted file mode 100644 index d76b88f5791..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/holey-array.js +++ /dev/null @@ -1,11 +0,0 @@ -function t(props) { - let [, setstate] = useState(); - setstate(1); - return props.foo; -} - -export const FIXTURE_ENTRYPOINT = { - fn: t, - params: ['TodoAdd'], - isComponent: 'TodoAdd', -}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md new file mode 100644 index 00000000000..c5bfe197c3a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.expect.md @@ -0,0 +1,52 @@ + +## Input + +```javascript +// @validatePreserveExistingMemoizationGuarantees +import {useCallback, useTransition} from 'react'; + +function useFoo() { + const [, /* isPending intentionally not captured */ start] = useTransition(); + + return useCallback(() => { + start(); + }, []); +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees +import { useCallback, useTransition } from "react"; + +function useFoo() { + const $ = _c(1); + const [, start] = useTransition(); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = () => { + start(); + }; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; + +``` + +### Eval output +(kind: ok) "[[ function params=0 ]]" \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js new file mode 100644 index 00000000000..d7560197f03 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-transition-no-ispending.js @@ -0,0 +1,15 @@ +// @validatePreserveExistingMemoizationGuarantees +import {useCallback, useTransition} from 'react'; + +function useFoo() { + const [, /* isPending intentionally not captured */ start] = useTransition(); + + return useCallback(() => { + start(); + }, []); +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md new file mode 100644 index 00000000000..84441267558 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.expect.md @@ -0,0 +1,55 @@ + +## Input + +```javascript +// @validatePreserveExistingMemoizationGuarantees +import {useCallback, useTransition} from 'react'; + +function useFoo() { + const [, /* state value intentionally not captured */ setState] = useState(); + + return useCallback(() => { + setState(x => x + 1); + }, []); +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees +import { useCallback, useTransition } from "react"; + +function useFoo() { + const $ = _c(1); + const [, setState] = useState(); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = () => { + setState(_temp); + }; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} +function _temp(x) { + return x + 1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; + +``` + +### Eval output +(kind: exception) useState is not defined \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js new file mode 100644 index 00000000000..e270d4f0192 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-use-memo-unused-state.js @@ -0,0 +1,15 @@ +// @validatePreserveExistingMemoizationGuarantees +import {useCallback, useTransition} from 'react'; + +function useFoo() { + const [, /* state value intentionally not captured */ setState] = useState(); + + return useCallback(() => { + setState(x => x + 1); + }, []); +} + +export const FIXTURE_ENTRYPOINT = { + fn: useFoo, + params: [], +}; From 0fbb9b368393a85c728806e16630712bdafdd6b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 13:43:43 -0400 Subject: [PATCH 083/276] [DevTools] Don't highlight on timeline (#34861) I find it very frustrating that the highlight covers up the content that I'm trying to review when stepping through the timeline. It also triggered on keyboard navigation due to the focus which was annoying. We could highlight something in the rects instead potentially. --- .../views/SuspenseTab/SuspenseScrubber.js | 4 ++-- .../views/SuspenseTab/SuspenseTimeline.js | 21 ++++--------------- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js index 53d20b6467c..f1998aff4b1 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js @@ -31,9 +31,9 @@ export default function SuspenseScrubber({ max: number, value: number, highlight: number, - onBlur: () => void, + onBlur?: () => void, onChange: (index: number) => void, - onFocus: () => void, + onFocus?: () => void, onHoverSegment: (index: number) => void, onHoverLeave: () => void, }): React$Node { diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index 8ebb06899d6..9b708121342 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -11,7 +11,7 @@ import * as React from 'react'; import {useContext, useEffect} from 'react'; import {BridgeContext} from '../context'; import {TreeDispatcherContext} from '../Components/TreeContext'; -import {useHighlightHostInstance, useScrollToHostInstance} from '../hooks'; +import {useScrollToHostInstance} from '../hooks'; import { SuspenseTreeDispatcherContext, SuspenseTreeStateContext, @@ -25,8 +25,6 @@ function SuspenseTimelineInput() { const bridge = useContext(BridgeContext); const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); - const {highlightHostInstance, clearHighlightHostInstance} = - useHighlightHostInstance(); const scrollToHostInstance = useScrollToHostInstance(); const {timeline, timelineIndex, hoveredTimelineIndex, playing, autoScroll} = @@ -37,7 +35,6 @@ function SuspenseTimelineInput() { function switchSuspenseNode(nextTimelineIndex: number) { const nextSelectedSuspenseID = timeline[nextTimelineIndex]; - highlightHostInstance(nextSelectedSuspenseID); treeDispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: nextSelectedSuspenseID, @@ -52,23 +49,14 @@ function SuspenseTimelineInput() { switchSuspenseNode(pendingTimelineIndex); } - function handleBlur() { - clearHighlightHostInstance(); - } - function handleFocus() { switchSuspenseNode(timelineIndex); } function handleHoverSegment(hoveredValue: number) { - const suspenseID = timeline[hoveredValue]; - if (suspenseID === undefined) { - throw new Error( - `Suspense node not found for value ${hoveredValue} in timeline.`, - ); - } - highlightHostInstance(suspenseID); + // TODO: Consider highlighting the rect instead. } + function handleUnhoverSegment() {} function skipPrevious() { const nextSelectedSuspenseID = timeline[timelineIndex - 1]; @@ -180,11 +168,10 @@ function SuspenseTimelineInput() { max={max} value={timelineIndex} highlight={hoveredTimelineIndex} - onBlur={handleBlur} onChange={handleChange} onFocus={handleFocus} onHoverSegment={handleHoverSegment} - onHoverLeave={clearHighlightHostInstance} + onHoverLeave={handleUnhoverSegment} /> </div> </> From 903366b8b1ee4206020492c6e8140645c0cb563e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 15 Oct 2025 13:43:55 -0400 Subject: [PATCH 084/276] [DevTools] Don't select on hover (#34860) We should only persist a selection once you click. Currently, we persist the selection if you just hover which means you lose your selection immediately when just starting to inspect. That's not what Chrome Elements tab does - it selects on click. --- .../src/backend/views/Highlighter/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 6fd93d3519c..894c4fba944 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -366,8 +366,6 @@ export default function setupHighlighter( // Don't pass the name explicitly. // It will be inferred from DOM tag and Fiber owner. showOverlay([target], null, agent, false); - - selectElementForNode(target); } function onPointerUp(event: MouseEvent) { From 85f415e33b95d65aaa29f92268b31d33060628ac Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Wed, 15 Oct 2025 16:23:31 -0700 Subject: [PATCH 085/276] =?UTF-8?q?[compiler]=20Fix=20fbt=20for=20the=20?= =?UTF-8?q?=E2=88=9Eth=20time=20(#34865)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We now do a single pass over the HIR, building up two data structures: * One tracks values that are known macro tags or macro calls. * One tracks operands of macro-related instructions so that we can later group them. After building up these data structures, we do a pass over the latter structure. For each macro call instruction, we recursively traverse its operands to ensure they're in the same scope. Thus, something like `fbt('hello' + fbt.param(foo(), "..."))` will correctly merge the fbt call, the `+` binary expression, the `fbt.param()` call, and `foo()` into a single scope. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34865). * #34855 * __->__ #34865 --- .../MemoizeFbtAndMacroOperandsInSameScope.ts | 195 ++++++++++-------- .../error.todo-fbt-param-nested-fbt.expect.md | 56 ----- ...preserve-whitespace-two-subtrees.expect.md | 34 +-- .../fbt/repro-fbt-param-nested-fbt.expect.md | 111 ++++++++++ ...d-fbt.js => repro-fbt-param-nested-fbt.js} | 0 ...ro-separately-memoized-fbt-param.expect.md | 78 +++++++ .../repro-separately-memoized-fbt-param.js | 22 ++ ...idx-method-no-outlining-wildcard.expect.md | 5 +- .../idx-method-no-outlining.expect.md | 5 +- 9 files changed, 341 insertions(+), 165 deletions(-) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/{error.todo-fbt-param-nested-fbt.js => repro-fbt-param-nested-fbt.js} (100%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts index 022890c1f25..4ae9978b589 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts @@ -7,14 +7,17 @@ import { HIRFunction, + Identifier, IdentifierId, + InstructionValue, makeInstructionId, MutableRange, Place, - ReactiveValue, + ReactiveScope, } from '../HIR'; import {Macro, MacroMethod} from '../HIR/Environment'; -import {eachReactiveValueOperand} from './visitors'; +import {eachInstructionValueOperand} from '../HIR/visitors'; +import {Iterable_some} from '../Utils/utils'; /** * This pass supports the `fbt` translation system (https://facebook.github.io/fbt/) @@ -48,24 +51,49 @@ export function memoizeFbtAndMacroOperandsInSameScope( ...Array.from(FBT_TAGS).map((tag): Macro => [tag, []]), ...(fn.env.config.customMacros ?? []), ]); - const fbtValues: Set<IdentifierId> = new Set(); + /** + * Set of all identifiers that load fbt or other macro functions or their nested + * properties, as well as values known to be the results of invoking macros + */ + const macroTagsCalls: Set<IdentifierId> = new Set(); + /** + * Mapping of lvalue => list of operands for all expressions where either + * the lvalue is a known fbt/macro call and/or the operands transitively + * contain fbt/macro calls. + * + * This is the key data structure that powers the scope merging: we start + * at the lvalues and merge operands into the lvalue's scope. + */ + const macroValues: Map<Identifier, Array<Identifier>> = new Map(); + // Tracks methods loaded from macros, like fbt.param or idx.foo const macroMethods = new Map<IdentifierId, Array<Array<MacroMethod>>>(); - while (true) { - let vsize = fbtValues.size; - let msize = macroMethods.size; - visit(fn, fbtMacroTags, fbtValues, macroMethods); - if (vsize === fbtValues.size && msize === macroMethods.size) { - break; + + visit(fn, fbtMacroTags, macroTagsCalls, macroMethods, macroValues); + + for (const root of macroValues.keys()) { + const scope = root.scope; + if (scope == null) { + continue; + } + // Merge the operands into the same scope if this is a known macro invocation + if (!macroTagsCalls.has(root.id)) { + continue; } + mergeScopes(root, scope, macroValues, macroTagsCalls); } - return fbtValues; + + return macroTagsCalls; } export const FBT_TAGS: Set<string> = new Set([ 'fbt', 'fbt:param', + 'fbt:enum', + 'fbt:plural', 'fbs', 'fbs:param', + 'fbs:enum', + 'fbs:plural', ]); export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([ 'fbt:param', @@ -75,10 +103,22 @@ export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([ function visit( fn: HIRFunction, fbtMacroTags: Set<Macro>, - fbtValues: Set<IdentifierId>, + macroTagsCalls: Set<IdentifierId>, macroMethods: Map<IdentifierId, Array<Array<MacroMethod>>>, + macroValues: Map<Identifier, Array<Identifier>>, ): void { for (const [, block] of fn.body.blocks) { + for (const phi of block.phis) { + const macroOperands: Array<Identifier> = []; + for (const operand of phi.operands.values()) { + if (macroValues.has(operand.identifier)) { + macroOperands.push(operand.identifier); + } + } + if (macroOperands.length !== 0) { + macroValues.set(phi.place.identifier, macroOperands); + } + } for (const instruction of block.instructions) { const {lvalue, value} = instruction; if (lvalue === null) { @@ -93,13 +133,13 @@ function visit( * We don't distinguish between tag names and strings, so record * all `fbt` string literals in case they are used as a jsx tag. */ - fbtValues.add(lvalue.identifier.id); + macroTagsCalls.add(lvalue.identifier.id); } else if ( value.kind === 'LoadGlobal' && matchesExactTag(value.binding.name, fbtMacroTags) ) { // Record references to `fbt` as a global - fbtValues.add(lvalue.identifier.id); + macroTagsCalls.add(lvalue.identifier.id); } else if ( value.kind === 'LoadGlobal' && matchTagRoot(value.binding.name, fbtMacroTags) !== null @@ -121,84 +161,66 @@ function visit( if (method.length > 1) { newMethods.push(method.slice(1)); } else { - fbtValues.add(lvalue.identifier.id); + macroTagsCalls.add(lvalue.identifier.id); } } } if (newMethods.length > 0) { macroMethods.set(lvalue.identifier.id, newMethods); } - } else if (isFbtCallExpression(fbtValues, value)) { - const fbtScope = lvalue.identifier.scope; - if (fbtScope === null) { - continue; - } - - /* - * if the JSX element's tag was `fbt`, mark all its operands - * to ensure that they end up in the same scope as the jsx element - * itself. - */ - for (const operand of eachReactiveValueOperand(value)) { - operand.identifier.scope = fbtScope; - - // Expand the jsx element's range to account for its operands - expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange); - fbtValues.add(operand.identifier.id); - } } else if ( - isFbtJsxExpression(fbtMacroTags, fbtValues, value) || - isFbtJsxChild(fbtValues, lvalue, value) + value.kind === 'PropertyLoad' && + macroTagsCalls.has(value.object.identifier.id) ) { - const fbtScope = lvalue.identifier.scope; - if (fbtScope === null) { - continue; - } - - /* - * if the JSX element's tag was `fbt`, mark all its operands - * to ensure that they end up in the same scope as the jsx element - * itself. - */ - for (const operand of eachReactiveValueOperand(value)) { - operand.identifier.scope = fbtScope; - - // Expand the jsx element's range to account for its operands - expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange); - - /* - * NOTE: we add the operands as fbt values so that they are also - * grouped with this expression - */ - fbtValues.add(operand.identifier.id); - } - } else if (fbtValues.has(lvalue.identifier.id)) { - const fbtScope = lvalue.identifier.scope; - if (fbtScope === null) { - return; - } - - for (const operand of eachReactiveValueOperand(value)) { - if ( - operand.identifier.name !== null && - operand.identifier.name.kind === 'named' - ) { - /* - * named identifiers were already locals, we only have to force temporaries - * into the same scope - */ - continue; + macroTagsCalls.add(lvalue.identifier.id); + } else if ( + isFbtJsxExpression(fbtMacroTags, macroTagsCalls, value) || + isFbtJsxChild(macroTagsCalls, lvalue, value) || + isFbtCallExpression(macroTagsCalls, value) + ) { + macroTagsCalls.add(lvalue.identifier.id); + macroValues.set( + lvalue.identifier, + Array.from( + eachInstructionValueOperand(value), + operand => operand.identifier, + ), + ); + } else if ( + Iterable_some(eachInstructionValueOperand(value), operand => + macroValues.has(operand.identifier), + ) + ) { + const macroOperands: Array<Identifier> = []; + for (const operand of eachInstructionValueOperand(value)) { + if (macroValues.has(operand.identifier)) { + macroOperands.push(operand.identifier); } - operand.identifier.scope = fbtScope; - - // Expand the jsx element's range to account for its operands - expandFbtScopeRange(fbtScope.range, operand.identifier.mutableRange); } + macroValues.set(lvalue.identifier, macroOperands); } } } } +function mergeScopes( + root: Identifier, + scope: ReactiveScope, + macroValues: Map<Identifier, Array<Identifier>>, + macroTagsCalls: Set<IdentifierId>, +): void { + const operands = macroValues.get(root); + if (operands == null) { + return; + } + for (const operand of operands) { + operand.scope = scope; + expandFbtScopeRange(scope.range, operand.mutableRange); + macroTagsCalls.add(operand.id); + mergeScopes(operand, scope, macroValues, macroTagsCalls); + } +} + function matchesExactTag(s: string, tags: Set<Macro>): boolean { return Array.from(tags).some(macro => typeof macro === 'string' @@ -229,39 +251,40 @@ function matchTagRoot( } function isFbtCallExpression( - fbtValues: Set<IdentifierId>, - value: ReactiveValue, + macroTagsCalls: Set<IdentifierId>, + value: InstructionValue, ): boolean { return ( (value.kind === 'CallExpression' && - fbtValues.has(value.callee.identifier.id)) || - (value.kind === 'MethodCall' && fbtValues.has(value.property.identifier.id)) + macroTagsCalls.has(value.callee.identifier.id)) || + (value.kind === 'MethodCall' && + macroTagsCalls.has(value.property.identifier.id)) ); } function isFbtJsxExpression( fbtMacroTags: Set<Macro>, - fbtValues: Set<IdentifierId>, - value: ReactiveValue, + macroTagsCalls: Set<IdentifierId>, + value: InstructionValue, ): boolean { return ( value.kind === 'JsxExpression' && ((value.tag.kind === 'Identifier' && - fbtValues.has(value.tag.identifier.id)) || + macroTagsCalls.has(value.tag.identifier.id)) || (value.tag.kind === 'BuiltinTag' && matchesExactTag(value.tag.name, fbtMacroTags))) ); } function isFbtJsxChild( - fbtValues: Set<IdentifierId>, + macroTagsCalls: Set<IdentifierId>, lvalue: Place | null, - value: ReactiveValue, + value: InstructionValue, ): boolean { return ( (value.kind === 'JsxExpression' || value.kind === 'JsxFragment') && lvalue !== null && - fbtValues.has(lvalue.identifier.id) + macroTagsCalls.has(lvalue.identifier.id) ); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md deleted file mode 100644 index eb8073282ef..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.expect.md +++ /dev/null @@ -1,56 +0,0 @@ - -## Input - -```javascript -import fbt from 'fbt'; -import {Stringify} from 'shared-runtime'; - -/** - * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. - * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: - * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier - * --- - * t3 - * --- - */ -function Component({firstname, lastname}) { - 'use memo'; - return ( - <Stringify> - {fbt( - [ - 'Name: ', - fbt.param('firstname', <Stringify key={0} name={firstname} />), - ', ', - fbt.param( - 'lastname', - <Stringify key={0} name={lastname}> - {fbt('(inner fbt)', 'Inner fbt value')} - </Stringify> - ), - ], - 'Name' - )} - </Stringify> - ); -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{firstname: 'first', lastname: 'last'}], - sequentialRenders: [{firstname: 'first', lastname: 'last'}], -}; - -``` - - -## Error - -``` -Line 19 Column 11: fbt: unsupported babel node: Identifier ---- -t3 ---- -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md index 1acfd65d165..c1a1a5891b3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md @@ -37,27 +37,31 @@ import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; function Foo(t0) { - const $ = _c(3); + const $ = _c(7); const { name1, name2 } = t0; let t1; if ($[0] !== name1 || $[1] !== name2) { + let t2; + if ($[3] !== name1) { + t2 = <b>{name1}</b>; + $[3] = name1; + $[4] = t2; + } else { + t2 = $[4]; + } + let t3; + if ($[5] !== name2) { + t3 = <b>{name2}</b>; + $[5] = name2; + $[6] = t3; + } else { + t3 = $[6]; + } t1 = fbt._( "{user1} and {user2} accepted your PR!", [ - fbt._param( - "user1", - - <span key={name1}> - <b>{name1}</b> - </span>, - ), - fbt._param( - "user2", - - <span key={name2}> - <b>{name2}</b> - </span>, - ), + fbt._param("user1", <span key={name1}>{t2}</span>), + fbt._param("user2", <span key={name2}>{t3}</span>), ], { hk: "2PxMie" }, ); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md new file mode 100644 index 00000000000..5ad089e1341 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md @@ -0,0 +1,111 @@ + +## Input + +```javascript +import fbt from 'fbt'; +import {Stringify} from 'shared-runtime'; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component({firstname, lastname}) { + 'use memo'; + return ( + <Stringify> + {fbt( + [ + 'Name: ', + fbt.param('firstname', <Stringify key={0} name={firstname} />), + ', ', + fbt.param( + 'lastname', + <Stringify key={0} name={lastname}> + {fbt('(inner fbt)', 'Inner fbt value')} + </Stringify> + ), + ], + 'Name' + )} + </Stringify> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstname: 'first', lastname: 'last'}], + sequentialRenders: [{firstname: 'first', lastname: 'last'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import fbt from "fbt"; +import { Stringify } from "shared-runtime"; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component(t0) { + "use memo"; + const $ = _c(5); + const { firstname, lastname } = t0; + let t1; + if ($[0] !== firstname || $[1] !== lastname) { + t1 = fbt._( + "Name: {firstname}, {lastname}", + [ + fbt._param( + "firstname", + + <Stringify key={0} name={firstname} />, + ), + fbt._param( + "lastname", + + <Stringify key={0} name={lastname}> + {fbt._("(inner fbt)", null, { hk: "36qNwF" })} + </Stringify>, + ), + ], + { hk: "3AiIf8" }, + ); + $[0] = firstname; + $[1] = lastname; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[3] !== t1) { + t2 = <Stringify>{t1}</Stringify>; + $[3] = t1; + $[4] = t2; + } else { + t2 = $[4]; + } + return t2; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ firstname: "first", lastname: "last" }], + sequentialRenders: [{ firstname: "first", lastname: "last" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"children":"Name: , "}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js similarity index 100% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-nested-fbt.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md new file mode 100644 index 00000000000..b8d3ba638ee --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.expect.md @@ -0,0 +1,78 @@ + +## Input + +```javascript +import {fbt} from 'fbt'; +import {useState} from 'react'; + +const MIN = 10; + +function Component() { + const [count, setCount] = useState(0); + + return fbt( + 'Expected at least ' + + fbt.param('min', MIN, {number: true}) + + ' items, but got ' + + fbt.param('count', count, {number: true}) + + ' items.', + 'Error description' + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { fbt } from "fbt"; +import { useState } from "react"; + +const MIN = 10; + +function Component() { + const $ = _c(2); + const [count] = useState(0); + let t0; + if ($[0] !== count) { + t0 = fbt._( + { "*": { "*": "Expected at least {min} items, but got {count} items." } }, + [ + fbt._param( + "min", + + MIN, + [0], + ), + fbt._param( + "count", + + count, + [0], + ), + ], + { hk: "36gbz8" }, + ); + $[0] = count; + $[1] = t0; + } else { + t0 = $[1]; + } + return t0; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{}], +}; + +``` + +### Eval output +(kind: ok) Expected at least 10 items, but got 0 items. \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js new file mode 100644 index 00000000000..cacd332534b --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-separately-memoized-fbt-param.js @@ -0,0 +1,22 @@ +import {fbt} from 'fbt'; +import {useState} from 'react'; + +const MIN = 10; + +function Component() { + const [count, setCount] = useState(0); + + return fbt( + 'Expected at least ' + + fbt.param('min', MIN, {number: true}) + + ' items, but got ' + + fbt.param('count', count, {number: true}) + + ' items.', + 'Error description' + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md index 59875c8d2a8..455c416d840 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md @@ -73,7 +73,7 @@ function Component(props) { const groupName4 = t3; let t4; if ($[8] !== props) { - t4 = idx.hello_world.b.c(props, _temp3); + t4 = idx.hello_world.b.c(props, (__3) => __3.group.label); $[8] = props; $[9] = t4; } else { @@ -108,9 +108,6 @@ function Component(props) { } return t5; } -function _temp3(__3) { - return __3.group.label; -} function _temp2(__0) { return __0.group.label; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md index 9c748d84beb..cc5a4200a94 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md @@ -49,7 +49,7 @@ function Component(props) { const groupName2 = t1; let t2; if ($[4] !== props) { - t2 = idx.a.b(props, _temp2); + t2 = idx.a.b(props, (__1) => __1.group.label); $[4] = props; $[5] = t2; } else { @@ -74,9 +74,6 @@ function Component(props) { } return t3; } -function _temp2(__1) { - return __1.group.label; -} function _temp(_) { return _.group.label; } From 7385d1f61ac6fedb1473ee5aafb2c39d1a620a4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 10:49:23 -0400 Subject: [PATCH 086/276] [DevTools] Add inspection button to Suspense tab (#34867) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add inspection button to Suspense tab which lets you select only among Suspense nodes. It highlights all the DOM nodes in the root of the Suspense node instead of just the DOM element you hover. The name is inferred. <img width="1172" height="841" alt="Screenshot 2025-10-15 at 8 03 34 PM" src="https://github.com/user-attachments/assets/f04d965b-ef6e-4196-9ba0-51626148fa1a" /> --- .../src/__tests__/store-test.js | 2 +- .../src/backend/agent.js | 100 ++++++------------ .../src/backend/fiber/renderer.js | 46 +++++++- .../src/backend/flight/renderer.js | 3 + .../src/backend/legacy/renderer.js | 3 + .../src/backend/types.js | 1 + .../src/backend/views/Highlighter/index.js | 44 ++++++-- packages/react-devtools-shared/src/bridge.js | 2 +- .../Components/InspectHostNodesToggle.js | 8 +- .../devtools/views/SuspenseTab/SuspenseTab.js | 9 ++ 10 files changed, 140 insertions(+), 78 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 3638852c20b..c02d8130c30 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -1546,7 +1546,7 @@ describe('Store', () => { ▸ <Wrapper> `); - const deepestedNodeID = agent.getIDForHostInstance(ref.current); + const deepestedNodeID = agent.getIDForHostInstance(ref.current).id; await act(() => store.toggleIsCollapsed(deepestedNodeID, false)); expect(store).toMatchInlineSnapshot(` diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index fce8fe626d4..42fbbc9648a 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -455,7 +455,10 @@ export default class Agent extends EventEmitter<{ return renderer.getInstanceAndStyle(id); } - getIDForHostInstance(target: HostInstance): number | null { + getIDForHostInstance( + target: HostInstance, + onlySuspenseNodes?: boolean, + ): null | {id: number, rendererID: number} { if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') { // In React Native or non-DOM we simply pick any renderer that has a match. for (const rendererID in this._rendererInterfaces) { @@ -463,9 +466,14 @@ export default class Agent extends EventEmitter<{ (rendererID: any) ]: any): RendererInterface); try { - const match = renderer.getElementIDForHostInstance(target); - if (match != null) { - return match; + const id = onlySuspenseNodes + ? renderer.getSuspenseNodeIDForHostInstance(target) + : renderer.getElementIDForHostInstance(target); + if (id !== null) { + return { + id: id, + rendererID: +rendererID, + }; } } catch (error) { // Some old React versions might throw if they can't find a match. @@ -478,6 +486,7 @@ export default class Agent extends EventEmitter<{ // that is registered if there isn't an exact match. let bestMatch: null | Element = null; let bestRenderer: null | RendererInterface = null; + let bestRendererID: number = 0; // Find the nearest ancestor which is mounted by a React. for (const rendererID in this._rendererInterfaces) { const renderer = ((this._rendererInterfaces[ @@ -491,6 +500,7 @@ export default class Agent extends EventEmitter<{ // Exact match we can exit early. bestMatch = nearestNode; bestRenderer = renderer; + bestRendererID = +rendererID; break; } if (bestMatch === null || bestMatch.contains(nearestNode)) { @@ -498,12 +508,21 @@ export default class Agent extends EventEmitter<{ // so the new match is a deeper and therefore better match. bestMatch = nearestNode; bestRenderer = renderer; + bestRendererID = +rendererID; } } } if (bestRenderer != null && bestMatch != null) { try { - return bestRenderer.getElementIDForHostInstance(bestMatch); + const id = onlySuspenseNodes + ? bestRenderer.getSuspenseNodeIDForHostInstance(bestMatch) + : bestRenderer.getElementIDForHostInstance(bestMatch); + if (id !== null) { + return { + id, + rendererID: bestRendererID, + }; + } } catch (error) { // Some old React versions might throw if they can't find a match. // If so we should ignore it... @@ -514,65 +533,14 @@ export default class Agent extends EventEmitter<{ } getComponentNameForHostInstance(target: HostInstance): string | null { - // We duplicate this code from getIDForHostInstance to avoid an object allocation. - if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') { - // In React Native or non-DOM we simply pick any renderer that has a match. - for (const rendererID in this._rendererInterfaces) { - const renderer = ((this._rendererInterfaces[ - (rendererID: any) - ]: any): RendererInterface); - try { - const id = renderer.getElementIDForHostInstance(target); - if (id) { - return renderer.getDisplayNameForElementID(id); - } - } catch (error) { - // Some old React versions might throw if they can't find a match. - // If so we should ignore it... - } - } - return null; - } else { - // In the DOM we use a smarter mechanism to find the deepest a DOM node - // that is registered if there isn't an exact match. - let bestMatch: null | Element = null; - let bestRenderer: null | RendererInterface = null; - // Find the nearest ancestor which is mounted by a React. - for (const rendererID in this._rendererInterfaces) { - const renderer = ((this._rendererInterfaces[ - (rendererID: any) - ]: any): RendererInterface); - const nearestNode: null | Element = renderer.getNearestMountedDOMNode( - (target: any), - ); - if (nearestNode !== null) { - if (nearestNode === target) { - // Exact match we can exit early. - bestMatch = nearestNode; - bestRenderer = renderer; - break; - } - if (bestMatch === null || bestMatch.contains(nearestNode)) { - // If this is the first match or the previous match contains the new match, - // so the new match is a deeper and therefore better match. - bestMatch = nearestNode; - bestRenderer = renderer; - } - } - } - if (bestRenderer != null && bestMatch != null) { - try { - const id = bestRenderer.getElementIDForHostInstance(bestMatch); - if (id) { - return bestRenderer.getDisplayNameForElementID(id); - } - } catch (error) { - // Some old React versions might throw if they can't find a match. - // If so we should ignore it... - } - } - return null; + const match = this.getIDForHostInstance(target); + if (match !== null) { + const renderer = ((this._rendererInterfaces[ + (match.rendererID: any) + ]: any): RendererInterface); + return renderer.getDisplayNameForElementID(match.id); } + return null; } getBackendVersion: () => void = () => { @@ -971,9 +939,9 @@ export default class Agent extends EventEmitter<{ }; selectNode(target: HostInstance): void { - const id = this.getIDForHostInstance(target); - if (id !== null) { - this._bridge.send('selectElement', id); + const match = this.getIDForHostInstance(target); + if (match !== null) { + this._bridge.send('selectElement', match.id); } } diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index b7fe41b96c5..47902a44382 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -5793,7 +5793,28 @@ export function attach( return null; } if (devtoolsInstance.kind === FIBER_INSTANCE) { - return getDisplayNameForFiber(devtoolsInstance.data); + const fiber = devtoolsInstance.data; + if (fiber.tag === HostRoot) { + // The only reason you'd inspect a HostRoot is to show it as a SuspenseNode. + return 'Initial Paint'; + } + if (fiber.tag === SuspenseComponent || fiber.tag === ActivityComponent) { + // For Suspense and Activity components, we can show a better name + // by using the name prop or their owner. + const props = fiber.memoizedProps; + if (props.name != null) { + return props.name; + } + const owner = getUnfilteredOwner(fiber); + if (owner != null) { + if (typeof owner.tag === 'number') { + return getDisplayNameForFiber((owner: any)); + } else { + return owner.name || ''; + } + } + } + return getDisplayNameForFiber(fiber); } else { return devtoolsInstance.data.name || ''; } @@ -5834,6 +5855,28 @@ export function attach( return null; } + function getSuspenseNodeIDForHostInstance( + publicInstance: HostInstance, + ): number | null { + const instance = publicInstanceToDevToolsInstanceMap.get(publicInstance); + if (instance !== undefined) { + // Pick nearest unfiltered SuspenseNode instance. + let suspenseInstance = instance; + while ( + suspenseInstance.suspenseNode === null || + suspenseInstance.kind === FILTERED_FIBER_INSTANCE + ) { + if (suspenseInstance.parent === null) { + // We shouldn't get here since we'll always have a suspenseNode at the root. + return null; + } + suspenseInstance = suspenseInstance.parent; + } + return suspenseInstance.id; + } + return null; + } + function getElementAttributeByPath( id: number, path: Array<string | number>, @@ -8630,6 +8673,7 @@ export function attach( getDisplayNameForElementID, getNearestMountedDOMNode, getElementIDForHostInstance, + getSuspenseNodeIDForHostInstance, getInstanceAndStyle, getOwnersList, getPathForElement, diff --git a/packages/react-devtools-shared/src/backend/flight/renderer.js b/packages/react-devtools-shared/src/backend/flight/renderer.js index d0dc9094334..e26525a0d60 100644 --- a/packages/react-devtools-shared/src/backend/flight/renderer.js +++ b/packages/react-devtools-shared/src/backend/flight/renderer.js @@ -169,6 +169,9 @@ export function attach( getElementIDForHostInstance() { return null; }, + getSuspenseNodeIDForHostInstance() { + return null; + }, getInstanceAndStyle() { return { instance: null, diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 1262a8d4647..ccd9cdac3e0 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -1269,6 +1269,9 @@ export function attach( getDisplayNameForElementID, getNearestMountedDOMNode, getElementIDForHostInstance, + getSuspenseNodeIDForHostInstance(id: number): null { + return null; + }, getInstanceAndStyle, findHostInstancesForElementID: (id: number) => { const hostInstance = findHostInstanceForInternalID(id); diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 1052dc9d75b..67d6a5f834b 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -427,6 +427,7 @@ export type RendererInterface = { getComponentStack?: GetComponentStack, getNearestMountedDOMNode: (component: Element) => Element | null, getElementIDForHostInstance: GetElementIDForHostInstance, + getSuspenseNodeIDForHostInstance: GetElementIDForHostInstance, getDisplayNameForElementID: GetDisplayNameForElementID, getInstanceAndStyle(id: number): InstanceAndStyle, getProfilingData(): ProfilingDataBackend, diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 894c4fba944..b67b3964ed5 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -20,6 +20,7 @@ import type {RendererInterface} from '../../types'; // That is done by the React Native Inspector component. let iframesListeningTo: Set<HTMLIFrameElement> = new Set(); +let inspectOnlySuspenseNodes = false; export default function setupHighlighter( bridge: BackendBridge, @@ -33,7 +34,8 @@ export default function setupHighlighter( bridge.addListener('startInspectingHost', startInspectingHost); bridge.addListener('stopInspectingHost', stopInspectingHost); - function startInspectingHost() { + function startInspectingHost(onlySuspenseNodes: boolean) { + inspectOnlySuspenseNodes = onlySuspenseNodes; registerListenersOnWindow(window); } @@ -363,9 +365,37 @@ export default function setupHighlighter( } } - // Don't pass the name explicitly. - // It will be inferred from DOM tag and Fiber owner. - showOverlay([target], null, agent, false); + if (inspectOnlySuspenseNodes) { + // For Suspense nodes we want to highlight not the actual target but the nodes + // that are the root of the Suspense node. + // TODO: Consider if we should just do the same for other elements because the + // hovered node might just be one child of many in the Component. + const match = agent.getIDForHostInstance( + target, + inspectOnlySuspenseNodes, + ); + if (match !== null) { + const renderer = agent.rendererInterfaces[match.rendererID]; + if (renderer == null) { + console.warn( + `Invalid renderer id "${match.rendererID}" for element "${match.id}"`, + ); + return; + } + highlightHostInstance({ + displayName: renderer.getDisplayNameForElementID(match.id), + hideAfterTimeout: false, + id: match.id, + openBuiltinElementsPanel: false, + rendererID: match.rendererID, + scrollIntoView: false, + }); + } + } else { + // Don't pass the name explicitly. + // It will be inferred from DOM tag and Fiber owner. + showOverlay([target], null, agent, false); + } } function onPointerUp(event: MouseEvent) { @@ -374,9 +404,9 @@ export default function setupHighlighter( } const selectElementForNode = (node: HTMLElement) => { - const id = agent.getIDForHostInstance(node); - if (id !== null) { - bridge.send('selectElement', id); + const match = agent.getIDForHostInstance(node, inspectOnlySuspenseNodes); + if (match !== null) { + bridge.send('selectElement', match.id); } }; diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index 3162dc215ff..683b3419202 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -266,7 +266,7 @@ type FrontendEvents = { savedPreferences: [SavedPreferencesParams], setTraceUpdatesEnabled: [boolean], shutdown: [], - startInspectingHost: [], + startInspectingHost: [boolean], startProfiling: [StartProfilingParams], stopInspectingHost: [], scrollToHostInstance: [ScrollToHostInstance], diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js index 17a7b049cc9..1b8fd54dc5c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js @@ -14,7 +14,11 @@ import Toggle from '../Toggle'; import ButtonIcon from '../ButtonIcon'; import {logEvent} from 'react-devtools-shared/src/Logger'; -export default function InspectHostNodesToggle(): React.Node { +export default function InspectHostNodesToggle({ + onlySuspenseNodes, +}: { + onlySuspenseNodes?: boolean, +}): React.Node { const [isInspecting, setIsInspecting] = useState(false); const bridge = useContext(BridgeContext); @@ -24,7 +28,7 @@ export default function InspectHostNodesToggle(): React.Node { if (isChecked) { logEvent({event_name: 'inspect-element-button-clicked'}); - bridge.send('startInspectingHost'); + bridge.send('startInspectingHost', !!onlySuspenseNodes); } else { bridge.send('stopInspectingHost'); } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index 9ade19c3307..1344faf0a29 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -14,6 +14,7 @@ import { useLayoutEffect, useReducer, useRef, + Fragment, } from 'react'; import { @@ -21,6 +22,7 @@ import { localStorageSetItem, } from 'react-devtools-shared/src/storage'; import ButtonIcon, {type IconType} from '../ButtonIcon'; +import InspectHostNodesToggle from '../Components/InspectHostNodesToggle'; import InspectedElementErrorBoundary from '../Components/InspectedElementErrorBoundary'; import InspectedElement from '../Components/InspectedElement'; import portaledContent from '../portaledContent'; @@ -156,6 +158,7 @@ function ToggleInspectedElement({ } function SuspenseTab(_: {}) { + const store = useContext(StoreContext); const {hideSettings} = useContext(OptionsContext); const [state, dispatch] = useReducer<LayoutState, null, LayoutAction>( layoutReducer, @@ -367,6 +370,12 @@ function SuspenseTab(_: {}) { ) : ( <ToggleTreeList dispatch={dispatch} state={state} /> )} + {store.supportsClickToInspect && ( + <Fragment> + <InspectHostNodesToggle onlySuspenseNodes={true} /> + <div className={styles.VRule} /> + </Fragment> + )} <div className={styles.SuspenseBreadcrumbs}> <SuspenseBreadcrumbs /> </div> From 7bd8716acdd9a484e81addcaa923e0a69e61d533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 10:49:37 -0400 Subject: [PATCH 087/276] [DevTools] Don't try to load anonymous or empty urls (#34869) This triggers unnecessary fetches. --- .../parseHookNames/loadSourceAndMetadata.js | 32 ++++++++++--------- .../src/symbolicateSource.js | 3 ++ 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js index 6d3f1223f6f..7c40cabf97f 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js @@ -475,23 +475,25 @@ function loadSourceFiles( const fetchPromise = dedupedFetchPromises.get(runtimeSourceURL) || - fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => { - // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps, - // because then we need to parse the full source file as an AST. - if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) { - throw Error('Source code too large to parse'); - } + (runtimeSourceURL && !runtimeSourceURL.startsWith('<anonymous') + ? fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => { + // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps, + // because then we need to parse the full source file as an AST. + if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) { + throw Error('Source code too large to parse'); + } - if (__DEBUG__) { - console.groupCollapsed( - `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`, - ); - console.log(runtimeSourceCode); - console.groupEnd(); - } + if (__DEBUG__) { + console.groupCollapsed( + `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`, + ); + console.log(runtimeSourceCode); + console.groupEnd(); + } - return runtimeSourceCode; - }); + return runtimeSourceCode; + }) + : Promise.reject(new Error('Empty url'))); dedupedFetchPromises.set(runtimeSourceURL, fetchPromise); setterPromises.push( diff --git a/packages/react-devtools-shared/src/symbolicateSource.js b/packages/react-devtools-shared/src/symbolicateSource.js index 092b1f8187a..ebcf161dc96 100644 --- a/packages/react-devtools-shared/src/symbolicateSource.js +++ b/packages/react-devtools-shared/src/symbolicateSource.js @@ -52,6 +52,9 @@ export async function symbolicateSource( lineNumber: number, // 1-based columnNumber: number, // 1-based ): Promise<SourceMappedLocation | null> { + if (!sourceURL || sourceURL.startsWith('<anonymous')) { + return null; + } const resource = await fetchFileWithCaching(sourceURL).catch(() => null); if (resource == null) { return null; From 4e0074737826a1296eb028c53ce4f6b6db8d09ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 10:50:18 -0400 Subject: [PATCH 088/276] [DevTools] Don't pluralize if already plural (#34870) In a demo today, `cookies()` showed up as `cookieses`. While adorable, is wrong. --- .../src/devtools/views/utils.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js index 3b0de4118a2..a2d254bc27d 100644 --- a/packages/react-devtools-shared/src/devtools/views/utils.js +++ b/packages/react-devtools-shared/src/devtools/views/utils.js @@ -205,6 +205,27 @@ export function pluralize(word: string): string { return word; } + // Bail out if it's already plural. + switch (word) { + case 'men': + case 'women': + case 'children': + case 'feet': + case 'teeth': + case 'mice': + case 'people': + return word; + } + + if ( + /(ches|shes|ses|xes|zes)$/i.test(word) || + /[^s]ies$/i.test(word) || + /ves$/i.test(word) || + /[^s]s$/i.test(word) + ) { + return word; + } + switch (word) { case 'man': return 'men'; From 03ba0c76e15967fe0ac0413e9a8a55eb55f9e55f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 10:50:41 -0400 Subject: [PATCH 089/276] [DevTools] Include some sub-pixel precision in rects (#34873) Currently the sub-pixel precision is lost which can lead to things not lining up properly and being slightly off or overlapping. We need some sub-pixel precision. Ideally we'd just keep the floating point as is. I'm not sure why the operations is limited to integers. We don't send it as a typed array anyway it seems which would ideally be more optimal. Even if we did, we haven't defined a precision for the protocol. Is it 32bit integer? 64bit? If it's 64bit we can fit a float anyway. Ideally it would be more variable precision like just pushing into a typed array directly with the option to write whatever precision we want. --- .../src/backend/fiber/renderer.js | 16 ++++++++-------- .../react-devtools-shared/src/devtools/store.js | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 47902a44382..de178909b29 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2693,10 +2693,10 @@ export function attach( pushOperation(rects.length); for (let i = 0; i < rects.length; ++i) { const rect = rects[i]; - pushOperation(Math.round(rect.x)); - pushOperation(Math.round(rect.y)); - pushOperation(Math.round(rect.width)); - pushOperation(Math.round(rect.height)); + pushOperation(Math.round(rect.x * 1000)); + pushOperation(Math.round(rect.y * 1000)); + pushOperation(Math.round(rect.width * 1000)); + pushOperation(Math.round(rect.height * 1000)); } } } @@ -2765,10 +2765,10 @@ export function attach( pushOperation(rects.length); for (let i = 0; i < rects.length; ++i) { const rect = rects[i]; - pushOperation(Math.round(rect.x)); - pushOperation(Math.round(rect.y)); - pushOperation(Math.round(rect.width)); - pushOperation(Math.round(rect.height)); + pushOperation(Math.round(rect.x * 1000)); + pushOperation(Math.round(rect.y * 1000)); + pushOperation(Math.round(rect.width * 1000)); + pushOperation(Math.round(rect.height * 1000)); } } } diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 86961f5bd91..f1aa61bfe9b 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1587,10 +1587,10 @@ export default class Store extends EventEmitter<{ } else { rects = []; for (let rectIndex = 0; rectIndex < numRects; rectIndex++) { - const x = operations[i + 0]; - const y = operations[i + 1]; - const width = operations[i + 2]; - const height = operations[i + 3]; + const x = operations[i + 0] / 1000; + const y = operations[i + 1] / 1000; + const width = operations[i + 2] / 1000; + const height = operations[i + 3] / 1000; rects.push({x, y, width, height}); i += 4; } @@ -1763,10 +1763,10 @@ export default class Store extends EventEmitter<{ } else { nextRects = []; for (let rectIndex = 0; rectIndex < numRects; rectIndex++) { - const x = operations[i + 0]; - const y = operations[i + 1]; - const width = operations[i + 2]; - const height = operations[i + 3]; + const x = operations[i + 0] / 1000; + const y = operations[i + 1] / 1000; + const width = operations[i + 2] / 1000; + const height = operations[i + 3] / 1000; nextRects.push({x, y, width, height}); From d8aa94b0f4f22aadd4762b7ca1c690d3d85ae776 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Thu, 16 Oct 2025 18:00:41 +0200 Subject: [PATCH 090/276] Only capture stacks for up to 10 frames for Owner Stacks (#34864) --- packages/react/src/jsx/ReactJSXElement.js | 73 ++++++++++++++++++----- 1 file changed, 57 insertions(+), 16 deletions(-) diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js index a77c4c3cdbf..e23c998da51 100644 --- a/packages/react/src/jsx/ReactJSXElement.js +++ b/packages/react/src/jsx/ReactJSXElement.js @@ -57,6 +57,14 @@ function getOwner() { return null; } +// v8 (Chromium, Node.js) defaults to 10 +// SpiderMonkey (Firefox) does not support Error.stackTraceLimit +// JSC (Safari) defaults to 100 +// The lower the limit, the more likely we'll not reach react_stack_bottom_frame +// The higher the limit, the slower Error() is when not inspecting with a debugger. +// When inspecting with a debugger, Error.stackTraceLimit has no impact on Error() performance (in v8). +const ownerStackTraceLimit = 10; + /** @noinline */ function UnknownOwner() { /** @noinline */ @@ -352,15 +360,24 @@ export function jsxProdSignatureRunningInDevWithDynamicChildren( const trackActualOwner = __DEV__ && ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit; + let debugStackDEV = false; + if (__DEV__) { + if (trackActualOwner) { + const previousStackTraceLimit = Error.stackTraceLimit; + Error.stackTraceLimit = ownerStackTraceLimit; + debugStackDEV = Error('react-stack-top-frame'); + Error.stackTraceLimit = previousStackTraceLimit; + } else { + debugStackDEV = unknownOwnerDebugStack; + } + } + return jsxDEVImpl( type, config, maybeKey, isStaticChildren, - __DEV__ && - (trackActualOwner - ? Error('react-stack-top-frame') - : unknownOwnerDebugStack), + debugStackDEV, __DEV__ && (trackActualOwner ? createTask(getTaskName(type)) @@ -379,15 +396,23 @@ export function jsxProdSignatureRunningInDevWithStaticChildren( const trackActualOwner = __DEV__ && ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit; + let debugStackDEV = false; + if (__DEV__) { + if (trackActualOwner) { + const previousStackTraceLimit = Error.stackTraceLimit; + Error.stackTraceLimit = ownerStackTraceLimit; + debugStackDEV = Error('react-stack-top-frame'); + Error.stackTraceLimit = previousStackTraceLimit; + } else { + debugStackDEV = unknownOwnerDebugStack; + } + } return jsxDEVImpl( type, config, maybeKey, isStaticChildren, - __DEV__ && - (trackActualOwner - ? Error('react-stack-top-frame') - : unknownOwnerDebugStack), + debugStackDEV, __DEV__ && (trackActualOwner ? createTask(getTaskName(type)) @@ -408,15 +433,23 @@ export function jsxDEV(type, config, maybeKey, isStaticChildren) { const trackActualOwner = __DEV__ && ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit; + let debugStackDEV = false; + if (__DEV__) { + if (trackActualOwner) { + const previousStackTraceLimit = Error.stackTraceLimit; + Error.stackTraceLimit = ownerStackTraceLimit; + debugStackDEV = Error('react-stack-top-frame'); + Error.stackTraceLimit = previousStackTraceLimit; + } else { + debugStackDEV = unknownOwnerDebugStack; + } + } return jsxDEVImpl( type, config, maybeKey, isStaticChildren, - __DEV__ && - (trackActualOwner - ? Error('react-stack-top-frame') - : unknownOwnerDebugStack), + debugStackDEV, __DEV__ && (trackActualOwner ? createTask(getTaskName(type)) @@ -667,15 +700,23 @@ export function createElement(type, config, children) { const trackActualOwner = __DEV__ && ReactSharedInternals.recentlyCreatedOwnerStacks++ < ownerStackLimit; + let debugStackDEV = false; + if (__DEV__) { + if (trackActualOwner) { + const previousStackTraceLimit = Error.stackTraceLimit; + Error.stackTraceLimit = ownerStackTraceLimit; + debugStackDEV = Error('react-stack-top-frame'); + Error.stackTraceLimit = previousStackTraceLimit; + } else { + debugStackDEV = unknownOwnerDebugStack; + } + } return ReactElement( type, key, props, getOwner(), - __DEV__ && - (trackActualOwner - ? Error('react-stack-top-frame') - : unknownOwnerDebugStack), + debugStackDEV, __DEV__ && (trackActualOwner ? createTask(getTaskName(type)) From dc1becd8937b5ff4e188fe5e9e5552740ef915e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 12:16:04 -0400 Subject: [PATCH 091/276] [DevTools] Remove steps title from scrubber (#34878) The hover now has a reach tooltip for the "environment" instead. --- .../src/devtools/views/SuspenseTab/SuspenseTimeline.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index 9b708121342..4712397632c 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -160,9 +160,7 @@ function SuspenseTimelineInput() { onClick={skipForward}> <ButtonIcon type={'skip-next'} /> </Button> - <div - className={styles.SuspenseTimelineInput} - title={timelineIndex + '/' + max}> + <div className={styles.SuspenseTimelineInput}> <SuspenseScrubber min={min} max={max} From 93f8593289538b0be7b0eefec85e9a6ca8f56738 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 16 Oct 2025 12:16:16 -0400 Subject: [PATCH 092/276] [DevTools] Adjust the rects size by one pixel smaller (#34876) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This ensures that the outline of a previous rectangle lines up on the same pixel as the next rectangle so that they appear consecutive. <img width="244" height="51" alt="Screenshot 2025-10-16 at 11 35 32 AM" src="https://github.com/user-attachments/assets/75ffde6f-8cc6-49c1-8855-3953569546b4" /> I don't love this implementation. There's probably a smarter way. Was trying to avoid adding another element. --- .../src/devtools/views/SuspenseTab/SuspenseRects.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 5f07bb61001..c2a13191650 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -36,12 +36,14 @@ function ScaledRect({ rect, visible, suspended, + adjust, ...props }: { className: string, rect: Rect, visible: boolean, suspended: boolean, + adjust?: boolean, ... }): React$Node { const viewBox = useContext(ViewBox); @@ -57,8 +59,9 @@ function ScaledRect({ data-visible={visible} data-suspended={suspended} style={{ - width, - height, + // Shrink one pixel so that the bottom outline will line up with the top outline of the next one. + width: adjust ? 'calc(' + width + ' - 1px)' : width, + height: adjust ? 'calc(' + height + ' - 1px)' : height, top: y, left: x, }} @@ -160,6 +163,7 @@ function SuspenseRects({ className={styles.SuspenseRectsRect} rect={rect} data-highlighted={selected} + adjust={true} onClick={handleClick} onDoubleClick={handleDoubleClick} onPointerOver={handlePointerOver} From ed1351c4fb92f84657a0c1a2af5ccef2484f7bd7 Mon Sep 17 00:00:00 2001 From: "Henry Q. Dineen" <henryqdineen@users.noreply.github.com> Date: Thu, 16 Oct 2025 12:46:55 -0400 Subject: [PATCH 093/276] [compiler] improve zod v3 backwards compat (#34877) ## Summary When upgrading to `babel-plugin-react-compiler@1.0.0` in a project that uses `zod@3` we are running into TypeScript errors like: ``` node_modules/babel-plugin-react-compiler/dist/index.d.ts:435:10 - error TS2694: Namespace '"/REDACTED/node_modules/zod/v3/external"' has no exported member 'core'. 435 }, z.core.$strip>>>; ~~~~ ``` This problem seems to be related to d6eb735938bc67b41ad723206ea395ba4d761139, which introduced zod v3/v4 compatibility. Since `zod` is bundled into the compiler source this does not cause runtime issues and only manifests as TypeScript errors. My proposed solution is this PR is to use zod's [subpath versioning strategy](https://zod.dev/v4/versioning?id=versioning-in-zod-4) which allows you to support v3 and v4 APIs on both major versions. Changes in this PR include: - Updated `zod` import paths to `zod/v4` - Bumped min `zod` version to `^3.25.0` for zod which guarantees the `zod/v4` subpath is available. - Updated `zod-validation-error` import paths to `zod-validation-error/v4` - Bumped min `zod-validation-error ` version to `^3.5.0` - Updated `externals` tsup configuration where appropriate. Once the compiler drops zod v3 support we could optionally remove the `/v4` subpath from the imports. ## How did you test this change? Not totally sure the best way to test. I ran `NODE_ENV=production yarn workspace babel-plugin-react-compiler run build --dts` and diffed the `dist/` folder between my change and `v1.0.0` and it looks correct. We have a `patch-package` patch to workaround this for now and it works as expected. ```diff diff --git a/node_modules/babel-plugin-react-compiler/dist/index.d.ts b/node_modules/babel-plugin-react-compiler/dist/index.d.ts index 81c3f3d..daafc2c 100644 --- a/node_modules/babel-plugin-react-compiler/dist/index.d.ts +++ b/node_modules/babel-plugin-react-compiler/dist/index.d.ts @@ -1,7 +1,7 @@ import * as BabelCore from '@babel/core'; import { NodePath as NodePath$1 } from '@babel/core'; import * as t from '@babel/types'; -import { z } from 'zod'; +import { z } from 'zod/v4'; import { NodePath, Scope } from '@babel/traverse'; interface Result<T, E> { ``` Co-authored-by: Henry Q. Dineen <henryqdineen@gmail.com> --- .../babel-plugin-react-compiler/package.json | 4 ++-- .../src/Entrypoint/Options.ts | 4 ++-- .../src/HIR/Environment.ts | 4 ++-- .../babel-plugin-react-compiler/src/HIR/HIR.ts | 2 +- .../src/HIR/TypeSchema.ts | 2 +- .../src/Utils/TestUtils.ts | 2 +- .../eslint-plugin-react-compiler/package.json | 4 ++-- .../eslint-plugin-react-compiler/tsup.config.ts | 9 ++++++++- .../packages/react-compiler-healthcheck/package.json | 4 ++-- .../react-compiler-healthcheck/tsup.config.ts | 2 ++ compiler/packages/react-mcp-server/package.json | 2 +- compiler/packages/react-mcp-server/src/index.ts | 2 +- compiler/packages/snap/package.json | 4 +++- compiler/packages/snap/src/sprout/evaluator.ts | 4 ++-- compiler/yarn.lock | 12 ++++++------ packages/eslint-plugin-react-hooks/package.json | 4 ++-- scripts/rollup/bundles.js | 2 ++ yarn.lock | 10 +++++----- 18 files changed, 45 insertions(+), 32 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/package.json b/compiler/packages/babel-plugin-react-compiler/package.json index 8d3f1c8ae68..7647bcab1ca 100644 --- a/compiler/packages/babel-plugin-react-compiler/package.json +++ b/compiler/packages/babel-plugin-react-compiler/package.json @@ -52,8 +52,8 @@ "react-dom": "0.0.0-experimental-4beb1fd8-20241118", "ts-jest": "^29.1.1", "ts-node": "^10.9.2", - "zod": "^3.22.4 || ^4.0.0", - "zod-validation-error": "^3.0.3 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "resolutions": { "./**/@babel/parser": "7.7.4", diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts index 450972a4607..2a117b46617 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts @@ -6,7 +6,7 @@ */ import * as t from '@babel/types'; -import {z} from 'zod'; +import {z} from 'zod/v4'; import { CompilerDiagnostic, CompilerError, @@ -20,7 +20,7 @@ import { tryParseExternalFunction, } from '../HIR/Environment'; import {hasOwnProperty} from '../Utils/utils'; -import {fromZodError} from 'zod-validation-error'; +import {fromZodError} from 'zod-validation-error/v4'; import {CompilerPipelineValue} from './Pipeline'; const PanicThresholdOptionsSchema = z.enum([ diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index 7889e13c2f8..a31ef1c336e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -6,8 +6,8 @@ */ import * as t from '@babel/types'; -import {ZodError, z} from 'zod'; -import {fromZodError} from 'zod-validation-error'; +import {ZodError, z} from 'zod/v4'; +import {fromZodError} from 'zod-validation-error/v4'; import {CompilerError} from '../CompilerError'; import {Logger, ProgramContext} from '../Entrypoint'; import {Err, Ok, Result} from '../Utils/Result'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts index 4d2d4ed80d6..41e957a5467 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts @@ -16,7 +16,7 @@ import {assertExhaustive} from '../Utils/utils'; import {Environment, ReactFunctionType} from './Environment'; import type {HookKind} from './ObjectShape'; import {Type, makeType} from './Types'; -import {z} from 'zod'; +import {z} from 'zod/v4'; import type {AliasingEffect} from '../Inference/AliasingEffects'; import {isReservedWord} from '../Utils/Keyword'; import {Err, Ok, Result} from '../Utils/Result'; diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts index 42c7d2d89dc..eeaaebf7a39 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts @@ -6,7 +6,7 @@ */ import {isValidIdentifier} from '@babel/types'; -import {z} from 'zod'; +import {z} from 'zod/v4'; import {Effect, ValueKind} from '..'; import { EffectSchema, diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts index b28879f369a..e84c1e57aae 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import {fromZodError} from 'zod-validation-error'; +import {fromZodError} from 'zod-validation-error/v4'; import {CompilerError} from '../CompilerError'; import { CompilationMode, diff --git a/compiler/packages/eslint-plugin-react-compiler/package.json b/compiler/packages/eslint-plugin-react-compiler/package.json index 6c95bf495c6..3dd77d0e8bf 100644 --- a/compiler/packages/eslint-plugin-react-compiler/package.json +++ b/compiler/packages/eslint-plugin-react-compiler/package.json @@ -15,8 +15,8 @@ "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "hermes-parser": "^0.25.1", - "zod": "^3.22.4 || ^4.0.0", - "zod-validation-error": "^3.0.3 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "devDependencies": { "@babel/preset-env": "^7.22.4", diff --git a/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts b/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts index 4b4f5264394..716c2ffff35 100644 --- a/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts +++ b/compiler/packages/eslint-plugin-react-compiler/tsup.config.ts @@ -10,7 +10,14 @@ import {defineConfig} from 'tsup'; export default defineConfig({ entry: ['./src/index.ts'], outDir: './dist', - external: ['@babel/core', 'hermes-parser', 'zod', 'zod-validation-error'], + external: [ + '@babel/core', + 'hermes-parser', + 'zod', + 'zod/v4', + 'zod-validation-error', + 'zod-validation-error/v4', + ], splitting: false, sourcemap: false, dts: false, diff --git a/compiler/packages/react-compiler-healthcheck/package.json b/compiler/packages/react-compiler-healthcheck/package.json index 61825b73d83..5c3d2f412d9 100644 --- a/compiler/packages/react-compiler-healthcheck/package.json +++ b/compiler/packages/react-compiler-healthcheck/package.json @@ -17,8 +17,8 @@ "fast-glob": "^3.3.2", "ora": "5.4.1", "yargs": "^17.7.2", - "zod": "^3.22.4 || ^4.0.0", - "zod-validation-error": "^3.0.3 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "devDependencies": {}, "engines": { diff --git a/compiler/packages/react-compiler-healthcheck/tsup.config.ts b/compiler/packages/react-compiler-healthcheck/tsup.config.ts index 7addc79bf90..7d2c738dc71 100644 --- a/compiler/packages/react-compiler-healthcheck/tsup.config.ts +++ b/compiler/packages/react-compiler-healthcheck/tsup.config.ts @@ -18,7 +18,9 @@ export default defineConfig({ 'ora', 'yargs', 'zod', + 'zod/v4', 'zod-validation-error', + 'zod-validation-error/v4', ], splitting: false, sourcemap: false, diff --git a/compiler/packages/react-mcp-server/package.json b/compiler/packages/react-mcp-server/package.json index 4d744c1d667..07dc378de12 100644 --- a/compiler/packages/react-mcp-server/package.json +++ b/compiler/packages/react-mcp-server/package.json @@ -24,7 +24,7 @@ "html-to-text": "^9.0.5", "prettier": "^3.3.3", "puppeteer": "^24.7.2", - "zod": "^3.22.4 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0" }, "devDependencies": { "@types/html-to-text": "^9.0.4", diff --git a/compiler/packages/react-mcp-server/src/index.ts b/compiler/packages/react-mcp-server/src/index.ts index 9c47346b3c7..e5bd794107d 100644 --- a/compiler/packages/react-mcp-server/src/index.ts +++ b/compiler/packages/react-mcp-server/src/index.ts @@ -7,7 +7,7 @@ import {McpServer} from '@modelcontextprotocol/sdk/server/mcp.js'; import {StdioServerTransport} from '@modelcontextprotocol/sdk/server/stdio.js'; -import {z} from 'zod'; +import {z} from 'zod/v4'; import {compile, type PrintedCompilerPipelineValue} from './compiler'; import { CompilerPipelineValue, diff --git a/compiler/packages/snap/package.json b/compiler/packages/snap/package.json index 60530f01dd4..085422ab830 100644 --- a/compiler/packages/snap/package.json +++ b/compiler/packages/snap/package.json @@ -37,7 +37,9 @@ "react": "0.0.0-experimental-4beb1fd8-20241118", "react-dom": "0.0.0-experimental-4beb1fd8-20241118", "readline": "^1.3.0", - "yargs": "^17.7.1" + "yargs": "^17.7.1", + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "devDependencies": { "@babel/core": "^7.19.1", diff --git a/compiler/packages/snap/src/sprout/evaluator.ts b/compiler/packages/snap/src/sprout/evaluator.ts index 8af8487d011..ba44f01b0aa 100644 --- a/compiler/packages/snap/src/sprout/evaluator.ts +++ b/compiler/packages/snap/src/sprout/evaluator.ts @@ -9,8 +9,8 @@ import {render} from '@testing-library/react'; import {JSDOM} from 'jsdom'; import React, {MutableRefObject} from 'react'; import util from 'util'; -import {z} from 'zod'; -import {fromZodError} from 'zod-validation-error'; +import {z} from 'zod/v4'; +import {fromZodError} from 'zod-validation-error/v4'; import {initFbt, toJSON} from './shared-runtime'; /** diff --git a/compiler/yarn.lock b/compiler/yarn.lock index daafc705fdc..764200c2ce9 100644 --- a/compiler/yarn.lock +++ b/compiler/yarn.lock @@ -11505,17 +11505,17 @@ zod-to-json-schema@^3.24.1: resolved "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.5.tgz" integrity sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g== -"zod-validation-error@^3.0.3 || ^4.0.0": +"zod-validation-error@^3.5.0 || ^4.0.0": version "4.0.2" resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918" integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ== -"zod@^3.22.4 || ^4.0.0": - version "4.1.11" - resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.11.tgz#4aab62f76cfd45e6c6166519ba31b2ea019f75f5" - integrity sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg== - zod@^3.23.8, zod@^3.24.1: version "3.24.3" resolved "https://registry.npmjs.org/zod/-/zod-3.24.3.tgz" integrity sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg== + +"zod@^3.25.0 || ^4.0.0": + version "4.1.12" + resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0" + integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ== diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index a22448f11c7..9a8f8ac353f 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -42,8 +42,8 @@ "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "hermes-parser": "^0.25.1", - "zod": "^3.22.4 || ^4.0.0", - "zod-validation-error": "^3.0.3 || ^4.0.0" + "zod": "^3.25.0 || ^4.0.0", + "zod-validation-error": "^3.5.0 || ^4.0.0" }, "devDependencies": { "@babel/eslint-parser": "^7.11.4", diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index c66b43797f1..0a7b17ec2cc 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -1255,7 +1255,9 @@ const bundles = [ '@babel/core', 'hermes-parser', 'zod', + 'zod/v4', 'zod-validation-error', + 'zod-validation-error/v4', 'crypto', 'util', ], diff --git a/yarn.lock b/yarn.lock index 73519b9f695..ad8a3f0085c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18245,12 +18245,12 @@ zip-stream@^2.1.2: compress-commons "^2.1.1" readable-stream "^3.4.0" -"zod-validation-error@^3.0.3 || ^4.0.0": +"zod-validation-error@^3.5.0 || ^4.0.0": version "4.0.2" resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918" integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ== -"zod@^3.22.4 || ^4.0.0": - version "4.1.11" - resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.11.tgz#4aab62f76cfd45e6c6166519ba31b2ea019f75f5" - integrity sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg== +"zod@^3.25.0 || ^4.0.0": + version "4.1.12" + resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0" + integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ== From 5418d8bdc12ae00859029bcd2abc9eb65e8f4fb4 Mon Sep 17 00:00:00 2001 From: Ricky <rickhanlonii@gmail.com> Date: Thu, 16 Oct 2025 13:40:26 -0400 Subject: [PATCH 094/276] Fix changelog link (#34879) Closes https://github.com/reactjs/react.dev/issues/8081 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21704e3e29f..85d8f541245 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ Read the [React 19.2 release post](https://react.dev/blog/2025/10/01/react-19-2) - [`<Activity>`](https://react.dev/reference/react/Activity): A new API to hide and restore the UI and internal state of its children. - [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) is a React Hook that lets you extract non-reactive logic into an [Effect Event](https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event). - [`cacheSignal`](https://react.dev/reference/react/cacheSignal) (for RSCs) lets your know when the `cache()` lifetime is over. -- [React Performance tracks](https://react.dev/reference/developer-tooling/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools +- [React Performance tracks](https://react.dev/reference/dev-tools/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools ### New React DOM Features From 2381ecc290c588f6366bdcf377529668bb3cc360 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Eirinha?= <joao.eirinha@datadoghq.com> Date: Thu, 16 Oct 2025 19:18:01 +0100 Subject: [PATCH 095/276] [ESLint] Disallow passing effect event down when inlined as a prop (#34820) ## Summary Fixes https://github.com/facebook/react/issues/34793. We are allowing passing down effect events when they are inlined as a prop. ``` <Child onClick={useEffectEvent(...)} /> ``` This seems like a case that someone not familiar with `useEffectEvent`'s purpose could fall for so this PR introduces logic to disallow its usage. An alternative implementation would be to modify the name and function of `recordAllUseEffectEventFunctions` to record all `useEffectEvent` instances either assigned to a variable or not, but this seems clearer. Or we could also specifically disallow its usage inside JSX. Feel free to suggest any improvements. ## How did you test this change? - Added a new test in `packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js`. All tests pass. --- .../__tests__/ESLintRulesOfHooks-test.js | 19 ++++++++++++++ .../src/rules/RulesOfHooks.ts | 26 ++++++++++++++++++- 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js index 3e89624c6d3..05bdb1e71ed 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js @@ -1555,6 +1555,17 @@ const allTests = { `, errors: [useEffectEventError('onClick', false)], }, + { + code: normalizeIndent` + // Invalid because useEffectEvent is being passed down + function MyComponent({ theme }) { + return <Child onClick={useEffectEvent(() => { + showNotification(theme); + })} />; + } + `, + errors: [{...useEffectEventError(null, false), line: 4}], + }, { code: normalizeIndent` // This should error even though it shares an identifier name with the below @@ -1726,6 +1737,14 @@ function classError(hook) { } function useEffectEventError(fn, called) { + if (fn === null) { + return { + message: + `React Hook "useEffectEvent" can only be called at the top level of your component.` + + ` It cannot be passed down.`, + }; + } + return { message: `\`${fn}\` is a function created with React Hook "useEffectEvent", and can only be called from ` + diff --git a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts index ba398d850de..4e49e96bfe6 100644 --- a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts +++ b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts @@ -171,7 +171,15 @@ function isUseEffectEventIdentifier(node: Node): boolean { return node.type === 'Identifier' && node.name === 'useEffectEvent'; } -function useEffectEventError(fn: string, called: boolean): string { +function useEffectEventError(fn: string | null, called: boolean): string { + // no function identifier, i.e. it is not assigned to a variable + if (fn === null) { + return ( + `React Hook "useEffectEvent" can only be called at the top level of your component.` + + ` It cannot be passed down.` + ); + } + return ( `\`${fn}\` is a function created with React Hook "useEffectEvent", and can only be called from ` + 'Effects and Effect Events in the same component.' + @@ -772,6 +780,22 @@ const rule = { // comparison later when we exit lastEffect = node; } + + // Specifically disallow <Child onClick={useEffectEvent(...)} /> because this + // case can't be caught by `recordAllUseEffectEventFunctions` as it isn't assigned to a variable + if ( + isUseEffectEventIdentifier(nodeWithoutNamespace) && + node.parent?.type !== 'VariableDeclarator' && + // like in other hooks, calling useEffectEvent at component's top level without assignment is valid + node.parent?.type !== 'ExpressionStatement' + ) { + const message = useEffectEventError(null, false); + + context.report({ + node, + message, + }); + } }, Identifier(node) { From 0e32da71c7540f50ef6bb4bf084043678daae28b Mon Sep 17 00:00:00 2001 From: Damjan Petrovic <146435419+pet210702@users.noreply.github.com> Date: Thu, 16 Oct 2025 20:20:21 +0200 Subject: [PATCH 096/276] Add MIT license header to feature flag utility script (#34833) Added the standard Meta Platforms, Inc. MIT license notice to the top of the feature flag comparison script to ensure compliance with repository licensing requirements and for code consistency. **No functional or logic changes were made to the code.** --- scripts/flags/flags.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/scripts/flags/flags.js b/scripts/flags/flags.js index 1130ce80bb0..a02b4d84b34 100644 --- a/scripts/flags/flags.js +++ b/scripts/flags/flags.js @@ -1,3 +1,9 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ 'use strict'; const babel = require('@babel/register'); From 7f5ea1bf67a1a920919ebe2ae6657bdebe505aa0 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Thu, 16 Oct 2025 13:05:18 -0700 Subject: [PATCH 097/276] [compiler] More useMemo validation (#34868) Two additional validations for useMemo: * Disallow reassigning to values declared outside the useMemo callback (always on) * Disallow unused useMemo calls (part of the validateNoVoidUseMemo feature flag, which in turn is off by default) We should probably enable this flag though! --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34868). * #34855 * #34882 * __->__ #34868 --- .../src/Inference/DropManualMemoization.ts | 6 +- .../src/Validation/ValidateUseMemo.ts | 91 ++++++++++++++++++- ...lid-reassign-variable-in-usememo.expect.md | 38 ++++++++ ...or.invalid-reassign-variable-in-usememo.js | 10 ++ .../error.invalid-unused-usememo.expect.md | 35 +++++++ .../compiler/error.invalid-unused-usememo.js | 7 ++ .../error.useMemo-no-return-value.expect.md | 4 +- .../__tests__/PluginTest-test.ts | 2 +- 8 files changed, 182 insertions(+), 11 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts index f86747618dd..d31cd1446b9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts @@ -458,9 +458,9 @@ export function dropManualMemoization( reason: 'useMemo() callbacks must return a value', description: `This ${ manualMemo.loadInstr.value.kind === 'PropertyLoad' - ? 'React.useMemo' - : 'useMemo' - } callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects`, + ? 'React.useMemo()' + : 'useMemo()' + } callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`, suggestions: null, }).withDetails({ kind: 'error', diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts index de74af93b6d..0fdfeaab3ea 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts @@ -10,7 +10,16 @@ import { CompilerError, ErrorCategory, } from '../CompilerError'; -import {FunctionExpression, HIRFunction, IdentifierId} from '../HIR'; +import { + FunctionExpression, + HIRFunction, + IdentifierId, + SourceLocation, +} from '../HIR'; +import { + eachInstructionValueOperand, + eachTerminalOperand, +} from '../HIR/visitors'; import {Result} from '../Utils/Result'; export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { @@ -18,8 +27,19 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { const useMemos = new Set<IdentifierId>(); const react = new Set<IdentifierId>(); const functions = new Map<IdentifierId, FunctionExpression>(); + const unusedUseMemos = new Map<IdentifierId, SourceLocation>(); for (const [, block] of fn.body.blocks) { for (const {lvalue, value} of block.instructions) { + if (unusedUseMemos.size !== 0) { + /** + * Most of the time useMemo results are referenced immediately. Don't bother + * scanning instruction operands for useMemos unless there is an as-yet-unused + * useMemo. + */ + for (const operand of eachInstructionValueOperand(value)) { + unusedUseMemos.delete(operand.identifier.id); + } + } switch (value.kind) { case 'LoadGlobal': { if (value.binding.name === 'useMemo') { @@ -45,10 +65,8 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { case 'CallExpression': { // Is the function being called useMemo, with at least 1 argument? const callee = - value.kind === 'CallExpression' - ? value.callee.identifier.id - : value.property.identifier.id; - const isUseMemo = useMemos.has(callee); + value.kind === 'CallExpression' ? value.callee : value.property; + const isUseMemo = useMemos.has(callee.identifier.id); if (!isUseMemo || value.args.length === 0) { continue; } @@ -104,10 +122,73 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { ); } + validateNoContextVariableAssignment(body.loweredFunc.func, errors); + + if (fn.env.config.validateNoVoidUseMemo) { + unusedUseMemos.set(lvalue.identifier.id, callee.loc); + } break; } } } + if (unusedUseMemos.size !== 0) { + for (const operand of eachTerminalOperand(block.terminal)) { + unusedUseMemos.delete(operand.identifier.id); + } + } + } + if (unusedUseMemos.size !== 0) { + /** + * Basic check for unused memos, where the result of the call is never referenced. This runs + * before DCE so it's more of an AST-level check that something, _anything_, cares about the value. + * + * This is easy to defeat with e.g. `const _ = useMemo(...)` but it at least gives us something to teach. + * Even a DCE-based version could be bypassed with `noop(useMemo(...))`. + */ + for (const loc of unusedUseMemos.values()) { + errors.pushDiagnostic( + CompilerDiagnostic.create({ + category: ErrorCategory.VoidUseMemo, + reason: 'Unused useMemo()', + description: `This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects`, + suggestions: null, + }).withDetails({ + kind: 'error', + loc, + message: 'useMemo() result is unused', + }), + ); + } } return errors.asResult(); } + +function validateNoContextVariableAssignment( + fn: HIRFunction, + errors: CompilerError, +): void { + for (const block of fn.body.blocks.values()) { + for (const instr of block.instructions) { + const value = instr.value; + switch (value.kind) { + case 'StoreContext': { + errors.pushDiagnostic( + CompilerDiagnostic.create({ + category: ErrorCategory.UseMemo, + reason: + 'useMemo() callbacks may not reassign variables declared outside of the callback', + description: + 'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function', + suggestions: null, + }).withDetails({ + kind: 'error', + loc: value.lvalue.place.loc, + message: 'Cannot reassign variable', + }), + ); + break; + } + } + } + } +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md new file mode 100644 index 00000000000..ba35168bcfe --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md @@ -0,0 +1,38 @@ + +## Input + +```javascript +function Component() { + let x; + const y = useMemo(() => { + let z; + x = []; + z = true; + return z; + }, []); + return [x, y]; +} + +``` + + +## Error + +``` +Found 1 error: + +Error: useMemo() callbacks may not reassign variables declared outside of the callback + +useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function. + +error.invalid-reassign-variable-in-usememo.ts:5:4 + 3 | const y = useMemo(() => { + 4 | let z; +> 5 | x = []; + | ^ Cannot reassign variable + 6 | z = true; + 7 | return z; + 8 | }, []); +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js new file mode 100644 index 00000000000..885ba4b52d5 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js @@ -0,0 +1,10 @@ +function Component() { + let x; + const y = useMemo(() => { + let z; + x = []; + z = true; + return z; + }, []); + return [x, y]; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md new file mode 100644 index 00000000000..3c84a0dda33 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md @@ -0,0 +1,35 @@ + +## Input + +```javascript +// @validateNoVoidUseMemo +function Component() { + useMemo(() => { + return []; + }, []); + return <div />; +} + +``` + + +## Error + +``` +Found 1 error: + +Error: Unused useMemo() + +This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects. + +error.invalid-unused-usememo.ts:3:2 + 1 | // @validateNoVoidUseMemo + 2 | function Component() { +> 3 | useMemo(() => { + | ^^^^^^^ useMemo() result is unused + 4 | return []; + 5 | }, []); + 6 | return <div />; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js new file mode 100644 index 00000000000..1983cd061a6 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js @@ -0,0 +1,7 @@ +// @validateNoVoidUseMemo +function Component() { + useMemo(() => { + return []; + }, []); + return <div />; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md index fb595964066..9b62c5364b6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md @@ -28,7 +28,7 @@ Found 2 errors: Error: useMemo() callbacks must return a value -This useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects. +This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects. error.useMemo-no-return-value.ts:3:16 1 | // @validateNoVoidUseMemo @@ -45,7 +45,7 @@ error.useMemo-no-return-value.ts:3:16 Error: useMemo() callbacks must return a value -This React.useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects. +This React.useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects. error.useMemo-no-return-value.ts:6:17 4 | console.log('computing'); diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts index 6efd069aafa..89eb2ab22f6 100644 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts +++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts @@ -120,7 +120,7 @@ testRule('plugin-recommended', TestRecommendedRules, { return <Child x={state} />; }`, - errors: [makeTestCaseError('useMemo() callbacks must return a value')], + errors: [makeTestCaseError('Unused useMemo()')], }, { name: 'Pipeline errors are reported', From 1324e1bb1f867e8b2108ca52a1d4e2d4ef56d2d9 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Thu, 16 Oct 2025 13:08:57 -0700 Subject: [PATCH 098/276] [compiler] Cleanup and enable validateNoVoidUseMemo (#34882) This is a great validation, so let's enable by default. Changes: * Move the validation logic into ValidateUseMemo alongside the new check that the useMemo result is used * Update the lint description * Make the void memo errors lint-only, they don't require us to skip compilation (as evidenced by the fact that we've had this validation off) --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34882). * #34855 * __->__ #34882 --- .../src/CompilerError.ts | 2 +- .../src/HIR/Environment.ts | 2 +- .../src/Inference/DropManualMemoization.ts | 48 -------------- .../src/Validation/ValidateUseMemo.ts | 37 ++++++++++- .../error.invalid-unused-usememo.expect.md | 35 ---------- .../error.useMemo-no-return-value.expect.md | 64 ------------------- .../compiler/invalid-unused-usememo.expect.md | 41 ++++++++++++ ...d-usememo.js => invalid-unused-usememo.js} | 2 +- .../invalid-useMemo-no-return-value.expect.md | 59 +++++++++++++++++ ....js => invalid-useMemo-no-return-value.js} | 2 +- .../invalid-useMemo-return-empty.expect.md | 33 ++++++++++ ...pty.js => invalid-useMemo-return-empty.js} | 1 + .../fixtures/compiler/repro.expect.md | 3 +- .../src/__tests__/fixtures/compiler/repro.js | 1 + .../compiler/useMemo-nested-ifs.expect.md | 11 +++- .../fixtures/compiler/useMemo-nested-ifs.js | 1 + .../compiler/useMemo-return-empty.expect.md | 22 ------- .../__tests__/PluginTest-test.ts | 10 ++- 18 files changed, 195 insertions(+), 179 deletions(-) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.invalid-unused-usememo.js => invalid-unused-usememo.js} (67%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.useMemo-no-return-value.js => invalid-useMemo-no-return-value.js} (85%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{useMemo-return-empty.js => invalid-useMemo-return-empty.js} (82%) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.expect.md diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts index 1c077edd8d8..3c131ea653e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts @@ -988,7 +988,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule { severity: ErrorSeverity.Error, name: 'void-use-memo', description: - 'Validates that useMemos always return a value. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.', + 'Validates that useMemos always return a value and that the result of the useMemo is used by the component/hook. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.', preset: LintRulePreset.RecommendedLatest, }; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index a31ef1c336e..4ec4a4a795f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -659,7 +659,7 @@ export const EnvironmentConfigSchema = z.object({ * Invalid: * useMemo(() => { ... }, [...]); */ - validateNoVoidUseMemo: z.boolean().default(false), + validateNoVoidUseMemo: z.boolean().default(true), /** * Validates that Components/Hooks are always defined at module level. This prevents scope diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts index d31cd1446b9..0876424e28c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts @@ -438,40 +438,6 @@ export function dropManualMemoization( continue; } - /** - * Bailout on void return useMemos. This is an anti-pattern where code might be using - * useMemo like useEffect: running arbirtary side-effects synced to changes in specific - * values. - */ - if ( - func.env.config.validateNoVoidUseMemo && - manualMemo.kind === 'useMemo' - ) { - const funcToCheck = sidemap.functions.get( - fnPlace.identifier.id, - )?.value; - if (funcToCheck !== undefined && funcToCheck.loweredFunc.func) { - if (!hasNonVoidReturn(funcToCheck.loweredFunc.func)) { - errors.pushDiagnostic( - CompilerDiagnostic.create({ - category: ErrorCategory.VoidUseMemo, - reason: 'useMemo() callbacks must return a value', - description: `This ${ - manualMemo.loadInstr.value.kind === 'PropertyLoad' - ? 'React.useMemo()' - : 'useMemo()' - } callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`, - suggestions: null, - }).withDetails({ - kind: 'error', - loc: instr.value.loc, - message: 'useMemo() callbacks must return a value', - }), - ); - } - } - } - instr.value = getManualMemoizationReplacement( fnPlace, instr.value.loc, @@ -629,17 +595,3 @@ function findOptionalPlaces(fn: HIRFunction): Set<IdentifierId> { } return optionals; } - -function hasNonVoidReturn(func: HIRFunction): boolean { - for (const [, block] of func.body.blocks) { - if (block.terminal.kind === 'return') { - if ( - block.terminal.returnVariant === 'Explicit' || - block.terminal.returnVariant === 'Implicit' - ) { - return true; - } - } - } - return false; -} diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts index 0fdfeaab3ea..05a4b4b91f5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts @@ -24,6 +24,7 @@ import {Result} from '../Utils/Result'; export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { const errors = new CompilerError(); + const voidMemoErrors = new CompilerError(); const useMemos = new Set<IdentifierId>(); const react = new Set<IdentifierId>(); const functions = new Map<IdentifierId, FunctionExpression>(); @@ -125,7 +126,22 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { validateNoContextVariableAssignment(body.loweredFunc.func, errors); if (fn.env.config.validateNoVoidUseMemo) { - unusedUseMemos.set(lvalue.identifier.id, callee.loc); + if (!hasNonVoidReturn(body.loweredFunc.func)) { + voidMemoErrors.pushDiagnostic( + CompilerDiagnostic.create({ + category: ErrorCategory.VoidUseMemo, + reason: 'useMemo() callbacks must return a value', + description: `This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`, + suggestions: null, + }).withDetails({ + kind: 'error', + loc: body.loc, + message: 'useMemo() callbacks must return a value', + }), + ); + } else { + unusedUseMemos.set(lvalue.identifier.id, callee.loc); + } } break; } @@ -146,10 +162,10 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { * Even a DCE-based version could be bypassed with `noop(useMemo(...))`. */ for (const loc of unusedUseMemos.values()) { - errors.pushDiagnostic( + voidMemoErrors.pushDiagnostic( CompilerDiagnostic.create({ category: ErrorCategory.VoidUseMemo, - reason: 'Unused useMemo()', + reason: 'useMemo() result is unused', description: `This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects`, suggestions: null, }).withDetails({ @@ -160,6 +176,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> { ); } } + fn.env.logErrors(voidMemoErrors.asResult()); return errors.asResult(); } @@ -192,3 +209,17 @@ function validateNoContextVariableAssignment( } } } + +function hasNonVoidReturn(func: HIRFunction): boolean { + for (const [, block] of func.body.blocks) { + if (block.terminal.kind === 'return') { + if ( + block.terminal.returnVariant === 'Explicit' || + block.terminal.returnVariant === 'Implicit' + ) { + return true; + } + } + } + return false; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md deleted file mode 100644 index 3c84a0dda33..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.expect.md +++ /dev/null @@ -1,35 +0,0 @@ - -## Input - -```javascript -// @validateNoVoidUseMemo -function Component() { - useMemo(() => { - return []; - }, []); - return <div />; -} - -``` - - -## Error - -``` -Found 1 error: - -Error: Unused useMemo() - -This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects. - -error.invalid-unused-usememo.ts:3:2 - 1 | // @validateNoVoidUseMemo - 2 | function Component() { -> 3 | useMemo(() => { - | ^^^^^^^ useMemo() result is unused - 4 | return []; - 5 | }, []); - 6 | return <div />; -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md deleted file mode 100644 index 9b62c5364b6..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md +++ /dev/null @@ -1,64 +0,0 @@ - -## Input - -```javascript -// @validateNoVoidUseMemo -function Component() { - const value = useMemo(() => { - console.log('computing'); - }, []); - const value2 = React.useMemo(() => { - console.log('computing'); - }, []); - return ( - <div> - {value} - {value2} - </div> - ); -} - -``` - - -## Error - -``` -Found 2 errors: - -Error: useMemo() callbacks must return a value - -This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects. - -error.useMemo-no-return-value.ts:3:16 - 1 | // @validateNoVoidUseMemo - 2 | function Component() { -> 3 | const value = useMemo(() => { - | ^^^^^^^^^^^^^^^ -> 4 | console.log('computing'); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 5 | }, []); - | ^^^^^^^^^ useMemo() callbacks must return a value - 6 | const value2 = React.useMemo(() => { - 7 | console.log('computing'); - 8 | }, []); - -Error: useMemo() callbacks must return a value - -This React.useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects. - -error.useMemo-no-return-value.ts:6:17 - 4 | console.log('computing'); - 5 | }, []); -> 6 | const value2 = React.useMemo(() => { - | ^^^^^^^^^^^^^^^^^^^^^ -> 7 | console.log('computing'); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 8 | }, []); - | ^^^^^^^^^ useMemo() callbacks must return a value - 9 | return ( - 10 | <div> - 11 | {value} -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md new file mode 100644 index 00000000000..a2aba4c7b91 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.expect.md @@ -0,0 +1,41 @@ + +## Input + +```javascript +// @validateNoVoidUseMemo @loggerTestOnly +function Component() { + useMemo(() => { + return []; + }, []); + return <div />; +} + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo @loggerTestOnly +function Component() { + const $ = _c(1); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = <div />; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + +``` + +## Logs + +``` +{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() result is unused","description":"This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":2,"index":67},"end":{"line":3,"column":9,"index":74},"filename":"invalid-unused-usememo.ts","identifierName":"useMemo"},"message":"useMemo() result is unused"}]}},"fnLoc":null} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":42},"end":{"line":7,"column":1,"index":127},"filename":"invalid-unused-usememo.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0} +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js similarity index 67% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js index 1983cd061a6..e254424949b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unused-usememo.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-unused-usememo.js @@ -1,4 +1,4 @@ -// @validateNoVoidUseMemo +// @validateNoVoidUseMemo @loggerTestOnly function Component() { useMemo(() => { return []; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md new file mode 100644 index 00000000000..24e62dad2be --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.expect.md @@ -0,0 +1,59 @@ + +## Input + +```javascript +// @validateNoVoidUseMemo @loggerTestOnly +function Component() { + const value = useMemo(() => { + console.log('computing'); + }, []); + const value2 = React.useMemo(() => { + console.log('computing'); + }, []); + return ( + <div> + {value} + {value2} + </div> + ); +} + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo @loggerTestOnly +function Component() { + const $ = _c(1); + + console.log("computing"); + + console.log("computing"); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = ( + <div> + {undefined} + {undefined} + </div> + ); + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + +``` + +## Logs + +``` +{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":24,"index":89},"end":{"line":5,"column":3,"index":130},"filename":"invalid-useMemo-no-return-value.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null} +{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":6,"column":31,"index":168},"end":{"line":8,"column":3,"index":209},"filename":"invalid-useMemo-no-return-value.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":42},"end":{"line":15,"column":1,"index":283},"filename":"invalid-useMemo-no-return-value.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0} +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js similarity index 85% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js index 0ce35e12f4f..781560fefa9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-no-return-value.js @@ -1,4 +1,4 @@ -// @validateNoVoidUseMemo +// @validateNoVoidUseMemo @loggerTestOnly function Component() { const value = useMemo(() => { console.log('computing'); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md new file mode 100644 index 00000000000..c6737d78a1b --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.expect.md @@ -0,0 +1,33 @@ + +## Input + +```javascript +// @loggerTestOnly +function component(a) { + let x = useMemo(() => { + mutate(a); + }, []); + return x; +} + +``` + +## Code + +```javascript +// @loggerTestOnly +function component(a) { + mutate(a); +} + +``` + +## Logs + +``` +{"kind":"CompileError","detail":{"options":{"category":"VoidUseMemo","reason":"useMemo() callbacks must return a value","description":"This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":3,"column":18,"index":61},"end":{"line":5,"column":3,"index":87},"filename":"invalid-useMemo-return-empty.ts"},"message":"useMemo() callbacks must return a value"}]}},"fnLoc":null} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":19},"end":{"line":7,"column":1,"index":107},"filename":"invalid-useMemo-return-empty.ts"},"fnName":"component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":1,"prunedMemoValues":0} +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js similarity index 82% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js index 0d9b54d989b..d70bd138113 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-useMemo-return-empty.js @@ -1,3 +1,4 @@ +// @loggerTestOnly function component(a) { let x = useMemo(() => { mutate(a); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md index d3fe3045c02..9ca367e8a8e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md @@ -2,6 +2,7 @@ ## Input ```javascript +// @validateNoVoidUseMemo:false function Component(props) { const item = props.item; const thumbnails = []; @@ -22,7 +23,7 @@ function Component(props) { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; +import { c as _c } from "react/compiler-runtime"; // @validateNoVoidUseMemo:false function Component(props) { const $ = _c(6); const item = props.item; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js index 9f5d7852668..de3026e4e58 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.js @@ -1,3 +1,4 @@ +// @validateNoVoidUseMemo:false function Component(props) { const item = props.item; const thumbnails = []; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md index f7b3605f4d5..e0525518c96 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.expect.md @@ -6,6 +6,7 @@ function Component(props) { const x = useMemo(() => { if (props.cond) { if (props.cond) { + return props.value; } } }, [props.cond]); @@ -24,10 +25,18 @@ export const FIXTURE_ENTRYPOINT = { ```javascript function Component(props) { - if (props.cond) { + let t0; + bb0: { if (props.cond) { + if (props.cond) { + t0 = props.value; + break bb0; + } } + t0 = undefined; } + const x = t0; + return x; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js index f9b329e1290..d122dcc7a3e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-nested-ifs.js @@ -2,6 +2,7 @@ function Component(props) { const x = useMemo(() => { if (props.cond) { if (props.cond) { + return props.value; } } }, [props.cond]); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.expect.md deleted file mode 100644 index be20ee39bd4..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-return-empty.expect.md +++ /dev/null @@ -1,22 +0,0 @@ - -## Input - -```javascript -function component(a) { - let x = useMemo(() => { - mutate(a); - }, []); - return x; -} - -``` - -## Code - -```javascript -function component(a) { - mutate(a); -} - -``` - \ No newline at end of file diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts index 89eb2ab22f6..e0063bc0a2c 100644 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts +++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/PluginTest-test.ts @@ -120,7 +120,15 @@ testRule('plugin-recommended', TestRecommendedRules, { return <Child x={state} />; }`, - errors: [makeTestCaseError('Unused useMemo()')], + errors: [ + makeTestCaseError('useMemo() callbacks must return a value'), + makeTestCaseError( + 'Calling setState from useMemo may trigger an infinite loop', + ), + makeTestCaseError( + 'Calling setState from useMemo may trigger an infinite loop', + ), + ], }, { name: 'Pipeline errors are reported', From adbc32de32bc52f9014cedb5ff5a502be35aff51 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Fri, 17 Oct 2025 11:37:28 -0700 Subject: [PATCH 099/276] [compiler] More fbt compatibility (#34887) In my previous PR I fixed some cases but broke others. So, new approach. Two phase algorithm: * First pass is forward data flow to determine all usages of macros. This is necessary because many of Meta's macros have variants that can be accessed via properties, eg you can do `macro(...)` but also `macro.variant(...)`. * Second pass is backwards data flow to find macro invocations (JSX and calls) and then merge their operands into the same scope as the macro call. Note that this required updating PromoteUsedTemporaries to avoid promoting macro calls that have interposing instructions between their creation and usage. Macro calls in general are pure so it should be safe to reorder them. In addition, we're now more precise about `<fb:plural>`, `<fbt:param>`, `fbt.plural()` and `fbt.param()`, which don't actually require all their arguments to be inlined. The whole point is that the plural/param value is an arbitrary value (along with a string name). So we no longer transitively inline the arguments, we just make sure that they don't get inadvertently promoted to named variables. One caveat: we actually don't do anything to treat macro functions as non-mutating, so `fbt.plural()` and friends (function form) may still sometimes group arguments just due to mutability inference. In a follow-up, i'll work to infer the types of nested macro functions as non-mutating. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34887). * #34900 * __->__ #34887 --- .../src/HIR/Environment.ts | 12 +- .../MemoizeFbtAndMacroOperandsInSameScope.ts | 432 +++++++++--------- .../src/Utils/TestUtils.ts | 11 +- ...bt-param-with-leading-whitespace.expect.md | 12 +- ...t-param-with-trailing-whitespace.expect.md | 12 +- ...preserve-whitespace-two-subtrees.expect.md | 35 +- ...btparam-with-jsx-element-content.expect.md | 16 +- ...fbtparam-with-jsx-fragment-value.expect.md | 17 +- .../recursively-merge-scopes-jsx.expect.md | 109 +++++ .../fbt/recursively-merge-scopes-jsx.js | 35 ++ .../repro-fbt-param-nested-fbt-jsx.expect.md | 128 ++++++ .../fbt/repro-fbt-param-nested-fbt-jsx.js | 42 ++ .../fbt/repro-fbt-param-nested-fbt.expect.md | 41 +- .../fbt/repro-fbt-param-nested-fbt.js | 17 +- ...idx-method-no-outlining-wildcard.expect.md | 10 +- .../idx-method-no-outlining.expect.md | 5 +- 16 files changed, 640 insertions(+), 294 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index 4ec4a4a795f..bdbfb20a59a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -83,21 +83,11 @@ export type ExternalFunction = z.infer<typeof ExternalFunctionSchema>; export const USE_FIRE_FUNCTION_NAME = 'useFire'; export const EMIT_FREEZE_GLOBAL_GATING = '__DEV__'; -export const MacroMethodSchema = z.union([ - z.object({type: z.literal('wildcard')}), - z.object({type: z.literal('name'), name: z.string()}), -]); - -// Would like to change this to drop the string option, but breaks compatibility with existing configs -export const MacroSchema = z.union([ - z.string(), - z.tuple([z.string(), z.array(MacroMethodSchema)]), -]); +export const MacroSchema = z.string(); export type CompilerMode = 'all_features' | 'no_inferred_memo'; export type Macro = z.infer<typeof MacroSchema>; -export type MacroMethod = z.infer<typeof MacroMethodSchema>; const HookSchema = z.object({ /* diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts index 4ae9978b589..0ce05a823e9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts @@ -7,7 +7,6 @@ import { HIRFunction, - Identifier, IdentifierId, InstructionValue, makeInstructionId, @@ -15,9 +14,35 @@ import { Place, ReactiveScope, } from '../HIR'; -import {Macro, MacroMethod} from '../HIR/Environment'; +import {Macro} from '../HIR/Environment'; import {eachInstructionValueOperand} from '../HIR/visitors'; -import {Iterable_some} from '../Utils/utils'; + +/** + * Whether a macro requires its arguments to be transitively inlined (eg fbt) + * or just avoid having the top-level values be converted to variables (eg fbt.param) + */ +enum InlineLevel { + Transitive = 'Transitive', + Shallow = 'Shallow', +} +type MacroDefinition = { + level: InlineLevel; + properties: Map<string, MacroDefinition> | null; +}; + +const SHALLOW_MACRO: MacroDefinition = { + level: InlineLevel.Shallow, + properties: null, +}; +const TRANSITIVE_MACRO: MacroDefinition = { + level: InlineLevel.Transitive, + properties: null, +}; +const FBT_MACRO: MacroDefinition = { + level: InlineLevel.Transitive, + properties: new Map([['*', SHALLOW_MACRO]]), +}; +FBT_MACRO.properties!.set('enum', FBT_MACRO); /** * This pass supports the `fbt` translation system (https://facebook.github.io/fbt/) @@ -42,250 +67,210 @@ import {Iterable_some} from '../Utils/utils'; * ## User-defined macro-like function * * Users can also specify their own functions to be treated similarly to fbt via the - * `customMacros` environment configuration. + * `customMacros` environment configuration. By default, user-supplied custom macros + * have their arguments transitively inlined. */ export function memoizeFbtAndMacroOperandsInSameScope( fn: HIRFunction, ): Set<IdentifierId> { - const fbtMacroTags = new Set<Macro>([ - ...Array.from(FBT_TAGS).map((tag): Macro => [tag, []]), - ...(fn.env.config.customMacros ?? []), + const macroKinds = new Map<Macro, MacroDefinition>([ + ...Array.from(FBT_TAGS.entries()), + ...(fn.env.config.customMacros ?? []).map( + name => [name, TRANSITIVE_MACRO] as [Macro, MacroDefinition], + ), ]); /** - * Set of all identifiers that load fbt or other macro functions or their nested - * properties, as well as values known to be the results of invoking macros + * Forward data-flow analysis to identify all macro tags, including + * things like `fbt.foo.bar(...)` */ - const macroTagsCalls: Set<IdentifierId> = new Set(); + const macroTags = populateMacroTags(fn, macroKinds); + /** - * Mapping of lvalue => list of operands for all expressions where either - * the lvalue is a known fbt/macro call and/or the operands transitively - * contain fbt/macro calls. - * - * This is the key data structure that powers the scope merging: we start - * at the lvalues and merge operands into the lvalue's scope. + * Reverse data-flow analysis to merge arguments to macro *invocations* + * based on the kind of the macro */ - const macroValues: Map<Identifier, Array<Identifier>> = new Map(); - // Tracks methods loaded from macros, like fbt.param or idx.foo - const macroMethods = new Map<IdentifierId, Array<Array<MacroMethod>>>(); - - visit(fn, fbtMacroTags, macroTagsCalls, macroMethods, macroValues); - - for (const root of macroValues.keys()) { - const scope = root.scope; - if (scope == null) { - continue; - } - // Merge the operands into the same scope if this is a known macro invocation - if (!macroTagsCalls.has(root.id)) { - continue; - } - mergeScopes(root, scope, macroValues, macroTagsCalls); - } + const macroValues = mergeMacroArguments(fn, macroTags, macroKinds); - return macroTagsCalls; + return macroValues; } -export const FBT_TAGS: Set<string> = new Set([ - 'fbt', - 'fbt:param', - 'fbt:enum', - 'fbt:plural', - 'fbs', - 'fbs:param', - 'fbs:enum', - 'fbs:plural', +const FBT_TAGS: Map<string, MacroDefinition> = new Map([ + ['fbt', FBT_MACRO], + ['fbt:param', SHALLOW_MACRO], + ['fbt:enum', FBT_MACRO], + ['fbt:plural', SHALLOW_MACRO], + ['fbs', FBT_MACRO], + ['fbs:param', SHALLOW_MACRO], + ['fbs:enum', FBT_MACRO], + ['fbs:plural', SHALLOW_MACRO], ]); export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([ 'fbt:param', 'fbs:param', ]); -function visit( +function populateMacroTags( fn: HIRFunction, - fbtMacroTags: Set<Macro>, - macroTagsCalls: Set<IdentifierId>, - macroMethods: Map<IdentifierId, Array<Array<MacroMethod>>>, - macroValues: Map<Identifier, Array<Identifier>>, -): void { - for (const [, block] of fn.body.blocks) { - for (const phi of block.phis) { - const macroOperands: Array<Identifier> = []; - for (const operand of phi.operands.values()) { - if (macroValues.has(operand.identifier)) { - macroOperands.push(operand.identifier); - } - } - if (macroOperands.length !== 0) { - macroValues.set(phi.place.identifier, macroOperands); - } - } - for (const instruction of block.instructions) { - const {lvalue, value} = instruction; - if (lvalue === null) { - continue; - } - if ( - value.kind === 'Primitive' && - typeof value.value === 'string' && - matchesExactTag(value.value, fbtMacroTags) - ) { - /* - * We don't distinguish between tag names and strings, so record - * all `fbt` string literals in case they are used as a jsx tag. - */ - macroTagsCalls.add(lvalue.identifier.id); - } else if ( - value.kind === 'LoadGlobal' && - matchesExactTag(value.binding.name, fbtMacroTags) - ) { - // Record references to `fbt` as a global - macroTagsCalls.add(lvalue.identifier.id); - } else if ( - value.kind === 'LoadGlobal' && - matchTagRoot(value.binding.name, fbtMacroTags) !== null - ) { - const methods = matchTagRoot(value.binding.name, fbtMacroTags)!; - macroMethods.set(lvalue.identifier.id, methods); - } else if ( - value.kind === 'PropertyLoad' && - macroMethods.has(value.object.identifier.id) - ) { - const methods = macroMethods.get(value.object.identifier.id)!; - const newMethods = []; - for (const method of methods) { - if ( - method.length > 0 && - (method[0].type === 'wildcard' || - (method[0].type === 'name' && method[0].name === value.property)) - ) { - if (method.length > 1) { - newMethods.push(method.slice(1)); - } else { - macroTagsCalls.add(lvalue.identifier.id); + macroKinds: Map<Macro, MacroDefinition>, +): Map<IdentifierId, MacroDefinition> { + const macroTags = new Map<IdentifierId, MacroDefinition>(); + for (const block of fn.body.blocks.values()) { + for (const instr of block.instructions) { + const {lvalue, value} = instr; + switch (value.kind) { + case 'Primitive': { + if (typeof value.value === 'string') { + const macroDefinition = macroKinds.get(value.value); + if (macroDefinition != null) { + /* + * We don't distinguish between tag names and strings, so record + * all `fbt` string literals in case they are used as a jsx tag. + */ + macroTags.set(lvalue.identifier.id, macroDefinition); } } + break; } - if (newMethods.length > 0) { - macroMethods.set(lvalue.identifier.id, newMethods); + case 'LoadGlobal': { + let macroDefinition = macroKinds.get(value.binding.name); + if (macroDefinition != null) { + macroTags.set(lvalue.identifier.id, macroDefinition); + } + break; } - } else if ( - value.kind === 'PropertyLoad' && - macroTagsCalls.has(value.object.identifier.id) - ) { - macroTagsCalls.add(lvalue.identifier.id); - } else if ( - isFbtJsxExpression(fbtMacroTags, macroTagsCalls, value) || - isFbtJsxChild(macroTagsCalls, lvalue, value) || - isFbtCallExpression(macroTagsCalls, value) - ) { - macroTagsCalls.add(lvalue.identifier.id); - macroValues.set( - lvalue.identifier, - Array.from( - eachInstructionValueOperand(value), - operand => operand.identifier, - ), - ); - } else if ( - Iterable_some(eachInstructionValueOperand(value), operand => - macroValues.has(operand.identifier), - ) - ) { - const macroOperands: Array<Identifier> = []; - for (const operand of eachInstructionValueOperand(value)) { - if (macroValues.has(operand.identifier)) { - macroOperands.push(operand.identifier); + case 'PropertyLoad': { + if (typeof value.property === 'string') { + const macroDefinition = macroTags.get(value.object.identifier.id); + if (macroDefinition != null) { + const propertyDefinition = + macroDefinition.properties != null + ? (macroDefinition.properties.get(value.property) ?? + macroDefinition.properties.get('*')) + : null; + const propertyMacro = propertyDefinition ?? macroDefinition; + macroTags.set(lvalue.identifier.id, propertyMacro); + } } + break; } - macroValues.set(lvalue.identifier, macroOperands); } } } + return macroTags; } -function mergeScopes( - root: Identifier, - scope: ReactiveScope, - macroValues: Map<Identifier, Array<Identifier>>, - macroTagsCalls: Set<IdentifierId>, -): void { - const operands = macroValues.get(root); - if (operands == null) { - return; - } - for (const operand of operands) { - operand.scope = scope; - expandFbtScopeRange(scope.range, operand.mutableRange); - macroTagsCalls.add(operand.id); - mergeScopes(operand, scope, macroValues, macroTagsCalls); - } -} - -function matchesExactTag(s: string, tags: Set<Macro>): boolean { - return Array.from(tags).some(macro => - typeof macro === 'string' - ? s === macro - : macro[1].length === 0 && macro[0] === s, - ); -} - -function matchTagRoot( - s: string, - tags: Set<Macro>, -): Array<Array<MacroMethod>> | null { - const methods: Array<Array<MacroMethod>> = []; - for (const macro of tags) { - if (typeof macro === 'string') { - continue; +function mergeMacroArguments( + fn: HIRFunction, + macroTags: Map<IdentifierId, MacroDefinition>, + macroKinds: Map<Macro, MacroDefinition>, +): Set<IdentifierId> { + const macroValues = new Set<IdentifierId>(macroTags.keys()); + for (const block of Array.from(fn.body.blocks.values()).reverse()) { + for (let i = block.instructions.length - 1; i >= 0; i--) { + const instr = block.instructions[i]!; + const {lvalue, value} = instr; + switch (value.kind) { + case 'DeclareContext': + case 'DeclareLocal': + case 'Destructure': + case 'LoadContext': + case 'LoadLocal': + case 'PostfixUpdate': + case 'PrefixUpdate': + case 'StoreContext': + case 'StoreLocal': { + // Instructions that never need to be merged + break; + } + case 'CallExpression': + case 'MethodCall': { + const scope = lvalue.identifier.scope; + if (scope == null) { + continue; + } + const callee = + value.kind === 'CallExpression' ? value.callee : value.property; + const macroDefinition = + macroTags.get(callee.identifier.id) ?? + macroTags.get(lvalue.identifier.id); + if (macroDefinition != null) { + visitOperands( + macroDefinition, + scope, + lvalue, + value, + macroValues, + macroTags, + ); + } + break; + } + case 'JsxExpression': { + const scope = lvalue.identifier.scope; + if (scope == null) { + continue; + } + let macroDefinition; + if (value.tag.kind === 'Identifier') { + macroDefinition = macroTags.get(value.tag.identifier.id); + } else { + macroDefinition = macroKinds.get(value.tag.name); + } + macroDefinition ??= macroTags.get(lvalue.identifier.id); + if (macroDefinition != null) { + visitOperands( + macroDefinition, + scope, + lvalue, + value, + macroValues, + macroTags, + ); + } + break; + } + default: { + const scope = lvalue.identifier.scope; + if (scope == null) { + continue; + } + const macroDefinition = macroTags.get(lvalue.identifier.id); + if (macroDefinition != null) { + visitOperands( + macroDefinition, + scope, + lvalue, + value, + macroValues, + macroTags, + ); + } + break; + } + } } - const [tag, rest] = macro; - if (tag === s && rest.length > 0) { - methods.push(rest); + for (const phi of block.phis) { + const scope = phi.place.identifier.scope; + if (scope == null) { + continue; + } + const macroDefinition = macroTags.get(phi.place.identifier.id); + if ( + macroDefinition == null || + macroDefinition.level === InlineLevel.Shallow + ) { + continue; + } + macroValues.add(phi.place.identifier.id); + for (const operand of phi.operands.values()) { + operand.identifier.scope = scope; + expandFbtScopeRange(scope.range, operand.identifier.mutableRange); + macroTags.set(operand.identifier.id, macroDefinition); + macroValues.add(operand.identifier.id); + } } } - if (methods.length > 0) { - return methods; - } else { - return null; - } -} - -function isFbtCallExpression( - macroTagsCalls: Set<IdentifierId>, - value: InstructionValue, -): boolean { - return ( - (value.kind === 'CallExpression' && - macroTagsCalls.has(value.callee.identifier.id)) || - (value.kind === 'MethodCall' && - macroTagsCalls.has(value.property.identifier.id)) - ); -} - -function isFbtJsxExpression( - fbtMacroTags: Set<Macro>, - macroTagsCalls: Set<IdentifierId>, - value: InstructionValue, -): boolean { - return ( - value.kind === 'JsxExpression' && - ((value.tag.kind === 'Identifier' && - macroTagsCalls.has(value.tag.identifier.id)) || - (value.tag.kind === 'BuiltinTag' && - matchesExactTag(value.tag.name, fbtMacroTags))) - ); -} - -function isFbtJsxChild( - macroTagsCalls: Set<IdentifierId>, - lvalue: Place | null, - value: InstructionValue, -): boolean { - return ( - (value.kind === 'JsxExpression' || value.kind === 'JsxFragment') && - lvalue !== null && - macroTagsCalls.has(lvalue.identifier.id) - ); + return macroValues; } function expandFbtScopeRange( @@ -298,3 +283,22 @@ function expandFbtScopeRange( ); } } + +function visitOperands( + macroDefinition: MacroDefinition, + scope: ReactiveScope, + lvalue: Place, + value: InstructionValue, + macroValues: Set<IdentifierId>, + macroTags: Map<IdentifierId, MacroDefinition>, +): void { + macroValues.add(lvalue.identifier.id); + for (const operand of eachInstructionValueOperand(value)) { + if (macroDefinition.level === InlineLevel.Transitive) { + operand.identifier.scope = scope; + expandFbtScopeRange(scope.range, operand.identifier.mutableRange); + macroTags.set(operand.identifier.id, macroDefinition); + } + macroValues.add(operand.identifier.id); + } +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts index e84c1e57aae..a574ecc1652 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts @@ -135,16 +135,7 @@ function parseConfigPragmaEnvironmentForTest( } else if (val) { const parsedVal = tryParseTestPragmaValue(val).unwrap(); if (key === 'customMacros' && typeof parsedVal === 'string') { - const valSplit = parsedVal.split('.'); - const props = []; - for (const elt of valSplit.slice(1)) { - if (elt === '*') { - props.push({type: 'wildcard'}); - } else if (elt.length > 0) { - props.push({type: 'name', name: elt}); - } - } - maybeConfig[key] = [[valSplit[0], props]]; + maybeConfig[key] = [parsedVal.split('.')[0]]; continue; } maybeConfig[key] = parsedVal; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md index ac9bc2ce28a..96cea12a623 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md @@ -44,15 +44,23 @@ import fbt from "fbt"; import { identity } from "shared-runtime"; function Component(props) { - const $ = _c(3); + const $ = _c(5); let t0; if ($[0] !== props.count || $[1] !== props.option) { + let t1; + if ($[3] !== props.count) { + t1 = identity(props.count); + $[3] = props.count; + $[4] = t1; + } else { + t1 = $[4]; + } t0 = ( <span> {fbt._( { "*": "{count} votes for {option}", _1: "1 vote for {option}" }, [ - fbt._plural(identity(props.count), "count"), + fbt._plural(t1, "count"), fbt._param( "option", diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md index 9b4c29607d9..e5f465df169 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md @@ -44,15 +44,23 @@ import fbt from "fbt"; import { identity } from "shared-runtime"; function Component(props) { - const $ = _c(3); + const $ = _c(5); let t0; if ($[0] !== props.count || $[1] !== props.option) { + let t1; + if ($[3] !== props.count) { + t1 = identity(props.count); + $[3] = props.count; + $[4] = t1; + } else { + t1 = $[4]; + } t0 = ( <span> {fbt._( { "*": "{count} votes for {option}", _1: "1 vote for {option}" }, [ - fbt._plural(identity(props.count), "count"), + fbt._plural(t1, "count"), fbt._param( "option", diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md index c1a1a5891b3..c421ccbe810 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md @@ -37,7 +37,7 @@ import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; function Foo(t0) { - const $ = _c(7); + const $ = _c(13); const { name1, name2 } = t0; let t1; if ($[0] !== name1 || $[1] !== name2) { @@ -50,19 +50,34 @@ function Foo(t0) { t2 = $[4]; } let t3; - if ($[5] !== name2) { - t3 = <b>{name2}</b>; - $[5] = name2; - $[6] = t3; + if ($[5] !== name1 || $[6] !== t2) { + t3 = <span key={name1}>{t2}</span>; + $[5] = name1; + $[6] = t2; + $[7] = t3; } else { - t3 = $[6]; + t3 = $[7]; + } + let t4; + if ($[8] !== name2) { + t4 = <b>{name2}</b>; + $[8] = name2; + $[9] = t4; + } else { + t4 = $[9]; + } + let t5; + if ($[10] !== name2 || $[11] !== t4) { + t5 = <span key={name2}>{t4}</span>; + $[10] = name2; + $[11] = t4; + $[12] = t5; + } else { + t5 = $[12]; } t1 = fbt._( "{user1} and {user2} accepted your PR!", - [ - fbt._param("user1", <span key={name1}>{t2}</span>), - fbt._param("user2", <span key={name2}>{t3}</span>), - ], + [fbt._param("user1", t3), fbt._param("user2", t5)], { hk: "2PxMie" }, ); $[0] = name1; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md index 56ffb70cb0a..66141f7f8d7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md @@ -29,20 +29,24 @@ import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; function Component(t0) { - const $ = _c(4); + const $ = _c(6); const { name, data, icon } = t0; let t1; if ($[0] !== data || $[1] !== icon || $[2] !== name) { + let t2; + if ($[4] !== name) { + t2 = <Text type="h4">{name}</Text>; + $[4] = name; + $[5] = t2; + } else { + t2 = $[5]; + } t1 = ( <Text type="body4"> {fbt._( "{item author}{icon}{=m2}", [ - fbt._param( - "item author", - - <Text type="h4">{name}</Text>, - ), + fbt._param("item author", t2), fbt._param( "icon", diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md index 0ed51660b98..c9a43bb075e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md @@ -27,16 +27,21 @@ import fbt from "fbt"; import { identity } from "shared-runtime"; function Component(props) { - const $ = _c(2); + const $ = _c(4); let t0; if ($[0] !== props.text) { + const t1 = identity(props.text); + let t2; + if ($[2] !== t1) { + t2 = <>{t1}</>; + $[2] = t1; + $[3] = t2; + } else { + t2 = $[3]; + } t0 = ( <Foo - value={fbt._( - "{value}%", - [fbt._param("value", <>{identity(props.text)}</>)], - { hk: "10F5Cc" }, - )} + value={fbt._("{value}%", [fbt._param("value", t2)], { hk: "10F5Cc" })} /> ); $[0] = props.text; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md new file mode 100644 index 00000000000..93a9b869f67 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md @@ -0,0 +1,109 @@ + +## Input + +```javascript +// @flow +import {fbt} from 'fbt'; + +function Example({x}) { + // "Inner Text" needs to be visible to fbt: the <Bar> element cannot + // be memoized separately + return ( + <fbt desc="Description"> + Outer Text + <Foo key="b" x={x}> + <Bar key="a">Inner Text</Bar> + </Foo> + </fbt> + ); +} + +function Foo({x, children}) { + 'use no memo'; + return ( + <> + <div>{x}</div> + <span>{children}</span> + </> + ); +} + +function Bar({children}) { + 'use no memo'; + return children; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Example, + params: [{x: 'Hello'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { fbt } from "fbt"; + +function Example(t0) { + const $ = _c(2); + const { x } = t0; + let t1; + if ($[0] !== x) { + t1 = fbt._( + "Outer Text {=m1}", + [ + fbt._implicitParam( + "=m1", + + <Foo key="b" x={x}> + {fbt._( + "{=m1}", + [ + fbt._implicitParam( + "=m1", + <Bar key="a"> + {fbt._("Inner Text", null, { hk: "32YB0l" })} + </Bar>, + ), + ], + { hk: "23dJsI" }, + )} + </Foo>, + ), + ], + { hk: "2RVA7V" }, + ); + $[0] = x; + $[1] = t1; + } else { + t1 = $[1]; + } + return t1; +} + +function Foo({ x, children }) { + "use no memo"; + return ( + <> + <div>{x}</div> + <span>{children}</span> + </> + ); +} + +function Bar({ children }) { + "use no memo"; + return children; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Example, + params: [{ x: "Hello" }], +}; + +``` + +### Eval output +(kind: ok) Outer Text <div>Hello</div><span>Inner Text</span> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js new file mode 100644 index 00000000000..f89289fb039 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.js @@ -0,0 +1,35 @@ +// @flow +import {fbt} from 'fbt'; + +function Example({x}) { + // "Inner Text" needs to be visible to fbt: the <Bar> element cannot + // be memoized separately + return ( + <fbt desc="Description"> + Outer Text + <Foo key="b" x={x}> + <Bar key="a">Inner Text</Bar> + </Foo> + </fbt> + ); +} + +function Foo({x, children}) { + 'use no memo'; + return ( + <> + <div>{x}</div> + <span>{children}</span> + </> + ); +} + +function Bar({children}) { + 'use no memo'; + return children; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Example, + params: [{x: 'Hello'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md new file mode 100644 index 00000000000..10a2a9ae131 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.expect.md @@ -0,0 +1,128 @@ + +## Input + +```javascript +import fbt from 'fbt'; +import {Stringify, identity} from 'shared-runtime'; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component({firstname, lastname}) { + 'use memo'; + return ( + <div> + {fbt( + [ + 'Name: ', + fbt.param('firstname', <Stringify key={0} name={firstname} />), + ', ', + fbt.param( + 'lastname', + identity( + fbt( + '(inner)' + + fbt.param('lastname', <Stringify key={1} name={lastname} />), + 'Inner fbt value' + ) + ) + ), + ], + 'Name' + )} + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstname: 'first', lastname: 'last'}], + sequentialRenders: [{firstname: 'first', lastname: 'last'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import fbt from "fbt"; +import { Stringify, identity } from "shared-runtime"; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component(t0) { + "use memo"; + const $ = _c(9); + const { firstname, lastname } = t0; + let t1; + if ($[0] !== firstname || $[1] !== lastname) { + let t2; + if ($[3] !== firstname) { + t2 = <Stringify key={0} name={firstname} />; + $[3] = firstname; + $[4] = t2; + } else { + t2 = $[4]; + } + let t3; + if ($[5] !== lastname) { + t3 = <Stringify key={1} name={lastname} />; + $[5] = lastname; + $[6] = t3; + } else { + t3 = $[6]; + } + t1 = fbt._( + "Name: {firstname}, {lastname}", + [ + fbt._param("firstname", t2), + fbt._param( + "lastname", + identity( + fbt._("(inner){lastname}", [fbt._param("lastname", t3)], { + hk: "1Kdxyo", + }), + ), + ), + ], + { hk: "3AiIf8" }, + ); + $[0] = firstname; + $[1] = lastname; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[7] !== t1) { + t2 = <div>{t1}</div>; + $[7] = t1; + $[8] = t2; + } else { + t2 = $[8]; + } + return t2; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ firstname: "first", lastname: "last" }], + sequentialRenders: [{ firstname: "first", lastname: "last" }], +}; + +``` + +### Eval output +(kind: ok) <div>Name: <div>{"name":"first"}</div>, (inner)<div>{"name":"last"}</div></div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js new file mode 100644 index 00000000000..07efb4e03a8 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt-jsx.js @@ -0,0 +1,42 @@ +import fbt from 'fbt'; +import {Stringify, identity} from 'shared-runtime'; + +/** + * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. + * Expected fixture `fbt-param-call-arguments` to succeed but it failed with error: + * /fbt-param-call-arguments.ts: Line 19 Column 11: fbt: unsupported babel node: Identifier + * --- + * t3 + * --- + */ +function Component({firstname, lastname}) { + 'use memo'; + return ( + <div> + {fbt( + [ + 'Name: ', + fbt.param('firstname', <Stringify key={0} name={firstname} />), + ', ', + fbt.param( + 'lastname', + identity( + fbt( + '(inner)' + + fbt.param('lastname', <Stringify key={1} name={lastname} />), + 'Inner fbt value' + ) + ) + ), + ], + 'Name' + )} + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstname: 'first', lastname: 'last'}], + sequentialRenders: [{firstname: 'first', lastname: 'last'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md index 5ad089e1341..063e45e04e3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.expect.md @@ -3,7 +3,7 @@ ```javascript import fbt from 'fbt'; -import {Stringify} from 'shared-runtime'; +import {identity} from 'shared-runtime'; /** * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. @@ -16,22 +16,25 @@ import {Stringify} from 'shared-runtime'; function Component({firstname, lastname}) { 'use memo'; return ( - <Stringify> + <div> {fbt( [ 'Name: ', - fbt.param('firstname', <Stringify key={0} name={firstname} />), + fbt.param('firstname', identity(firstname)), ', ', fbt.param( 'lastname', - <Stringify key={0} name={lastname}> - {fbt('(inner fbt)', 'Inner fbt value')} - </Stringify> + identity( + fbt( + '(inner)' + fbt.param('lastname', identity(lastname)), + 'Inner fbt value' + ) + ) ), ], 'Name' )} - </Stringify> + </div> ); } @@ -48,7 +51,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; -import { Stringify } from "shared-runtime"; +import { identity } from "shared-runtime"; /** * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. @@ -70,14 +73,24 @@ function Component(t0) { fbt._param( "firstname", - <Stringify key={0} name={firstname} />, + identity(firstname), ), fbt._param( "lastname", - <Stringify key={0} name={lastname}> - {fbt._("(inner fbt)", null, { hk: "36qNwF" })} - </Stringify>, + identity( + fbt._( + "(inner){lastname}", + [ + fbt._param( + "lastname", + + identity(lastname), + ), + ], + { hk: "1Kdxyo" }, + ), + ), ), ], { hk: "3AiIf8" }, @@ -90,7 +103,7 @@ function Component(t0) { } let t2; if ($[3] !== t1) { - t2 = <Stringify>{t1}</Stringify>; + t2 = <div>{t1}</div>; $[3] = t1; $[4] = t2; } else { @@ -108,4 +121,4 @@ export const FIXTURE_ENTRYPOINT = { ``` ### Eval output -(kind: ok) <div>{"children":"Name: , "}</div> \ No newline at end of file +(kind: ok) <div>Name: first, (inner)last</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js index 14e3278e395..38465a62804 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/repro-fbt-param-nested-fbt.js @@ -1,5 +1,5 @@ import fbt from 'fbt'; -import {Stringify} from 'shared-runtime'; +import {identity} from 'shared-runtime'; /** * MemoizeFbtAndMacroOperands needs to account for nested fbt calls. @@ -12,22 +12,25 @@ import {Stringify} from 'shared-runtime'; function Component({firstname, lastname}) { 'use memo'; return ( - <Stringify> + <div> {fbt( [ 'Name: ', - fbt.param('firstname', <Stringify key={0} name={firstname} />), + fbt.param('firstname', identity(firstname)), ', ', fbt.param( 'lastname', - <Stringify key={0} name={lastname}> - {fbt('(inner fbt)', 'Inner fbt value')} - </Stringify> + identity( + fbt( + '(inner)' + fbt.param('lastname', identity(lastname)), + 'Inner fbt value' + ) + ) ), ], 'Name' )} - </Stringify> + </div> ); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md index 455c416d840..e004ef246ab 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md @@ -37,7 +37,7 @@ function Component(props) { const $ = _c(16); let t0; if ($[0] !== props) { - t0 = idx(props, _temp); + t0 = idx(props, (_) => _.group.label); $[0] = props; $[1] = t0; } else { @@ -46,7 +46,7 @@ function Component(props) { const groupName1 = t0; let t1; if ($[2] !== props) { - t1 = idx.a(props, _temp2); + t1 = idx.a(props, (__0) => __0.group.label); $[2] = props; $[3] = t1; } else { @@ -108,12 +108,6 @@ function Component(props) { } return t5; } -function _temp2(__0) { - return __0.group.label; -} -function _temp(_) { - return _.group.label; -} ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md index cc5a4200a94..e98fb191ce7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md @@ -31,7 +31,7 @@ function Component(props) { const $ = _c(10); let t0; if ($[0] !== props) { - t0 = idx(props, _temp); + t0 = idx(props, (_) => _.group.label); $[0] = props; $[1] = t0; } else { @@ -74,9 +74,6 @@ function Component(props) { } return t3; } -function _temp(_) { - return _.group.label; -} ``` \ No newline at end of file From c35f6a3041816613e704772ca9dafb26568d9f89 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Fri, 17 Oct 2025 11:59:17 -0700 Subject: [PATCH 100/276] [compiler] Optimize props spread for common cases (#34900) As part of the new inference model we updated to (correctly) treat destructuring spread as creating a new mutable object. This had the unfortunate side-effect of reducing precision on destructuring of props, though: ```js function Component({x, ...rest}) { const z = rest.z; identity(z); return <Stringify x={x} z={z} />; } ``` Memoized as the following, where we don't realize that `z` is actually frozen: ```js function Component(t0) { const $ = _c(6); let x; let z; if ($[0] !== t0) { const { x: t1, ...rest } = t0; x = t1; z = rest.z; identity(z); ... ``` #34341 was our first thought of how to do this (thanks @poteto for exploring this idea!). But during review it became clear that it was a bit more complicated than I had thought. So this PR explores a more conservative alternative. The idea is: * Track known sources of frozen values: component props, hook params, and hook return values. * Find all object spreads where the rvalue is a known frozen value. * Look at how such objects are used, and if they are only used to access properties (PropertyLoad/Destructure), pass to hooks, or pass to jsx then we can be very confident the object is not mutated. We consider any such objects to be frozen, even though technically spread creates a new object. See new fixtures for more examples. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34900). * __->__ #34900 * #34887 --- .../Inference/InferMutationAliasingEffects.ts | 164 +++++++++++++++++- .../nonmutated-spread-hook-return.expect.md | 63 +++++++ .../compiler/nonmutated-spread-hook-return.js | 13 ++ .../nonmutated-spread-props-jsx.expect.md | 57 ++++++ .../compiler/nonmutated-spread-props-jsx.js | 10 ++ ...d-spread-props-local-indirection.expect.md | 63 +++++++ ...nmutated-spread-props-local-indirection.js | 13 ++ .../nonmutated-spread-props.expect.md | 61 +++++++ .../compiler/nonmutated-spread-props.js | 12 ++ 9 files changed, 455 insertions(+), 1 deletion(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts index d2f2ba61d69..94be2100f57 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts @@ -19,6 +19,7 @@ import { Environment, FunctionExpression, GeneratedSource, + getHookKind, HIRFunction, Hole, IdentifierId, @@ -198,6 +199,7 @@ export function inferMutationAliasingEffects( isFunctionExpression, fn, hoistedContextDeclarations, + findNonMutatedDestructureSpreads(fn), ); let iterationCount = 0; @@ -287,15 +289,18 @@ class Context { isFuctionExpression: boolean; fn: HIRFunction; hoistedContextDeclarations: Map<DeclarationId, Place | null>; + nonMutatingSpreads: Set<IdentifierId>; constructor( isFunctionExpression: boolean, fn: HIRFunction, hoistedContextDeclarations: Map<DeclarationId, Place | null>, + nonMutatingSpreads: Set<IdentifierId>, ) { this.isFuctionExpression = isFunctionExpression; this.fn = fn; this.hoistedContextDeclarations = hoistedContextDeclarations; + this.nonMutatingSpreads = nonMutatingSpreads; } cacheApplySignature( @@ -322,6 +327,161 @@ class Context { } } +/** + * Finds objects created via ObjectPattern spread destructuring + * (`const {x, ...spread} = ...`) where a) the rvalue is known frozen and + * b) the spread value cannot possibly be directly mutated. The idea is that + * for this set of values, we can treat the spread object as frozen. + * + * The primary use case for this is props spreading: + * + * ``` + * function Component({prop, ...otherProps}) { + * const transformedProp = transform(prop, otherProps.foo); + * // pass `otherProps` down: + * return <Foo {...otherProps} prop={transformedProp} />; + * } + * ``` + * + * Here we know that since `otherProps` cannot be mutated, we don't have to treat + * it as mutable: `otherProps.foo` only reads a value that must be frozen, so it + * can be treated as frozen too. + */ +function findNonMutatedDestructureSpreads(fn: HIRFunction): Set<IdentifierId> { + const knownFrozen = new Set<IdentifierId>(); + if (fn.fnType === 'Component') { + const [props] = fn.params; + if (props != null && props.kind === 'Identifier') { + knownFrozen.add(props.identifier.id); + } + } else { + for (const param of fn.params) { + if (param.kind === 'Identifier') { + knownFrozen.add(param.identifier.id); + } + } + } + + // Map of temporaries to identifiers for spread objects + const candidateNonMutatingSpreads = new Map<IdentifierId, IdentifierId>(); + for (const block of fn.body.blocks.values()) { + if (candidateNonMutatingSpreads.size !== 0) { + for (const phi of block.phis) { + for (const operand of phi.operands.values()) { + const spread = candidateNonMutatingSpreads.get(operand.identifier.id); + if (spread != null) { + candidateNonMutatingSpreads.delete(spread); + } + } + } + } + for (const instr of block.instructions) { + const {lvalue, value} = instr; + switch (value.kind) { + case 'Destructure': { + if ( + !knownFrozen.has(value.value.identifier.id) || + !( + value.lvalue.kind === InstructionKind.Let || + value.lvalue.kind === InstructionKind.Const + ) || + value.lvalue.pattern.kind !== 'ObjectPattern' + ) { + continue; + } + for (const item of value.lvalue.pattern.properties) { + if (item.kind !== 'Spread') { + continue; + } + candidateNonMutatingSpreads.set( + item.place.identifier.id, + item.place.identifier.id, + ); + } + break; + } + case 'LoadLocal': { + const spread = candidateNonMutatingSpreads.get( + value.place.identifier.id, + ); + if (spread != null) { + candidateNonMutatingSpreads.set(lvalue.identifier.id, spread); + } + break; + } + case 'StoreLocal': { + const spread = candidateNonMutatingSpreads.get( + value.value.identifier.id, + ); + if (spread != null) { + candidateNonMutatingSpreads.set(lvalue.identifier.id, spread); + candidateNonMutatingSpreads.set( + value.lvalue.place.identifier.id, + spread, + ); + } + break; + } + case 'JsxFragment': + case 'JsxExpression': { + // Passing objects created with spread to jsx can't mutate them + break; + } + case 'PropertyLoad': { + // Properties must be frozen since the original value was frozen + break; + } + case 'CallExpression': + case 'MethodCall': { + const callee = + value.kind === 'CallExpression' ? value.callee : value.property; + if (getHookKind(fn.env, callee.identifier) != null) { + // Hook calls have frozen arguments, and non-ref returns are frozen + if (!isRefOrRefValue(lvalue.identifier)) { + knownFrozen.add(lvalue.identifier.id); + } + } else { + // Non-hook calls check their operands, since they are potentially mutable + if (candidateNonMutatingSpreads.size !== 0) { + // Otherwise any reference to the spread object itself may mutate + for (const operand of eachInstructionValueOperand(value)) { + const spread = candidateNonMutatingSpreads.get( + operand.identifier.id, + ); + if (spread != null) { + candidateNonMutatingSpreads.delete(spread); + } + } + } + } + break; + } + default: { + if (candidateNonMutatingSpreads.size !== 0) { + // Otherwise any reference to the spread object itself may mutate + for (const operand of eachInstructionValueOperand(value)) { + const spread = candidateNonMutatingSpreads.get( + operand.identifier.id, + ); + if (spread != null) { + candidateNonMutatingSpreads.delete(spread); + } + } + } + } + } + } + } + + const nonMutatingSpreads = new Set<IdentifierId>(); + for (const [key, value] of candidateNonMutatingSpreads) { + if (key === value) { + nonMutatingSpreads.add(key); + } + } + return nonMutatingSpreads; +} + function inferParam( param: Place | SpreadPattern, initialState: InferenceState, @@ -2054,7 +2214,9 @@ function computeSignatureForInstruction( kind: 'Create', into: place, reason: ValueReason.Other, - value: ValueKind.Mutable, + value: context.nonMutatingSpreads.has(place.identifier.id) + ? ValueKind.Frozen + : ValueKind.Mutable, }); effects.push({ kind: 'Capture', diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md new file mode 100644 index 00000000000..9a4f0c179f9 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.expect.md @@ -0,0 +1,63 @@ + +## Input + +```javascript +import {identity, Stringify, useIdentity} from 'shared-runtime'; + +function Component(props) { + const {x, ...rest} = useIdentity(props); + const z = rest.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, Stringify, useIdentity } from "shared-runtime"; + +function Component(props) { + const $ = _c(6); + const t0 = useIdentity(props); + let rest; + let x; + if ($[0] !== t0) { + ({ x, ...rest } = t0); + $[0] = t0; + $[1] = rest; + $[2] = x; + } else { + rest = $[1]; + x = $[2]; + } + const z = rest.z; + identity(z); + let t1; + if ($[3] !== x || $[4] !== z) { + t1 = <Stringify x={x} z={z} />; + $[3] = x; + $[4] = z; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: "Hello", z: "World" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"x":"Hello","z":"World"}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js new file mode 100644 index 00000000000..c4447f7be6e --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-hook-return.js @@ -0,0 +1,13 @@ +import {identity, Stringify, useIdentity} from 'shared-runtime'; + +function Component(props) { + const {x, ...rest} = useIdentity(props); + const z = rest.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md new file mode 100644 index 00000000000..5335705c5d8 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.expect.md @@ -0,0 +1,57 @@ + +## Input + +```javascript +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + return <Stringify {...rest} x={x} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, Stringify } from "shared-runtime"; + +function Component(t0) { + const $ = _c(6); + let rest; + let x; + if ($[0] !== t0) { + ({ x, ...rest } = t0); + $[0] = t0; + $[1] = rest; + $[2] = x; + } else { + rest = $[1]; + x = $[2]; + } + let t1; + if ($[3] !== rest || $[4] !== x) { + t1 = <Stringify {...rest} x={x} />; + $[3] = rest; + $[4] = x; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: "Hello", z: "World" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"z":"World","x":"Hello"}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js new file mode 100644 index 00000000000..d9f24264d69 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-jsx.js @@ -0,0 +1,10 @@ +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + return <Stringify {...rest} x={x} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md new file mode 100644 index 00000000000..7a435adcaad --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.expect.md @@ -0,0 +1,63 @@ + +## Input + +```javascript +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + const restAlias = rest; + const z = restAlias.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, Stringify } from "shared-runtime"; + +function Component(t0) { + const $ = _c(6); + let rest; + let x; + if ($[0] !== t0) { + ({ x, ...rest } = t0); + $[0] = t0; + $[1] = rest; + $[2] = x; + } else { + rest = $[1]; + x = $[2]; + } + const restAlias = rest; + const z = restAlias.z; + identity(z); + let t1; + if ($[3] !== x || $[4] !== z) { + t1 = <Stringify x={x} z={z} />; + $[3] = x; + $[4] = z; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: "Hello", z: "World" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"x":"Hello","z":"World"}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js new file mode 100644 index 00000000000..b1d26ab7f72 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props-local-indirection.js @@ -0,0 +1,13 @@ +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + const restAlias = rest; + const z = restAlias.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md new file mode 100644 index 00000000000..a8b1c2d747f --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.expect.md @@ -0,0 +1,61 @@ + +## Input + +```javascript +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + const z = rest.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, Stringify } from "shared-runtime"; + +function Component(t0) { + const $ = _c(6); + let rest; + let x; + if ($[0] !== t0) { + ({ x, ...rest } = t0); + $[0] = t0; + $[1] = rest; + $[2] = x; + } else { + rest = $[1]; + x = $[2]; + } + const z = rest.z; + identity(z); + let t1; + if ($[3] !== x || $[4] !== z) { + t1 = <Stringify x={x} z={z} />; + $[3] = x; + $[4] = z; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ x: "Hello", z: "World" }], +}; + +``` + +### Eval output +(kind: ok) <div>{"x":"Hello","z":"World"}</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js new file mode 100644 index 00000000000..d3e83d560c2 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutated-spread-props.js @@ -0,0 +1,12 @@ +import {identity, Stringify} from 'shared-runtime'; + +function Component({x, ...rest}) { + const z = rest.z; + identity(z); + return <Stringify x={x} z={z} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{x: 'Hello', z: 'World'}], +}; From dc485c7303f0d7d10fdbd2ccd4a020574e679840 Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Fri, 17 Oct 2025 22:13:52 +0200 Subject: [PATCH 101/276] [Flight] Fix detached `ArrayBuffer` error when streaming typed arrays (#34849) Using `renderToReadableStream` in Node.js with binary data from `fs.readFileSync` (or `Buffer.allocUnsafe`) could cause downstream consumers (like compression middleware) to fail with "Cannot perform Construct on a detached ArrayBuffer". The issue occurs because Node.js uses an 8192-byte Buffer pool for small allocations (< 4KB). When React's `VIEW_SIZE` was 2KB, files between ~2KB and 4KB would be passed through as views of pooled buffers rather than copied into `currentView`. ByteStreams (`type: 'bytes'`) detach ArrayBuffers during transfer, which corrupts the shared Buffer pool and causes subsequent Buffer operations to fail. Increasing `VIEW_SIZE` from 2KB to 4KB ensures all chunks smaller than 4KB are copied into `currentView` (which uses a dedicated 4KB buffer outside the pool), while chunks 4KB or larger don't use the pool anyway. Thus no pooled buffers are ever exposed to ByteStream detachment. This adds 2KB memory per active stream, copies chunks in the 2-4KB range instead of passing them as views (small CPU cost), and buffers up to 2KB more data before flushing. However, it avoids duplicating large binary data (which copying everything would require, like the Edge entry point currently does in `typedArrayToBinaryChunk`). Related issues: - https://github.com/vercel/next.js/issues/84753 - https://github.com/vercel/next.js/issues/84858 --- .../src/__tests__/ReactFlightDOMNode-test.js | 39 +++++++++++++++++-- .../src/ReactServerStreamConfigEdge.js | 15 +++---- .../src/ReactServerStreamConfigNode.js | 6 ++- 3 files changed, 47 insertions(+), 13 deletions(-) diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js index f63f8233311..d59f298f994 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js @@ -10,11 +10,11 @@ 'use strict'; +import fs from 'fs'; +import os from 'os'; +import path from 'path'; import {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate'; -global.ReadableStream = - require('web-streams-polyfill/ponyfill/es6').ReadableStream; - let clientExports; let webpackMap; let webpackModules; @@ -1136,4 +1136,37 @@ describe('ReactFlightDOMNode', () => { 'Switched to client rendering because the server rendering errored:\n\nssr-throw', ); }); + + // This is a regression test for a specific issue where byte Web Streams are + // detaching ArrayBuffers, which caused downstream issues (e.g. "Cannot + // perform Construct on a detached ArrayBuffer") for chunks that are using + // Node's internal Buffer pool. + it('should not corrupt the Node.js Buffer pool by detaching ArrayBuffers when using Web Streams', async () => { + // Create a temp file smaller than 4KB to ensure it uses the Buffer pool. + const file = path.join(os.tmpdir(), 'test.bin'); + fs.writeFileSync(file, Buffer.alloc(4095)); + const fileChunk = fs.readFileSync(file); + fs.unlinkSync(file); + + // Verify this chunk uses the Buffer pool (8192 bytes for files < 4KB). + expect(fileChunk.buffer.byteLength).toBe(8192); + + const readable = await serverAct(() => + ReactServerDOMServer.renderToReadableStream(fileChunk, webpackMap), + ); + + // Create a Web Streams WritableStream that tries to use Buffer operations. + const writable = new WritableStream({ + write(chunk) { + // Only write one byte to ensure Node.js is not creating a new Buffer + // pool. Typically, library code (e.g. a compression middleware) would + // call Buffer.from(chunk) or similar, instead of allocating a new + // Buffer directly. With that, the test file could only be ~2600 bytes. + Buffer.allocUnsafe(1); + }, + }); + + // Must not throw an error. + await readable.pipeTo(writable); + }); }); diff --git a/packages/react-server/src/ReactServerStreamConfigEdge.js b/packages/react-server/src/ReactServerStreamConfigEdge.js index dbe6d6f90ca..90affdc6b8a 100644 --- a/packages/react-server/src/ReactServerStreamConfigEdge.js +++ b/packages/react-server/src/ReactServerStreamConfigEdge.js @@ -37,7 +37,11 @@ export function flushBuffered(destination: Destination) { // transform streams. https://github.com/whatwg/streams/issues/960 } -const VIEW_SIZE = 2048; +// Chunks larger than VIEW_SIZE are written directly, without copying into the +// internal view buffer. This must be at least half of Node's internal Buffer +// pool size (8192) to avoid corrupting the pool when using +// renderToReadableStream, which uses a byte stream that detaches ArrayBuffers. +const VIEW_SIZE = 4096; let currentView = null; let writtenBytes = 0; @@ -147,14 +151,7 @@ export function typedArrayToBinaryChunk( // If we passed through this straight to enqueue we wouldn't have to convert it but since // we need to copy the buffer in that case, we need to convert it to copy it. // When we copy it into another array using set() it needs to be a Uint8Array. - const buffer = new Uint8Array( - content.buffer, - content.byteOffset, - content.byteLength, - ); - // We clone large chunks so that we can transfer them when we write them. - // Others get copied into the target buffer. - return content.byteLength > VIEW_SIZE ? buffer.slice() : buffer; + return new Uint8Array(content.buffer, content.byteOffset, content.byteLength); } export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number { diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js index 3fb69841172..90609da2c45 100644 --- a/packages/react-server/src/ReactServerStreamConfigNode.js +++ b/packages/react-server/src/ReactServerStreamConfigNode.js @@ -38,7 +38,11 @@ export function flushBuffered(destination: Destination) { } } -const VIEW_SIZE = 2048; +// Chunks larger than VIEW_SIZE are written directly, without copying into the +// internal view buffer. This must be at least half of Node's internal Buffer +// pool size (8192) to avoid corrupting the pool when using +// renderToReadableStream, which uses a byte stream that detaches ArrayBuffers. +const VIEW_SIZE = 4096; let currentView = null; let writtenBytes = 0; let destinationHasCapacity = true; From ef88c588d51366d16c5323dba4bd197aeb85e4ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:51:02 -0400 Subject: [PATCH 102/276] [DevTools] Tweak the rects design and create multi-environment color scheme (#34880) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit <img width="1011" height="811" alt="Screenshot 2025-10-16 at 2 20 46 PM" src="https://github.com/user-attachments/assets/6dea3962-d369-4823-b44f-2c62b566c8f1" /> The selection is now clearer with a wider outline which spans the bounding box if there are multi rects. The color now gets darked changes on hover with a slight animation. The colors are now mixed from constants defined which are consistently used in the rects, the time span in the "suspended by" side bar and the scrubber. I also have constants defined for "server" and "other" debug environments which will be used in a follow up. --- .../src/devtools/constants.js | 20 ++++++-- .../InspectedElementSharedStyles.css | 4 +- .../views/SuspenseTab/SuspenseRects.css | 51 +++++++++++++++---- .../views/SuspenseTab/SuspenseRects.js | 12 ++++- .../views/SuspenseTab/SuspenseScrubber.css | 10 ++-- 5 files changed, 74 insertions(+), 23 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js index cfb73713b08..5c90501d70f 100644 --- a/packages/react-devtools-shared/src/devtools/constants.js +++ b/packages/react-devtools-shared/src/devtools/constants.js @@ -136,8 +136,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-timeline-text-dim-color': '#ccc', '--color-timeline-react-work-border': '#eeeeee', '--color-timebar-background': '#f6f6f6', - '--color-timespan-background': '#62bc6a', - '--color-timespan-background-errored': '#d57066', '--color-search-match': 'yellow', '--color-search-match-current': '#f7923b', '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)', @@ -156,6 +154,14 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#fd4d69', + '--color-suspense': '#0088fa', + '--color-transition': '#6a51b2', + '--color-suspense-server': '#62bc6a', + '--color-transition-server': '#3f7844', + '--color-suspense-other': '#f3ce49', + '--color-transition-other': '#917b2c', + '--color-suspense-errored': '#d57066', + // The styles below should be kept in sync with 'root.css' // They are repeated there because they're used by e.g. tooltips or context menus // which get rendered outside of the DOM subtree (where normal theme/styles are written). @@ -290,8 +296,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-timeline-text-dim-color': '#555b66', '--color-timeline-react-work-border': '#3d424a', '--color-timebar-background': '#1d2129', - '--color-timespan-background': '#62bc6a', - '--color-timespan-background-errored': '#d57066', '--color-search-match': 'yellow', '--color-search-match-current': '#f7923b', '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)', @@ -311,6 +315,14 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#ee1638', + '--color-suspense': '#61dafb', + '--color-transition': '#6a51b2', + '--color-suspense-server': '#62bc6a', + '--color-transition-server': '#3f7844', + '--color-suspense-other': '#f3ce49', + '--color-transition-other': '#917b2c', + '--color-suspense-errored': '#d57066', + // The styles below should be kept in sync with 'root.css' // They are repeated there because they're used by e.g. tooltips or context menus // which get rendered outside of the DOM subtree (where normal theme/styles are written). diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css index 413554008fa..6c56aec6899 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css @@ -128,13 +128,13 @@ .TimeBarSpan, .TimeBarSpanErrored { position: absolute; border-radius: 0.125rem; - background-color: var(--color-timespan-background); + background-color: var(--color-suspense); width: 100%; height: 100%; } .TimeBarSpanErrored { - background-color: var(--color-timespan-background-errored); + background-color: var(--color-suspense-errored); } .SmallHeader { diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 591d908735e..16d385d7523 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -1,12 +1,20 @@ .SuspenseRectsContainer { padding: .25rem; cursor: pointer; - outline: 1px solid var(--color-component-name); + outline-color: var(--color-transition); + outline-style: solid; + outline-width: 1px; border-radius: 0.25rem; + background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); +} + +.SuspenseRectsContainer:hover:not(:has(.SuspenseRectsBoundary:hover))[data-highlighted='false'] { + outline-width: 1px; } .SuspenseRectsContainer[data-highlighted='true'] { - background: var(--color-dimmest); + outline-style: solid; + outline-width: 4px; } .SuspenseRectsViewBox { @@ -15,6 +23,11 @@ .SuspenseRectsBoundary { pointer-events: all; + border-radius: 0.125rem; +} + +.SuspenseRectsBoundary[data-visible='false'] { + background-color: transparent; } .SuspenseRectsBoundaryChildren { @@ -28,15 +41,18 @@ .SuspenseRectsRect { box-shadow: var(--elevation-4); pointer-events: all; + cursor: pointer; + border-radius: 0.125rem; + background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 25%); + backdrop-filter: grayscale(100%); + transition: background-color 0.2s ease-in; + outline-color: var(--color-suspense); outline-style: solid; outline-width: 1px; - border-radius: 0.125rem; - cursor: pointer; } .SuspenseRectsScaledRect { position: absolute; - outline-color: var(--color-background-selected); } .SuspenseRectsScaledRect[data-visible='false'] { @@ -44,15 +60,28 @@ outline-width: 0; } -.SuspenseRectsScaledRect[data-suspended='true'] { - opacity: 0.3; +.SuspenseRectsBoundary[data-suspended='true'] { + opacity: 0.33; } /* highlight this boundary */ -.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect { - background-color: var(--color-background-hover); +.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect { + background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 50%); + transition: background-color 0.2s ease-out; +} + +.SuspenseRectsBoundary[data-selected='true'] { + box-shadow: var(--elevation-4); +} + +.SuspenseRectOutline { + outline-color: var(--color-suspense); + outline-style: solid; + outline-width: 4px; + border-radius: 0.125rem; + pointer-events: none; } -.SuspenseRectsRect[data-highlighted='true'] { - background-color: var(--color-selected-tree-highlight-active); +.SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect { + box-shadow: none; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index c2a13191650..4a45187d7fd 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -36,6 +36,7 @@ function ScaledRect({ rect, visible, suspended, + selected, adjust, ...props }: { @@ -43,6 +44,7 @@ function ScaledRect({ rect: Rect, visible: boolean, suspended: boolean, + selected?: boolean, adjust?: boolean, ... }): React$Node { @@ -58,6 +60,7 @@ function ScaledRect({ className={styles.SuspenseRectsScaledRect + ' ' + className} data-visible={visible} data-suspended={suspended} + data-selected={selected} style={{ // Shrink one pixel so that the bottom outline will line up with the top outline of the next one. width: adjust ? 'calc(' + width + ' - 1px)' : width, @@ -152,6 +155,7 @@ function SuspenseRects({ rect={boundingBox} className={styles.SuspenseRectsBoundary} visible={visible} + selected={selected} suspended={suspense.isSuspended}> <ViewBox.Provider value={boundingBox}> {visible && @@ -162,7 +166,6 @@ function SuspenseRects({ key={index} className={styles.SuspenseRectsRect} rect={rect} - data-highlighted={selected} adjust={true} onClick={handleClick} onDoubleClick={handleDoubleClick} @@ -182,6 +185,13 @@ function SuspenseRects({ })} </ScaledRect> )} + {selected ? ( + <ScaledRect + className={styles.SuspenseRectOutline} + rect={boundingBox} + adjust={true} + /> + ) : null} </ViewBox.Provider> </ScaledRect> ); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css index 932a23103f1..93740531a21 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css @@ -40,22 +40,22 @@ .SuspenseScrubberBead { flex: 1; height: 0.5rem; - background: var(--color-background-selected); border-radius: 0.5rem; - background: var(--color-selected-tree-highlight-active); - transition: all 0.3s ease-in-out; + background: color-mix(in srgb, var(--color-suspense) 10%, transparent); + transition: all 0.3s ease-in; } .SuspenseScrubberBeadSelected { height: 1rem; - background: var(--color-background-selected); + background: var(--color-suspense); } .SuspenseScrubberBeadTransition { - background: var(--color-component-name); + background: var(--color-transition); } .SuspenseScrubberStepHighlight > .SuspenseScrubberBead, .SuspenseScrubberStep:hover > .SuspenseScrubberBead { height: 0.75rem; + transition: all 0.3s ease-out; } From 724e7bfb40ad4f08b7f59f23db22e5fa7eda965a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:52:07 -0400 Subject: [PATCH 103/276] [DevTools] Repeat the "name" if there's no short description in groups (#34894) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It looks weird when the row is blank when there's no short description for the entry in a group. <img width="328" height="436" alt="Screenshot 2025-10-17 at 12 25 30 AM" src="https://github.com/user-attachments/assets/12f5c55f-a37f-4b6d-913e-f763cec6b211" /> --- .../devtools/views/Components/InspectedElementSuspendedBy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index fa2b6a95bed..9078d3c3bea 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -169,7 +169,7 @@ function SuspendedByRow({ type={isOpen ? 'expanded' : 'collapsed'} /> <span className={styles.CollapsableHeaderTitle}> - {skipName ? shortDescription : name} + {skipName && shortDescription !== '' ? shortDescription : name} </span> {skipName || shortDescription === '' ? null : ( <> From f970d5ff325b49d3e675c9e72025834ddc86879d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:52:26 -0400 Subject: [PATCH 104/276] [DevTools] Highlight the rect when the corresponding timeline bean is hovered (#34881) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34880. In #34861 I removed the highlight of the real view when hovering the timeline since it was disruptive to stepping through the visuals. This makes it so that when we hover the timeline we highlight the rect with the subtle hover effect added in #34880. We can now just use the one shared state for this and don't need the CSS psuedo-selectors. <img width="603" height="813" alt="Screenshot 2025-10-16 at 3 11 17 PM" src="https://github.com/user-attachments/assets/a018b5ce-dd4d-4e77-ad47-b4ea068f1976" /> --- .../views/SuspenseTab/SuspenseRects.css | 6 +++--- .../views/SuspenseTab/SuspenseRects.js | 19 +++++++++++++++---- .../views/SuspenseTab/SuspenseScrubber.css | 3 +-- .../views/SuspenseTab/SuspenseTimeline.js | 15 ++++++++++++--- 4 files changed, 31 insertions(+), 12 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 16d385d7523..69a4022307e 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -8,8 +8,8 @@ background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); } -.SuspenseRectsContainer:hover:not(:has(.SuspenseRectsBoundary:hover))[data-highlighted='false'] { - outline-width: 1px; +.SuspenseRectsContainer[data-hovered='true'] { + background-color: color-mix(in srgb, var(--color-transition) 15%, transparent); } .SuspenseRectsContainer[data-highlighted='true'] { @@ -65,7 +65,7 @@ } /* highlight this boundary */ -.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect { +.SuspenseRectsBoundary[data-hovered='true'] > .SuspenseRectsRect { background-color: color-mix(in srgb, var(--color-background) 50%, var(--color-suspense) 50%); transition: background-color 0.2s ease-out; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 4a45187d7fd..fcbb5f5f74e 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -37,6 +37,7 @@ function ScaledRect({ visible, suspended, selected, + hovered, adjust, ...props }: { @@ -45,6 +46,7 @@ function ScaledRect({ visible: boolean, suspended: boolean, selected?: boolean, + hovered?: boolean, adjust?: boolean, ... }): React$Node { @@ -61,6 +63,7 @@ function ScaledRect({ data-visible={visible} data-suspended={suspended} data-selected={selected} + data-hovered={hovered} style={{ // Shrink one pixel so that the bottom outline will line up with the top outline of the next one. width: adjust ? 'calc(' + width + ' - 1px)' : width, @@ -80,7 +83,9 @@ function SuspenseRects({ const store = useContext(StoreContext); const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); - const {uniqueSuspendersOnly} = useContext(SuspenseTreeStateContext); + const {uniqueSuspendersOnly, timeline, hoveredTimelineIndex} = useContext( + SuspenseTreeStateContext, + ); const {inspectedElementID} = useContext(TreeStateContext); @@ -148,6 +153,9 @@ function SuspenseRects({ // TODO: Use the nearest Suspense boundary const selected = inspectedElementID === suspenseID; + const hovered = + hoveredTimelineIndex > -1 && timeline[hoveredTimelineIndex] === suspenseID; + const boundingBox = getBoundingBox(suspense.rects); return ( @@ -156,7 +164,8 @@ function SuspenseRects({ className={styles.SuspenseRectsBoundary} visible={visible} selected={selected} - suspended={suspense.isSuspended}> + suspended={suspense.isSuspended} + hovered={hovered}> <ViewBox.Provider value={boundingBox}> {visible && suspense.rects !== null && @@ -317,7 +326,7 @@ function SuspenseRectsContainer(): React$Node { const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); // TODO: This relies on a full re-render of all children when the Suspense tree changes. - const {roots} = useContext(SuspenseTreeStateContext); + const {roots, hoveredTimelineIndex} = useContext(SuspenseTreeStateContext); // TODO: bbox does not consider uniqueSuspendersOnly filter const boundingBox = getDocumentBoundingRect(store, roots); @@ -361,13 +370,15 @@ function SuspenseRectsContainer(): React$Node { } const isRootSelected = roots.includes(inspectedElementID); + const isRootHovered = hoveredTimelineIndex === 0; return ( <div className={styles.SuspenseRectsContainer} onClick={handleClick} onDoubleClick={handleDoubleClick} - data-highlighted={isRootSelected}> + data-highlighted={isRootSelected} + data-hovered={isRootHovered}> <ViewBox.Provider value={boundingBox}> <div className={styles.SuspenseRectsViewBox} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css index 93740531a21..7ccb92b78bb 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css @@ -54,8 +54,7 @@ background: var(--color-transition); } -.SuspenseScrubberStepHighlight > .SuspenseScrubberBead, -.SuspenseScrubberStep:hover > .SuspenseScrubberBead { +.SuspenseScrubberStepHighlight > .SuspenseScrubberBead { height: 0.75rem; transition: all 0.3s ease-out; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index 4712397632c..af50a8c689c 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -53,10 +53,19 @@ function SuspenseTimelineInput() { switchSuspenseNode(timelineIndex); } - function handleHoverSegment(hoveredValue: number) { - // TODO: Consider highlighting the rect instead. + function handleHoverSegment(hoveredIndex: number) { + const nextSelectedSuspenseID = timeline[hoveredIndex]; + suspenseTreeDispatch({ + type: 'HOVER_TIMELINE_FOR_ID', + payload: nextSelectedSuspenseID, + }); + } + function handleUnhoverSegment() { + suspenseTreeDispatch({ + type: 'HOVER_TIMELINE_FOR_ID', + payload: -1, + }); } - function handleUnhoverSegment() {} function skipPrevious() { const nextSelectedSuspenseID = timeline[timelineIndex - 1]; From 423c44b88611afd9bf332fd1a91b5afdca8a48be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:53:30 -0400 Subject: [PATCH 105/276] [DevTools] Don't highlight the root rect if no roots has unique suspenders (#34885) Stacked on #34881. We don't paint suspense boundaries if there are no suspenders. This does the same with the root. The root is still selectable so you can confirm but there's no affordance drawing attention to click the root. This could happen if you don't use the built-ins of React to load things like scripts and css. It would never happen in something like Next.js where code and CSS is loaded through React-native like RSC. However, it could also happen in the Activity scoped case when all resources are always loaded early. --- .../views/SuspenseTab/SuspenseRects.css | 19 +++++++++------ .../views/SuspenseTab/SuspenseRects.js | 23 +++++++++++++++++-- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 69a4022307e..db0a84d8d87 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -1,22 +1,27 @@ .SuspenseRectsContainer { padding: .25rem; - cursor: pointer; - outline-color: var(--color-transition); + outline-color: transparent; outline-style: solid; outline-width: 1px; border-radius: 0.25rem; - background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); -} - -.SuspenseRectsContainer[data-hovered='true'] { - background-color: color-mix(in srgb, var(--color-transition) 15%, transparent); } .SuspenseRectsContainer[data-highlighted='true'] { + outline-color: var(--color-transition); outline-style: solid; outline-width: 4px; } +.SuspenseRectsRoot { + cursor: pointer; + outline-color: var(--color-transition); + background-color: color-mix(in srgb, var(--color-transition) 5%, transparent); +} + +.SuspenseRectsRoot[data-hovered='true'] { + background-color: color-mix(in srgb, var(--color-transition) 15%, transparent); +} + .SuspenseRectsViewBox { position: relative; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index fcbb5f5f74e..8b171ae31a4 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -326,7 +326,9 @@ function SuspenseRectsContainer(): React$Node { const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); // TODO: This relies on a full re-render of all children when the Suspense tree changes. - const {roots, hoveredTimelineIndex} = useContext(SuspenseTreeStateContext); + const {roots, hoveredTimelineIndex, uniqueSuspendersOnly} = useContext( + SuspenseTreeStateContext, + ); // TODO: bbox does not consider uniqueSuspendersOnly filter const boundingBox = getDocumentBoundingRect(store, roots); @@ -372,9 +374,26 @@ function SuspenseRectsContainer(): React$Node { const isRootSelected = roots.includes(inspectedElementID); const isRootHovered = hoveredTimelineIndex === 0; + let hasRootSuspenders = false; + if (!uniqueSuspendersOnly) { + hasRootSuspenders = true; + } else { + for (let i = 0; i < roots.length; i++) { + const rootID = roots[i]; + const root = store.getSuspenseByID(rootID); + if (root !== null && root.hasUniqueSuspenders) { + hasRootSuspenders = true; + break; + } + } + } + return ( <div - className={styles.SuspenseRectsContainer} + className={ + styles.SuspenseRectsContainer + + (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') + } onClick={handleClick} onDoubleClick={handleDoubleClick} data-highlighted={isRootSelected} From a0833446991a913349309861338da6ab68b637a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 18:54:53 -0400 Subject: [PATCH 106/276] [DevTools] Compute environment names for the timeline (#34892) Stacked on #34885. This refactors the timeline to store not just an id but a complex object for each step. This will later represent a group of boundaries. Each timeline step is assigned an environment name. We pick the last environment name (assumed to have resolved last) from the union of the parent and child environment names. I.e. a child step is considered to be blocked by the parent so if a child isn't blocked on any environment name it still gets marked as the parent's environment name. In a follow up, I'd like to reorder the document order timeline based on environment names to favor loading everything in one environment before the next. --- .../src/devtools/store.js | 119 +++++++++++------- .../views/SuspenseTab/SuspenseRects.js | 3 +- .../views/SuspenseTab/SuspenseTimeline.js | 10 +- .../views/SuspenseTab/SuspenseTreeContext.js | 79 +++++++----- .../src/frontend/types.js | 6 + packages/react-devtools-shared/src/utils.js | 15 +++ 6 files changed, 155 insertions(+), 77 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index f1aa61bfe9b..b75e30d9c47 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -34,6 +34,7 @@ import { shallowDiffers, utfDecodeStringWithRanges, parseElementDisplayNameFromBackend, + unionOfTwoArrays, } from '../utils'; import {localStorageGetItem, localStorageSetItem} from '../storage'; import {__DEBUG__} from '../constants'; @@ -51,6 +52,7 @@ import type { ComponentFilter, ElementType, SuspenseNode, + SuspenseTimelineStep, Rect, } from 'react-devtools-shared/src/frontend/types'; import type { @@ -895,13 +897,10 @@ export default class Store extends EventEmitter<{ */ getSuspendableDocumentOrderSuspense( uniqueSuspendersOnly: boolean, - ): $ReadOnlyArray<SuspenseNode['id']> { + ): $ReadOnlyArray<SuspenseTimelineStep> { + const target: Array<SuspenseTimelineStep> = []; const roots = this.roots; - if (roots.length === 0) { - return []; - } - - const list: SuspenseNode['id'][] = []; + let rootStep: null | SuspenseTimelineStep = null; for (let i = 0; i < roots.length; i++) { const rootID = roots[i]; const root = this.getElementByID(rootID); @@ -912,44 +911,76 @@ export default class Store extends EventEmitter<{ const suspense = this.getSuspenseByID(rootID); if (suspense !== null) { - if (list.length === 0) { - // start with an arbitrary root that will allow inspection of the Screen - list.push(suspense.id); - } - - const stack = [suspense]; - while (stack.length > 0) { - const current = stack.pop(); - if (current === undefined) { - continue; - } - // Ignore any suspense boundaries that has no visual representation as this is not - // part of the visible loading sequence. - // TODO: Consider making visible meta data and other side-effects get virtual rects. - const hasRects = - current.rects !== null && - current.rects.length > 0 && - current.rects.some(isNonZeroRect); - if ( - hasRects && - (!uniqueSuspendersOnly || current.hasUniqueSuspenders) && - // Roots are already included as part of the Screen - current.id !== rootID - ) { - list.push(current.id); - } - // Add children in reverse order to maintain document order - for (let j = current.children.length - 1; j >= 0; j--) { - const childSuspense = this.getSuspenseByID(current.children[j]); - if (childSuspense !== null) { - stack.push(childSuspense); - } - } + const environments = suspense.environments; + const environmentName = + environments.length > 0 + ? environments[environments.length - 1] + : null; + if (rootStep === null) { + // Arbitrarily use the first root as the root step id. + rootStep = { + id: suspense.id, + environment: environmentName, + }; + target.push(rootStep); + } else if (rootStep.environment === null) { + // If any root has an environment name, then let's use it. + rootStep.environment = environmentName; } + this.pushTimelineStepsInDocumentOrder( + suspense.children, + target, + uniqueSuspendersOnly, + environments, + ); } } - return list; + return target; + } + + pushTimelineStepsInDocumentOrder( + children: Array<SuspenseNode['id']>, + target: Array<SuspenseTimelineStep>, + uniqueSuspendersOnly: boolean, + parentEnvironments: Array<string>, + ): void { + for (let i = 0; i < children.length; i++) { + const child = this.getSuspenseByID(children[i]); + if (child === null) { + continue; + } + // Ignore any suspense boundaries that has no visual representation as this is not + // part of the visible loading sequence. + // TODO: Consider making visible meta data and other side-effects get virtual rects. + const hasRects = + child.rects !== null && + child.rects.length > 0 && + child.rects.some(isNonZeroRect); + const childEnvironments = child.environments; + // Since children are blocked on the parent, they're also blocked by the parent environments. + // Only if we discover a novel environment do we add that and it becomes the name we use. + const unionEnvironments = unionOfTwoArrays( + parentEnvironments, + childEnvironments, + ); + const environmentName = + unionEnvironments.length > 0 + ? unionEnvironments[unionEnvironments.length - 1] + : null; + if (hasRects && (!uniqueSuspendersOnly || child.hasUniqueSuspenders)) { + target.push({ + id: child.id, + environment: environmentName, + }); + } + this.pushTimelineStepsInDocumentOrder( + child.children, + target, + uniqueSuspendersOnly, + unionEnvironments, + ); + } } getRendererIDForElement(id: number): number | null { @@ -1627,6 +1658,7 @@ export default class Store extends EventEmitter<{ rects, hasUniqueSuspenders: false, isSuspended: isSuspended, + environments: [], }); hasSuspenseTreeChanged = true; @@ -1812,7 +1844,10 @@ export default class Store extends EventEmitter<{ envIndex++ ) { const environmentNameStringID = operations[i++]; - environmentNames.push(stringTable[environmentNameStringID]); + const environmentName = stringTable[environmentNameStringID]; + if (environmentName != null) { + environmentNames.push(environmentName); + } } const suspense = this._idToSuspense.get(id); @@ -1836,7 +1871,7 @@ export default class Store extends EventEmitter<{ suspense.hasUniqueSuspenders = hasUniqueSuspenders; suspense.isSuspended = isSuspended; - // TODO: Recompute the environment names. + suspense.environments = environmentNames; } hasSuspenseTreeChanged = true; diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 8b171ae31a4..c19360567ae 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -154,7 +154,8 @@ function SuspenseRects({ const selected = inspectedElementID === suspenseID; const hovered = - hoveredTimelineIndex > -1 && timeline[hoveredTimelineIndex] === suspenseID; + hoveredTimelineIndex > -1 && + timeline[hoveredTimelineIndex].id === suspenseID; const boundingBox = getBoundingBox(suspense.rects); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index af50a8c689c..f230cfb549a 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -34,7 +34,7 @@ function SuspenseTimelineInput() { const max = timeline.length > 0 ? timeline.length - 1 : 0; function switchSuspenseNode(nextTimelineIndex: number) { - const nextSelectedSuspenseID = timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = timeline[nextTimelineIndex].id; treeDispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: nextSelectedSuspenseID, @@ -54,7 +54,7 @@ function SuspenseTimelineInput() { } function handleHoverSegment(hoveredIndex: number) { - const nextSelectedSuspenseID = timeline[hoveredIndex]; + const nextSelectedSuspenseID = timeline[hoveredIndex].id; suspenseTreeDispatch({ type: 'HOVER_TIMELINE_FOR_ID', payload: nextSelectedSuspenseID, @@ -68,7 +68,7 @@ function SuspenseTimelineInput() { } function skipPrevious() { - const nextSelectedSuspenseID = timeline[timelineIndex - 1]; + const nextSelectedSuspenseID = timeline[timelineIndex - 1].id; treeDispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: nextSelectedSuspenseID, @@ -80,7 +80,7 @@ function SuspenseTimelineInput() { } function skipForward() { - const nextSelectedSuspenseID = timeline[timelineIndex + 1]; + const nextSelectedSuspenseID = timeline[timelineIndex + 1].id; treeDispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: nextSelectedSuspenseID, @@ -106,7 +106,7 @@ function SuspenseTimelineInput() { // anything suspended in the root. The step after that should have one less // thing suspended. I.e. the first suspense boundary should be unsuspended // when it's selected. This also lets you show everything in the last step. - const suspendedSet = timeline.slice(timelineIndex + 1); + const suspendedSet = timeline.slice(timelineIndex + 1).map(step => step.id); bridge.send('overrideSuspenseMilestone', { suspendedSet, }); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js index 484a336c349..b1ba98acfb5 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js @@ -7,7 +7,10 @@ * @flow */ import type {ReactContext} from 'shared/ReactTypes'; -import type {SuspenseNode} from 'react-devtools-shared/src/frontend/types'; +import type { + SuspenseNode, + SuspenseTimelineStep, +} from 'react-devtools-shared/src/frontend/types'; import type Store from '../../store'; import * as React from 'react'; @@ -25,7 +28,7 @@ export type SuspenseTreeState = { lineage: $ReadOnlyArray<SuspenseNode['id']> | null, roots: $ReadOnlyArray<SuspenseNode['id']>, selectedSuspenseID: SuspenseNode['id'] | null, - timeline: $ReadOnlyArray<SuspenseNode['id']>, + timeline: $ReadOnlyArray<SuspenseTimelineStep>, timelineIndex: number | -1, hoveredTimelineIndex: number | -1, uniqueSuspendersOnly: boolean, @@ -49,7 +52,7 @@ type ACTION_SELECT_SUSPENSE_BY_ID = { type ACTION_SET_SUSPENSE_TIMELINE = { type: 'SET_SUSPENSE_TIMELINE', payload: [ - $ReadOnlyArray<SuspenseNode['id']>, + $ReadOnlyArray<SuspenseTimelineStep>, // The next Suspense ID to select in the timeline SuspenseNode['id'] | null, // Whether this timeline includes only unique suspenders @@ -111,7 +114,7 @@ function getInitialState(store: Store): SuspenseTreeState { store.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly); const timelineIndex = timeline.length - 1; const selectedSuspenseID = - timelineIndex === -1 ? null : timeline[timelineIndex]; + timelineIndex === -1 ? null : timeline[timelineIndex].id; const lineage = selectedSuspenseID !== null ? store.getSuspenseLineage(selectedSuspenseID) @@ -164,16 +167,18 @@ function SuspenseTreeContextController({children}: Props): React.Node { selectedSuspenseID = null; } - let selectedTimelineID = - state.timeline === null + const selectedTimelineStep = + state.timeline === null || state.timelineIndex === -1 ? null : state.timeline[state.timelineIndex]; - while ( - selectedTimelineID !== null && - removedIDs.has(selectedTimelineID) - ) { - // $FlowExpectedError[incompatible-type] - selectedTimelineID = removedIDs.get(selectedTimelineID); + let selectedTimelineID: null | number = null; + if (selectedTimelineStep !== null) { + selectedTimelineID = selectedTimelineStep.id; + // $FlowFixMe + while (removedIDs.has(selectedTimelineID)) { + // $FlowFixMe + selectedTimelineID = removedIDs.get(selectedTimelineID); + } } // TODO: Handle different timeline modes (e.g. random order) @@ -181,20 +186,25 @@ function SuspenseTreeContextController({children}: Props): React.Node { state.uniqueSuspendersOnly, ); - let nextTimelineIndex = - selectedTimelineID === null || nextTimeline.length === 0 - ? -1 - : nextTimeline.indexOf(selectedTimelineID); + let nextTimelineIndex = -1; + if (selectedTimelineID !== null && nextTimeline.length !== 0) { + for (let i = 0; i < nextTimeline.length; i++) { + if (nextTimeline[i].id === selectedTimelineID) { + nextTimelineIndex = i; + break; + } + } + } if ( nextTimeline.length > 0 && (nextTimelineIndex === -1 || state.autoSelect) ) { nextTimelineIndex = nextTimeline.length - 1; - selectedSuspenseID = nextTimeline[nextTimelineIndex]; + selectedSuspenseID = nextTimeline[nextTimelineIndex].id; } if (selectedSuspenseID === null && nextTimeline.length > 0) { - selectedSuspenseID = nextTimeline[nextTimeline.length - 1]; + selectedSuspenseID = nextTimeline[nextTimeline.length - 1].id; } const nextLineage = @@ -256,12 +266,12 @@ function SuspenseTreeContextController({children}: Props): React.Node { nextMilestoneIndex = nextTimeline.indexOf(previousMilestoneID); if (nextMilestoneIndex === -1 && nextTimeline.length > 0) { nextMilestoneIndex = nextTimeline.length - 1; - nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex]; + nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex].id; nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID); } } else if (nextRootID !== null) { nextMilestoneIndex = nextTimeline.length - 1; - nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex]; + nextSelectedSuspenseID = nextTimeline[nextMilestoneIndex].id; nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID); } @@ -276,7 +286,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { } case 'SUSPENSE_SET_TIMELINE_INDEX': { const nextTimelineIndex = action.payload; - const nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; const nextLineage = store.getSuspenseLineage( nextSelectedSuspenseID, ); @@ -301,7 +311,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { ) { return state; } - const nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; const nextLineage = store.getSuspenseLineage( nextSelectedSuspenseID, ); @@ -329,7 +339,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { ) { // If we're restarting at the end. Then loop around and start again from the beginning. nextTimelineIndex = 0; - nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID); } @@ -352,7 +362,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { if (nextTimelineIndex > state.timeline.length - 1) { return state; } - const nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; const nextLineage = store.getSuspenseLineage( nextSelectedSuspenseID, ); @@ -369,8 +379,14 @@ function SuspenseTreeContextController({children}: Props): React.Node { } case 'TOGGLE_TIMELINE_FOR_ID': { const suspenseID = action.payload; - const timelineIndexForSuspenseID = - state.timeline.indexOf(suspenseID); + + let timelineIndexForSuspenseID = -1; + for (let i = 0; i < state.timeline.length; i++) { + if (state.timeline[i].id === suspenseID) { + timelineIndexForSuspenseID = i; + break; + } + } if (timelineIndexForSuspenseID === -1) { // This boundary is no longer in the timeline. return state; @@ -387,7 +403,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { timelineIndexForSuspenseID : // Otherwise, if we're currently showing it, jump to right before to hide it. timelineIndexForSuspenseID - 1; - const nextSelectedSuspenseID = state.timeline[nextTimelineIndex]; + const nextSelectedSuspenseID = state.timeline[nextTimelineIndex].id; const nextLineage = store.getSuspenseLineage( nextSelectedSuspenseID, ); @@ -403,8 +419,13 @@ function SuspenseTreeContextController({children}: Props): React.Node { } case 'HOVER_TIMELINE_FOR_ID': { const suspenseID = action.payload; - const timelineIndexForSuspenseID = - state.timeline.indexOf(suspenseID); + let timelineIndexForSuspenseID = -1; + for (let i = 0; i < state.timeline.length; i++) { + if (state.timeline[i].id === suspenseID) { + timelineIndexForSuspenseID = i; + break; + } + } return { ...state, hoveredTimelineIndex: timelineIndexForSuspenseID, diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js index 2a012ce33a1..4eed49e6bac 100644 --- a/packages/react-devtools-shared/src/frontend/types.js +++ b/packages/react-devtools-shared/src/frontend/types.js @@ -193,6 +193,11 @@ export type Rect = { height: number, }; +export type SuspenseTimelineStep = { + id: SuspenseNode['id'], // TODO: Will become a group. + environment: null | string, +}; + export type SuspenseNode = { id: Element['id'], parentID: SuspenseNode['id'] | 0, @@ -201,6 +206,7 @@ export type SuspenseNode = { rects: null | Array<Rect>, hasUniqueSuspenders: boolean, isSuspended: boolean, + environments: Array<string>, }; // Serialized version of ReactIOInfo diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 29ff6d566bd..6d31888cd9d 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -1305,3 +1305,18 @@ export function onReloadAndProfileFlagsReset(): void { sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY); sessionStorageRemoveItem(SESSION_STORAGE_RECORD_TIMELINE_KEY); } + +export function unionOfTwoArrays<T>(a: Array<T>, b: Array<T>): Array<T> { + let result = a; + for (let i = 0; i < b.length; i++) { + const value = b[i]; + if (a.indexOf(value) === -1) { + if (result === a) { + // Lazily copy + result = a.slice(0); + } + result.push(value); + } + } + return result; +} From 3a669170e96a63a4ce3a44f78401fb9f4f803510 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 17 Oct 2025 19:03:15 -0400 Subject: [PATCH 107/276] [DevTools] Assign a different color and label based on environment (#34893) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34892. In the timeline scrubber each timeline entry gets a label and color assigned based on the environment computed for that step. In the rects, we find the timeline step that this boundary is part of and use that environment to assign a color. This is slightly different than picking from the boundary itself since it takes into account parent boundaries. In the "suspended by" section we color each entry individually based on the environment that spawned the I/O. <img width="790" height="813" alt="Screenshot 2025-10-17 at 12 18 56 AM" src="https://github.com/user-attachments/assets/c902b1fb-0992-4e24-8e94-a97ca8507551" /> --- .../src/devtools/constants.js | 8 ++--- .../Components/InspectedElementSuspendedBy.js | 23 ++++++++++++-- .../SuspenseTab/SuspenseEnvironmentColors.css | 14 +++++++++ .../SuspenseTab/SuspenseEnvironmentColors.js | 20 +++++++++++++ .../views/SuspenseTab/SuspenseRects.js | 28 +++++++++++++---- .../views/SuspenseTab/SuspenseScrubber.js | 30 ++++++++++++------- .../views/SuspenseTab/SuspenseTimeline.js | 1 + 7 files changed, 102 insertions(+), 22 deletions(-) create mode 100644 packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css create mode 100644 packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js index 5c90501d70f..d093a798bcd 100644 --- a/packages/react-devtools-shared/src/devtools/constants.js +++ b/packages/react-devtools-shared/src/devtools/constants.js @@ -154,8 +154,8 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#fd4d69', - '--color-suspense': '#0088fa', - '--color-transition': '#6a51b2', + '--color-suspense-default': '#0088fa', + '--color-transition-default': '#6a51b2', '--color-suspense-server': '#62bc6a', '--color-transition-server': '#3f7844', '--color-suspense-other': '#f3ce49', @@ -315,8 +315,8 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-warning-text-color': '#ffffff', '--color-warning-text-color-inverted': '#ee1638', - '--color-suspense': '#61dafb', - '--color-transition': '#6a51b2', + '--color-suspense-default': '#61dafb', + '--color-transition-default': '#6a51b2', '--color-suspense-server': '#62bc6a', '--color-transition-server': '#3f7844', '--color-suspense-other': '#f3ce49', diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index 9078d3c3bea..78c137deaf3 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -22,6 +22,8 @@ import OwnerView from './OwnerView'; import {meta} from '../../../hydration'; import useInferredName from '../useInferredName'; +import {getClassNameForEnvironment} from '../SuspenseTab/SuspenseEnvironmentColors.js'; + import type { InspectedElement, SerializedAsyncInfo, @@ -181,7 +183,12 @@ function SuspendedByRow({ </> )} <div className={styles.CollapsableHeaderFiller} /> - <div className={styles.TimeBarContainer}> + <div + className={ + styles.TimeBarContainer + + ' ' + + getClassNameForEnvironment(ioInfo.env) + }> <div className={ !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored @@ -341,6 +348,7 @@ type GroupProps = { inspectedElement: InspectedElement, store: Store, name: string, + environment: null | string, suspendedBy: Array<{ index: number, value: SerializedAsyncInfo, @@ -355,6 +363,7 @@ function SuspendedByGroup({ inspectedElement, store, name, + environment, suspendedBy, minTime, maxTime, @@ -407,7 +416,12 @@ function SuspendedByGroup({ <span className={styles.CollapsableHeaderTitle}>{pluralizedName}</span> <div className={styles.CollapsableHeaderFiller} /> {isOpen ? null : ( - <div className={styles.TimeBarContainer}> + <div + className={ + styles.TimeBarContainer + + ' ' + + getClassNameForEnvironment(environment) + }> <div className={ !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored @@ -502,17 +516,21 @@ export default function InspectedElementSuspendedBy({ const groups = []; let currentGroup = null; let currentGroupName = null; + let currentGroupEnv = null; for (let i = 0; i < sortedSuspendedBy.length; i++) { const entry = sortedSuspendedBy[i]; const name = entry.value.awaited.name; + const env = entry.value.awaited.env; if ( currentGroupName !== name || + currentGroupEnv !== env || !name || name === 'Promise' || currentGroup === null ) { // Create a new group. currentGroupName = name; + currentGroupEnv = env; currentGroup = []; groups.push(currentGroup); } @@ -591,6 +609,7 @@ export default function InspectedElementSuspendedBy({ <SuspendedByGroup key={entries[0].index} name={entries[0].value.awaited.name} + environment={entries[0].value.awaited.env} suspendedBy={entries} bridge={bridge} element={element} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css new file mode 100644 index 00000000000..a56bc80ee9b --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.css @@ -0,0 +1,14 @@ +.SuspenseEnvironmentDefault { + --color-suspense: var(--color-suspense-default); + --color-transition: var(--color-transition-default); +} + +.SuspenseEnvironmentServer { + --color-suspense: var(--color-suspense-server); + --color-transition: var(--color-transition-server); +} + +.SuspenseEnvironmentOther { + --color-suspense: var(--color-suspense-other); + --color-transition: var(--color-transition-other); +} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js new file mode 100644 index 00000000000..579a9093acb --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseEnvironmentColors.js @@ -0,0 +1,20 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import styles from './SuspenseEnvironmentColors.css'; + +export function getClassNameForEnvironment(environment: null | string): string { + if (environment === null) { + return styles.SuspenseEnvironmentDefault; + } + if (environment === 'Server') { + return styles.SuspenseEnvironmentServer; + } + return styles.SuspenseEnvironmentOther; +} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index c19360567ae..e6beca7c229 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -30,6 +30,7 @@ import { SuspenseTreeStateContext, SuspenseTreeDispatcherContext, } from './SuspenseTreeContext'; +import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js'; function ScaledRect({ className, @@ -157,12 +158,25 @@ function SuspenseRects({ hoveredTimelineIndex > -1 && timeline[hoveredTimelineIndex].id === suspenseID; + let environment: null | string = null; + for (let i = 0; i < timeline.length; i++) { + const timelineStep = timeline[i]; + if (timelineStep.id === suspenseID) { + environment = timelineStep.environment; + break; + } + } + const boundingBox = getBoundingBox(suspense.rects); return ( <ScaledRect rect={boundingBox} - className={styles.SuspenseRectsBoundary} + className={ + styles.SuspenseRectsBoundary + + ' ' + + getClassNameForEnvironment(environment) + } visible={visible} selected={selected} suspended={suspense.isSuspended} @@ -327,9 +341,8 @@ function SuspenseRectsContainer(): React$Node { const treeDispatch = useContext(TreeDispatcherContext); const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext); // TODO: This relies on a full re-render of all children when the Suspense tree changes. - const {roots, hoveredTimelineIndex, uniqueSuspendersOnly} = useContext( - SuspenseTreeStateContext, - ); + const {roots, timeline, hoveredTimelineIndex, uniqueSuspendersOnly} = + useContext(SuspenseTreeStateContext); // TODO: bbox does not consider uniqueSuspendersOnly filter const boundingBox = getDocumentBoundingRect(store, roots); @@ -389,11 +402,16 @@ function SuspenseRectsContainer(): React$Node { } } + const rootEnvironment = + timeline.length === 0 ? null : timeline[0].environment; + return ( <div className={ styles.SuspenseRectsContainer + - (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') + (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') + + ' ' + + getClassNameForEnvironment(rootEnvironment) } onClick={handleClick} onDoubleClick={handleDoubleClick} diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js index f1998aff4b1..2c7e1bc1cdd 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js @@ -7,6 +7,8 @@ * @flow */ +import type {SuspenseTimelineStep} from 'react-devtools-shared/src/frontend/types'; + import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent'; import * as React from 'react'; @@ -14,11 +16,14 @@ import {useRef} from 'react'; import styles from './SuspenseScrubber.css'; +import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js'; + import Tooltip from '../Components/reach-ui/tooltip'; export default function SuspenseScrubber({ min, max, + timeline, value, highlight, onBlur, @@ -29,6 +34,7 @@ export default function SuspenseScrubber({ }: { min: number, max: number, + timeline: $ReadOnlyArray<SuspenseTimelineStep>, value: number, highlight: number, onBlur?: () => void, @@ -54,17 +60,18 @@ export default function SuspenseScrubber({ } const steps = []; for (let index = min; index <= max; index++) { + const environment = timeline[index].environment; + const label = + index === min + ? // The first step in the timeline is always a Transition (Initial Paint). + 'Initial Paint' + + (environment === null ? '' : ' (' + environment + ')') + : // TODO: Consider adding the name of this specific boundary if this step has only one. + environment === null + ? 'Suspense' + : environment; steps.push( - <Tooltip - key={index} - label={ - index === min - ? // The first step in the timeline is always a Transition (Initial Paint). - // TODO: Support multiple environments. - 'Initial Paint' - : // TODO: Consider adding the name of this specific boundary if this step has only one. - 'Suspense' - }> + <Tooltip key={index} label={label}> <div className={ styles.SuspenseScrubberStep + @@ -79,9 +86,10 @@ export default function SuspenseScrubber({ styles.SuspenseScrubberBead + (index === min ? // The first step in the timeline is always a Transition (Initial Paint). - // TODO: Support multiple environments. ' ' + styles.SuspenseScrubberBeadTransition : '') + + ' ' + + getClassNameForEnvironment(environment) + (index <= value ? ' ' + styles.SuspenseScrubberBeadSelected : '') } /> diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js index f230cfb549a..89f349ae6ea 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js @@ -173,6 +173,7 @@ function SuspenseTimelineInput() { <SuspenseScrubber min={min} max={max} + timeline={timeline} value={timelineIndex} highlight={hoveredTimelineIndex} onChange={handleChange} From 40c7a7f6cac62bd6721328524cc787475ce026eb Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Sat, 18 Oct 2025 12:54:05 +0200 Subject: [PATCH 108/276] [DevTools] Use same Suspense naming heuristics when reconnecting (#34898) --- .../src/__tests__/store-test.js | 57 +++++++++++++++++++ .../src/backend/fiber/renderer.js | 2 +- .../src/devtools/store.js | 11 +--- .../src/devtools/utils.js | 6 +- .../views/SuspenseTab/SuspenseBreadcrumbs.js | 2 +- .../views/SuspenseTab/SuspenseRects.js | 2 +- 6 files changed, 64 insertions(+), 16 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index c02d8130c30..07e82040497 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -3243,4 +3243,61 @@ describe('Store', () => { <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}> `); }); + + // @reactVersion >= 19.0 + it('guesses a Suspense name based on the owner', async () => { + let resolve; + const promise = new Promise(_resolve => { + resolve = _resolve; + }); + function Inner() { + return ( + <React.Suspense fallback={<p>Loading inner</p>}> + <p>{promise}</p> + </React.Suspense> + ); + } + + function Outer({children}) { + return ( + <React.Suspense fallback={<p>Loading outer</p>}> + <p>{promise}</p> + {children} + </React.Suspense> + ); + } + + await actAsync(() => { + render( + <Outer> + <Inner /> + </Outer>, + ); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <Outer> + <Suspense> + [suspense-root] rects={[{x:1,y:2,width:13,height:1}]} + <Suspense name="Outer" rects={null}> + `); + + console.log('...........................'); + + await actAsync(() => { + resolve('loaded'); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <Outer> + ▾ <Suspense> + ▾ <Inner> + <Suspense> + [suspense-root] rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]} + <Suspense name="Outer" rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}> + <Suspense name="Inner" rects={[{x:1,y:2,width:6,height:1}]}> + `); + }); }); diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index de178909b29..4dd4a619cb4 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2664,7 +2664,7 @@ export function attach( const fiber = fiberInstance.data; const props = fiber.memoizedProps; - // TODO: Compute a fallback name based on Owner, key etc. + // The frontend will guess a name based on heuristics (e.g. owner) if no explicit name is given. const name = fiber.tag !== SuspenseComponent || props === null ? null diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index b75e30d9c47..aaf0584a4c5 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1646,10 +1646,6 @@ export default class Store extends EventEmitter<{ parentSuspense.children.push(id); } - if (name === null) { - name = 'Unknown'; - } - this._idToSuspense.set(id, { id, parentID, @@ -2170,13 +2166,12 @@ export default class Store extends EventEmitter<{ throw error; } - _guessSuspenseName(element: Element): string { + _guessSuspenseName(element: Element): string | null { const owner = this._idToElement.get(element.ownerID); - let name = 'Unknown'; if (owner !== undefined && owner.displayName !== null) { - name = owner.displayName; + return owner.displayName; } - return name; + return null; } } diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js index d5078679f44..640f0d19b57 100644 --- a/packages/react-devtools-shared/src/devtools/utils.js +++ b/packages/react-devtools-shared/src/devtools/utils.js @@ -63,11 +63,7 @@ function printRects(rects: SuspenseNode['rects']): string { } function printSuspense(suspense: SuspenseNode): string { - let name = ''; - if (suspense.name !== null) { - name = ` name="${suspense.name}"`; - } - + const name = ` name="${suspense.name || 'Unknown'}"`; const printedRects = printRects(suspense.rects); return `<Suspense${name}${printedRects}>`; diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js index d7112ec7d3a..b27e0f59875 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js @@ -72,7 +72,7 @@ export default function SuspenseBreadcrumbs(): React$Node { className={styles.SuspenseBreadcrumbsButton} onClick={handleClick.bind(null, id)} type="button"> - {node === null ? 'Unknown' : node.name} + {node === null ? 'Unknown' : node.name || 'Unknown'} </button> </li> ); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index e6beca7c229..67a6bf27739 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -196,7 +196,7 @@ function SuspenseRects({ onPointerOver={handlePointerOver} onPointerLeave={handlePointerLeave} // Reach-UI tooltip will go out of bounds of parent scroll container. - title={suspense.name} + title={suspense.name || 'Unknown'} /> ); })} From ec7d9a7249e84e841fbe1e4c22e1be2c0c15dae4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 11:56:25 -0700 Subject: [PATCH 109/276] Resolve the .default export of a React.lazy as the canonical value (#34906) For debug purposes this is the value that the `React.lazy` resolves to. It also lets us look at that value for descriptions like its name. --- packages/react/src/ReactLazy.js | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js index 55b1690b7ca..47f37afbae2 100644 --- a/packages/react/src/ReactLazy.js +++ b/packages/react/src/ReactLazy.js @@ -20,6 +20,8 @@ import {enableAsyncDebugInfo} from 'shared/ReactFeatureFlags'; import {REACT_LAZY_TYPE} from 'shared/ReactSymbols'; +import noop from 'shared/noop'; + const Uninitialized = -1; const Pending = 0; const Resolved = 1; @@ -67,12 +69,20 @@ export type LazyComponent<T, P> = { function lazyInitializer<T>(payload: Payload<T>): T { if (payload._status === Uninitialized) { + let resolveDebugValue: (void | T) => void = (null: any); + let rejectDebugValue: mixed => void = (null: any); if (__DEV__ && enableAsyncDebugInfo) { const ioInfo = payload._ioInfo; if (ioInfo != null) { // Mark when we first kicked off the lazy request. // $FlowFixMe[cannot-write] ioInfo.start = ioInfo.end = performance.now(); + // Stash a Promise for introspection of the value later. + // $FlowFixMe[cannot-write] + ioInfo.value = new Promise((resolve, reject) => { + resolveDebugValue = resolve; + rejectDebugValue = reject; + }); } } const ctor = payload._result; @@ -92,12 +102,20 @@ function lazyInitializer<T>(payload: Payload<T>): T { const resolved: ResolvedPayload<T> = (payload: any); resolved._status = Resolved; resolved._result = moduleObject; - if (__DEV__) { + if (__DEV__ && enableAsyncDebugInfo) { const ioInfo = payload._ioInfo; if (ioInfo != null) { // Mark the end time of when we resolved. // $FlowFixMe[cannot-write] ioInfo.end = performance.now(); + // Surface the default export as the resolved "value" for debug purposes. + const debugValue = + moduleObject == null ? undefined : moduleObject.default; + resolveDebugValue(debugValue); + // $FlowFixMe + ioInfo.value.status = 'fulfilled'; + // $FlowFixMe + ioInfo.value.value = debugValue; } // Make the thenable introspectable if (thenable.status === undefined) { @@ -124,6 +142,14 @@ function lazyInitializer<T>(payload: Payload<T>): T { // Mark the end time of when we rejected. // $FlowFixMe[cannot-write] ioInfo.end = performance.now(); + // Hide unhandled rejections. + // $FlowFixMe + ioInfo.value.then(noop, noop); + rejectDebugValue(error); + // $FlowFixMe + ioInfo.value.status = 'rejected'; + // $FlowFixMe + ioInfo.value.reason = error; } // Make the thenable introspectable if (thenable.status === undefined) { @@ -139,9 +165,6 @@ function lazyInitializer<T>(payload: Payload<T>): T { if (__DEV__ && enableAsyncDebugInfo) { const ioInfo = payload._ioInfo; if (ioInfo != null) { - // Stash the thenable for introspection of the value later. - // $FlowFixMe[cannot-write] - ioInfo.value = thenable; const displayName = thenable.displayName; if (typeof displayName === 'string') { // $FlowFixMe[cannot-write] From bf11d2fb2f01174974b7e1fa5b1c01d34936724b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 11:56:40 -0700 Subject: [PATCH 110/276] [DevTools] Infer name from stack if it's the generic "lazy" name (#34907) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stacked on #34906. Infer name from stack if it's the generic "lazy" name. It might be wrapped in an abstraction. E.g. `next/dynamic`. Also use the function name as a description of a resolved function value. <img width="310" height="166" alt="Screenshot 2025-10-18 at 10 42 05 AM" src="https://github.com/user-attachments/assets/c63170b9-2b19-4f30-be7a-6429bb3ef3d9" /> --- .../react-devtools-shared/src/devtools/views/useInferredName.js | 2 +- packages/shared/ReactIODescription.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/useInferredName.js b/packages/react-devtools-shared/src/devtools/views/useInferredName.js index f0822e126d7..2c93ded4691 100644 --- a/packages/react-devtools-shared/src/devtools/views/useInferredName.js +++ b/packages/react-devtools-shared/src/devtools/views/useInferredName.js @@ -16,7 +16,7 @@ export default function useInferredName( const fetchFileWithCaching = useContext(FetchFileWithCachingContext); const name = asyncInfo.awaited.name; let inferNameFromStack = null; - if (!name || name === 'Promise') { + if (!name || name === 'Promise' || name === 'lazy') { // If all we have is a generic name, we can try to infer a better name from // the stack. We only do this if the stack has more than one frame since // otherwise it's likely to just be the name of the component which isn't better. diff --git a/packages/shared/ReactIODescription.js b/packages/shared/ReactIODescription.js index e1a0fce2c4d..6d7bf648fc8 100644 --- a/packages/shared/ReactIODescription.js +++ b/packages/shared/ReactIODescription.js @@ -13,6 +13,8 @@ export function getIODescription(value: mixed): string { } try { switch (typeof value) { + case 'function': + return value.name || ''; case 'object': // Test the object for a bunch of common property names that are useful identifiers. // While we only have the return value here, it should ideally be a name that From 58bdc0bb967098f14562cd76af0668f2056459a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 11:56:56 -0700 Subject: [PATCH 111/276] [Flight] Ignore bound-anonymous-fn resources as they're not considered I/O (#34911) When you create a snapshot from an AsyncLocalStorage in Node.js, that creates a new bound AsyncResource which everything runs inside of. https://github.com/nodejs/node/blob/3437e1c4bd529e51d96ea581b6435bbeb77ef524/lib/internal/async_local_storage/async_hooks.js#L61-L67 This resource is itself tracked by our async debug tracking as I/O. We can't really distinguish these in general from other AsyncResources which are I/O. However, by default they're given the name `"bound-anonymous-fn"` if you pass it an anonymous function or in the case of a snapshot, that's built-in: https://github.com/nodejs/node/blob/3437e1c4bd529e51d96ea581b6435bbeb77ef524/lib/async_hooks.js#L262-L263 We can at least assume that these are non-I/O. If you want to ensure that a bound resource is not considered I/O, you can ensure your function isn't assigned a name or give it this explicit name. The other issue here is that, the sequencing here is that we track the callsite of the `.snapshot()` or `.bind()` call as the trigger. So if that was outside of render for example, then it would be considered non-I/O. However, this might miss stuff if you resolve promises inside the `.run()` of the snapshot if the `.run()` call itself was spawned by I/O which should be tracked. Time will tell if those patterns appear. However, in cases like nested renders (e.g. Next.js's "use cache") then restoring it as if it was outside the parent render is what you do want. --- .../src/ReactFlightServerConfigDebugNode.js | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/react-server/src/ReactFlightServerConfigDebugNode.js b/packages/react-server/src/ReactFlightServerConfigDebugNode.js index a78297ad83f..e79c19cc73a 100644 --- a/packages/react-server/src/ReactFlightServerConfigDebugNode.js +++ b/packages/react-server/src/ReactFlightServerConfigDebugNode.js @@ -142,10 +142,28 @@ export function initAsyncDebugInfo(): void { }: UnresolvedPromiseNode); } } else if ( - type !== 'Microtask' && - type !== 'TickObject' && - type !== 'Immediate' + // bound-anonymous-fn is the default name for snapshots and .bind() without a name. + // This isn't I/O by itself but likely just a continuation. If the bound function + // has a name, we might treat it as I/O but we can't tell the difference. + type === 'bound-anonymous-fn' || + // queueMicroTask, process.nextTick and setImmediate aren't considered new I/O + // for our purposes but just continuation of existing I/O. + type === 'Microtask' || + type === 'TickObject' || + type === 'Immediate' ) { + // Treat the trigger as the node to carry along the sequence. + // For "bound-anonymous-fn" this will be the callsite of the .bind() which may not + // be the best if the callsite of the .run() call is within I/O which should be + // tracked. It might be better to track the execution context of "before()" as the + // execution context for anything spawned from within the run(). Basically as if + // it wasn't an AsyncResource at all. + if (trigger === undefined) { + return; + } + node = trigger; + } else { + // New I/O if (trigger === undefined) { // We have begun a new I/O sequence. const owner = resolveOwner(); @@ -181,13 +199,6 @@ export function initAsyncDebugInfo(): void { // Otherwise, this is just a continuation of the same I/O sequence. node = trigger; } - } else { - // Ignore nextTick and microtasks as they're not considered I/O operations. - // we just treat the trigger as the node to carry along the sequence. - if (trigger === undefined) { - return; - } - node = trigger; } pendingOperations.set(asyncId, node); }, From 2cfb221937eac48209d01d5dda5664de473b1953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 13:38:33 -0700 Subject: [PATCH 112/276] [Flight] Allow passing DEV only startTime as an option (#34912) When you use the `createFromFetch` API we assume that the start time of the request is the same time as when you call `createFromFetch` but in principle you could use it with a Promise that starts earlier and just happens to resolve to a `Response`. When you use `createFromReadableStream` that is almost definitely the case. E.g. you might have started it way earlier and you don't call `createFromReadableStream` until you get the headers back (the fetch promise resolves). This adds an option to pass in the start time for debug purposes if you started the request before starting to parse it. --- packages/react-client/src/ReactFlightClient.js | 6 +++++- packages/react-markup/src/ReactMarkupServer.js | 3 +++ .../src/client/ReactFlightDOMClientBrowser.js | 4 ++++ .../src/client/ReactFlightDOMClientNode.js | 4 ++++ .../src/client/ReactFlightDOMClientBrowser.js | 4 ++++ .../src/client/ReactFlightDOMClientEdge.js | 4 ++++ .../src/client/ReactFlightDOMClientNode.js | 4 ++++ .../src/client/ReactFlightDOMClientBrowser.js | 4 ++++ .../src/client/ReactFlightDOMClientEdge.js | 4 ++++ .../src/client/ReactFlightDOMClientNode.js | 4 ++++ .../src/client/ReactFlightDOMClientBrowser.js | 4 ++++ .../src/client/ReactFlightDOMClientEdge.js | 4 ++++ .../src/client/ReactFlightDOMClientNode.js | 4 ++++ 13 files changed, 52 insertions(+), 1 deletion(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 1c2151362d8..8bcabfb5563 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -2561,6 +2561,7 @@ function ResponseInstance( findSourceMapURL: void | FindSourceMapURLCallback, // DEV-only replayConsole: boolean, // DEV-only environmentName: void | string, // DEV-only + debugStartTime: void | number, // DEV-only debugChannel: void | DebugChannel, // DEV-only ) { const chunks: Map<number, SomeChunk<any>> = new Map(); @@ -2621,7 +2622,8 @@ function ResponseInstance( // Note: createFromFetch allows this to be marked at the start of the fetch // where as if you use createFromReadableStream from the body of the fetch // then the start time is when the headers resolved. - this._debugStartTime = performance.now(); + this._debugStartTime = + debugStartTime == null ? performance.now() : debugStartTime; this._debugIOStarted = false; // We consider everything before the first setTimeout task to be cached data // and is not considered I/O required to load the stream. @@ -2669,6 +2671,7 @@ export function createResponse( findSourceMapURL: void | FindSourceMapURLCallback, // DEV-only replayConsole: boolean, // DEV-only environmentName: void | string, // DEV-only + debugStartTime: void | number, // DEV-only debugChannel: void | DebugChannel, // DEV-only ): WeakResponse { return getWeakResponse( @@ -2684,6 +2687,7 @@ export function createResponse( findSourceMapURL, replayConsole, environmentName, + debugStartTime, debugChannel, ), ); diff --git a/packages/react-markup/src/ReactMarkupServer.js b/packages/react-markup/src/ReactMarkupServer.js index 0b35404cb80..6f1e35e6156 100644 --- a/packages/react-markup/src/ReactMarkupServer.js +++ b/packages/react-markup/src/ReactMarkupServer.js @@ -91,6 +91,9 @@ export function experimental_renderToHTML( undefined, undefined, false, + undefined, + undefined, + undefined, ); const streamState = createFlightStreamState(flightResponse, null); const flightDestination = { diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js index cfc8dcf5f1b..371f08abc9a 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js @@ -52,6 +52,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, }; function createDebugCallbackFromWritableStream( @@ -103,6 +104,9 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js index 2bf32729472..78dce936158 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js @@ -57,6 +57,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -112,6 +113,9 @@ function createFromNodeStream<T>( __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js index 2f71ce2fa95..0f0141e6409 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js @@ -129,6 +129,9 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } @@ -205,6 +208,7 @@ export type Options = { temporaryReferences?: TemporaryReferenceSet, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, }; export function createFromReadableStream<T>( diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js index f9c63ccbc33..5c8d1023b23 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js @@ -79,6 +79,7 @@ export type Options = { temporaryReferences?: TemporaryReferenceSet, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -107,6 +108,9 @@ function createResponseFromOptions(options?: Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js index b874bcd7d44..fbc633a1753 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js @@ -52,6 +52,7 @@ export type Options = { encodeFormAction?: EncodeFormActionCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -103,6 +104,9 @@ export function createFromNodeStream<T>( __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js index b4b84f1c41b..b3d31bd1bbb 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js @@ -51,6 +51,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, }; function createDebugCallbackFromWritableStream( @@ -102,6 +103,9 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js index b994841be18..5517e0f73cf 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js @@ -79,6 +79,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -109,6 +110,9 @@ function createResponseFromOptions(options: Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js index f174f10c0b8..6d117929df0 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js @@ -60,6 +60,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -114,6 +115,9 @@ function createFromNodeStream<T>( __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js index b4b84f1c41b..b3d31bd1bbb 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js @@ -51,6 +51,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, }; function createDebugCallbackFromWritableStream( @@ -102,6 +103,9 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js index 63dae495455..bc4caac767f 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js @@ -79,6 +79,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -109,6 +110,9 @@ function createResponseFromOptions(options: Options) { __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js index f174f10c0b8..6d117929df0 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js @@ -60,6 +60,7 @@ export type Options = { findSourceMapURL?: FindSourceMapURLCallback, replayConsoleLogs?: boolean, environmentName?: string, + startTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -114,6 +115,9 @@ function createFromNodeStream<T>( __DEV__ && options && options.environmentName ? options.environmentName : undefined, + __DEV__ && options && options.startTime != null + ? options.startTime + : undefined, debugChannel, ); From b485f7cf64118fc8729181f46fe5e2edd47bea43 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Mon, 20 Oct 2025 00:47:27 +0200 Subject: [PATCH 113/276] [DevTools] Don't attach filtered IO to grandparent Suspense (#34916) --- packages/react-devtools-shared/src/backend/fiber/renderer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 4dd4a619cb4..4a61fba6525 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2862,7 +2862,10 @@ export function attach( let parentInstance = reconcilingParent; while ( parentInstance.kind === FILTERED_FIBER_INSTANCE && - parentInstance.parent !== null + parentInstance.parent !== null && + // We can't move past the parent Suspense node. + // The Suspense node holding async info must be a parent of the devtools instance (or the instance itself) + parentInstance !== parentSuspenseNode.instance ) { parentInstance = parentInstance.parent; } From f6a4882859e6e894a39e9216d01005212855689e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 19:17:45 -0700 Subject: [PATCH 114/276] [DevTools] Show the Suspense boundary name in the rect if there's no overlap (#34918) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This shows the title in the top corner of the rect if there's enough space. The complex bit here is that it can be noisy if too many boundaries occupy the same space to overlap or partially overlap. This uses an R-tree to store all the rects to find overlapping boundaries to cut the available space to draw inside the rect. We use this to compute the rectangle within the rect which doesn't have any overlapping boundaries. The roots don't count as overlapping. Similarly, a parent rect is not consider overlapping a child. However, if two sibling boundaries occupy the same space, no title will be drawn. <img width="734" height="813" alt="Screenshot 2025-10-19 at 5 34 49 PM" src="https://github.com/user-attachments/assets/2b848b9c-3b78-48e5-9476-dd59a7baf6bf" /> We might also consider drawing the "Initial Paint" title at the root but that's less interesting. It's interesting in the beginning before you know about the special case at the root but after that it's just always the same value so just adds noise. --- packages/react-devtools-shared/package.json | 3 +- .../src/devtools/store.js | 59 +++++- .../views/SuspenseTab/SuspenseRects.css | 20 +- .../views/SuspenseTab/SuspenseRects.js | 108 +++++++++- scripts/flow/environment.js | 188 ++++++++++++++++++ scripts/jest/config.build-devtools.js | 2 +- yarn.lock | 98 ++------- 7 files changed, 387 insertions(+), 91 deletions(-) diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json index 543ac37e976..721cc9954b3 100644 --- a/packages/react-devtools-shared/package.json +++ b/packages/react-devtools-shared/package.json @@ -23,6 +23,7 @@ "json5": "^2.2.3", "local-storage-fallback": "^4.1.1", "react-virtualized-auto-sizer": "^1.0.23", - "react-window": "^1.8.10" + "react-window": "^1.8.10", + "rbush": "4.0.1" } } diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index aaf0584a4c5..9377fa01dfe 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -62,6 +62,31 @@ import type { import UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError'; import type {DevToolsHookSettings} from '../backend/types'; +import RBush from 'rbush'; + +// Custom version which works with our Rect data structure. +class RectRBush extends RBush<Rect> { + toBBox(rect: Rect): { + minX: number, + minY: number, + maxX: number, + maxY: number, + } { + return { + minX: rect.x, + minY: rect.y, + maxX: rect.x + rect.width, + maxY: rect.y + rect.height, + }; + } + compareMinX(a: Rect, b: Rect): number { + return a.x - b.x; + } + compareMinY(a: Rect, b: Rect): number { + return a.y - b.y; + } +} + const debug = (methodName: string, ...args: Array<string>) => { if (__DEBUG__) { console.log( @@ -194,6 +219,9 @@ export default class Store extends EventEmitter<{ // Renderer ID is needed to support inspection fiber props, state, and hooks. _rootIDToRendererID: Map<Element['id'], number> = new Map(); + // Stores all the SuspenseNode rects in an R-tree to make it fast to find overlaps. + _rtree: RBush<Rect> = new RectRBush(); + // These options may be initially set by a configuration option when constructing the Store. _supportsInspectMatchingDOMElement: boolean = false; _supportsClickToInspect: boolean = false; @@ -1622,7 +1650,12 @@ export default class Store extends EventEmitter<{ const y = operations[i + 1] / 1000; const width = operations[i + 2] / 1000; const height = operations[i + 3] / 1000; - rects.push({x, y, width, height}); + const rect = {x, y, width, height}; + if (parentID !== 0) { + // Track all rects except the root. + this._rtree.insert(rect); + } + rects.push(rect); i += 4; } } @@ -1680,13 +1713,20 @@ export default class Store extends EventEmitter<{ i += 1; - const {children, parentID} = suspense; + const {children, parentID, rects} = suspense; if (children.length > 0) { this._throwAndEmitError( Error(`Suspense node "${id}" was removed before its children.`), ); } + if (rects !== null && parentID !== 0) { + // Delete all the existing rects from the R-tree + for (let j = 0; j < rects.length; j++) { + this._rtree.remove(rects[j]); + } + } + this._idToSuspense.delete(id); removedSuspenseIDs.set(id, parentID); @@ -1785,6 +1825,14 @@ export default class Store extends EventEmitter<{ break; } + const prevRects = suspense.rects; + if (prevRects !== null && suspense.parentID !== 0) { + // Delete all the existing rects from the R-tree + for (let j = 0; j < prevRects.length; j++) { + this._rtree.remove(prevRects[j]); + } + } + let nextRects: SuspenseNode['rects']; if (numRects === -1) { nextRects = null; @@ -1796,7 +1844,12 @@ export default class Store extends EventEmitter<{ const width = operations[i + 2] / 1000; const height = operations[i + 3] / 1000; - nextRects.push({x, y, width, height}); + const rect = {x, y, width, height}; + if (suspense.parentID !== 0) { + // Track all rects except the root. + this._rtree.insert(rect); + } + nextRects.push(rect); i += 4; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index db0a84d8d87..d8dd990850a 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -39,6 +39,24 @@ pointer-events: none; } +.SuspenseRectsTitle { + pointer-events: none; + color: var(--color-text); + overflow: hidden; + text-overflow: ellipsis; + font-size: var(--font-size-sans-small); + line-height: var(--font-size-sans-small); + padding: .25rem; + container-type: size; + container-name: title; +} + +@container title (width < 30px) or (height < 12px) { + .SuspenseRectsTitle > span { + display: none; + } +} + .SuspenseRectsScaledRect[data-visible='false'] > .SuspenseRectsBoundaryChildren { overflow: initial; } @@ -75,7 +93,7 @@ transition: background-color 0.2s ease-out; } -.SuspenseRectsBoundary[data-selected='true'] { +.SuspenseRectsBoundary[data-selected='true'][data-visible='true'] { box-shadow: var(--elevation-4); } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 67a6bf27739..d5f44eeb32b 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -31,6 +31,7 @@ import { SuspenseTreeDispatcherContext, } from './SuspenseTreeContext'; import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js'; +import type RBush from 'rbush'; function ScaledRect({ className, @@ -78,8 +79,10 @@ function ScaledRect({ function SuspenseRects({ suspenseID, + parentRects, }: { suspenseID: SuspenseNode['id'], + parentRects: null | Array<Rect>, }): React$Node { const store = useContext(StoreContext); const treeDispatch = useContext(TreeDispatcherContext); @@ -167,7 +170,20 @@ function SuspenseRects({ } } - const boundingBox = getBoundingBox(suspense.rects); + const rects = suspense.rects; + const boundingBox = getBoundingBox(rects); + + // Next we'll try to find a rect within one of our rects that isn't intersecting with + // other rects. + // TODO: This should probably be memoized based on if any changes to the rtree has been made. + const titleBox: null | Rect = + rects === null ? null : findTitleBox(store._rtree, rects, parentRects); + const nextRects = + rects === null || rects.length === 0 + ? parentRects + : parentRects === null || parentRects.length === 0 + ? rects + : parentRects.concat(rects); return ( <ScaledRect @@ -205,11 +221,22 @@ function SuspenseRects({ className={styles.SuspenseRectsBoundaryChildren} rect={boundingBox}> {suspense.children.map(childID => { - return <SuspenseRects key={childID} suspenseID={childID} />; + return ( + <SuspenseRects + key={childID} + suspenseID={childID} + parentRects={nextRects} + /> + ); })} </ScaledRect> )} - {selected ? ( + {titleBox && suspense.name && visible ? ( + <ScaledRect className={styles.SuspenseRectsTitle} rect={titleBox}> + <span>{suspense.name}</span> + </ScaledRect> + ) : null} + {selected && visible ? ( <ScaledRect className={styles.SuspenseRectOutline} rect={boundingBox} @@ -320,6 +347,77 @@ function getDocumentBoundingRect( }; } +function findTitleBox( + rtree: RBush<Rect>, + rects: Array<Rect>, + parentRects: null | Array<Rect>, +): null | Rect { + for (let i = 0; i < rects.length; i++) { + const rect = rects[i]; + if (rect.width < 20 || rect.height < 10) { + // Skip small rects. They're likely not able to be contain anything useful anyway. + continue; + } + // Find all overlapping rects elsewhere in the tree to limit our rect. + const overlappingRects = rtree.search({ + minX: rect.x, + minY: rect.y, + maxX: rect.x + rect.width, + maxY: rect.y + rect.height, + }); + if ( + overlappingRects.length === 0 || + (overlappingRects.length === 1 && overlappingRects[0] === rect) + ) { + // There are no overlapping rects that isn't our own rect, so we can just use + // the full space of the rect. + return rect; + } + // We have some overlapping rects but they might not overlap everything. Let's + // shrink it up toward the top left corner until it has no more overlap. + const minX = rect.x; + const minY = rect.y; + let maxX = rect.x + rect.width; + let maxY = rect.y + rect.height; + for (let j = 0; j < overlappingRects.length; j++) { + const overlappingRect = overlappingRects[j]; + if (overlappingRect === rect) { + continue; + } + const x = overlappingRect.x; + const y = overlappingRect.y; + if (y < maxY && x < maxX) { + if ( + parentRects !== null && + parentRects.indexOf(overlappingRect) !== -1 + ) { + // This rect overlaps but it's part of a parent boundary. We let + // title content render if it's on top and not a sibling. + continue; + } + // This rect cuts into the remaining space. Let's figure out if we're + // better off cutting on the x or y axis to maximize remaining space. + const remainderX = x - minX; + const remainderY = y - minY; + if (remainderX > remainderY) { + maxX = x; + } else { + maxY = y; + } + } + } + if (maxX > minX && maxY > minY) { + return { + x: minX, + y: minY, + width: maxX - minX, + height: maxY - minY, + }; + } + } + return null; +} + function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node { const store = useContext(StoreContext); const root = store.getSuspenseByID(rootID); @@ -329,7 +427,9 @@ function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node { } return root.children.map(childID => { - return <SuspenseRects key={childID} suspenseID={childID} />; + return ( + <SuspenseRects key={childID} suspenseID={childID} parentRects={null} /> + ); }); } diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js index 5556fad1a00..f201c2e0e85 100644 --- a/scripts/flow/environment.js +++ b/scripts/flow/environment.js @@ -456,3 +456,191 @@ declare class NavigationDestination { getState(): mixed; } + +// Ported from definitely-typed +declare module 'rbush' { + declare interface BBox { + minX: number; + minY: number; + maxX: number; + maxY: number; + } + + declare export default class RBush<T> { + /** + * Constructs an `RBush`, a high-performance 2D spatial index for points and + * rectangles. Based on an optimized __R-tree__ data structure with + * __bulk-insertion__ support. + * + * @param maxEntries An optional argument to RBush defines the maximum + * number of entries in a tree node. `9` (used by default) + * is a reasonable choice for most applications. Higher + * value means faster insertion and slower search, and + * vice versa. + */ + constructor(maxEntries?: number): void; + + /** + * Inserts an item. To insert many items at once, use `load()`. + * + * @param item The item to insert. + */ + insert(item: T): RBush<T>; + + /** + * Bulk-inserts the given items into the tree. + * + * Bulk insertion is usually ~2-3 times faster than inserting items one by + * one. After bulk loading (bulk insertion into an empty tree), subsequent + * query performance is also ~20-30% better. + * + * Note that when you do bulk insertion into an existing tree, it bulk-loads + * the given data into a separate tree and inserts the smaller tree into the + * larger tree. This means that bulk insertion works very well for clustered + * data (where items in one update are close to each other), but makes query + * performance worse if the data is scattered. + * + * @param items The items to load. + */ + load(items: $ReadOnlyArray<T>): RBush<T>; + + /** + * Removes a previously inserted item, comparing by reference. + * + * To remove all items, use `clear()`. + * + * @param item The item to remove. + * @param equals A custom function that allows comparing by value instead. + * Useful when you have only a copy of the object you need + * removed (e.g. loaded from server). + */ + remove(item: T, equals?: (a: T, b: T) => boolean): RBush<T>; + + /** + * Removes all items. + */ + clear(): RBush<T>; + + /** + * Returns an array of data items (points or rectangles) that the given + * bounding box intersects. + * + * Note that the search method accepts a bounding box in `{minX, minY, maxX, + * maxY}` format regardless of the data format. + * + * @param box The bounding box in which to search. + */ + search(box: BBox): T[]; + + /** + * Returns all items contained in the tree. + */ + all(): T[]; + + /** + * Returns `true` if there are any items intersecting the given bounding + * box, otherwise `false`. + * + * @param box The bounding box in which to search. + */ + collides(box: BBox): boolean; + + /** + * Returns the bounding box for the provided item. + * + * By default, `RBush` assumes the format of data points to be an object + * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a + * custom item format by overriding `toBBox()`, `compareMinX()`, and + * `compareMinY()`. + * + * @example + * class MyRBush<T> extends RBush<T> { + * toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; } + * compareMinX(a, b) { return a.x - b.x; } + * compareMinY(a, b) { return a.y - b.y; } + * } + * const tree = new MyRBush<[number, number]>(); + * tree.insert([20, 50]); // accepts [x, y] points + * + * @param item The item whose bounding box should be returned. + */ + toBBox(item: T): BBox; + + /** + * Compares the minimum x coordinate of two items. Returns -1 if `a`'s + * x-coordinate is smaller, 1 if `b`'s x coordinate is smaller, or 0 if + * they're equal. + * + * By default, `RBush` assumes the format of data points to be an object + * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a + * custom item format by overriding `toBBox()`, `compareMinX()`, and + * `compareMinY()`. + * + * @example + * class MyRBush<T> extends RBush<T> { + * toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; } + * compareMinX(a, b) { return a.x - b.x; } + * compareMinY(a, b) { return a.y - b.y; } + * } + * const tree = new MyRBush<[number, number]>(); + * tree.insert([20, 50]); // accepts [x, y] points + * + * @param a The first item to compare. + * @param b The second item to compare. + */ + compareMinX(a: T, b: T): number; + + /** + * Compares the minimum y coordinate of two items. Returns -1 if `a`'s + * x-coordinate is smaller, 1 if `b`'s x coordinate is smaller, or 0 if + * they're equal. + * + * By default, `RBush` assumes the format of data points to be an object + * with `minX`, `minY`, `maxX`, and `maxY`. However, you can specify a + * custom item format by overriding `toBBox()`, `compareMinX()`, and + * `compareMinY()`. + * + * @example + * class MyRBush<T> extends RBush<T> { + * toBBox([x, y]) { return { minX: x, minY: y, maxX: x, maxY: y }; } + * compareMinX(a, b) { return a.x - b.x; } + * compareMinY(a, b) { return a.y - b.y; } + * } + * const tree = new MyRBush<[number, number]>(); + * tree.insert([20, 50]); // accepts [x, y] points + * + * @param a The first item to compare. + * @param b The second item to compare. + */ + compareMinY(a: T, b: T): number; + + /** + * Exports the tree's contents as a JSON object. + * + * Importing and exporting as JSON allows you to use RBush on both the + * server (using Node.js) and the browser combined, e.g. first indexing the + * data on the server and and then importing the resulting tree data on the + * client for searching. + * + * Note that the `maxEntries` option from the constructor must be the same + * in both trees for export/import to work properly. + */ + toJSON(): any; + + /** + * Imports previously exported data into the tree (i.e., data that was + * emitted by `toJSON()`). + * + * Importing and exporting as JSON allows you to use RBush on both the + * server (using Node.js) and the browser combined, e.g. first indexing the + * data on the server and and then importing the resulting tree data on the + * client for searching. + * + * Note that the `maxEntries` option from the constructor must be the same + * in both trees for export/import to work properly. + * + * @param data The previously exported JSON data. + */ + fromJSON(data: any): RBush<T>; + } +} diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js index 9baf33a39b1..3f03b50c3a8 100644 --- a/scripts/jest/config.build-devtools.js +++ b/scripts/jest/config.build-devtools.js @@ -63,7 +63,7 @@ module.exports = Object.assign({}, baseConfig, { testPathIgnorePatterns: ['/node_modules/', '-test.internal.js$'], // Exclude the build output from transforms transformIgnorePatterns: [ - '/node_modules/', + '/node_modules/(?!(rbush|quickselect)/)', '<rootDir>/build/', '/__compiled__/', '/__untransformed__/', diff --git a/yarn.lock b/yarn.lock index ad8a3f0085c..2543e4d1760 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8271,7 +8271,7 @@ eslint-utils@^2.0.0, eslint-utils@^2.1.0: dependencies: eslint-visitor-keys "^1.1.0" -"eslint-v7@npm:eslint@^7.7.0": +"eslint-v7@npm:eslint@^7.7.0", eslint@^7.7.0: version "7.32.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d" integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA== @@ -8470,52 +8470,6 @@ eslint@8.57.0: strip-ansi "^6.0.1" text-table "^0.2.0" -eslint@^7.7.0: - version "7.32.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d" - integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA== - dependencies: - "@babel/code-frame" "7.12.11" - "@eslint/eslintrc" "^0.4.3" - "@humanwhocodes/config-array" "^0.5.0" - ajv "^6.10.0" - chalk "^4.0.0" - cross-spawn "^7.0.2" - debug "^4.0.1" - doctrine "^3.0.0" - enquirer "^2.3.5" - escape-string-regexp "^4.0.0" - eslint-scope "^5.1.1" - eslint-utils "^2.1.0" - eslint-visitor-keys "^2.0.0" - espree "^7.3.1" - esquery "^1.4.0" - esutils "^2.0.2" - fast-deep-equal "^3.1.3" - file-entry-cache "^6.0.1" - functional-red-black-tree "^1.0.1" - glob-parent "^5.1.2" - globals "^13.6.0" - ignore "^4.0.6" - import-fresh "^3.0.0" - imurmurhash "^0.1.4" - is-glob "^4.0.0" - js-yaml "^3.13.1" - json-stable-stringify-without-jsonify "^1.0.1" - levn "^0.4.1" - lodash.merge "^4.6.2" - minimatch "^3.0.4" - natural-compare "^1.4.0" - optionator "^0.9.1" - progress "^2.0.0" - regexpp "^3.1.0" - semver "^7.2.1" - strip-ansi "^6.0.0" - strip-json-comments "^3.1.0" - table "^6.0.9" - text-table "^0.2.0" - v8-compile-cache "^2.0.3" - espree@10.0.1, espree@^10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/espree/-/espree-10.0.1.tgz#600e60404157412751ba4a6f3a2ee1a42433139f" @@ -14317,7 +14271,7 @@ prepend-http@^2.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= -"prettier-2@npm:prettier@^2": +"prettier-2@npm:prettier@^2", prettier@^2.5.1: version "2.8.8" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== @@ -14332,11 +14286,6 @@ prettier@^1.19.1: resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== -prettier@^2.5.1: - version "2.8.8" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" - integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== - pretty-format@^29.4.1: version "29.4.1" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.4.1.tgz#0da99b532559097b8254298da7c75a0785b1751c" @@ -14602,6 +14551,11 @@ quick-tmp@0.0.0: first-match "0.0.1" osenv "0.0.3" +quickselect@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-3.0.0.tgz#a37fc953867d56f095a20ac71c6d27063d2de603" + integrity sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g== + random-seed@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/random-seed/-/random-seed-0.3.0.tgz#d945f2e1f38f49e8d58913431b8bf6bb937556cd" @@ -14639,6 +14593,13 @@ raw-loader@^3.1.0: loader-utils "^1.1.0" schema-utils "^2.0.1" +rbush@4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/rbush/-/rbush-4.0.1.tgz#1f55afa64a978f71bf9e9a99bc14ff84f3cb0d6d" + integrity sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ== + dependencies: + quickselect "^3.0.0" + rc@1.2.8, rc@^1.0.1, rc@^1.1.6, rc@^1.2.8: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" @@ -16211,7 +16172,7 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -16246,15 +16207,6 @@ string-width@^4.0.0: is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.0" -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -16315,7 +16267,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -16343,13 +16295,6 @@ strip-ansi@^5.1.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -17958,7 +17903,7 @@ workerize-loader@^2.0.2: dependencies: loader-utils "^2.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -17976,15 +17921,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 1440f4f42d59a7de4559dac972b62d9be771d1d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 22:52:50 -0700 Subject: [PATCH 115/276] [DevTools] BuiltInCallSite should have padding-left (#34922) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We don't normally show this but when we do, it should have the same padding as other callsites. <img width="313" height="241" alt="Screenshot 2025-10-19 at 10 46 22 PM" src="https://github.com/user-attachments/assets/7f72149e-d748-4b71-8291-889038d676e7" /> --- .../src/devtools/views/Components/StackTraceView.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css index 574ceb02369..bd13a89c6c9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css @@ -2,7 +2,7 @@ padding: 0.25rem; } -.CallSite { +.CallSite, .BuiltInCallSite { display: block; padding-left: 1rem; } From 21272a680f07cb69873eb3668e7baaebfcf05606 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Sun, 19 Oct 2025 23:42:38 -0700 Subject: [PATCH 116/276] Lower case "rsc stream" debug info (#34921) This is an aesthetic thing. Most simple I/O entries are things like "script", "stylesheet", "fetch" etc. which are all a single word and lower case. The "RSC stream" name sticks out and draws unnecessary attention to itself where as it's really the least interesting to look at. I don't love the name because I'm not sure how to explain it. It's really mainly the byte size of the payload itself without considering things like server awaits things which will have their own cause. So I'm trying to communicate the download size of the stream of downloading the `.rsc` file or the `"rsc stream"`. --- packages/internal-test-utils/debugInfo.js | 4 ++-- .../react-client/src/ReactFlightClient.js | 2 +- .../src/backend/fiber/renderer.js | 10 ++++++-- .../ReactFlightAsyncDebugInfo-test.js | 24 +++++++++---------- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/internal-test-utils/debugInfo.js b/packages/internal-test-utils/debugInfo.js index 7b9c730ba65..75183ce4b6b 100644 --- a/packages/internal-test-utils/debugInfo.js +++ b/packages/internal-test-utils/debugInfo.js @@ -64,7 +64,7 @@ function normalizeIOInfo(config: DebugInfoConfig, ioInfo) { if (promise) { promise.then(); // init if (promise.status === 'fulfilled') { - if (ioInfo.name === 'RSC stream') { + if (ioInfo.name === 'rsc stream') { copy.byteSize = 0; copy.value = { value: 'stream', @@ -117,7 +117,7 @@ export function getDebugInfo(config: DebugInfoConfig, obj) { for (let i = 0; i < debugInfo.length; i++) { if ( debugInfo[i].awaited && - debugInfo[i].awaited.name === 'RSC stream' && + debugInfo[i].awaited.name === 'rsc stream' && config.ignoreRscStreamInfo ) { // Ignore RSC stream I/O info. diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 8bcabfb5563..c7506a13e59 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -2721,7 +2721,7 @@ export function createStreamState( (debugValuePromise: any).status = 'fulfilled'; (debugValuePromise: any).value = streamDebugValue; streamState._debugInfo = { - name: 'RSC stream', + name: 'rsc stream', start: response._debugStartTime, end: response._debugStartTime, // will be updated once we finish a chunk byteSize: 0, // will be updated as we resolve a data chunk diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 4a61fba6525..fe8722da568 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -6171,7 +6171,10 @@ export function attach( } } const newIO = asyncInfo.awaited; - if (newIO.name === 'RSC stream' && newIO.value != null) { + if ( + (newIO.name === 'RSC stream' || newIO.name === 'rsc stream') && + newIO.value != null + ) { const streamPromise = newIO.value; // Special case RSC stream entries to pick the last entry keyed by the stream. const existingEntry = streamEntries.get(streamPromise); @@ -6230,7 +6233,10 @@ export function attach( continue; } foundIOEntries.add(ioInfo); - if (ioInfo.name === 'RSC stream' && ioInfo.value != null) { + if ( + (ioInfo.name === 'RSC stream' || ioInfo.name === 'rsc stream') && + ioInfo.value != null + ) { const streamPromise = ioInfo.value; // Special case RSC stream entries to pick the last entry keyed by the stream. const existingEntry = streamEntries.get(streamPromise); diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index 00c6f785035..db1d7af3a6b 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -459,7 +459,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -867,7 +867,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -985,7 +985,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -1460,7 +1460,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "byteSize": 0, "end": 0, "env": "Server", - "name": "RSC stream", + "name": "rsc stream", "start": 0, "value": { "value": "stream", @@ -1475,7 +1475,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -1789,7 +1789,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2083,7 +2083,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2499,7 +2499,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2665,7 +2665,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2845,7 +2845,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -3130,7 +3130,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -3275,7 +3275,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { From 02c80f0d8702cb894f6ef9748e7b18ffdd388a55 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 20 Oct 2025 13:39:42 +0100 Subject: [PATCH 117/276] [DevTools] fix: dont ship source maps for css in prod builds (#34913) This has been causing some issues with the submission review on Firefox store: we use OS-level paths in these source maps, which makes the build artifact different from the one that's been submitted. Also saves ~100Kb for main.js artifact. --- .../src/main/cloneStyleTags.js | 33 +++++++++++++++---- .../src/main/index.js | 2 +- .../webpack.config.js | 2 +- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/packages/react-devtools-extensions/src/main/cloneStyleTags.js b/packages/react-devtools-extensions/src/main/cloneStyleTags.js index dd84e01fc9e..caad2a361ca 100644 --- a/packages/react-devtools-extensions/src/main/cloneStyleTags.js +++ b/packages/react-devtools-extensions/src/main/cloneStyleTags.js @@ -1,5 +1,14 @@ -function cloneStyleTags() { - const linkTags = []; +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +export function cloneStyleTags(): Array<HTMLLinkElement | HTMLStyleElement> { + const tags: Array<HTMLLinkElement | HTMLStyleElement> = []; // eslint-disable-next-line no-for-of-loops/no-for-of-loops for (const linkTag of document.getElementsByTagName('link')) { @@ -11,11 +20,23 @@ function cloneStyleTags() { newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue); } - linkTags.push(newLinkTag); + tags.push(newLinkTag); } } - return linkTags; -} + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const styleTag of document.getElementsByTagName('style')) { + const newStyleTag = document.createElement('style'); + + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const attribute of styleTag.attributes) { + newStyleTag.setAttribute(attribute.nodeName, attribute.nodeValue); + } -export default cloneStyleTags; + newStyleTag.textContent = styleTag.textContent; + + tags.push(newStyleTag); + } + + return tags; +} diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js index cec9fd6df45..bc948d1e6d6 100644 --- a/packages/react-devtools-extensions/src/main/index.js +++ b/packages/react-devtools-extensions/src/main/index.js @@ -33,7 +33,7 @@ import { import {viewAttributeSource} from './sourceSelection'; import {startReactPolling} from './reactPolling'; -import cloneStyleTags from './cloneStyleTags'; +import {cloneStyleTags} from './cloneStyleTags'; import fetchFileWithCaching from './fetchFileWithCaching'; import injectBackendManager from './injectBackendManager'; import registerEventsLogger from './registerEventsLogger'; diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index 4592363c64a..191eabc47cb 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -285,7 +285,7 @@ module.exports = { { loader: 'css-loader', options: { - sourceMap: true, + sourceMap: __DEV__, modules: true, localIdentName: '[local]___[hash:base64:5]', }, From aaad0ea055ce0c10b263db8505338cb1eedb86de Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 20 Oct 2025 16:14:47 +0100 Subject: [PATCH 118/276] [DevTools] chore: read from build/COMMIT_SHA fle as fallback for commit hash (#34915) This eliminates the gap in a reproducer for the React DevTools browser extension from the source code that we submit to Firefox extension stores. We use the commit hash as part of the Backend version, here: https://github.com/facebook/react/blob/2cfb221937eac48209d01d5dda5664de473b1953/packages/react-devtools-extensions/utils.js#L26-L38 The problem is that we archive the source code for Mozilla extension store reviews and there is no git. But since we still download the React sources from the CI, we could reuse the hash from `build/COMMIT_HASH` file. --- packages/react-devtools-extensions/utils.js | 24 ++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js index 3b06bb71f7d..9f02e98d198 100644 --- a/packages/react-devtools-extensions/utils.js +++ b/packages/react-devtools-extensions/utils.js @@ -6,7 +6,7 @@ */ const {execSync} = require('child_process'); -const {readFileSync} = require('fs'); +const {existsSync, readFileSync} = require('fs'); const {resolve} = require('path'); const GITHUB_URL = 'https://github.com/facebook/react'; @@ -18,8 +18,26 @@ function getGitCommit() { .trim(); } catch (error) { // Mozilla runs this command from a git archive. - // In that context, there is no Git revision. - return null; + // In that context, there is no Git context. + // Using the commit hash specified to download-experimental-build.js script as a fallback. + + // Try to read from build/COMMIT_SHA file + const commitShaPath = resolve(__dirname, '..', '..', 'build', 'COMMIT_SHA'); + if (!existsSync(commitShaPath)) { + throw new Error( + 'Could not find build/COMMIT_SHA file. Did you run scripts/release/download-experimental-build.js script?', + ); + } + + try { + const commitHash = readFileSync(commitShaPath, 'utf8').trim(); + // Return short hash (first 7 characters) to match abbreviated commit hash format + return commitHash.slice(0, 7); + } catch (readError) { + throw new Error( + `Failed to read build/COMMIT_SHA file: ${readError.message}`, + ); + } } } From 2bcbf254f168ddec567156f802d19315e64e4aa8 Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Mon, 20 Oct 2025 08:42:04 -0700 Subject: [PATCH 119/276] [compiler] Fix false positive for useMemo reassigning context vars (#34904) Within a function expression local variables may use StoreContext for local context variables, so the reassignment check here was firing too often. We should only report an error for variables that are declared outside the function, ie part of its `context`. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34904). * #34903 * __->__ #34904 --- .../src/Validation/ValidateUseMemo.ts | 31 +++++++------ .../reassign-variable-in-usememo.expect.md | 45 +++++++++++++++++++ .../compiler/reassign-variable-in-usememo.js | 12 +++++ 3 files changed, 74 insertions(+), 14 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts index 05a4b4b91f5..2bccda3a2e9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateUseMemo.ts @@ -184,25 +184,28 @@ function validateNoContextVariableAssignment( fn: HIRFunction, errors: CompilerError, ): void { + const context = new Set(fn.context.map(place => place.identifier.id)); for (const block of fn.body.blocks.values()) { for (const instr of block.instructions) { const value = instr.value; switch (value.kind) { case 'StoreContext': { - errors.pushDiagnostic( - CompilerDiagnostic.create({ - category: ErrorCategory.UseMemo, - reason: - 'useMemo() callbacks may not reassign variables declared outside of the callback', - description: - 'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function', - suggestions: null, - }).withDetails({ - kind: 'error', - loc: value.lvalue.place.loc, - message: 'Cannot reassign variable', - }), - ); + if (context.has(value.lvalue.place.identifier.id)) { + errors.pushDiagnostic( + CompilerDiagnostic.create({ + category: ErrorCategory.UseMemo, + reason: + 'useMemo() callbacks may not reassign variables declared outside of the callback', + description: + 'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function', + suggestions: null, + }).withDetails({ + kind: 'error', + loc: value.lvalue.place.loc, + message: 'Cannot reassign variable', + }), + ); + } break; } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md new file mode 100644 index 00000000000..29dc3afcd6f --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.expect.md @@ -0,0 +1,45 @@ + +## Input + +```javascript +// @flow +export hook useItemLanguage(items) { + return useMemo(() => { + let language: ?string = null; + items.forEach(item => { + if (item.language != null) { + language = item.language; + } + }); + return language; + }, [items]); +} + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +export function useItemLanguage(items) { + const $ = _c(2); + let language; + if ($[0] !== items) { + language = null; + items.forEach((item) => { + if (item.language != null) { + language = item.language; + } + }); + $[0] = items; + $[1] = language; + } else { + language = $[1]; + } + return language; +} + +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js new file mode 100644 index 00000000000..4ed89bfc643 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-variable-in-usememo.js @@ -0,0 +1,12 @@ +// @flow +export hook useItemLanguage(items) { + return useMemo(() => { + let language: ?string = null; + items.forEach(item => { + if (item.language != null) { + language = item.language; + } + }); + return language; + }, [items]); +} From 1d3664665b4e52bd1daee775e1e95feb563799d9 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Mon, 20 Oct 2025 19:33:47 +0200 Subject: [PATCH 120/276] [DevTools] Text layout fixes for stack traces with badges (#34925) --- .../src/devtools/views/Components/StackTraceView.css | 9 ++++++--- .../src/devtools/views/Components/StackTraceView.js | 6 ++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css index bd13a89c6c9..98200ee9dfd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css @@ -3,8 +3,9 @@ } .CallSite, .BuiltInCallSite { - display: block; + display: flex; padding-left: 1rem; + white-space-collapse: preserve; } .IgnoredCallSite, .BuiltInCallSite { @@ -20,13 +21,15 @@ white-space: pre; overflow: hidden; text-overflow: ellipsis; - flex: 1; cursor: pointer; border-radius: 0.125rem; - padding: 0px 2px; } .Link:hover { background-color: var(--color-background-hover); } +.ElementBadges { + margin-left: 0.25rem; +} + diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js index d3d797f7810..a3cf91f14b7 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js @@ -86,8 +86,10 @@ export function CallSiteView({ </span> </> )} - - <ElementBadges environmentName={environmentName} /> + <ElementBadges + className={styles.ElementBadges} + environmentName={environmentName} + /> </div> ); } From 3cde211b0cb1c707114c27d7fd23683d02086e31 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Mon, 20 Oct 2025 18:39:28 +0100 Subject: [PATCH 121/276] React DevTools 7.0.0 -> 7.0.1 (#34926) Full list of changes: * Text layout fixes for stack traces with badges ([eps1lon](https://github.com/eps1lon) in [#34925](https://github.com/facebook/react/pull/34925)) * chore: read from build/COMMIT_SHA fle as fallback for commit hash ([hoxyq](https://github.com/hoxyq) in [#34915](https://github.com/facebook/react/pull/34915)) * fix: dont ship source maps for css in prod builds ([hoxyq](https://github.com/hoxyq) in [#34913](https://github.com/facebook/react/pull/34913)) * Lower case "rsc stream" debug info ([sebmarkbage](https://github.com/sebmarkbage) in [#34921](https://github.com/facebook/react/pull/34921)) * BuiltInCallSite should have padding-left ([sebmarkbage](https://github.com/sebmarkbage) in [#34922](https://github.com/facebook/react/pull/34922)) * Show the Suspense boundary name in the rect if there's no overlap ([sebmarkbage](https://github.com/sebmarkbage) in [#34918](https://github.com/facebook/react/pull/34918)) * Don't attach filtered IO to grandparent Suspense ([eps1lon](https://github.com/eps1lon) in [#34916](https://github.com/facebook/react/pull/34916)) * Infer name from stack if it's the generic "lazy" name ([sebmarkbage](https://github.com/sebmarkbage) in [#34907](https://github.com/facebook/react/pull/34907)) * Use same Suspense naming heuristics when reconnecting ([eps1lon](https://github.com/eps1lon) in [#34898](https://github.com/facebook/react/pull/34898)) * Assign a different color and label based on environment ([sebmarkbage](https://github.com/sebmarkbage) in [#34893](https://github.com/facebook/react/pull/34893)) * Compute environment names for the timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34892](https://github.com/facebook/react/pull/34892)) * Don't highlight the root rect if no roots has unique suspenders ([sebmarkbage](https://github.com/sebmarkbage) in [#34885](https://github.com/facebook/react/pull/34885)) * Highlight the rect when the corresponding timeline bean is hovered ([sebmarkbage](https://github.com/sebmarkbage) in [#34881](https://github.com/facebook/react/pull/34881)) * Repeat the "name" if there's no short description in groups ([sebmarkbage](https://github.com/sebmarkbage) in [#34894](https://github.com/facebook/react/pull/34894)) * Tweak the rects design and create multi-environment color scheme ([sebmarkbage](https://github.com/sebmarkbage) in [#34880](https://github.com/facebook/react/pull/34880)) * Adjust the rects size by one pixel smaller ([sebmarkbage](https://github.com/sebmarkbage) in [#34876](https://github.com/facebook/react/pull/34876)) * Remove steps title from scrubber ([sebmarkbage](https://github.com/sebmarkbage) in [#34878](https://github.com/facebook/react/pull/34878)) * Include some sub-pixel precision in rects ([sebmarkbage](https://github.com/sebmarkbage) in [#34873](https://github.com/facebook/react/pull/34873)) * Don't pluralize if already plural ([sebmarkbage](https://github.com/sebmarkbage) in [#34870](https://github.com/facebook/react/pull/34870)) * Don't try to load anonymous or empty urls ([sebmarkbage](https://github.com/sebmarkbage) in [#34869](https://github.com/facebook/react/pull/34869)) * Add inspection button to Suspense tab ([sebmarkbage](https://github.com/sebmarkbage) in [#34867](https://github.com/facebook/react/pull/34867)) * Don't select on hover ([sebmarkbage](https://github.com/sebmarkbage) in [#34860](https://github.com/facebook/react/pull/34860)) * Don't highlight on timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34861](https://github.com/facebook/react/pull/34861)) * The bridge event types should only be defined in one direction ([sebmarkbage](https://github.com/sebmarkbage) in [#34859](https://github.com/facebook/react/pull/34859)) * Attempt at a better "unique suspender" text ([sebmarkbage](https://github.com/sebmarkbage) in [#34854](https://github.com/facebook/react/pull/34854)) * Track whether a boundary is currently suspended and make transparent ([sebmarkbage](https://github.com/sebmarkbage) in [#34853](https://github.com/facebook/react/pull/34853)) * Don't hide overflow rectangles ([sebmarkbage](https://github.com/sebmarkbage) in [#34852](https://github.com/facebook/react/pull/34852)) * Measure text nodes ([sebmarkbage](https://github.com/sebmarkbage) in [#34851](https://github.com/facebook/react/pull/34851)) * Don't measure fallbacks when suspended ([sebmarkbage](https://github.com/sebmarkbage) in [#34850](https://github.com/facebook/react/pull/34850)) * Filter out built-in stack frames ([sebmarkbage](https://github.com/sebmarkbage) in [#34828](https://github.com/facebook/react/pull/34828)) * Exclude Suspense boundaries in hidden Activity ([eps1lon](https://github.com/eps1lon) in [#34756](https://github.com/facebook/react/pull/34756)) * Group consecutive suspended by rows by the same name ([sebmarkbage](https://github.com/sebmarkbage) in [#34830](https://github.com/facebook/react/pull/34830)) * Preserve the original index when sorting suspended by ([sebmarkbage](https://github.com/sebmarkbage) in [#34829](https://github.com/facebook/react/pull/34829)) * Don't show the root as being non-compliant ([sebmarkbage](https://github.com/sebmarkbage) in [#34827](https://github.com/facebook/react/pull/34827)) * Ignore suspense boundaries, without visual representation, in the timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34824](https://github.com/facebook/react/pull/34824)) * Explicitly say which id to scroll to and only once ([sebmarkbage](https://github.com/sebmarkbage) in [#34823](https://github.com/facebook/react/pull/34823)) * devtools: fix ellipsis truncation for key values ([sophiebits](https://github.com/sophiebits) in [#34796](https://github.com/facebook/react/pull/34796)) * fix(devtools): remove duplicated "Display density" field in General settings ([Anatole-Godard](https://github.com/Anatole-Godard) in [#34792](https://github.com/facebook/react/pull/34792)) * Gate SuspenseTab ([hoxyq](https://github.com/hoxyq) in [#34754](https://github.com/facebook/react/pull/34754)) * Release `<ViewTransition />` to Canary ([eps1lon](https://github.com/eps1lon) in [#34712](https://github.com/facebook/react/pull/34712)) --- packages/react-devtools-core/package.json | 2 +- packages/react-devtools-extensions/chrome/manifest.json | 4 ++-- packages/react-devtools-extensions/edge/manifest.json | 4 ++-- packages/react-devtools-extensions/firefox/manifest.json | 2 +- packages/react-devtools-inline/package.json | 2 +- packages/react-devtools-timeline/package.json | 2 +- packages/react-devtools/CHANGELOG.md | 9 +++++++++ packages/react-devtools/package.json | 4 ++-- 8 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json index c8facd1a24d..54b89e72e8a 100644 --- a/packages/react-devtools-core/package.json +++ b/packages/react-devtools-core/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-core", - "version": "7.0.0", + "version": "7.0.1", "description": "Use react-devtools outside of the browser", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 0b5285e91a9..9bb0ab1177a 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/packages/react-devtools-extensions/chrome/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Chrome Developer Tools.", - "version": "7.0.0", - "version_name": "7.0.0", + "version": "7.0.1", + "version_name": "7.0.1", "minimum_chrome_version": "114", "icons": { "16": "icons/16-production.png", diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json index 342af4abb3a..55b7248f255 100644 --- a/packages/react-devtools-extensions/edge/manifest.json +++ b/packages/react-devtools-extensions/edge/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.", - "version": "7.0.0", - "version_name": "7.0.0", + "version": "7.0.1", + "version_name": "7.0.1", "minimum_chrome_version": "114", "icons": { "16": "icons/16-production.png", diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index bc12ac0fcde..f401708c217 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Firefox Developer Tools.", - "version": "7.0.0", + "version": "7.0.1", "browser_specific_settings": { "gecko": { "id": "@react-devtools", diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index 0363530cd10..cc5fc51a6ef 100644 --- a/packages/react-devtools-inline/package.json +++ b/packages/react-devtools-inline/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-inline", - "version": "7.0.0", + "version": "7.0.1", "description": "Embed react-devtools within a website", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json index 2f54399ce25..5e4df835526 100644 --- a/packages/react-devtools-timeline/package.json +++ b/packages/react-devtools-timeline/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "react-devtools-timeline", - "version": "7.0.0", + "version": "7.0.1", "license": "MIT", "dependencies": { "@elg/speedscope": "1.9.0-a6f84db", diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md index 0fc637b9946..6c3ab1baf07 100644 --- a/packages/react-devtools/CHANGELOG.md +++ b/packages/react-devtools/CHANGELOG.md @@ -4,6 +4,15 @@ --- +### 7.0.1 +October 20, 2025 + +* Various UI improvements to experimental Suspense tab ([sebmarkbage](https://github.com/sebmarkbage) & [eps1lon](https://github.com/eps1lon)) +* devtools: fix ellipsis truncation for key values ([sophiebits](https://github.com/sophiebits) in [#34796](https://github.com/facebook/react/pull/34796)) +* fix(devtools): remove duplicated "Display density" field in General settings ([Anatole-Godard](https://github.com/Anatole-Godard) in [#34792](https://github.com/facebook/react/pull/34792)) + +--- + ### 7.0.0 Oct 2, 2025 diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json index ea8bab1c95e..3d1a1bda2f3 100644 --- a/packages/react-devtools/package.json +++ b/packages/react-devtools/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools", - "version": "7.0.0", + "version": "7.0.1", "description": "Use react-devtools outside of the browser", "license": "MIT", "repository": { @@ -26,7 +26,7 @@ "electron": "^23.1.2", "internal-ip": "^6.2.0", "minimist": "^1.2.3", - "react-devtools-core": "7.0.0", + "react-devtools-core": "7.0.1", "update-notifier": "^2.1.0" } } From 031595d720955723a0dab67068abc3db759cbc69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Mon, 20 Oct 2025 11:54:27 -0700 Subject: [PATCH 122/276] [DevTools] Title color tweak (#34927) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit <img width="521" height="365" alt="Screenshot 2025-10-20 at 11 53 50 AM" src="https://github.com/user-attachments/assets/1a073c09-d440-4498-b2b3-c0dcb2272c96" /> --- .../src/devtools/views/SuspenseTab/SuspenseRects.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index d8dd990850a..0af7baf51a6 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -41,17 +41,18 @@ .SuspenseRectsTitle { pointer-events: none; - color: var(--color-text); + color: color-mix(in srgb, var(--color-suspense) 50%, var(--color-text)); overflow: hidden; text-overflow: ellipsis; + font-family: var(--font-family-sans); font-size: var(--font-size-sans-small); - line-height: var(--font-size-sans-small); - padding: .25rem; + line-height: var(--line-height-data); + padding: 0 .25rem; container-type: size; container-name: title; } -@container title (width < 30px) or (height < 12px) { +@container title (width < 30px) or (height < 18px) { .SuspenseRectsTitle > span { display: none; } From ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518 Mon Sep 17 00:00:00 2001 From: Nathan <nathanmarks@users.noreply.github.com> Date: Mon, 20 Oct 2025 16:52:11 -0400 Subject: [PATCH 123/276] [compiler] loosen computed key restriction for compiler (#34902) We have a whole ton of compiler errors due to us using a helper to return breakpoints for CSS-in-js, which results in code like: ``` const styles = { [responsive.up('xl')]: { ... } } ``` this results in TONS of bailouts due to `(BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression`. I was looking into what it would take to fix it and why we don't allow it, and following the paper trail is seems like the gotchas have been fixed with the new mutability aliasing model that is fully rolled out. It looks like this is the same pattern/issue that was fixed (see https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.js and the old bug in https://github.com/facebook/react/blob/d58c07b563a79bd706531278cb4afec6292b84a8/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.expect.md). @josephsavona can you confirm if that's the case and if we're able to drop this restriction now? (or alternatively, is there another case we can ignore?) --- .../src/HIR/BuildHIR.ts | 14 ---- ...after-construction-sequence-expr.expect.md | 41 ------------ ...dified-during-after-construction.expect.md | 41 ------------ ...te-key-while-constructing-object.expect.md | 40 ----------- ...ject-expression-member-expr-call.expect.md | 42 ------------ ...after-construction-sequence-expr.expect.md | 56 ++++++++++++++++ ...uring-after-construction-sequence-expr.js} | 3 +- ...dified-during-after-construction.expect.md | 55 +++++++++++++++ ...key-modified-during-after-construction.js} | 1 + ...te-key-while-constructing-object.expect.md | 67 +++++++++++++++++++ ...y-mutate-key-while-constructing-object.js} | 0 ...ject-expression-member-expr-call.expect.md | 54 +++++++++++++++ ... => object-expression-member-expr-call.js} | 0 13 files changed, 235 insertions(+), 179 deletions(-) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js => object-expression-computed-key-modified-during-after-construction-sequence-expr.js} (79%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-object-expression-computed-key-modified-during-after-construction.js => object-expression-computed-key-modified-during-after-construction.js} (86%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-object-expression-computed-key-mutate-key-while-constructing-object.js => object-expression-computed-key-mutate-key-while-constructing-object.js} (100%) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-object-expression-member-expr-call.js => object-expression-member-expr-call.js} (100%) diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts index 0ae338f5c78..f6872da1117 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts @@ -1568,20 +1568,6 @@ function lowerObjectPropertyKey( name: key.node.value, }; } else if (property.node.computed && key.isExpression()) { - if (!key.isIdentifier() && !key.isMemberExpression()) { - /* - * NOTE: allowing complex key expressions can trigger a bug where a mutation is made conditional - * see fixture - * error.object-expression-computed-key-modified-during-after-construction.js - */ - builder.errors.push({ - reason: `(BuildHIR::lowerExpression) Expected Identifier, got ${key.type} key in ObjectExpression`, - category: ErrorCategory.Todo, - loc: key.node.loc ?? null, - suggestions: null, - }); - return null; - } const place = lowerExpressionToTemporary(builder, key); return { kind: 'computed', diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md deleted file mode 100644 index bebdd9dcc94..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md +++ /dev/null @@ -1,41 +0,0 @@ - -## Input - -```javascript -import {identity, mutate, mutateAndReturn} from 'shared-runtime'; - -function Component(props) { - const key = {}; - const context = { - [(mutate(key), key)]: identity([props.value]), - }; - mutate(key); - return context; -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{value: 42}], -}; - -``` - - -## Error - -``` -Found 1 error: - -Todo: (BuildHIR::lowerExpression) Expected Identifier, got SequenceExpression key in ObjectExpression - -error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.ts:6:6 - 4 | const key = {}; - 5 | const context = { -> 6 | [(mutate(key), key)]: identity([props.value]), - | ^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got SequenceExpression key in ObjectExpression - 7 | }; - 8 | mutate(key); - 9 | return context; -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md deleted file mode 100644 index 215e5200a92..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md +++ /dev/null @@ -1,41 +0,0 @@ - -## Input - -```javascript -import {identity, mutate, mutateAndReturn} from 'shared-runtime'; - -function Component(props) { - const key = {}; - const context = { - [mutateAndReturn(key)]: identity([props.value]), - }; - mutate(key); - return context; -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{value: 42}], -}; - -``` - - -## Error - -``` -Found 1 error: - -Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - -error.todo-object-expression-computed-key-modified-during-after-construction.ts:6:5 - 4 | const key = {}; - 5 | const context = { -> 6 | [mutateAndReturn(key)]: identity([props.value]), - | ^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - 7 | }; - 8 | mutate(key); - 9 | return context; -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md deleted file mode 100644 index abe4153e220..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md +++ /dev/null @@ -1,40 +0,0 @@ - -## Input - -```javascript -import {identity, mutate, mutateAndReturn} from 'shared-runtime'; - -function Component(props) { - const key = {}; - const context = { - [mutateAndReturn(key)]: identity([props.value]), - }; - return context; -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{value: 42}], -}; - -``` - - -## Error - -``` -Found 1 error: - -Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - -error.todo-object-expression-computed-key-mutate-key-while-constructing-object.ts:6:5 - 4 | const key = {}; - 5 | const context = { -> 6 | [mutateAndReturn(key)]: identity([props.value]), - | ^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - 7 | }; - 8 | return context; - 9 | } -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md deleted file mode 100644 index 560f40b9917..00000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md +++ /dev/null @@ -1,42 +0,0 @@ - -## Input - -```javascript -import {identity, mutate, mutateAndReturn} from 'shared-runtime'; - -function Component(props) { - const obj = {mutateAndReturn}; - const key = {}; - const context = { - [obj.mutateAndReturn(key)]: identity([props.value]), - }; - mutate(key); - return context; -} - -export const FIXTURE_ENTRYPOINT = { - fn: Component, - params: [{value: 42}], -}; - -``` - - -## Error - -``` -Found 1 error: - -Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - -error.todo-object-expression-member-expr-call.ts:7:5 - 5 | const key = {}; - 6 | const context = { -> 7 | [obj.mutateAndReturn(key)]: identity([props.value]), - | ^^^^^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression - 8 | }; - 9 | mutate(key); - 10 | return context; -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md new file mode 100644 index 00000000000..d46db9c8de1 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md @@ -0,0 +1,56 @@ + +## Input + +```javascript +import {identity, mutate, mutateAndReturn} from 'shared-runtime'; + +function Component(props) { + const key = {}; + const context = { + [(mutate(key), key)]: identity([props.value]), + }; + mutate(key); + return [context, key]; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], + sequentialRenders: [{value: 42}, {value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, mutate, mutateAndReturn } from "shared-runtime"; + +function Component(props) { + const $ = _c(2); + let t0; + if ($[0] !== props.value) { + const key = {}; + const context = { [(mutate(key), key)]: identity([props.value]) }; + mutate(key); + t0 = [context, key]; + $[0] = props.value; + $[1] = t0; + } else { + t0 = $[1]; + } + return t0; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], + sequentialRenders: [{ value: 42 }, { value: 42 }], +}; + +``` + +### Eval output +(kind: ok) [{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}] +[{"[object Object]":[42]},{"wat0":"joe","wat1":"joe"}] \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js similarity index 79% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js index 59437a9ffde..183c03cf916 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction-sequence-expr.js @@ -6,10 +6,11 @@ function Component(props) { [(mutate(key), key)]: identity([props.value]), }; mutate(key); - return context; + return [context, key]; } export const FIXTURE_ENTRYPOINT = { fn: Component, params: [{value: 42}], + sequentialRenders: [{value: 42}, {value: 42}], }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md new file mode 100644 index 00000000000..1d671aa36cf --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.expect.md @@ -0,0 +1,55 @@ + +## Input + +```javascript +import {identity, mutate, mutateAndReturn} from 'shared-runtime'; + +function Component(props) { + const key = {}; + const context = { + [mutateAndReturn(key)]: identity([props.value]), + }; + mutate(key); + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], + sequentialRenders: [{value: 42}, {value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, mutate, mutateAndReturn } from "shared-runtime"; + +function Component(props) { + const $ = _c(2); + let context; + if ($[0] !== props.value) { + const key = {}; + context = { [mutateAndReturn(key)]: identity([props.value]) }; + mutate(key); + $[0] = props.value; + $[1] = context; + } else { + context = $[1]; + } + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], + sequentialRenders: [{ value: 42 }, { value: 42 }], +}; + +``` + +### Eval output +(kind: ok) {"[object Object]":[42]} +{"[object Object]":[42]} \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js similarity index 86% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js index 86d9cd7fd9b..0176850e981 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-modified-during-after-construction.js @@ -12,4 +12,5 @@ function Component(props) { export const FIXTURE_ENTRYPOINT = { fn: Component, params: [{value: 42}], + sequentialRenders: [{value: 42}, {value: 42}], }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md new file mode 100644 index 00000000000..4c4b45967e2 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.expect.md @@ -0,0 +1,67 @@ + +## Input + +```javascript +import {identity, mutate, mutateAndReturn} from 'shared-runtime'; + +function Component(props) { + const key = {}; + const context = { + [mutateAndReturn(key)]: identity([props.value]), + }; + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, mutate, mutateAndReturn } from "shared-runtime"; + +function Component(props) { + const $ = _c(5); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + const key = {}; + + t0 = mutateAndReturn(key); + $[0] = t0; + } else { + t0 = $[0]; + } + let t1; + if ($[1] !== props.value) { + t1 = identity([props.value]); + $[1] = props.value; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[3] !== t1) { + t2 = { [t0]: t1 }; + $[3] = t1; + $[4] = t2; + } else { + t2 = $[4]; + } + const context = t2; + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], +}; + +``` + +### Eval output +(kind: ok) {"[object Object]":[42]} \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.js similarity index 100% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-computed-key-mutate-key-while-constructing-object.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md new file mode 100644 index 00000000000..ac6cb97b086 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.expect.md @@ -0,0 +1,54 @@ + +## Input + +```javascript +import {identity, mutate, mutateAndReturn} from 'shared-runtime'; + +function Component(props) { + const obj = {mutateAndReturn}; + const key = {}; + const context = { + [obj.mutateAndReturn(key)]: identity([props.value]), + }; + mutate(key); + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { identity, mutate, mutateAndReturn } from "shared-runtime"; + +function Component(props) { + const $ = _c(2); + let context; + if ($[0] !== props.value) { + const obj = { mutateAndReturn }; + const key = {}; + context = { [obj.mutateAndReturn(key)]: identity([props.value]) }; + mutate(key); + $[0] = props.value; + $[1] = context; + } else { + context = $[1]; + } + return context; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], +}; + +``` + +### Eval output +(kind: ok) {"[object Object]":[42]} \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.js similarity index 100% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-expression-member-expr-call.js From 613cf80f263663f2c9923324ca41591c230c20ad Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com> Date: Tue, 21 Oct 2025 13:51:44 +0100 Subject: [PATCH 124/276] [DevTools] chore: add useSyncExternalStore examples to shell (#34932) Few examples of using `useSyncExternalStore` that can be useful for debugging hook tree reconstruction logic and hook names parsing feature. --- .../InspectableElements.js | 2 + .../UseSyncExternalStore.js | 133 ++++++++++++++++++ 2 files changed, 135 insertions(+) create mode 100644 packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js diff --git a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js index 95f104925b9..34f46774b18 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js @@ -20,6 +20,7 @@ import SimpleValues from './SimpleValues'; import SymbolKeys from './SymbolKeys'; import UseMemoCache from './UseMemoCache'; import UseEffectEvent from './UseEffectEvent'; +import UseSyncExternalStore from './UseSyncExternalStore'; // TODO Add Immutable JS example @@ -38,6 +39,7 @@ export default function InspectableElements(): React.Node { <SymbolKeys /> <UseMemoCache /> <UseEffectEvent /> + <UseSyncExternalStore /> </Fragment> ); } diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js b/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js new file mode 100644 index 00000000000..decb10b2db2 --- /dev/null +++ b/packages/react-devtools-shell/src/app/InspectableElements/UseSyncExternalStore.js @@ -0,0 +1,133 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import * as React from 'react'; + +const {useState, useEffect, useSyncExternalStore} = React; + +// Create a simple external store for demonstratio +function createStore<T>(initialValue: T): { + subscribe: (cb: () => void) => () => any, + getSnapshot: () => T, + setValue: (newValue: T) => void, +} { + let value = initialValue; + const subscribers = new Set<() => void>(); + + return { + subscribe(callback) { + subscribers.add(callback); + return () => subscribers.delete(callback); + }, + getSnapshot() { + return value; + }, + setValue(newValue) { + value = newValue; + subscribers.forEach(callback => callback()); + }, + }; +} + +const counterStore = createStore(0); +const themeStore = createStore('light'); + +export default function UseSyncExternalStore(): React.Node { + return ( + <> + <h2>useSyncExternalStore()</h2> + <SingleHookCase /> + <HookTreeCase /> + <MultipleStoresCase /> + </> + ); +} + +function SingleHookCase(): React.Node { + const count = useSyncExternalStore( + counterStore.subscribe, + counterStore.getSnapshot, + ); + + return ( + <div> + <h3>Single hook case</h3> + <p>Count: {count}</p> + <button onClick={() => counterStore.setValue(count + 1)}> + Increment + </button> + <button onClick={() => counterStore.setValue(count - 1)}> + Decrement + </button> + </div> + ); +} + +function useCounter() { + const count = useSyncExternalStore( + counterStore.subscribe, + counterStore.getSnapshot, + ); + const [localState, setLocalState] = useState(0); + + useEffect(() => { + // Some effect + }, [count]); + + return {count, localState, setLocalState}; +} + +function HookTreeCase(): React.Node { + const {count, localState, setLocalState} = useCounter(); + + return ( + <div> + <h3>Hook tree case</h3> + <p>External count: {count}</p> + <p>Local state: {localState}</p> + <button onClick={() => counterStore.setValue(count + 1)}> + Increment External + </button> + <button onClick={() => setLocalState(localState + 1)}> + Increment Local + </button> + </div> + ); +} + +function useTheme() { + const theme = useSyncExternalStore( + themeStore.subscribe, + themeStore.getSnapshot, + ); + + return theme; +} + +function MultipleStoresCase() { + const count = useSyncExternalStore( + counterStore.subscribe, + counterStore.getSnapshot, + ); + const theme = useTheme(); + + return ( + <div style={{background: theme === 'dark' ? '#333' : '#fff'}}> + <h3>Multiple stores case</h3> + <p>Count: {count}</p> + <p>Theme: {theme}</p> + <button + onClick={() => + themeStore.setValue(theme === 'light' ? 'dark' : 'light') + }> + Toggle Theme + </button> + </div> + ); +} From 39c6545cef85b5251e519080fd315bff728d87de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C5=82a=C5=BCej=20Kustra?= <46095609+blazejkustra@users.noreply.github.com> Date: Tue, 21 Oct 2025 14:59:20 +0200 Subject: [PATCH 125/276] Fix indices of hooks in devtools when using useSyncExternalStore (#34547) ## Summary This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook. It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes. Before: https://github.com/user-attachments/assets/0db72a4e-21f7-44c7-ba02-669a272631e5 After: https://github.com/user-attachments/assets/4da71392-0396-408d-86a7-6fbc82d8c4f5 ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). ```ts function Test() { // 1 React.useSyncExternalStore( () => {}, () => {}, () => {}, ); // 2 const [state, setState] = useState('test'); return ( <> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red'}}> {state} </div> </> ); } ``` --- .../src/backend/fiber/renderer.js | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index fe8722da568..9de9037690c 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -1913,6 +1913,20 @@ export function attach( return false; } + function isUseSyncExternalStoreHook(hookObject: any): boolean { + const queue = hookObject.queue; + if (!queue) { + return false; + } + + const boundHasOwnProperty = hasOwnProperty.bind(queue); + return ( + boundHasOwnProperty('value') && + boundHasOwnProperty('getSnapshot') && + typeof queue.getSnapshot === 'function' + ); + } + function isHookThatCanScheduleUpdate(hookObject: any) { const queue = hookObject.queue; if (!queue) { @@ -1929,12 +1943,7 @@ export function attach( return true; } - // Detect useSyncExternalStore() - return ( - boundHasOwnProperty('value') && - boundHasOwnProperty('getSnapshot') && - typeof queue.getSnapshot === 'function' - ); + return isUseSyncExternalStoreHook(hookObject); } function didStatefulHookChange(prev: any, next: any): boolean { @@ -1955,10 +1964,18 @@ export function attach( const indices = []; let index = 0; + while (next !== null) { if (didStatefulHookChange(prev, next)) { indices.push(index); } + + // useSyncExternalStore creates 2 internal hooks, but we only count it as 1 user-facing hook + if (isUseSyncExternalStoreHook(next)) { + next = next.next; + prev = prev.next; + } + next = next.next; prev = prev.next; index++; From 71b3a03cc936c8eb30a6e6108abf5550f5037f71 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Tue, 21 Oct 2025 10:57:18 -0400 Subject: [PATCH 126/276] [forgive] Various fixes to prepare for internal sync (#34928) Fixes a few small things: - Update imports to reference root babel-plugin-react-compiler rather than from `[...]/src/...` - Remove unused cosmiconfig options parsing for now - Update type exports in babel-plugin-react-compiler accordingly --- .../babel-plugin-react-compiler/src/index.ts | 3 + compiler/packages/react-forgive/package.json | 3 +- .../react-forgive/server/package.json | 1 - .../server/src/compiler/compat.ts | 2 +- .../server/src/compiler/index.ts | 2 +- .../server/src/compiler/options.ts | 25 ------ .../react-forgive/server/src/index.ts | 14 ++- .../src/requests/autodepsdecorations.ts | 2 +- .../packages/react-forgive/server/yarn.lock | 86 +------------------ 9 files changed, 15 insertions(+), 123 deletions(-) delete mode 100644 compiler/packages/react-forgive/server/src/compiler/options.ts diff --git a/compiler/packages/babel-plugin-react-compiler/src/index.ts b/compiler/packages/babel-plugin-react-compiler/src/index.ts index d2abd744d6b..ca5b6534301 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/index.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/index.ts @@ -29,10 +29,13 @@ export { ProgramContext, tryFindDirectiveEnablingMemoization as findDirectiveEnablingMemoization, findDirectiveDisablingMemoization, + defaultOptions, type CompilerPipelineValue, type Logger, type LoggerEvent, type PluginOptions, + type AutoDepsDecorationsEvent, + type CompileSuccessEvent, } from './Entrypoint'; export { Effect, diff --git a/compiler/packages/react-forgive/package.json b/compiler/packages/react-forgive/package.json index 0bf48e232ec..fc7d71095c5 100644 --- a/compiler/packages/react-forgive/package.json +++ b/compiler/packages/react-forgive/package.json @@ -36,13 +36,14 @@ }, "scripts": { "build": "yarn run compile", + "build:compiler": "yarn workspace babel-plugin-react-compiler build --dts", "compile": "rimraf dist && concurrently -n server,client \"scripts/build.mjs -t server\" \"scripts/build.mjs -t client\"", "dev": "yarn run package && yarn run install-ext", "install-ext": "code --install-extension react-forgive-0.0.0.vsix", "lint": "echo 'no tests'", "package": "rm -f react-forgive-0.0.0.vsix && vsce package --yarn", "postinstall": "cd client && yarn install && cd ../server && yarn install && cd ..", - "pretest": "yarn run compile && yarn run lint", + "pretest": "yarn run build:compiler && yarn run compile && yarn run lint", "test": "vscode-test", "vscode:prepublish": "yarn run compile", "watch": "scripts/build.mjs --watch" diff --git a/compiler/packages/react-forgive/server/package.json b/compiler/packages/react-forgive/server/package.json index fb6f4feebd7..c9125860720 100644 --- a/compiler/packages/react-forgive/server/package.json +++ b/compiler/packages/react-forgive/server/package.json @@ -18,7 +18,6 @@ "@babel/parser": "^7.26.0", "@babel/plugin-syntax-typescript": "^7.25.9", "@babel/types": "^7.26.0", - "cosmiconfig": "^9.0.0", "prettier": "^3.3.3", "vscode-languageserver": "^9.0.1", "vscode-languageserver-textdocument": "^1.0.12" diff --git a/compiler/packages/react-forgive/server/src/compiler/compat.ts b/compiler/packages/react-forgive/server/src/compiler/compat.ts index 10271cbdcdc..f467f70ba13 100644 --- a/compiler/packages/react-forgive/server/src/compiler/compat.ts +++ b/compiler/packages/react-forgive/server/src/compiler/compat.ts @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import {SourceLocation} from 'babel-plugin-react-compiler/src'; +import {type SourceLocation} from 'babel-plugin-react-compiler'; import {type Range} from 'vscode-languageserver'; export function babelLocationToRange(loc: SourceLocation): Range | null { diff --git a/compiler/packages/react-forgive/server/src/compiler/index.ts b/compiler/packages/react-forgive/server/src/compiler/index.ts index fe192c62132..b474253f71e 100644 --- a/compiler/packages/react-forgive/server/src/compiler/index.ts +++ b/compiler/packages/react-forgive/server/src/compiler/index.ts @@ -9,7 +9,7 @@ import type * as BabelCore from '@babel/core'; import {parseAsync, transformFromAstAsync} from '@babel/core'; import BabelPluginReactCompiler, { type PluginOptions, -} from 'babel-plugin-react-compiler/src'; +} from 'babel-plugin-react-compiler'; import * as babelParser from 'prettier/plugins/babel.js'; import estreeParser from 'prettier/plugins/estree'; import * as typescriptParser from 'prettier/plugins/typescript'; diff --git a/compiler/packages/react-forgive/server/src/compiler/options.ts b/compiler/packages/react-forgive/server/src/compiler/options.ts deleted file mode 100644 index 226be799d3a..00000000000 --- a/compiler/packages/react-forgive/server/src/compiler/options.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { - parsePluginOptions, - type PluginOptions, -} from 'babel-plugin-react-compiler/src'; -import {cosmiconfigSync} from 'cosmiconfig'; - -export function resolveReactConfig(projectPath: string): PluginOptions | null { - const explorerSync = cosmiconfigSync('react', { - searchStrategy: 'project', - cache: true, - }); - const result = explorerSync.search(projectPath); - if (result != null) { - return parsePluginOptions(result.config); - } else { - return null; - } -} diff --git a/compiler/packages/react-forgive/server/src/index.ts b/compiler/packages/react-forgive/server/src/index.ts index fd4ffd99886..7552337cbc7 100644 --- a/compiler/packages/react-forgive/server/src/index.ts +++ b/compiler/packages/react-forgive/server/src/index.ts @@ -20,13 +20,12 @@ import { TextDocumentSyncKind, } from 'vscode-languageserver/node'; import {compile, lastResult} from './compiler'; -import {type PluginOptions} from 'babel-plugin-react-compiler/src'; -import {resolveReactConfig} from './compiler/options'; import { type CompileSuccessEvent, type LoggerEvent, + type PluginOptions, defaultOptions, -} from 'babel-plugin-react-compiler/src/Entrypoint/Options'; +} from 'babel-plugin-react-compiler'; import {babelLocationToRange, getRangeFirstCharacter} from './compiler/compat'; import { type AutoDepsDecorationsLSPEvent, @@ -64,8 +63,7 @@ type CodeActionLSPEvent = { }; connection.onInitialize((_params: InitializeParams) => { - // TODO(@poteto) get config fr - compilerOptions = resolveReactConfig('.') ?? defaultOptions; + compilerOptions = defaultOptions; compilerOptions = { ...compilerOptions, environment: { @@ -76,21 +74,21 @@ connection.onInitialize((_params: InitializeParams) => { importSpecifierName: 'useEffect', source: 'react', }, - numRequiredArgs: 1, + autodepsIndex: 1, }, { function: { importSpecifierName: 'useSpecialEffect', source: 'shared-runtime', }, - numRequiredArgs: 2, + autodepsIndex: 2, }, { function: { importSpecifierName: 'default', source: 'useEffectWrapper', }, - numRequiredArgs: 1, + autodepsIndex: 1, }, ], }, diff --git a/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts b/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts index 77a568662e4..c9c9e8ca013 100644 --- a/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts +++ b/compiler/packages/react-forgive/server/src/requests/autodepsdecorations.ts @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import {type AutoDepsDecorationsEvent} from 'babel-plugin-react-compiler/src/Entrypoint'; +import {type AutoDepsDecorationsEvent} from 'babel-plugin-react-compiler'; import {type Position} from 'vscode-languageserver-textdocument'; import {RequestType} from 'vscode-languageserver/node'; import {type Range, sourceLocationToRange} from '../utils/range'; diff --git a/compiler/packages/react-forgive/server/yarn.lock b/compiler/packages/react-forgive/server/yarn.lock index b72063294ff..ee346ce7d3a 100644 --- a/compiler/packages/react-forgive/server/yarn.lock +++ b/compiler/packages/react-forgive/server/yarn.lock @@ -10,7 +10,7 @@ "@jridgewell/gen-mapping" "^0.3.5" "@jridgewell/trace-mapping" "^0.3.24" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2": +"@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2": version "7.26.2" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ== @@ -188,11 +188,6 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -argparse@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" - integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== - browserslist@^4.24.0: version "4.24.3" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.3.tgz#5fc2725ca8fb3c1432e13dac278c7cc103e026d2" @@ -203,11 +198,6 @@ browserslist@^4.24.0: node-releases "^2.0.19" update-browserslist-db "^1.1.1" -callsites@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" - integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== - caniuse-lite@^1.0.30001688: version "1.0.30001690" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz#f2d15e3aaf8e18f76b2b8c1481abde063b8104c8" @@ -218,16 +208,6 @@ convert-source-map@^2.0.0: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== -cosmiconfig@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d" - integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg== - dependencies: - env-paths "^2.2.1" - import-fresh "^3.3.0" - js-yaml "^4.1.0" - parse-json "^5.2.0" - debug@^4.1.0, debug@^4.3.1: version "4.4.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a" @@ -240,18 +220,6 @@ electron-to-chromium@^1.5.73: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz#cb886b504a6467e4c00bea3317edb38393c53413" integrity sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw== -env-paths@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2" - integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A== - -error-ex@^1.3.1: - version "1.3.2" - resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" - integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g== - dependencies: - is-arrayish "^0.2.1" - escalade@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5" @@ -267,51 +235,21 @@ globals@^11.1.0: resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== -import-fresh@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" - integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw== - dependencies: - parent-module "^1.0.0" - resolve-from "^4.0.0" - -is-arrayish@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" - integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg== - js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== -js-yaml@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602" - integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA== - dependencies: - argparse "^2.0.1" - jsesc@^3.0.2: version "3.1.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d" integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== -json-parse-even-better-errors@^2.3.0: - version "2.3.1" - resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d" - integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w== - json5@^2.2.3: version "2.2.3" resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== -lines-and-columns@^1.1.6: - version "1.2.4" - resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" - integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== - lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" @@ -329,23 +267,6 @@ node-releases@^2.0.19: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314" integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw== -parent-module@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" - integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g== - dependencies: - callsites "^3.0.0" - -parse-json@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd" - integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg== - dependencies: - "@babel/code-frame" "^7.0.0" - error-ex "^1.3.1" - json-parse-even-better-errors "^2.3.0" - lines-and-columns "^1.1.6" - picocolors@^1.0.0, picocolors@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" @@ -356,11 +277,6 @@ prettier@^3.3.3: resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f" integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ== -resolve-from@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" - integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== - semver@^6.3.1: version "6.3.1" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" From 6b344c7c5359d0113389ef92d0a6a4d5cbb76677 Mon Sep 17 00:00:00 2001 From: Karl Horky <karl.horky@gmail.com> Date: Wed, 22 Oct 2025 18:31:09 +0200 Subject: [PATCH 127/276] Switch to `export =` to fix eslint-plugin-react-hooks types (#34949)  ## Summary  Resolve the type error with the types, according to [Are the types wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%407.0.0), as an additional - Last attempt: https://github.com/facebook/react/pull/34746 - Original issue: https://github.com/facebook/react/issues/34745 ## How did you test this change? I edited `node_modules/eslint-plugin-react-hooks/index.d.ts` in my `"module": "Node16"` + `"type": "module"` project and my error went away: - https://github.com/facebook/react/issues/34801#issuecomment-3433053067 cc @poteto @michaelfaith @andrewbranch  --- packages/eslint-plugin-react-hooks/npm/index.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-react-hooks/npm/index.d.ts b/packages/eslint-plugin-react-hooks/npm/index.d.ts index c883d6f8adf..7516dc1e846 100644 --- a/packages/eslint-plugin-react-hooks/npm/index.d.ts +++ b/packages/eslint-plugin-react-hooks/npm/index.d.ts @@ -5,4 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -export {default} from './cjs/eslint-plugin-react-hooks'; +import reactHooks from './cjs/eslint-plugin-react-hooks'; + +export = reactHooks; From bbb7a1fdf741eed6b7adcd48a441259819d664cc Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Wed, 22 Oct 2025 13:18:44 -0400 Subject: [PATCH 128/276] [eprh] Type `configs.flat` more strictly (#34950) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Addresses #34801 where `configs.flat` is possibly undefined as it was typed as a record of arbitrary string keys. <img width="990" height="125" alt="Screenshot 2025-10-22 at 1 16 44 PM" src="https://github.com/user-attachments/assets/8b0d37b9-d7b0-4fc0-aa62-1b0968dae75f" /> --- packages/eslint-plugin-react-hooks/src/index.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin-react-hooks/src/index.ts b/packages/eslint-plugin-react-hooks/src/index.ts index 6d72c1daa57..924299d8989 100644 --- a/packages/eslint-plugin-react-hooks/src/index.ts +++ b/packages/eslint-plugin-react-hooks/src/index.ts @@ -71,7 +71,10 @@ const configs = { plugins, rules: recommendedLatestRuleConfigs, }, - flat: {} as Record<string, ReactHooksFlatConfig>, + flat: {} as { + recommended: ReactHooksFlatConfig; + 'recommended-latest': ReactHooksFlatConfig; + }, }; const plugin = { From 723b25c6444e4dcabe710ae33bc93cea79324428 Mon Sep 17 00:00:00 2001 From: Karl Horky <karl.horky@gmail.com> Date: Wed, 22 Oct 2025 20:05:49 +0200 Subject: [PATCH 129/276] Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (#34951) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit  ## Summary  Fix the runtime error with named imports and make the last remaining [Are The Types Wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%400.0.0-experimental-6b344c7c-20251022) error with `eslint-plugin-react-hooks` go away, thanks to the hint from @andrewbranch: - https://github.com/facebook/react/issues/34801#issuecomment-3433478810 ## How did you test this change?  I tried adding this to `node_modules` and it fixed the failures when importing named imports like `import { configs, meta, rules } from 'eslint-plugin-react-hooks'`: ```bash ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 Oops! Something went wrong! :( ESLint: 9.37.0 file:///Users/k/p/eslint-config-upleveled/index.js:13 import reactHooks, { configs } from 'eslint-plugin-react-hooks'; ^^^^^^^ SyntaxError: Named export 'configs' not found. The requested module 'eslint-plugin-react-hooks' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'eslint-plugin-react-hooks'; const { configs } = pkg; at ModuleJob._instantiate (node:internal/modules/esm/module_job:228:21) at async ModuleJob.run (node:internal/modules/esm/module_job:335:5) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:647:26) at async dynamicImportConfig (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:186:17) at async loadConfigFile (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:276:9) at async ConfigLoader.calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:589:23) at async #calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:743:23) at async directoryFilter (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/eslint/eslint-helpers.js:309:5) at async NodeHfs.<anonymous> (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:586:29) at async NodeHfs.walk (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:614:3) ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 ➜ eslint-config-upleveled git:(renovate/react-monorepo) # no error ``` The named imports identifiers `configs`, `meta`, and `rules` also contain values, as a sanity check: - https://github.com/facebook/react/pull/34951#issuecomment-3433555636 cc @poteto --- packages/eslint-plugin-react-hooks/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/eslint-plugin-react-hooks/index.js b/packages/eslint-plugin-react-hooks/index.js index ce26a10c315..4c18af7c001 100644 --- a/packages/eslint-plugin-react-hooks/index.js +++ b/packages/eslint-plugin-react-hooks/index.js @@ -1 +1,11 @@ module.exports = require('./src/index.ts'); + +// Hint to Node’s cjs-module-lexer to make named imports work +// https://github.com/facebook/react/issues/34801#issuecomment-3433478810 +// eslint-disable-next-line ft-flow/no-unused-expressions +0 && + (module.exports = { + meta: true, + rules: true, + configs: true, + }); From eb2f784e752ba690f032db4c3d87daac77a5a2aa Mon Sep 17 00:00:00 2001 From: Karl Horky <karl.horky@gmail.com> Date: Wed, 22 Oct 2025 23:51:01 +0200 Subject: [PATCH 130/276] Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (#34953) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit  Supersedes #34951 ## Summary  Fix the runtime error with named imports and make the last remaining [Are The Types Wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%400.0.0-experimental-6b344c7c-20251022) error with `eslint-plugin-react-hooks` go away, thanks to the hint from Andrew Branch: - https://github.com/facebook/react/issues/34801#issuecomment-3433478810 ## How did you test this change?  I tried adding this to `node_modules` and it fixed the failures when importing named imports like `import { configs, meta, rules } from 'eslint-plugin-react-hooks'`: ```bash ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 Oops! Something went wrong! :( ESLint: 9.37.0 file:///Users/k/p/eslint-config-upleveled/index.js:13 import reactHooks, { configs } from 'eslint-plugin-react-hooks'; ^^^^^^^ SyntaxError: Named export 'configs' not found. The requested module 'eslint-plugin-react-hooks' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'eslint-plugin-react-hooks'; const { configs } = pkg; at ModuleJob._instantiate (node:internal/modules/esm/module_job:228:21) at async ModuleJob.run (node:internal/modules/esm/module_job:335:5) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:647:26) at async dynamicImportConfig (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:186:17) at async loadConfigFile (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:276:9) at async ConfigLoader.calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:589:23) at async #calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:743:23) at async directoryFilter (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/eslint/eslint-helpers.js:309:5) at async NodeHfs.<anonymous> (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:586:29) at async NodeHfs.walk (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:614:3) ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 ➜ eslint-config-upleveled git:(renovate/react-monorepo) # no error ``` The named imports identifiers `configs`, `meta`, and `rules` also contain values, as a sanity check: - https://github.com/facebook/react/pull/34951#issuecomment-3433555636 cc @poteto --- packages/eslint-plugin-react-hooks/index.js | 10 ---------- packages/eslint-plugin-react-hooks/npm/index.js | 10 ++++++++++ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/eslint-plugin-react-hooks/index.js b/packages/eslint-plugin-react-hooks/index.js index 4c18af7c001..ce26a10c315 100644 --- a/packages/eslint-plugin-react-hooks/index.js +++ b/packages/eslint-plugin-react-hooks/index.js @@ -1,11 +1 @@ module.exports = require('./src/index.ts'); - -// Hint to Node’s cjs-module-lexer to make named imports work -// https://github.com/facebook/react/issues/34801#issuecomment-3433478810 -// eslint-disable-next-line ft-flow/no-unused-expressions -0 && - (module.exports = { - meta: true, - rules: true, - configs: true, - }); diff --git a/packages/eslint-plugin-react-hooks/npm/index.js b/packages/eslint-plugin-react-hooks/npm/index.js index b819fc70236..3e8352af1e6 100644 --- a/packages/eslint-plugin-react-hooks/npm/index.js +++ b/packages/eslint-plugin-react-hooks/npm/index.js @@ -14,3 +14,13 @@ if (process.env.NODE_ENV === 'production') { } else { module.exports = require('./cjs/eslint-plugin-react-hooks.development.js'); } + +// Hint to Node’s cjs-module-lexer to make named imports work +// https://github.com/facebook/react/issues/34801#issuecomment-3433478810 +// eslint-disable-next-line ft-flow/no-unused-expressions +0 && + (module.exports = { + meta: true, + rules: true, + configs: true, + }); From 6160773f309b7fc734767649d47140d04fa1f568 Mon Sep 17 00:00:00 2001 From: Timothy Lau <timothy-lau@outlook.com> Date: Thu, 23 Oct 2025 23:13:18 +0800 Subject: [PATCH 131/276] [playground] Refactor ConfigEditor to use <Activity> component (#34958) ## Summary This PR addresses a pending TODO comment left in https://github.com/facebook/react/pull/34499 https://github.com/facebook/react/blame/eb2f784e752ba690f032db4c3d87daac77a5a2aa/compiler/apps/playground/components/Editor/ConfigEditor.tsx#L37 This change removes the temporary workaround and replaces it with `<Activity>`, as originally intended. ## How did you test this change? - Updated the component to use `<Activity>` directly - Verified the editor renders correctly in both development and production builds. - The `<Activity>` UI updates as expected. https://github.com/user-attachments/assets/ce976123-da59-4579-b063-b308a9167b21 --- .../components/Editor/ConfigEditor.tsx | 19 +++---- compiler/apps/playground/package.json | 14 ++--- compiler/apps/playground/styles/globals.css | 9 +++ compiler/apps/playground/yarn.lock | 57 ++++++++++--------- 4 files changed, 54 insertions(+), 45 deletions(-) diff --git a/compiler/apps/playground/components/Editor/ConfigEditor.tsx b/compiler/apps/playground/components/Editor/ConfigEditor.tsx index 18f904d225f..cf80b48dbf0 100644 --- a/compiler/apps/playground/components/Editor/ConfigEditor.tsx +++ b/compiler/apps/playground/components/Editor/ConfigEditor.tsx @@ -14,6 +14,7 @@ import React, { unstable_ViewTransition as ViewTransition, unstable_addTransitionType as addTransitionType, startTransition, + Activity, } from 'react'; import {Resizable} from 're-resizable'; import {useStore, useStoreDispatch} from '../StoreContext'; @@ -34,12 +35,8 @@ export default function ConfigEditor({ const [isExpanded, setIsExpanded] = useState(false); return ( - // TODO: Use <Activity> when it is compatible with Monaco: https://github.com/suren-atoyan/monaco-react/issues/753 <> - <div - style={{ - display: isExpanded ? 'block' : 'none', - }}> + <Activity mode={isExpanded ? 'visible' : 'hidden'}> <ExpandedEditor onToggle={() => { startTransition(() => { @@ -49,11 +46,8 @@ export default function ConfigEditor({ }} formattedAppliedConfig={formattedAppliedConfig} /> - </div> - <div - style={{ - display: !isExpanded ? 'block' : 'none', - }}> + </Activity> + <Activity mode={isExpanded ? 'hidden' : 'visible'}> <CollapsedEditor onToggle={() => { startTransition(() => { @@ -62,7 +56,7 @@ export default function ConfigEditor({ }); }} /> - </div> + </Activity> </> ); } @@ -122,7 +116,8 @@ function ExpandedEditor({ return ( <ViewTransition - update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}> + enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}} + exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}> <Resizable minWidth={300} maxWidth={600} diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json index 6d5757008a5..7c187b439e7 100644 --- a/compiler/apps/playground/package.json +++ b/compiler/apps/playground/package.json @@ -26,7 +26,7 @@ "@babel/traverse": "^7.18.9", "@babel/types": "7.26.3", "@heroicons/react": "^1.0.6", - "@monaco-editor/react": "^4.4.6", + "@monaco-editor/react": "^4.8.0-rc.2", "@playwright/test": "^1.51.1", "@use-gesture/react": "^10.2.22", "hermes-eslint": "^0.25.0", @@ -40,13 +40,13 @@ "prettier": "^3.3.3", "pretty-format": "^29.3.1", "re-resizable": "^6.9.16", - "react": "19.1.1", - "react-dom": "19.1.1" + "react": "19.2", + "react-dom": "19.2" }, "devDependencies": { "@types/node": "18.11.9", - "@types/react": "19.1.13", - "@types/react-dom": "19.1.9", + "@types/react": "19.2", + "@types/react-dom": "19.2", "autoprefixer": "^10.4.13", "clsx": "^1.2.1", "concurrently": "^7.4.0", @@ -58,7 +58,7 @@ "wait-on": "^7.2.0" }, "resolutions": { - "@types/react": "19.1.12", - "@types/react-dom": "19.1.9" + "@types/react": "19.2", + "@types/react-dom": "19.2" } } diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css index 86b069f0579..ead5d83a65d 100644 --- a/compiler/apps/playground/styles/globals.css +++ b/compiler/apps/playground/styles/globals.css @@ -79,6 +79,15 @@ ::view-transition-group(.slide-in) { z-index: 1; } +::view-transition-old(.slide-out) { + animation-name: slideOutLeft; +} +::view-transition-new(.slide-out) { + animation-name: slideInLeft; +} +::view-transition-group(.slide-out) { + z-index: 1; +} @keyframes slideOutLeft { from { diff --git a/compiler/apps/playground/yarn.lock b/compiler/apps/playground/yarn.lock index 00b8a6950f9..232d37448ee 100644 --- a/compiler/apps/playground/yarn.lock +++ b/compiler/apps/playground/yarn.lock @@ -701,19 +701,19 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -"@monaco-editor/loader@^1.4.0": - version "1.4.0" - resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558" - integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg== +"@monaco-editor/loader@^1.6.1": + version "1.6.1" + resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.6.1.tgz#c99177d87765abf10de31a0086084e714acfbc0f" + integrity sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg== dependencies: state-local "^1.0.6" -"@monaco-editor/react@^4.4.6": - version "4.6.0" - resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119" - integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw== +"@monaco-editor/react@^4.8.0-rc.2": + version "4.8.0-rc.2" + resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.8.0-rc.2.tgz#e9acf652e23e9f640671a69875f496dde7f098aa" + integrity sha512-RzFHKBCnRA4RnozaG/EPhKsbkhX5wcApSa5MElR/AD2ojxhMY+QP+G8aJpxALCnIwKs6L0dec5MJ0nAjMUEqnA== dependencies: - "@monaco-editor/loader" "^1.4.0" + "@monaco-editor/loader" "^1.6.1" "@next/env@15.6.0-canary.7": version "15.6.0-canary.7" @@ -859,6 +859,11 @@ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b" integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ== +"@types/react-dom@19.2": + version "19.2.2" + resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332" + integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw== + "@types/react@19.1.12": version "19.1.12" resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b" @@ -866,10 +871,10 @@ dependencies: csstype "^3.0.2" -"@types/react@19.1.13": - version "19.1.13" - resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.13.tgz#fc650ffa680d739a25a530f5d7ebe00cdd771883" - integrity sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ== +"@types/react@19.2": + version "19.2.2" + resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36" + integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA== dependencies: csstype "^3.0.2" @@ -3589,12 +3594,12 @@ re-resizable@^6.9.16: resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.0.tgz#d684a096ab438f1a93f59ad3a580a206b0ce31ee" integrity sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw== -react-dom@19.1.1: - version "19.1.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.1.tgz#2daa9ff7f3ae384aeb30e76d5ee38c046dc89893" - integrity sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw== +react-dom@19.2: + version "19.2.0" + resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8" + integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ== dependencies: - scheduler "^0.26.0" + scheduler "^0.27.0" react-is@^16.13.1: version "16.13.1" @@ -3606,10 +3611,10 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== -react@19.1.1: - version "19.1.1" - resolved "https://registry.yarnpkg.com/react/-/react-19.1.1.tgz#06d9149ec5e083a67f9a1e39ce97b06a03b644af" - integrity sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ== +react@19.2: + version "19.2.0" + resolved "https://registry.npmjs.org/react/-/react-19.2.0.tgz#d33dd1721698f4376ae57a54098cb47fc75d93a5" + integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ== read-cache@^1.0.0: version "1.0.0" @@ -3785,10 +3790,10 @@ safe-regex-test@^1.1.0: es-errors "^1.3.0" is-regex "^1.2.1" -scheduler@^0.26.0: - version "0.26.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.26.0.tgz#4ce8a8c2a2095f13ea11bf9a445be50c555d6337" - integrity sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA== +scheduler@^0.27.0: + version "0.27.0" + resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd" + integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q== semver@^6.3.1: version "6.3.1" From e0654becf799516c1d0a1093a641afef78e476c5 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Thu, 23 Oct 2025 13:43:16 -0400 Subject: [PATCH 132/276] [eprh] Update changelog for 7.0.1 (#34964) Add changelog entry for 7.0.1 --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34964). * #34965 * __->__ #34964 --- packages/eslint-plugin-react-hooks/CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md index 0aba9e00561..9f88047193e 100644 --- a/packages/eslint-plugin-react-hooks/CHANGELOG.md +++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md @@ -1,3 +1,10 @@ +## 7.0.1 + +- Disallowed passing inline `useEffectEvent` values as JSX props to guard against accidental propagation. ([#34820](https://github.com/facebook/react/pull/34820) by [@jf-eirinha](https://github.com/jf-eirinha)) +- Switch to `export =` so eslint-plugin-react-hooks emits correct types for consumers in Node16 ESM projects. ([#34949](https://github.com/facebook/react/pull/34949) by [@karlhorky](https://github.com/karlhorky)) +- Tightened the typing of `configs.flat` so the `configs` export is always defined. ([#34950](https://github.com/facebook/react/pull/34950) by [@poteto](https://github.com/poteto)) +- Fix named import runtime errors. ([#34951](https://github.com/facebook/react/pull/34951), [#34953](https://github.com/facebook/react/pull/34953) by [@karlhorky](https://github.com/karlhorky)) + ## 7.0.0 This release slims down presets to just 2 configurations (`recommended` and `recommended-latest`), and all compiler rules are enabled by default. From c91783c1f2231ca5d99f5700f4c7fda4006a217e Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Thu, 23 Oct 2025 13:43:27 -0400 Subject: [PATCH 133/276] [eprh] Bump ReactVersions for next version (#34965) This was outdated from previously. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34965). * __->__ #34965 * #34964 --- ReactVersions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReactVersions.js b/ReactVersions.js index ba7b222bf06..dd8c78afb13 100644 --- a/ReactVersions.js +++ b/ReactVersions.js @@ -33,7 +33,7 @@ const canaryChannelLabel = 'canary'; const rcNumber = 0; const stablePackages = { - 'eslint-plugin-react-hooks': '7.0.0', + 'eslint-plugin-react-hooks': '7.1.0', 'jest-react': '0.18.0', react: ReactVersion, 'react-art': ReactVersion, From 09056abde76c464f4632f322a0ac30cd3984cee6 Mon Sep 17 00:00:00 2001 From: Jorge Cabiedes <57368278+jorge-cab@users.noreply.github.com> Date: Thu, 23 Oct 2025 11:05:55 -0700 Subject: [PATCH 134/276] [Compiler] Improve error for calculate in render useEffect validation (#34580) Summary: Change error and update snapshots The error now mentions what values are causing the issue which should provide better context on how to fix the issue --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34580). * __->__ #34580 * #34579 * #34578 * #34577 * #34575 * #34574 --- .../src/Entrypoint/Pipeline.ts | 5 + .../src/HIR/Environment.ts | 6 + ...idateNoDerivedComputationsInEffects_exp.ts | 504 ++++++++++++++++++ ...ter-call-outside-effect-no-error.expect.md | 84 +++ ...rop-setter-call-outside-effect-no-error.js | 21 + ...ter-used-outside-effect-no-error.expect.md | 85 +++ ...rop-setter-used-outside-effect-no-error.js | 20 + ...tate-from-ref-and-state-no-error.expect.md | 73 +++ ...rived-state-from-ref-and-state-no-error.js | 19 + ...ains-prop-function-call-no-error.expect.md | 75 +++ ...ct-contains-prop-function-call-no-error.js | 17 + ...th-global-function-call-no-error.expect.md | 70 +++ ...fect-with-global-function-call-no-error.js | 17 + ...ed-state-conditionally-in-effect.expect.md | 49 ++ ...r.derived-state-conditionally-in-effect.js | 21 + ...derived-state-from-default-props.expect.md | 46 ++ .../error.derived-state-from-default-props.js | 18 + ...state-from-local-state-in-effect.expect.md | 43 ++ ...erived-state-from-local-state-in-effect.js | 15 + ...-local-state-and-component-scope.expect.md | 53 ++ ...om-prop-local-state-and-component-scope.js | 25 + ...state-from-prop-with-side-effect.expect.md | 46 ++ ...erived-state-from-prop-with-side-effect.js | 18 + ...ect-contains-local-function-call.expect.md | 50 ++ ...ror.effect-contains-local-function-call.js | 22 + ...id-derived-computation-in-effect.expect.md | 48 ++ ...r.invalid-derived-computation-in-effect.js | 20 + ...erived-state-from-computed-props.expect.md | 46 ++ ...valid-derived-state-from-computed-props.js | 18 + ...ed-state-from-destructured-props.expect.md | 47 ++ ...d-derived-state-from-destructured-props.js | 19 + ...f-conditional-in-effect-no-error.expect.md | 82 +++ .../ref-conditional-in-effect-no-error.js | 23 + ...id-derived-computation-in-effect.expect.md | 18 +- ...r.invalid-derived-computation-in-effect.js | 4 +- 35 files changed, 1718 insertions(+), 9 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts index 1085d4c69e0..a83b22651e7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts @@ -103,6 +103,7 @@ import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoF import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects'; import {inferMutationAliasingRanges} from '../Inference/InferMutationAliasingRanges'; import {validateNoDerivedComputationsInEffects} from '../Validation/ValidateNoDerivedComputationsInEffects'; +import {validateNoDerivedComputationsInEffects_exp} from '../Validation/ValidateNoDerivedComputationsInEffects_exp'; import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions'; export type CompilerPipelineValue = @@ -275,6 +276,10 @@ function runWithEnvironment( validateNoDerivedComputationsInEffects(hir); } + if (env.config.validateNoDerivedComputationsInEffects_exp) { + validateNoDerivedComputationsInEffects_exp(hir); + } + if (env.config.validateNoSetStateInEffects) { env.logErrors(validateNoSetStateInEffects(hir, env)); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index bdbfb20a59a..efee8e080e3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -324,6 +324,12 @@ export const EnvironmentConfigSchema = z.object({ */ validateNoDerivedComputationsInEffects: z.boolean().default(false), + /** + * Experimental: Validates that effects are not used to calculate derived data which could instead be computed + * during render. Generates a custom error message for each type of violation. + */ + validateNoDerivedComputationsInEffects_exp: z.boolean().default(false), + /** * Validates against creating JSX within a try block and recommends using an error boundary * instead. diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts new file mode 100644 index 00000000000..a755d0e2c65 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts @@ -0,0 +1,504 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {CompilerDiagnostic, CompilerError, Effect} from '..'; +import {ErrorCategory} from '../CompilerError'; +import { + BlockId, + FunctionExpression, + HIRFunction, + IdentifierId, + isSetStateType, + isUseEffectHookType, + Place, + CallExpression, + Instruction, + isUseStateType, + BasicBlock, + isUseRefType, + GeneratedSource, + SourceLocation, +} from '../HIR'; +import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors'; +import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables'; +import {assertExhaustive} from '../Utils/utils'; + +type TypeOfValue = 'ignored' | 'fromProps' | 'fromState' | 'fromPropsAndState'; + +type DerivationMetadata = { + typeOfValue: TypeOfValue; + place: Place; + sourcesIds: Set<IdentifierId>; +}; + +type ValidationContext = { + readonly functions: Map<IdentifierId, FunctionExpression>; + readonly errors: CompilerError; + readonly derivationCache: DerivationCache; + readonly effects: Set<HIRFunction>; + readonly setStateCache: Map<string | undefined | null, Array<Place>>; + readonly effectSetStateCache: Map<string | undefined | null, Array<Place>>; +}; + +class DerivationCache { + hasChanges: boolean = false; + cache: Map<IdentifierId, DerivationMetadata> = new Map(); + + snapshot(): boolean { + const hasChanges = this.hasChanges; + this.hasChanges = false; + return hasChanges; + } + + addDerivationEntry( + derivedVar: Place, + sourcesIds: Set<IdentifierId>, + typeOfValue: TypeOfValue, + ): void { + let newValue: DerivationMetadata = { + place: derivedVar, + sourcesIds: new Set(), + typeOfValue: typeOfValue ?? 'ignored', + }; + + if (sourcesIds !== undefined) { + for (const id of sourcesIds) { + const sourcePlace = this.cache.get(id)?.place; + + if (sourcePlace === undefined) { + continue; + } + + /* + * If the identifier of the source is a promoted identifier, then + * we should set the target as the source. + */ + if ( + sourcePlace.identifier.name === null || + sourcePlace.identifier.name?.kind === 'promoted' + ) { + newValue.sourcesIds.add(derivedVar.identifier.id); + } else { + newValue.sourcesIds.add(sourcePlace.identifier.id); + } + } + } + + if (newValue.sourcesIds.size === 0) { + newValue.sourcesIds.add(derivedVar.identifier.id); + } + + const existingValue = this.cache.get(derivedVar.identifier.id); + if ( + existingValue === undefined || + !this.isDerivationEqual(existingValue, newValue) + ) { + this.cache.set(derivedVar.identifier.id, newValue); + this.hasChanges = true; + } + } + + private isDerivationEqual( + a: DerivationMetadata, + b: DerivationMetadata, + ): boolean { + if (a.typeOfValue !== b.typeOfValue) { + return false; + } + if (a.sourcesIds.size !== b.sourcesIds.size) { + return false; + } + for (const id of a.sourcesIds) { + if (!b.sourcesIds.has(id)) { + return false; + } + } + return true; + } +} + +/** + * Validates that useEffect is not used for derived computations which could/should + * be performed in render. + * + * See https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state + * + * Example: + * + * ``` + * // 🔴 Avoid: redundant state and unnecessary Effect + * const [fullName, setFullName] = useState(''); + * useEffect(() => { + * setFullName(firstName + ' ' + lastName); + * }, [firstName, lastName]); + * ``` + * + * Instead use: + * + * ``` + * // ✅ Good: calculated during rendering + * const fullName = firstName + ' ' + lastName; + * ``` + */ +export function validateNoDerivedComputationsInEffects_exp( + fn: HIRFunction, +): void { + const functions: Map<IdentifierId, FunctionExpression> = new Map(); + const derivationCache = new DerivationCache(); + const errors = new CompilerError(); + const effects: Set<HIRFunction> = new Set(); + + const setStateCache: Map<string | undefined | null, Array<Place>> = new Map(); + const effectSetStateCache: Map< + string | undefined | null, + Array<Place> + > = new Map(); + + const context: ValidationContext = { + functions, + errors, + derivationCache, + effects, + setStateCache, + effectSetStateCache, + }; + + if (fn.fnType === 'Hook') { + for (const param of fn.params) { + if (param.kind === 'Identifier') { + context.derivationCache.cache.set(param.identifier.id, { + place: param, + sourcesIds: new Set([param.identifier.id]), + typeOfValue: 'fromProps', + }); + context.derivationCache.hasChanges = true; + } + } + } else if (fn.fnType === 'Component') { + const props = fn.params[0]; + if (props != null && props.kind === 'Identifier') { + context.derivationCache.cache.set(props.identifier.id, { + place: props, + sourcesIds: new Set([props.identifier.id]), + typeOfValue: 'fromProps', + }); + context.derivationCache.hasChanges = true; + } + } + + let isFirstPass = true; + do { + for (const block of fn.body.blocks.values()) { + recordPhiDerivations(block, context); + for (const instr of block.instructions) { + recordInstructionDerivations(instr, context, isFirstPass); + } + } + + isFirstPass = false; + } while (context.derivationCache.snapshot()); + + for (const effect of effects) { + validateEffect(effect, context); + } + + if (errors.hasAnyErrors()) { + throw errors; + } +} + +function recordPhiDerivations( + block: BasicBlock, + context: ValidationContext, +): void { + for (const phi of block.phis) { + let typeOfValue: TypeOfValue = 'ignored'; + let sourcesIds: Set<IdentifierId> = new Set(); + for (const operand of phi.operands.values()) { + const operandMetadata = context.derivationCache.cache.get( + operand.identifier.id, + ); + + if (operandMetadata === undefined) { + continue; + } + + typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue); + sourcesIds.add(operand.identifier.id); + } + + if (typeOfValue !== 'ignored') { + context.derivationCache.addDerivationEntry( + phi.place, + sourcesIds, + typeOfValue, + ); + } + } +} + +function joinValue( + lvalueType: TypeOfValue, + valueType: TypeOfValue, +): TypeOfValue { + if (lvalueType === 'ignored') return valueType; + if (valueType === 'ignored') return lvalueType; + if (lvalueType === valueType) return lvalueType; + return 'fromPropsAndState'; +} + +function recordInstructionDerivations( + instr: Instruction, + context: ValidationContext, + isFirstPass: boolean, +): void { + let typeOfValue: TypeOfValue = 'ignored'; + const sources: Set<IdentifierId> = new Set(); + const {lvalue, value} = instr; + if (value.kind === 'FunctionExpression') { + context.functions.set(lvalue.identifier.id, value); + for (const [, block] of value.loweredFunc.func.body.blocks) { + for (const instr of block.instructions) { + recordInstructionDerivations(instr, context, isFirstPass); + } + } + } else if (value.kind === 'CallExpression' || value.kind === 'MethodCall') { + const callee = + value.kind === 'CallExpression' ? value.callee : value.property; + if ( + isUseEffectHookType(callee.identifier) && + value.args.length === 2 && + value.args[0].kind === 'Identifier' && + value.args[1].kind === 'Identifier' + ) { + const effectFunction = context.functions.get(value.args[0].identifier.id); + if (effectFunction != null) { + context.effects.add(effectFunction.loweredFunc.func); + } + } else if (isUseStateType(lvalue.identifier) && value.args.length > 0) { + const stateValueSource = value.args[0]; + if (stateValueSource.kind === 'Identifier') { + sources.add(stateValueSource.identifier.id); + } + typeOfValue = joinValue(typeOfValue, 'fromState'); + } + } + + for (const operand of eachInstructionOperand(instr)) { + if ( + isSetStateType(operand.identifier) && + operand.loc !== GeneratedSource && + isFirstPass + ) { + if (context.setStateCache.has(operand.loc.identifierName)) { + context.setStateCache.get(operand.loc.identifierName)!.push(operand); + } else { + context.setStateCache.set(operand.loc.identifierName, [operand]); + } + } + + const operandMetadata = context.derivationCache.cache.get( + operand.identifier.id, + ); + + if (operandMetadata === undefined) { + continue; + } + + typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue); + for (const id of operandMetadata.sourcesIds) { + sources.add(id); + } + } + + if (typeOfValue === 'ignored') { + return; + } + + for (const lvalue of eachInstructionLValue(instr)) { + context.derivationCache.addDerivationEntry(lvalue, sources, typeOfValue); + } + + for (const operand of eachInstructionOperand(instr)) { + switch (operand.effect) { + case Effect.Capture: + case Effect.Store: + case Effect.ConditionallyMutate: + case Effect.ConditionallyMutateIterator: + case Effect.Mutate: { + if (isMutable(instr, operand)) { + context.derivationCache.addDerivationEntry( + operand, + sources, + typeOfValue, + ); + } + break; + } + case Effect.Freeze: + case Effect.Read: { + // no-op + break; + } + case Effect.Unknown: { + CompilerError.invariant(false, { + reason: 'Unexpected unknown effect', + description: null, + details: [ + { + kind: 'error', + loc: operand.loc, + message: 'Unexpected unknown effect', + }, + ], + }); + } + default: { + assertExhaustive( + operand.effect, + `Unexpected effect kind \`${operand.effect}\``, + ); + } + } + } +} + +function validateEffect( + effectFunction: HIRFunction, + context: ValidationContext, +): void { + const seenBlocks: Set<BlockId> = new Set(); + + const effectDerivedSetStateCalls: Array<{ + value: CallExpression; + loc: SourceLocation; + sourceIds: Set<IdentifierId>; + typeOfValue: TypeOfValue; + }> = []; + + const globals: Set<IdentifierId> = new Set(); + for (const block of effectFunction.body.blocks.values()) { + for (const pred of block.preds) { + if (!seenBlocks.has(pred)) { + // skip if block has a back edge + return; + } + } + + for (const instr of block.instructions) { + // Early return if any instruction is deriving a value from a ref + if (isUseRefType(instr.lvalue.identifier)) { + return; + } + + for (const operand of eachInstructionOperand(instr)) { + if ( + isSetStateType(operand.identifier) && + operand.loc !== GeneratedSource + ) { + if (context.effectSetStateCache.has(operand.loc.identifierName)) { + context.effectSetStateCache + .get(operand.loc.identifierName)! + .push(operand); + } else { + context.effectSetStateCache.set(operand.loc.identifierName, [ + operand, + ]); + } + } + } + + if ( + instr.value.kind === 'CallExpression' && + isSetStateType(instr.value.callee.identifier) && + instr.value.args.length === 1 && + instr.value.args[0].kind === 'Identifier' + ) { + const argMetadata = context.derivationCache.cache.get( + instr.value.args[0].identifier.id, + ); + + if (argMetadata !== undefined) { + effectDerivedSetStateCalls.push({ + value: instr.value, + loc: instr.value.callee.loc, + sourceIds: argMetadata.sourcesIds, + typeOfValue: argMetadata.typeOfValue, + }); + } + } else if (instr.value.kind === 'CallExpression') { + const calleeMetadata = context.derivationCache.cache.get( + instr.value.callee.identifier.id, + ); + + if ( + calleeMetadata !== undefined && + (calleeMetadata.typeOfValue === 'fromProps' || + calleeMetadata.typeOfValue === 'fromPropsAndState') + ) { + // If the callee is a prop we can't confidently say that it should be derived in render + return; + } + + if (globals.has(instr.value.callee.identifier.id)) { + // If the callee is a global we can't confidently say that it should be derived in render + return; + } + } else if (instr.value.kind === 'LoadGlobal') { + globals.add(instr.lvalue.identifier.id); + for (const operand of eachInstructionOperand(instr)) { + globals.add(operand.identifier.id); + } + } + } + seenBlocks.add(block.id); + } + + for (const derivedSetStateCall of effectDerivedSetStateCalls) { + if ( + derivedSetStateCall.loc !== GeneratedSource && + context.effectSetStateCache.has(derivedSetStateCall.loc.identifierName) && + context.setStateCache.has(derivedSetStateCall.loc.identifierName) && + context.effectSetStateCache.get(derivedSetStateCall.loc.identifierName)! + .length === + context.setStateCache.get(derivedSetStateCall.loc.identifierName)! + .length - + 1 + ) { + const derivedDepsStr = Array.from(derivedSetStateCall.sourceIds) + .map(sourceId => { + const sourceMetadata = context.derivationCache.cache.get(sourceId); + return sourceMetadata?.place.identifier.name?.value; + }) + .filter(Boolean) + .join(', '); + + let description; + + if (derivedSetStateCall.typeOfValue === 'fromProps') { + description = `From props: [${derivedDepsStr}]`; + } else if (derivedSetStateCall.typeOfValue === 'fromState') { + description = `From local state: [${derivedDepsStr}]`; + } else { + description = `From props and local state: [${derivedDepsStr}]`; + } + + context.errors.pushDiagnostic( + CompilerDiagnostic.create({ + description: `Derived values (${description}) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user`, + category: ErrorCategory.EffectDerivationsOfState, + reason: + 'You might not need an effect. Derive values in render, not effects.', + }).withDetails({ + kind: 'error', + loc: derivedSetStateCall.value.callee.loc, + message: 'This should be computed during render, not in an effect', + }), + ); + } + } +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md new file mode 100644 index 00000000000..ef817a3ebf2 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md @@ -0,0 +1,84 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({initialName}) { + const [name, setName] = useState(''); + + useEffect(() => { + setName(initialName); + }, [initialName]); + + return ( + <div> + <input value={name} onChange={e => setName(e.target.value)} /> + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{initialName: 'John'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState } from "react"; + +function Component(t0) { + const $ = _c(6); + const { initialName } = t0; + const [name, setName] = useState(""); + let t1; + let t2; + if ($[0] !== initialName) { + t1 = () => { + setName(initialName); + }; + t2 = [initialName]; + $[0] = initialName; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t3 = (e) => setName(e.target.value); + $[3] = t3; + } else { + t3 = $[3]; + } + let t4; + if ($[4] !== name) { + t4 = ( + <div> + <input value={name} onChange={t3} /> + </div> + ); + $[4] = name; + $[5] = t4; + } else { + t4 = $[5]; + } + return t4; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ initialName: "John" }], +}; + +``` + +### Eval output +(kind: ok) <div><input value="John"></div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js new file mode 100644 index 00000000000..502402be51a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js @@ -0,0 +1,21 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({initialName}) { + const [name, setName] = useState(''); + + useEffect(() => { + setName(initialName); + }, [initialName]); + + return ( + <div> + <input value={name} onChange={e => setName(e.target.value)} /> + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{initialName: 'John'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md new file mode 100644 index 00000000000..2924de0da61 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md @@ -0,0 +1,85 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function MockComponent({onSet}) { + return <div onClick={() => onSet('clicked')}>Mock Component</div>; +} + +function Component({propValue}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + }, [propValue]); + + return <MockComponent onSet={setValue} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState } from "react"; + +function MockComponent(t0) { + const $ = _c(2); + const { onSet } = t0; + let t1; + if ($[0] !== onSet) { + t1 = <div onClick={() => onSet("clicked")}>Mock Component</div>; + $[0] = onSet; + $[1] = t1; + } else { + t1 = $[1]; + } + return t1; +} + +function Component(t0) { + const $ = _c(4); + const { propValue } = t0; + const [, setValue] = useState(null); + let t1; + let t2; + if ($[0] !== propValue) { + t1 = () => { + setValue(propValue); + }; + t2 = [propValue]; + $[0] = propValue; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t3 = <MockComponent onSet={setValue} />; + $[3] = t3; + } else { + t3 = $[3]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ propValue: "test" }], +}; + +``` + +### Eval output +(kind: ok) <div>Mock Component</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js new file mode 100644 index 00000000000..d33af16ec59 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js @@ -0,0 +1,20 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function MockComponent({onSet}) { + return <div onClick={() => onSet('clicked')}>Mock Component</div>; +} + +function Component({propValue}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + }, [propValue]); + + return <MockComponent onSet={setValue} />; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md new file mode 100644 index 00000000000..4d0b6663e32 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md @@ -0,0 +1,73 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState, useRef} from 'react'; + +export default function Component({test}) { + const [local, setLocal] = useState(''); + + const myRef = useRef(null); + + useEffect(() => { + setLocal(myRef.current + test); + }, [test]); + + return <>{local}</>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{test: 'testString'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState, useRef } from "react"; + +export default function Component(t0) { + const $ = _c(5); + const { test } = t0; + const [local, setLocal] = useState(""); + + const myRef = useRef(null); + let t1; + let t2; + if ($[0] !== test) { + t1 = () => { + setLocal(myRef.current + test); + }; + t2 = [test]; + $[0] = test; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] !== local) { + t3 = <>{local}</>; + $[3] = local; + $[4] = t3; + } else { + t3 = $[4]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ test: "testString" }], +}; + +``` + +### Eval output +(kind: ok) nulltestString \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js new file mode 100644 index 00000000000..6b24f73ac74 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js @@ -0,0 +1,19 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState, useRef} from 'react'; + +export default function Component({test}) { + const [local, setLocal] = useState(''); + + const myRef = useRef(null); + + useEffect(() => { + setLocal(myRef.current + test); + }, [test]); + + return <>{local}</>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{test: 'testString'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md new file mode 100644 index 00000000000..c83ea552a6a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md @@ -0,0 +1,75 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue, onChange}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + onChange(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test', onChange: () => {}}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState } from "react"; + +function Component(t0) { + const $ = _c(7); + const { propValue, onChange } = t0; + const [value, setValue] = useState(null); + let t1; + if ($[0] !== onChange || $[1] !== propValue) { + t1 = () => { + setValue(propValue); + onChange(); + }; + $[0] = onChange; + $[1] = propValue; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[3] !== propValue) { + t2 = [propValue]; + $[3] = propValue; + $[4] = t2; + } else { + t2 = $[4]; + } + useEffect(t1, t2); + let t3; + if ($[5] !== value) { + t3 = <div>{value}</div>; + $[5] = value; + $[6] = t3; + } else { + t3 = $[6]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ propValue: "test", onChange: () => {} }], +}; + +``` + +### Eval output +(kind: ok) <div>test</div> \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js new file mode 100644 index 00000000000..512df7cb36e --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js @@ -0,0 +1,17 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue, onChange}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + onChange(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test', onChange: () => {}}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md new file mode 100644 index 00000000000..e17f1e26f6c --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md @@ -0,0 +1,70 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + globalCall(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState } from "react"; + +function Component(t0) { + const $ = _c(5); + const { propValue } = t0; + const [value, setValue] = useState(null); + let t1; + let t2; + if ($[0] !== propValue) { + t1 = () => { + setValue(propValue); + globalCall(); + }; + t2 = [propValue]; + $[0] = propValue; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] !== value) { + t3 = <div>{value}</div>; + $[3] = value; + $[4] = t3; + } else { + t3 = $[4]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ propValue: "test" }], +}; + +``` + +### Eval output +(kind: exception) globalCall is not defined \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js new file mode 100644 index 00000000000..4cded6dcc8e --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js @@ -0,0 +1,17 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue}) { + const [value, setValue] = useState(null); + useEffect(() => { + setValue(propValue); + globalCall(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md new file mode 100644 index 00000000000..1fa7f7d7950 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md @@ -0,0 +1,49 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({value, enabled}) { + const [localValue, setLocalValue] = useState(''); + + useEffect(() => { + if (enabled) { + setLocalValue(value); + } else { + setLocalValue('disabled'); + } + }, [value, enabled]); + + return <div>{localValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 'test', enabled: true}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [value]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-conditionally-in-effect.ts:9:6 + 7 | useEffect(() => { + 8 | if (enabled) { +> 9 | setLocalValue(value); + | ^^^^^^^^^^^^^ This should be computed during render, not in an effect + 10 | } else { + 11 | setLocalValue('disabled'); + 12 | } +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js new file mode 100644 index 00000000000..2ccd52500c7 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js @@ -0,0 +1,21 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({value, enabled}) { + const [localValue, setLocalValue] = useState(''); + + useEffect(() => { + if (enabled) { + setLocalValue(value); + } else { + setLocalValue('disabled'); + } + }, [value, enabled]); + + return <div>{localValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 'test', enabled: true}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md new file mode 100644 index 00000000000..f30235a064a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md @@ -0,0 +1,46 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component({input = 'empty'}) { + const [currInput, setCurrInput] = useState(input); + const localConst = 'local const'; + + useEffect(() => { + setCurrInput(input + localConst); + }, [input, localConst]); + + return <div>{currInput}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{input: 'test'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [input]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-from-default-props.ts:9:4 + 7 | + 8 | useEffect(() => { +> 9 | setCurrInput(input + localConst); + | ^^^^^^^^^^^^ This should be computed during render, not in an effect + 10 | }, [input, localConst]); + 11 | + 12 | return <div>{currInput}</div>; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js new file mode 100644 index 00000000000..1a0f5126e7a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js @@ -0,0 +1,18 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component({input = 'empty'}) { + const [currInput, setCurrInput] = useState(input); + const localConst = 'local const'; + + useEffect(() => { + setCurrInput(input + localConst); + }, [input, localConst]); + + return <div>{currInput}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{input: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md new file mode 100644 index 00000000000..779ddafc401 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md @@ -0,0 +1,43 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp + +import {useEffect, useState} from 'react'; + +function Component({shouldChange}) { + const [count, setCount] = useState(0); + + useEffect(() => { + if (shouldChange) { + setCount(count + 1); + } + }, [count]); + + return <div>{count}</div>; +} + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From local state: [count]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-from-local-state-in-effect.ts:10:6 + 8 | useEffect(() => { + 9 | if (shouldChange) { +> 10 | setCount(count + 1); + | ^^^^^^^^ This should be computed during render, not in an effect + 11 | } + 12 | }, [count]); + 13 | +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js new file mode 100644 index 00000000000..9568e490029 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js @@ -0,0 +1,15 @@ +// @validateNoDerivedComputationsInEffects_exp + +import {useEffect, useState} from 'react'; + +function Component({shouldChange}) { + const [count, setCount] = useState(0); + + useEffect(() => { + if (shouldChange) { + setCount(count + 1); + } + }, [count]); + + return <div>{count}</div>; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md new file mode 100644 index 00000000000..7b27b556b3e --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md @@ -0,0 +1,53 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({firstName}) { + const [lastName, setLastName] = useState('Doe'); + const [fullName, setFullName] = useState('John'); + + const middleName = 'D.'; + + useEffect(() => { + setFullName(firstName + ' ' + middleName + ' ' + lastName); + }, [firstName, middleName, lastName]); + + return ( + <div> + <input value={lastName} onChange={e => setLastName(e.target.value)} /> + <div>{fullName}</div> + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstName: 'John'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props and local state: [firstName, lastName]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-from-prop-local-state-and-component-scope.ts:11:4 + 9 | + 10 | useEffect(() => { +> 11 | setFullName(firstName + ' ' + middleName + ' ' + lastName); + | ^^^^^^^^^^^ This should be computed during render, not in an effect + 12 | }, [firstName, middleName, lastName]); + 13 | + 14 | return ( +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js new file mode 100644 index 00000000000..3090ef00412 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js @@ -0,0 +1,25 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({firstName}) { + const [lastName, setLastName] = useState('Doe'); + const [fullName, setFullName] = useState('John'); + + const middleName = 'D.'; + + useEffect(() => { + setFullName(firstName + ' ' + middleName + ' ' + lastName); + }, [firstName, middleName, lastName]); + + return ( + <div> + <input value={lastName} onChange={e => setLastName(e.target.value)} /> + <div>{fullName}</div> + </div> + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{firstName: 'John'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md new file mode 100644 index 00000000000..7fadae5667f --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md @@ -0,0 +1,46 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({value}) { + const [localValue, setLocalValue] = useState(''); + + useEffect(() => { + setLocalValue(value); + document.title = `Value: ${value}`; + }, [value]); + + return <div>{localValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 'test'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [value]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.derived-state-from-prop-with-side-effect.ts:8:4 + 6 | + 7 | useEffect(() => { +> 8 | setLocalValue(value); + | ^^^^^^^^^^^^^ This should be computed during render, not in an effect + 9 | document.title = `Value: ${value}`; + 10 | }, [value]); + 11 | +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js new file mode 100644 index 00000000000..88c66ce1ef6 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js @@ -0,0 +1,18 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({value}) { + const [localValue, setLocalValue] = useState(''); + + useEffect(() => { + setLocalValue(value); + document.title = `Value: ${value}`; + }, [value]); + + return <div>{localValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md new file mode 100644 index 00000000000..aec543fcbf4 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md @@ -0,0 +1,50 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue}) { + const [value, setValue] = useState(null); + + function localFunction() { + console.log('local function'); + } + + useEffect(() => { + setValue(propValue); + localFunction(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [propValue]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.effect-contains-local-function-call.ts:12:4 + 10 | + 11 | useEffect(() => { +> 12 | setValue(propValue); + | ^^^^^^^^ This should be computed during render, not in an effect + 13 | localFunction(); + 14 | }, [propValue]); + 15 | +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js new file mode 100644 index 00000000000..1efb3177e51 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js @@ -0,0 +1,22 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component({propValue}) { + const [value, setValue] = useState(null); + + function localFunction() { + console.log('local function'); + } + + useEffect(() => { + setValue(propValue); + localFunction(); + }, [propValue]); + + return <div>{value}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{propValue: 'test'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md new file mode 100644 index 00000000000..f1f755adfa8 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md @@ -0,0 +1,48 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component() { + const [firstName, setFirstName] = useState('Taylor'); + const lastName = 'Swift'; + + // 🔴 Avoid: redundant state and unnecessary Effect + const [fullName, setFullName] = useState(''); + useEffect(() => { + setFullName(firstName + ' ' + lastName); + }, [firstName, lastName]); + + return <div>{fullName}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From local state: [firstName]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.invalid-derived-computation-in-effect.ts:11:4 + 9 | const [fullName, setFullName] = useState(''); + 10 | useEffect(() => { +> 11 | setFullName(firstName + ' ' + lastName); + | ^^^^^^^^^^^ This should be computed during render, not in an effect + 12 | }, [firstName, lastName]); + 13 | + 14 | return <div>{fullName}</div>; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js new file mode 100644 index 00000000000..17779a5b4c5 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js @@ -0,0 +1,20 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +function Component() { + const [firstName, setFirstName] = useState('Taylor'); + const lastName = 'Swift'; + + // 🔴 Avoid: redundant state and unnecessary Effect + const [fullName, setFullName] = useState(''); + useEffect(() => { + setFullName(firstName + ' ' + lastName); + }, [firstName, lastName]); + + return <div>{fullName}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md new file mode 100644 index 00000000000..3a078896939 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md @@ -0,0 +1,46 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component(props) { + const [displayValue, setDisplayValue] = useState(''); + + useEffect(() => { + const computed = props.prefix + props.value + props.suffix; + setDisplayValue(computed); + }, [props.prefix, props.value, props.suffix]); + + return <div>{displayValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{prefix: '[', value: 'test', suffix: ']'}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [props]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.invalid-derived-state-from-computed-props.ts:9:4 + 7 | useEffect(() => { + 8 | const computed = props.prefix + props.value + props.suffix; +> 9 | setDisplayValue(computed); + | ^^^^^^^^^^^^^^^ This should be computed during render, not in an effect + 10 | }, [props.prefix, props.value, props.suffix]); + 11 | + 12 | return <div>{displayValue}</div>; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js new file mode 100644 index 00000000000..24afa944fc5 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js @@ -0,0 +1,18 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component(props) { + const [displayValue, setDisplayValue] = useState(''); + + useEffect(() => { + const computed = props.prefix + props.value + props.suffix; + setDisplayValue(computed); + }, [props.prefix, props.value, props.suffix]); + + return <div>{displayValue}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{prefix: '[', value: 'test', suffix: ']'}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md new file mode 100644 index 00000000000..b28692c67b3 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md @@ -0,0 +1,47 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component({props}) { + const [fullName, setFullName] = useState( + props.firstName + ' ' + props.lastName + ); + + useEffect(() => { + setFullName(props.firstName + ' ' + props.lastName); + }, [props.firstName, props.lastName]); + + return <div>{fullName}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{props: {firstName: 'John', lastName: 'Doe'}}], +}; + +``` + + +## Error + +``` +Found 1 error: + +Error: You might not need an effect. Derive values in render, not effects. + +Derived values (From props: [props]) should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user. + +error.invalid-derived-state-from-destructured-props.ts:10:4 + 8 | + 9 | useEffect(() => { +> 10 | setFullName(props.firstName + ' ' + props.lastName); + | ^^^^^^^^^^^ This should be computed during render, not in an effect + 11 | }, [props.firstName, props.lastName]); + 12 | + 13 | return <div>{fullName}</div>; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js new file mode 100644 index 00000000000..bdfb47a2c6a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js @@ -0,0 +1,19 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState} from 'react'; + +export default function Component({props}) { + const [fullName, setFullName] = useState( + props.firstName + ' ' + props.lastName + ); + + useEffect(() => { + setFullName(props.firstName + ' ' + props.lastName); + }, [props.firstName, props.lastName]); + + return <div>{fullName}</div>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{props: {firstName: 'John', lastName: 'Doe'}}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md new file mode 100644 index 00000000000..365ee1fef45 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md @@ -0,0 +1,82 @@ + +## Input + +```javascript +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState, useRef} from 'react'; + +export default function Component({test}) { + const [local, setLocal] = useState(0); + + const myRef = useRef(null); + + useEffect(() => { + if (myRef.current) { + setLocal(test); + } else { + setLocal(test + test); + } + }, [test]); + + return <>{local}</>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{test: 4}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp +import { useEffect, useState, useRef } from "react"; + +export default function Component(t0) { + const $ = _c(5); + const { test } = t0; + const [local, setLocal] = useState(0); + + const myRef = useRef(null); + let t1; + let t2; + if ($[0] !== test) { + t1 = () => { + if (myRef.current) { + setLocal(test); + } else { + setLocal(test + test); + } + }; + + t2 = [test]; + $[0] = test; + $[1] = t1; + $[2] = t2; + } else { + t1 = $[1]; + t2 = $[2]; + } + useEffect(t1, t2); + let t3; + if ($[3] !== local) { + t3 = <>{local}</>; + $[3] = local; + $[4] = t3; + } else { + t3 = $[4]; + } + return t3; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ test: 4 }], +}; + +``` + +### Eval output +(kind: ok) 8 \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js new file mode 100644 index 00000000000..ee59ccb78f0 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js @@ -0,0 +1,23 @@ +// @validateNoDerivedComputationsInEffects_exp +import {useEffect, useState, useRef} from 'react'; + +export default function Component({test}) { + const [local, setLocal] = useState(0); + + const myRef = useRef(null); + + useEffect(() => { + if (myRef.current) { + setLocal(test); + } else { + setLocal(test + test); + } + }, [test]); + + return <>{local}</>; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{test: 4}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md index d97a665ae69..ccbcf68a576 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.expect.md @@ -3,6 +3,8 @@ ```javascript // @validateNoDerivedComputationsInEffects +import {useEffect, useState} from 'react'; + function BadExample() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); @@ -10,7 +12,7 @@ function BadExample() { // 🔴 Avoid: redundant state and unnecessary Effect const [fullName, setFullName] = useState(''); useEffect(() => { - setFullName(capitalize(firstName + ' ' + lastName)); + setFullName(firstName + ' ' + lastName); }, [firstName, lastName]); return <div>{fullName}</div>; @@ -26,14 +28,14 @@ Found 1 error: Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state) -error.invalid-derived-computation-in-effect.ts:9:4 - 7 | const [fullName, setFullName] = useState(''); - 8 | useEffect(() => { -> 9 | setFullName(capitalize(firstName + ' ' + lastName)); +error.invalid-derived-computation-in-effect.ts:11:4 + 9 | const [fullName, setFullName] = useState(''); + 10 | useEffect(() => { +> 11 | setFullName(firstName + ' ' + lastName); | ^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state) - 10 | }, [firstName, lastName]); - 11 | - 12 | return <div>{fullName}</div>; + 12 | }, [firstName, lastName]); + 13 | + 14 | return <div>{fullName}</div>; ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js index d803d3c4a3a..0209b47ce39 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-derived-computation-in-effect.js @@ -1,4 +1,6 @@ // @validateNoDerivedComputationsInEffects +import {useEffect, useState} from 'react'; + function BadExample() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); @@ -6,7 +8,7 @@ function BadExample() { // 🔴 Avoid: redundant state and unnecessary Effect const [fullName, setFullName] = useState(''); useEffect(() => { - setFullName(capitalize(firstName + ' ' + lastName)); + setFullName(firstName + ' ' + lastName); }, [firstName, lastName]); return <div>{fullName}</div>; From 408b38ef7304faf022d2a37110c57efce12c6bad Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Thu, 23 Oct 2025 11:30:28 -0700 Subject: [PATCH 135/276] [compiler] Improve display of errors on multi-line expressions (#34963) When a longer function or expression is identified as the source of an error, we currently print the entire expression in our error message. This is because we delegate to a Babel helper to print codeframes. Here, we add some checking and abbreviate the result if it spans too many lines. --- .../src/CompilerError.ts | 41 ++++++++++++++++++- ...es-memoizes-with-captures-values.expect.md | 24 +---------- ...ional-nonoptional-property-chain.expect.md | 15 +------ .../bailout-retry/error.todo-syntax.expect.md | 13 +----- 4 files changed, 43 insertions(+), 50 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts index 3c131ea653e..18bcd7791d0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts @@ -12,6 +12,28 @@ import {Err, Ok, Result} from './Utils/Result'; import {assertExhaustive} from './Utils/utils'; import invariant from 'invariant'; +// Number of context lines to display above the source of an error +const CODEFRAME_LINES_ABOVE = 2; +// Number of context lines to display below the source of an error +const CODEFRAME_LINES_BELOW = 3; +/* + * Max number of lines for the _source_ of an error, before we abbreviate + * the display of the source portion + */ +const CODEFRAME_MAX_LINES = 10; +/* + * When the error source exceeds the above threshold, how many lines of + * the source should be displayed? We show: + * - CODEFRAME_LINES_ABOVE context lines + * - CODEFRAME_ABBREVIATED_SOURCE_LINES of the error + * - '...' ellipsis + * - CODEFRAME_ABBREVIATED_SOURCE_LINES of the error + * - CODEFRAME_LINES_BELOW context lines + * + * This value must be at least 2 or else we'll cut off important parts of the error message + */ +const CODEFRAME_ABBREVIATED_SOURCE_LINES = 5; + export enum ErrorSeverity { /** * An actionable error that the developer can fix. For example, product code errors should be @@ -496,7 +518,7 @@ function printCodeFrame( loc: t.SourceLocation, message: string, ): string { - return codeFrameColumns( + const printed = codeFrameColumns( source, { start: { @@ -510,8 +532,25 @@ function printCodeFrame( }, { message, + linesAbove: CODEFRAME_LINES_ABOVE, + linesBelow: CODEFRAME_LINES_BELOW, }, ); + const lines = printed.split(/\r?\n/); + if (loc.end.line - loc.start.line < CODEFRAME_MAX_LINES) { + return printed; + } + const pipeIndex = lines[0].indexOf('|'); + return [ + ...lines.slice( + 0, + CODEFRAME_LINES_ABOVE + CODEFRAME_ABBREVIATED_SOURCE_LINES, + ), + ' '.repeat(pipeIndex) + '…', + ...lines.slice( + -(CODEFRAME_LINES_BELOW + CODEFRAME_ABBREVIATED_SOURCE_LINES), + ), + ].join('\n'); } function printErrorSummary(category: ErrorCategory, message: string): string { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md index 8592ae65e4b..250114fdfb3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md @@ -60,29 +60,7 @@ This argument is a function which may reassign or mutate `cache` after render, w > 22 | // The original issue is that `cache` was not memoized together with the returned | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 23 | // function. This was because neither appears to ever be mutated — the function - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 24 | // is known to mutate `cache` but the function isn't called. - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 25 | // - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 26 | // The fix is to detect cases like this — functions that are mutable but not called - - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 27 | // and ensure that their mutable captures are aliased together into the same scope. - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 28 | const cache = new WeakMap<TInput, TOutput>(); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 29 | return input => { - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 30 | let output = cache.get(input); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 31 | if (output == null) { - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 32 | output = map(input); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 33 | cache.set(input, output); - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -> 34 | } - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + … > 35 | return output; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 36 | }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md index e9772e67993..45e3d365a8d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md @@ -64,20 +64,7 @@ error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.ts:7:25 > 8 | return identity({ | ^^^^^^^^^^^^^^^^^^^^^ > 9 | callback: () => { - | ^^^^^^^^^^^^^^^^^^^^^ -> 10 | // This is a bug in our dependency inference: we stop capturing dependencies - | ^^^^^^^^^^^^^^^^^^^^^ -> 11 | // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b` - | ^^^^^^^^^^^^^^^^^^^^^ -> 12 | // was non-nullish, then we can access `.c.d?.e`. Thus we should take the - | ^^^^^^^^^^^^^^^^^^^^^ -> 13 | // full property chain, exactly as-is with optionals/non-optionals, as a - | ^^^^^^^^^^^^^^^^^^^^^ -> 14 | // dependency - | ^^^^^^^^^^^^^^^^^^^^^ -> 15 | return identity(x.a.b?.c.d?.e); - | ^^^^^^^^^^^^^^^^^^^^^ -> 16 | }, + … | ^^^^^^^^^^^^^^^^^^^^^ > 17 | }); | ^^^^^^^^^^^^^^^^^^^^^ diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md index 38d10ee0d1b..00af7ec6ad5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md @@ -46,18 +46,7 @@ error.todo-syntax.ts:11:2 > 12 | () => { | ^^^^^^^^^^^ > 13 | try { - | ^^^^^^^^^^^ -> 14 | console.log(prop1); - | ^^^^^^^^^^^ -> 15 | } finally { - | ^^^^^^^^^^^ -> 16 | console.log('exiting'); - | ^^^^^^^^^^^ -> 17 | } - | ^^^^^^^^^^^ -> 18 | }, - | ^^^^^^^^^^^ -> 19 | [prop1], + … | ^^^^^^^^^^^ > 20 | AUTODEPS | ^^^^^^^^^^^ From ba0590f3068829327cb25689b46926d6509893ea Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Mon, 27 Oct 2025 13:42:02 -0400 Subject: [PATCH 136/276] [playground] Upgrade playwright (#34991) Some vulnerabilities were detected in older versions of Playwright, upgrading for the playground. --- compiler/apps/playground/package.json | 2 +- compiler/apps/playground/yarn.lock | 40 ++++++++++----------------- 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json index 7c187b439e7..23b192fe580 100644 --- a/compiler/apps/playground/package.json +++ b/compiler/apps/playground/package.json @@ -27,7 +27,7 @@ "@babel/types": "7.26.3", "@heroicons/react": "^1.0.6", "@monaco-editor/react": "^4.8.0-rc.2", - "@playwright/test": "^1.51.1", + "@playwright/test": "^1.56.1", "@use-gesture/react": "^10.2.22", "hermes-eslint": "^0.25.0", "hermes-parser": "^0.25.0", diff --git a/compiler/apps/playground/yarn.lock b/compiler/apps/playground/yarn.lock index 232d37448ee..42e8deb7d7a 100644 --- a/compiler/apps/playground/yarn.lock +++ b/compiler/apps/playground/yarn.lock @@ -798,12 +798,12 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== -"@playwright/test@^1.51.1": - version "1.51.1" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.51.1.tgz#75357d513221a7be0baad75f01e966baf9c41a2e" - integrity sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q== +"@playwright/test@^1.56.1": + version "1.56.1" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.56.1.tgz#6e3bf3d0c90c5cf94bf64bdb56fd15a805c8bd3f" + integrity sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg== dependencies: - playwright "1.51.1" + playwright "1.56.1" "@rtsao/scc@^1.1.0": version "1.1.0" @@ -854,23 +854,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4" integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg== -"@types/react-dom@19.1.9": - version "19.1.9" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b" - integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ== - "@types/react-dom@19.2": version "19.2.2" resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332" integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw== -"@types/react@19.1.12": - version "19.1.12" - resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b" - integrity sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w== - dependencies: - csstype "^3.0.2" - "@types/react@19.2": version "19.2.2" resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36" @@ -3465,17 +3453,17 @@ pirates@^4.0.1: resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9" integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg== -playwright-core@1.51.1: - version "1.51.1" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.51.1.tgz#d57f0393e02416f32a47cf82b27533656a8acce1" - integrity sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw== +playwright-core@1.56.1: + version "1.56.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.1.tgz#24a66481e5cd33a045632230aa2c4f0cb6b1db3d" + integrity sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ== -playwright@1.51.1: - version "1.51.1" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.51.1.tgz#ae1467ee318083968ad28d6990db59f47a55390f" - integrity sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw== +playwright@1.56.1: + version "1.56.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.1.tgz#62e3b99ddebed0d475e5936a152c88e68be55fbf" + integrity sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw== dependencies: - playwright-core "1.51.1" + playwright-core "1.56.1" optionalDependencies: fsevents "2.3.2" From d3d0ce329e81c7081feda5d37130d01e0607b8a4 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Mon, 27 Oct 2025 15:48:36 -0400 Subject: [PATCH 137/276] [script] Add yarn generate-changelog (#34962) (disclaimer: I used codex to write this script) Adds a new `yarn generate-changelog` script to simplify the process of writing changelogs. You can use it as follows: ``` $ yarn generate-changelog --help Usage: yarn generate-changelog [--codex|--claude] [--debug] [<pkg@version> ...] Options: --codex Use Codex for commit summarization. [boolean] --claude Use Claude for commit summarization. [boolean] --debug Enable verbose debug logging. [boolean] [default: false] -h, --help Show help [boolean] Examples: generate-changelog --codex Generate changelog for a single eslint-plugin-react-hooks@7.0.1 package using Codex. generate-changelog --claude react@19.3 Generate changelog entries for react-dom@19.3 multiple packages using Claude. generate-changelog --codex Generate changelog for all stable packages using recorded versions. ``` For example, if no args are passed, the script will print find all the relevant commits affecting packages (defaults to `stablePackages` in `ReactVersions.js`) and format them as a simple markdown list. ``` $ yarn generate-changelog ## eslint-plugin-react-hooks@7.0.0 * [compiler] improve zod v3 backwards compat (#34877) ([#34877](https://github.com/facebook/react/pull/34877) by [@henryqdineen](https://github.com/henryqdineen)) * [ESLint] Disallow passing effect event down when inlined as a prop (#34820) ([#34820](https://github.com/facebook/react/pull/34820) by [@jf-eirinha](https://github.com/jf-eirinha)) * Switch to `export =` to fix eslint-plugin-react-hooks types (#34949) ([#34949](https://github.com/facebook/react/pull/34949) by [@karlhorky](https://github.com/karlhorky)) * [eprh] Type `configs.flat` more strictly (#34950) ([#34950](https://github.com/facebook/react/pull/34950) by [@poteto](https://github.com/poteto)) * Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (#34951) ([#34951](https://github.com/facebook/react/pull/34951) by [@karlhorky](https://github.com/karlhorky)) * Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (#34953) ([#34953](https://github.com/facebook/react/pull/34953) by [@karlhorky](https://github.com/karlhorky)) // etc etc... ``` If `--codex` or `--claude` is passed, the script will attempt to use them to summarize the commit(s) in the same style as our existing CHANGELOG.md. And finally, for debugging the script you can add `--debug` to see what's going on. --- package.json | 1 + scripts/tasks/generate-changelog.js | 816 ++++++++++++++++++++++++++++ 2 files changed, 817 insertions(+) create mode 100644 scripts/tasks/generate-changelog.js diff --git a/package.json b/package.json index 7bb0c2c5c93..9fb3082f0c6 100644 --- a/package.json +++ b/package.json @@ -152,6 +152,7 @@ "download-build-in-codesandbox-ci": "yarn build --type=node react/index react.react-server react-dom/index react-dom/client react-dom/src/server react-dom/test-utils react-dom.react-server scheduler/index react/jsx-runtime react/jsx-dev-runtime react-server-dom-webpack", "check-release-dependencies": "node ./scripts/release/check-release-dependencies", "generate-inline-fizz-runtime": "node ./scripts/rollup/generate-inline-fizz-runtime.js", + "generate-changelog": "node ./scripts/tasks/generate-changelog.js", "flags": "node ./scripts/flags/flags.js" }, "resolutions": { diff --git a/scripts/tasks/generate-changelog.js b/scripts/tasks/generate-changelog.js new file mode 100644 index 00000000000..158346d2d9a --- /dev/null +++ b/scripts/tasks/generate-changelog.js @@ -0,0 +1,816 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const https = require('https'); +const {execFile} = require('child_process'); +const {promisify} = require('util'); +const semver = require('semver'); +const yargs = require('yargs/yargs'); + +const {stablePackages} = require('../../ReactVersions'); + +const execFileAsync = promisify(execFile); +const repoRoot = path.resolve(__dirname, '..', '..'); + +function parseArgs(argv) { + const parser = yargs(argv) + .usage( + 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [<pkg@version> ...]' + ) + .example( + '$0 --codex eslint-plugin-react-hooks@7.0.1', + 'Generate changelog for a single package using Codex.' + ) + .example( + '$0 --claude react@19.3 react-dom@19.3', + 'Generate changelog entries for multiple packages using Claude.' + ) + .example( + '$0 --codex', + 'Generate changelog for all stable packages using recorded versions.' + ) + .option('codex', { + type: 'boolean', + describe: 'Use Codex for commit summarization.', + }) + .option('claude', { + type: 'boolean', + describe: 'Use Claude for commit summarization.', + }) + .option('debug', { + type: 'boolean', + describe: 'Enable verbose debug logging.', + default: false, + }) + .help('help') + .alias('h', 'help') + .version(false) + .parserConfiguration({ + 'parse-numbers': false, + 'parse-positional-numbers': false, + }); + + const args = parser.scriptName('generate-changelog').parse(); + const packageSpecs = []; + const debug = !!args.debug; + let summarizer = null; + if (args.codex && args.claude) { + throw new Error('Choose either --codex or --claude, not both.'); + } + if (args.codex) { + summarizer = 'codex'; + } else if (args.claude) { + summarizer = 'claude'; + } + + const positionalArgs = Array.isArray(args._) ? args._ : []; + for (let i = 0; i < positionalArgs.length; i++) { + const token = String(positionalArgs[i]).trim(); + if (!token) { + continue; + } + + const atIndex = token.lastIndexOf('@'); + if (atIndex <= 0 || atIndex === token.length - 1) { + throw new Error(`Invalid package specification: ${token}`); + } + + const packageName = token.slice(0, atIndex); + const versionText = token.slice(atIndex + 1); + const validVersion = + semver.valid(versionText) || semver.valid(semver.coerce(versionText)); + if (!validVersion) { + throw new Error(`Invalid version for ${packageName}: ${versionText}`); + } + + packageSpecs.push({ + name: packageName, + version: validVersion, + displayVersion: versionText, + }); + } + + if (packageSpecs.length === 0) { + Object.keys(stablePackages).forEach(pkgName => { + const versionText = stablePackages[pkgName]; + const validVersion = semver.valid(versionText); + if (!validVersion) { + throw new Error( + `Invalid stable version configured for ${pkgName}: ${versionText}` + ); + } + packageSpecs.push({ + name: pkgName, + version: validVersion, + displayVersion: versionText, + }); + }); + } + + if (summarizer && !isCommandAvailable(summarizer)) { + throw new Error( + `Requested summarizer "${summarizer}" is not available on the PATH.` + ); + } + + return { + debug, + summarizer, + packageSpecs, + }; +} + +async function fetchNpmInfo(packageName, {log}) { + const npmArgs = ['view', `${packageName}@latest`, '--json']; + const options = {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024}; + log(`Fetching npm info for ${packageName}...`); + const {stdout} = await execFileAsync('npm', npmArgs, options); + + let data = stdout.trim(); + if (!data) { + throw new Error(`npm view returned empty result for ${packageName}`); + } + + let info = JSON.parse(data); + if (Array.isArray(info)) { + info = info[info.length - 1]; + } + + const version = info.version || info['dist-tags']?.latest; + let gitHead = info.gitHead || null; + + if (!gitHead) { + const gitHeadResult = await execFileAsync( + 'npm', + ['view', `${packageName}@${version}`, 'gitHead'], + {cwd: repoRoot, maxBuffer: 1024 * 1024} + ); + const possibleGitHead = gitHeadResult.stdout.trim(); + if ( + possibleGitHead && + possibleGitHead !== 'undefined' && + possibleGitHead !== 'null' + ) { + log(`Found gitHead for ${packageName}@${version}: ${possibleGitHead}`); + gitHead = possibleGitHead; + } + } + + if (!version) { + throw new Error( + `Unable to determine latest published version for ${packageName}` + ); + } + if (!gitHead) { + throw new Error( + `Unable to determine git commit for ${packageName}@${version}` + ); + } + + return { + publishedVersion: version, + gitHead, + }; +} + +async function collectCommitsSince(packageName, sinceGitSha, {log}) { + log(`Collecting commits for ${packageName} since ${sinceGitSha}...`); + await execFileAsync('git', ['cat-file', '-e', `${sinceGitSha}^{commit}`], { + cwd: repoRoot, + }); + const {stdout} = await execFileAsync( + 'git', + [ + 'rev-list', + '--reverse', + `${sinceGitSha}..HEAD`, + '--', + path.posix.join('packages', packageName), + ], + {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} + ); + + return stdout + .trim() + .split('\n') + .map(line => line.trim()) + .filter(Boolean); +} + +async function loadCommitDetails(sha, {log}) { + log(`Loading commit details for ${sha}...`); + const format = ['%H', '%s', '%an', '%ae', '%ct', '%B'].join('%n'); + const {stdout} = await execFileAsync( + 'git', + ['show', '--quiet', `--format=${format}`, sha], + {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} + ); + + const [commitSha, subject, authorName, authorEmail, timestamp, ...rest] = + stdout.split('\n'); + const body = rest.join('\n').trim(); + + return { + sha: commitSha.trim(), + subject: subject.trim(), + authorName: authorName.trim(), + authorEmail: authorEmail.trim(), + timestamp: +timestamp.trim() || 0, + body, + }; +} + +function extractPrNumber(subject, body) { + const patterns = [ + /$#(\d+)$/, + /https:\/\/github\.com\/facebook\/react\/pull\/(\d+)/, + ]; + + for (let i = 0; i < patterns.length; i++) { + const pattern = patterns[i]; + const subjectMatch = subject && subject.match(pattern); + if (subjectMatch) { + return subjectMatch[1]; + } + const bodyMatch = body && body.match(pattern); + if (bodyMatch) { + return bodyMatch[1]; + } + } + + return null; +} + +function isCommandAvailable(command) { + const paths = (process.env.PATH || '').split(path.delimiter); + const extensions = + process.platform === 'win32' && process.env.PATHEXT + ? process.env.PATHEXT.split(';') + : ['']; + + for (let i = 0; i < paths.length; i++) { + const dir = paths[i]; + if (!dir) { + continue; + } + for (let j = 0; j < extensions.length; j++) { + const ext = extensions[j]; + const fullPath = path.join(dir, `${command}${ext}`); + try { + fs.accessSync(fullPath, fs.constants.X_OK); + return true; + } catch { + // Keep searching. + } + } + } + return false; +} + +function readChangelogSnippet(preferredPackage) { + const cacheKey = + preferredPackage === 'eslint-plugin-react-hooks' + ? preferredPackage + : 'root'; + if (!readChangelogSnippet.cache) { + readChangelogSnippet.cache = new Map(); + } + const cache = readChangelogSnippet.cache; + if (cache.has(cacheKey)) { + return cache.get(cacheKey); + } + + const targetPath = + preferredPackage === 'eslint-plugin-react-hooks' + ? path.join( + repoRoot, + 'packages', + 'eslint-plugin-react-hooks', + 'CHANGELOG.md' + ) + : path.join(repoRoot, 'CHANGELOG.md'); + + let content = ''; + try { + content = fs.readFileSync(targetPath, 'utf8'); + } catch { + content = ''; + } + + const snippet = content.slice(0, 4000); + cache.set(cacheKey, snippet); + return snippet; +} + +function sanitizeSummary(text) { + if (!text) { + return ''; + } + + const trimmed = text.trim(); + const withoutBullet = trimmed.replace(/^([-*]\s+|\d+\s*[\.)]\s+)/, ''); + + return withoutBullet.replace(/\s+/g, ' ').trim(); +} + +async function summarizePackages({ + summarizer, + packageSpecs, + packageTargets, + commitsByPackage, + log, +}) { + const summariesByPackage = new Map(); + if (!summarizer) { + packageSpecs.forEach(spec => { + const commits = commitsByPackage.get(spec.name) || []; + const summaryMap = new Map(); + for (let i = 0; i < commits.length; i++) { + const commit = commits[i]; + summaryMap.set(commit.sha, commit.subject); + } + summariesByPackage.set(spec.name, summaryMap); + }); + return summariesByPackage; + } + + const tasks = packageSpecs.map(spec => { + const commits = commitsByPackage.get(spec.name) || []; + return summarizePackageCommits({ + summarizer, + spec, + commits, + packageTargets, + allPackageSpecs: packageSpecs, + log, + }); + }); + + const results = await Promise.all(tasks); + results.forEach(entry => { + summariesByPackage.set(entry.packageName, entry.summaries); + }); + return summariesByPackage; +} + +async function summarizePackageCommits({ + summarizer, + spec, + commits, + packageTargets, + allPackageSpecs, + log, +}) { + const summaries = new Map(); + if (commits.length === 0) { + return {packageName: spec.name, summaries}; + } + + const rootStyle = readChangelogSnippet('root'); + const hooksStyle = readChangelogSnippet('eslint-plugin-react-hooks'); + const targetList = allPackageSpecs.map( + targetSpec => + `${targetSpec.name}@${targetSpec.displayVersion || targetSpec.version}` + ); + const payload = commits.map(commit => { + const packages = Array.from(commit.packages || []).sort(); + const usesHooksStyle = (commit.packages || new Set()).has( + 'eslint-plugin-react-hooks' + ); + const packagesWithVersions = packages.map(pkgName => { + const targetSpec = packageTargets.get(pkgName); + if (!targetSpec) { + return pkgName; + } + return `${pkgName}@${targetSpec.displayVersion || targetSpec.version}`; + }); + return { + sha: commit.sha, + packages, + packagesWithVersions, + style: usesHooksStyle ? 'eslint-plugin-react-hooks' : 'root', + subject: commit.subject, + body: commit.body || '', + }; + }); + + const promptParts = [ + `You are preparing changelog summaries for ${spec.name} ${ + spec.displayVersion || spec.version + }.`, + 'The broader release includes:', + ...targetList.map(line => `- ${line}`), + '', + 'For each commit payload, write a single concise sentence without a leading bullet.', + 'Match the tone and formatting of the provided style samples. Do not mention commit hashes.', + 'Return a JSON array where each element has the shape `{ "sha": "<sha>", "summary": "<text>" }`.', + 'The JSON must contain one entry per commit in the same order they are provided.', + 'Use `"root"` style unless the payload specifies `"eslint-plugin-react-hooks"`, in which case use that style sample.', + '', + '--- STYLE: root ---', + rootStyle, + '--- END STYLE ---', + '', + '--- STYLE: eslint-plugin-react-hooks ---', + hooksStyle, + '--- END STYLE ---', + '', + `Commits affecting ${spec.name}:`, + ]; + + payload.forEach((item, index) => { + promptParts.push( + `Commit ${index + 1}:`, + `sha: ${item.sha}`, + `style: ${item.style}`, + `packages: ${item.packagesWithVersions.join(', ') || 'none'}`, + `subject: ${item.subject}`, + 'body:', + item.body || '(empty)', + '' + ); + }); + promptParts.push('Return ONLY the JSON array.', ''); + + const prompt = promptParts.join('\n'); + log( + `Invoking ${summarizer} for ${payload.length} commit summaries targeting ${spec.name}.` + ); + log(`Summarizer prompt length: ${prompt.length} characters.`); + + try { + const raw = await runSummarizer(summarizer, prompt); + log(`Summarizer output length: ${raw.length}`); + const parsed = parseSummariesResponse(raw); + if (!parsed) { + throw new Error('Unable to parse summarizer output.'); + } + parsed.forEach(entry => { + const summary = sanitizeSummary(entry.summary || ''); + if (summary) { + summaries.set(entry.sha, summary); + } + }); + } catch (error) { + if (log !== noopLogger) { + log( + `Warning: failed to summarize commits for ${spec.name} with ${summarizer}. Falling back to subjects. ${error.message}` + ); + if (error && error.stack) { + log(error.stack); + } + } + } + + for (let i = 0; i < commits.length; i++) { + const commit = commits[i]; + if (!summaries.has(commit.sha)) { + summaries.set(commit.sha, commit.subject); + } + } + + log(`Summaries available for ${summaries.size} commit(s) for ${spec.name}.`); + + return {packageName: spec.name, summaries}; +} + +function noopLogger() {} + +async function runSummarizer(command, prompt) { + const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024}; + + if (command === 'codex') { + const {stdout} = await execFileAsync( + 'codex', + ['exec', '--json', prompt], + options + ); + return parseCodexSummary(stdout); + } + + if (command === 'claude') { + const {stdout} = await execFileAsync('claude', ['-p', prompt], options); + return stripClaudeBanner(stdout); + } + + throw new Error(`Unsupported summarizer command: ${command}`); +} + +function parseCodexSummary(output) { + let last = ''; + const lines = output.split('\n'); + for (let i = 0; i < lines.length; i++) { + const trimmed = lines[i].trim(); + if (!trimmed) { + continue; + } + try { + const event = JSON.parse(trimmed); + if ( + event.type === 'item.completed' && + event.item?.type === 'agent_message' + ) { + last = event.item.text || ''; + } + } catch { + last = trimmed; + } + } + return last || output; +} + +function stripClaudeBanner(text) { + return text + .split('\n') + .filter( + line => + line.trim() !== + 'Claude Code at Meta (https://fburl.com/claude.code.users)' + ) + .join('\n'); +} + +function parseSummariesResponse(raw) { + const candidates = []; + const trimmed = raw.trim(); + const fencedMatch = trimmed.match(/```(?:json)?\s*([\s\S]*?)```/i); + if (fencedMatch) { + candidates.push(fencedMatch[1].trim()); + } + + const firstBracket = trimmed.indexOf('['); + if (firstBracket !== -1) { + candidates.push(trimmed.slice(firstBracket).trim()); + } + + for (let i = 0; i < candidates.length; i++) { + const candidate = candidates[i]; + if (!candidate) { + continue; + } + try { + const parsed = JSON.parse(candidate); + if (Array.isArray(parsed)) { + return parsed; + } + } catch { + // Try the next candidate. + } + } + + try { + const parsed = JSON.parse(trimmed); + if (Array.isArray(parsed)) { + return parsed; + } + } catch { + // Fall through. + } + + return null; +} + +async function fetchPullRequestMetadata(prNumber, {log}) { + log(`Fetching PR metadata for #${prNumber}...`); + const token = process.env.GITHUB_TOKEN || process.env.GH_TOKEN || null; + const requestOptions = { + hostname: 'api.github.com', + path: `/repos/facebook/react/pulls/${prNumber}`, + method: 'GET', + headers: { + 'User-Agent': 'generate-changelog-script', + Accept: 'application/vnd.github+json', + }, + }; + if (token) { + requestOptions.headers.Authorization = `Bearer ${token}`; + } + + return new Promise(resolve => { + const req = https.request(requestOptions, res => { + let raw = ''; + res.on('data', chunk => { + raw += chunk; + }); + res.on('end', () => { + if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { + try { + const json = JSON.parse(raw); + resolve({ + authorLogin: json.user?.login || null, + }); + } catch (error) { + process.stderr.write( + `Warning: unable to parse GitHub response for PR #${prNumber}: ${error.message}\n` + ); + resolve(null); + } + } else { + process.stderr.write( + `Warning: GitHub API request failed for PR #${prNumber} with status ${res.statusCode}\n` + ); + resolve(null); + } + }); + }); + + req.on('error', error => { + process.stderr.write( + `Warning: GitHub API request errored for PR #${prNumber}: ${error.message}\n` + ); + resolve(null); + }); + + req.end(); + }); +} + +async function main() { + const {packageSpecs, summarizer, debug} = parseArgs(process.argv.slice(2)); + const log = debug + ? (...args) => console.log('[generate-changelog]', ...args) + : noopLogger; + const allStablePackages = Object.keys(stablePackages); + + const packageTargets = new Map(); + for (let i = 0; i < packageSpecs.length; i++) { + const spec = packageSpecs[i]; + if (!allStablePackages.includes(spec.name)) { + throw new Error( + `Package "${spec.name}" is not listed in stablePackages.` + ); + } + if (packageTargets.has(spec.name)) { + throw new Error(`Package "${spec.name}" was specified more than once.`); + } + packageTargets.set(spec.name, spec); + } + + const targetPackages = packageSpecs.map(spec => spec.name); + log( + `Starting changelog generation for: ${packageSpecs + .map(spec => `${spec.name}@${spec.displayVersion || spec.version}`) + .join(', ')}` + ); + + const packageInfoMap = new Map(); + const packageInfoResults = await Promise.all( + targetPackages.map(async pkg => { + const info = await fetchNpmInfo(pkg, {log}); + return {pkg, info}; + }) + ); + for (let i = 0; i < packageInfoResults.length; i++) { + const entry = packageInfoResults[i]; + packageInfoMap.set(entry.pkg, entry.info); + } + + const commitPackagesMap = new Map(); + const commitCollections = await Promise.all( + targetPackages.map(async pkg => { + const {gitHead} = packageInfoMap.get(pkg); + const commits = await collectCommitsSince(pkg, gitHead, {log}); + log(`Package ${pkg} has ${commits.length} commit(s) since ${gitHead}.`); + return {pkg, commits}; + }) + ); + for (let i = 0; i < commitCollections.length; i++) { + const entry = commitCollections[i]; + const pkg = entry.pkg; + const commits = entry.commits; + for (let j = 0; j < commits.length; j++) { + const sha = commits[j]; + if (!commitPackagesMap.has(sha)) { + commitPackagesMap.set(sha, new Set()); + } + commitPackagesMap.get(sha).add(pkg); + } + } + log(`Found ${commitPackagesMap.size} commits touching target packages.`); + + if (commitPackagesMap.size === 0) { + console.log('No commits found for the selected packages.'); + return; + } + + const commitDetails = await Promise.all( + Array.from(commitPackagesMap.entries()).map( + async ([sha, packagesTouched]) => { + const detail = await loadCommitDetails(sha, {log}); + detail.packages = packagesTouched; + detail.prNumber = extractPrNumber(detail.subject, detail.body); + return detail; + } + ) + ); + + commitDetails.sort((a, b) => a.timestamp - b.timestamp); + log(`Ordered ${commitDetails.length} commit(s) chronologically.`); + + const commitsByPackage = new Map(); + commitDetails.forEach(commit => { + commit.packages.forEach(pkgName => { + if (!commitsByPackage.has(pkgName)) { + commitsByPackage.set(pkgName, []); + } + commitsByPackage.get(pkgName).push(commit); + }); + }); + + const uniquePrNumbers = Array.from( + new Set(commitDetails.map(commit => commit.prNumber).filter(Boolean)) + ); + log(`Identified ${uniquePrNumbers.length} unique PR number(s).`); + + const prMetadata = new Map(); + log(`Summarizer selected: ${summarizer || 'none (using commit titles)'}`); + const prMetadataResults = await Promise.all( + uniquePrNumbers.map(async prNumber => { + const meta = await fetchPullRequestMetadata(prNumber, {log}); + return {prNumber, meta}; + }) + ); + for (let i = 0; i < prMetadataResults.length; i++) { + const entry = prMetadataResults[i]; + if (entry.meta) { + prMetadata.set(entry.prNumber, entry.meta); + } + } + log(`Fetched metadata for ${prMetadata.size} PR(s).`); + + const summariesByPackage = await summarizePackages({ + summarizer, + packageSpecs, + packageTargets, + commitsByPackage, + log, + }); + + const outputLines = []; + for (let i = 0; i < packageSpecs.length; i++) { + const spec = packageSpecs[i]; + outputLines.push(`## ${spec.name}@${spec.displayVersion || spec.version}`); + const commitsForPackage = commitsByPackage.get(spec.name) || []; + + if (commitsForPackage.length === 0) { + outputLines.push('* No changes since the last release.'); + outputLines.push(''); + continue; + } + + commitsForPackage.forEach(commit => { + if (commit.prNumber && prMetadata.has(commit.prNumber)) { + commit.authorLogin = prMetadata.get(commit.prNumber).authorLogin; + } + + const prFragment = commit.prNumber + ? `[#${commit.prNumber}](https://github.com/facebook/react/pull/${commit.prNumber})` + : `commit ${commit.sha.slice(0, 7)}`; + + let authorFragment = commit.authorLogin + ? `[@${commit.authorLogin}](https://github.com/${commit.authorLogin})` + : commit.authorName || 'unknown author'; + + if ( + !commit.authorLogin && + commit.authorName && + commit.authorName.startsWith('@') + ) { + const username = commit.authorName.slice(1); + authorFragment = `[@${username}](https://github.com/${username})`; + } + + const summaryMap = summariesByPackage.get(spec.name) || new Map(); + let summary = summaryMap.get(commit.sha) || commit.subject; + + if (commit.prNumber) { + const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); + summary = summary.replace(prPattern, '').trim(); + } + + outputLines.push(`* ${summary} (${prFragment} by ${authorFragment})`); + }); + + outputLines.push(''); + } + + while (outputLines.length && outputLines[outputLines.length - 1] === '') { + outputLines.pop(); + } + + log('Generated changelog sections.'); + console.log(outputLines.join('\n')); +} + +main().catch(error => { + process.stderr.write(`${error.message}\n`); + process.exit(1); +}); From 0d721b60c2b0447f85f20f457e908a494acb28b0 Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Mon, 27 Oct 2025 22:06:28 +0100 Subject: [PATCH 138/276] [Flight] Don't hang after resolving cyclic references (#34988) --- .../react-client/src/ReactFlightClient.js | 16 ++++++++++++ .../src/__tests__/ReactFlightDOMEdge-test.js | 25 +++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index c7506a13e59..503f79e4cc5 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -624,6 +624,22 @@ function wakeChunkIfInitialized<T>( rejectListeners.splice(rejectionIdx, 1); } } + // The status might have changed after fulfilling the reference. + switch ((chunk: SomeChunk<T>).status) { + case INITIALIZED: + const initializedChunk: InitializedChunk<T> = (chunk: any); + wakeChunk( + resolveListeners, + initializedChunk.value, + initializedChunk, + ); + return; + case ERRORED: + if (rejectListeners !== null) { + rejectChunk(rejectListeners, chunk.reason); + } + return; + } } } } diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index a47c9b086a1..9e024107fc5 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -2196,4 +2196,29 @@ describe('ReactFlightDOMEdge', () => { 'Switched to client rendering because the server rendering errored:\n\nssr-throw', ); }); + + it('should properly resolve with deduped objects', async () => { + const obj = {foo: 'hi'}; + + function Test(props) { + return props.obj.foo; + } + + const root = { + obj: obj, + node: <Test obj={obj} />, + }; + + const stream = ReactServerDOMServer.renderToReadableStream(root); + + const response = ReactServerDOMClient.createFromReadableStream(stream, { + serverConsumerManifest: { + moduleMap: null, + moduleLoading: null, + }, + }); + + const result = await response; + expect(result).toEqual({obj: obj, node: 'hi'}); + }); }); From 90817f8810da9d993bf93a75b673399b112af67e Mon Sep 17 00:00:00 2001 From: Ricky <rickhanlonii@gmail.com> Date: Mon, 27 Oct 2025 17:38:56 -0400 Subject: [PATCH 139/276] [rn] delete the legacy renderers from the sync (#34946) Now that RN is only on the New Architecture, we can stop stop syncing the legacy React Native renderers. In this diff, I just stop syncing them. In a follow up I'll delete the code for them so only Fabric is left. This will also allow us to remove the `enableLegacyMode` feature flag. --- .../workflows/runtime_commit_artifacts.yml | 7 ++-- packages/react-native-renderer/index.js | 1 + packages/react-reconciler/README.md | 2 +- scripts/rollup/bundles.js | 36 ------------------- .../rollup/shims/react-native/ReactNative.js | 1 + 5 files changed, 8 insertions(+), 39 deletions(-) diff --git a/.github/workflows/runtime_commit_artifacts.yml b/.github/workflows/runtime_commit_artifacts.yml index b982d561ed7..2809df18159 100644 --- a/.github/workflows/runtime_commit_artifacts.yml +++ b/.github/workflows/runtime_commit_artifacts.yml @@ -162,10 +162,13 @@ jobs: mv build/facebook-react-native/react-is/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-is/ mv build/facebook-react-native/react-test-renderer/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-test-renderer/ - # Delete OSS renderer. OSS renderer is synced through internal script. + # Delete the OSS renderers, these are sync'd to RN separately. RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/ + SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/ rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js - rm $RENDERER_FOLDER/ReactNativeRenderer-{dev,prod,profiling}.js + + # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future. + rm $SHIM_FOLDER/ReactNative.js # Copy eslint-plugin-react-hooks # NOTE: This is different from www, here we include the full package diff --git a/packages/react-native-renderer/index.js b/packages/react-native-renderer/index.js index ecc5e58c3d8..131c066ff44 100644 --- a/packages/react-native-renderer/index.js +++ b/packages/react-native-renderer/index.js @@ -12,4 +12,5 @@ import * as ReactNative from './src/ReactNativeRenderer'; // Assert that the exports line up with the type we're going to expose. (ReactNative: ReactNativeType); +// TODO: Delete the legacy renderer, only Fabric is used now. export * from './src/ReactNativeRenderer'; diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md index b30387c591f..82080513a45 100644 --- a/packages/react-reconciler/README.md +++ b/packages/react-reconciler/README.md @@ -59,7 +59,7 @@ The examples in the React repository are declared a bit differently than a third * [React ART](https://github.com/facebook/react/blob/main/packages/react-art/src/ReactART.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js) * [React DOM](https://github.com/facebook/react/blob/main/packages/react-dom/src/client/ReactDOM.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js) -* [React Native](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFiberConfigNative.js) +* [React Native](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFabric.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFiberConfigFabric.js) If these links break please file an issue and we’ll fix them. They intentionally link to the latest versions since the API is still evolving. If you have more questions please file an issue and we’ll try to help! diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 0a7b17ec2cc..69d0b534fce 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -819,42 +819,6 @@ const bundles = [ }), }, - /******* React Native *******/ - { - bundleTypes: __EXPERIMENTAL__ - ? [] - : [RN_FB_DEV, RN_FB_PROD, RN_FB_PROFILING], - moduleType: RENDERER, - entry: 'react-native-renderer', - global: 'ReactNativeRenderer', - externals: ['react-native', 'ReactNativeInternalFeatureFlags'], - minifyWithProdErrorCodes: false, - wrapWithModuleBoundaries: true, - babel: opts => - Object.assign({}, opts, { - plugins: opts.plugins.concat([ - [require.resolve('@babel/plugin-transform-classes'), {loose: true}], - ]), - }), - }, - { - bundleTypes: [RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING], - moduleType: RENDERER, - entry: 'react-native-renderer', - global: 'ReactNativeRenderer', - // ReactNativeInternalFeatureFlags temporary until we land enableRemoveConsolePatches. - // Needs to be done before the next RN OSS release. - externals: ['react-native', 'ReactNativeInternalFeatureFlags'], - minifyWithProdErrorCodes: false, - wrapWithModuleBoundaries: true, - babel: opts => - Object.assign({}, opts, { - plugins: opts.plugins.concat([ - [require.resolve('@babel/plugin-transform-classes'), {loose: true}], - ]), - }), - }, - /******* React Native Fabric *******/ { bundleTypes: __EXPERIMENTAL__ diff --git a/scripts/rollup/shims/react-native/ReactNative.js b/scripts/rollup/shims/react-native/ReactNative.js index 82c062bb851..4e7ab19ae6e 100644 --- a/scripts/rollup/shims/react-native/ReactNative.js +++ b/scripts/rollup/shims/react-native/ReactNative.js @@ -14,6 +14,7 @@ import type {ReactNativeType} from './ReactNativeTypes'; let ReactNative: ReactNativeType; +// TODO: Delete the legacy renderer. Only ReactFabric is used now. if (__DEV__) { ReactNative = require('../implementations/ReactNativeRenderer-dev'); } else { From dd53a946ecf4805ea0ecb885e538f69e8e3cbd61 Mon Sep 17 00:00:00 2001 From: Ricky <rickhanlonii@gmail.com> Date: Mon, 27 Oct 2025 17:48:33 -0400 Subject: [PATCH 140/276] [rn] enabled disableLegacyMode everywhere (#34947) Stacked on https://github.com/facebook/react/pull/34946 This should be a noop, now that the legacy renderers are not being sync'd. --- .github/workflows/runtime_commit_artifacts.yml | 2 +- .../src/__tests__/ReactFabricAndNative-test.internal.js | 8 ++++++++ packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +- packages/shared/forks/ReactFeatureFlags.native-oss.js | 2 +- .../forks/ReactFeatureFlags.test-renderer.native-fb.js | 2 +- 5 files changed, 12 insertions(+), 4 deletions(-) diff --git a/.github/workflows/runtime_commit_artifacts.yml b/.github/workflows/runtime_commit_artifacts.yml index 2809df18159..1b98673cd4d 100644 --- a/.github/workflows/runtime_commit_artifacts.yml +++ b/.github/workflows/runtime_commit_artifacts.yml @@ -164,10 +164,10 @@ jobs: # Delete the OSS renderers, these are sync'd to RN separately. RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/ - SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/ rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future. + SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/ rm $SHIM_FOLDER/ReactNative.js # Copy eslint-plugin-react-hooks diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js index 4e0fcad9c80..0b2f46b4d5d 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js @@ -40,6 +40,7 @@ describe('created with ReactFabric called with ReactNative', () => { require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').getNativeTagFromPublicInstance; }); + // @gate !disableLegacyMode it('find Fabric instances with the RN renderer', () => { const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -60,6 +61,7 @@ describe('created with ReactFabric called with ReactNative', () => { expect(getNativeTagFromPublicInstance(instance)).toBe(2); }); + // @gate !disableLegacyMode it('find Fabric nodes with the RN renderer', () => { const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -80,6 +82,7 @@ describe('created with ReactFabric called with ReactNative', () => { expect(handle).toBe(2); }); + // @gate !disableLegacyMode it('dispatches commands on Fabric nodes with the RN renderer', () => { nativeFabricUIManager.dispatchCommand.mockClear(); const View = createReactNativeComponentClass('RCTView', () => ({ @@ -101,6 +104,7 @@ describe('created with ReactFabric called with ReactNative', () => { expect(UIManager.dispatchViewManagerCommand).not.toBeCalled(); }); + // @gate !disableLegacyMode it('dispatches sendAccessibilityEvent on Fabric nodes with the RN renderer', () => { nativeFabricUIManager.sendAccessibilityEvent.mockClear(); const View = createReactNativeComponentClass('RCTView', () => ({ @@ -143,6 +147,7 @@ describe('created with ReactNative called with ReactFabric', () => { .ReactNativeViewConfigRegistry.register; }); + // @gate !disableLegacyMode it('find Paper instances with the Fabric renderer', () => { const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -163,6 +168,7 @@ describe('created with ReactNative called with ReactFabric', () => { expect(instance._nativeTag).toBe(3); }); + // @gate !disableLegacyMode it('find Paper nodes with the Fabric renderer', () => { const View = createReactNativeComponentClass('RCTView', () => ({ validAttributes: {title: true}, @@ -183,6 +189,7 @@ describe('created with ReactNative called with ReactFabric', () => { expect(handle).toBe(3); }); + // @gate !disableLegacyMode it('dispatches commands on Paper nodes with the Fabric renderer', () => { UIManager.dispatchViewManagerCommand.mockReset(); const View = createReactNativeComponentClass('RCTView', () => ({ @@ -205,6 +212,7 @@ describe('created with ReactNative called with ReactFabric', () => { expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled(); }); + // @gate !disableLegacyMode it('dispatches sendAccessibilityEvent on Paper nodes with the Fabric renderer', () => { ReactNativePrivateInterface.legacySendAccessibilityEvent.mockReset(); const View = createReactNativeComponentClass('RCTView', () => ({ diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index afecaa685fa..dd0bd8624f3 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -35,7 +35,7 @@ export const disableCommentsAsDOMContainers: boolean = true; export const disableInputAttributeSyncing: boolean = false; export const disableLegacyContext: boolean = false; export const disableLegacyContextForFunctionComponents: boolean = false; -export const disableLegacyMode: boolean = false; +export const disableLegacyMode: boolean = true; export const disableSchedulerTimeoutInWorkLoop: boolean = false; export const disableTextareaChildren: boolean = false; export const enableAsyncDebugInfo: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 7cabeb526a2..555307cef00 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -21,7 +21,7 @@ export const disableCommentsAsDOMContainers: boolean = true; export const disableInputAttributeSyncing: boolean = false; export const disableLegacyContext: boolean = true; export const disableLegacyContextForFunctionComponents: boolean = true; -export const disableLegacyMode: boolean = false; +export const disableLegacyMode: boolean = true; export const disableSchedulerTimeoutInWorkLoop: boolean = false; export const disableTextareaChildren: boolean = false; export const enableAsyncDebugInfo: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index eb56da603d3..0ff044250cb 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -16,7 +16,7 @@ export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; export const disableLegacyContext = false; export const disableLegacyContextForFunctionComponents = false; -export const disableLegacyMode = false; +export const disableLegacyMode = true; export const disableSchedulerTimeoutInWorkLoop = false; export const disableTextareaChildren = false; export const enableAsyncDebugInfo = false; From 69f3e9d0346a04af55de05a08d7aa2df17035849 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Mon, 27 Oct 2025 17:54:09 -0400 Subject: [PATCH 141/276] [generate-changelog] Add `--format` option (#34992) Adds a new `--format` option which can be `text` (default), `csv`, or `json`. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34992). * #34993 * __->__ #34992 --- scripts/tasks/generate-changelog.js | 246 ++++++++++++++++++++++++---- 1 file changed, 213 insertions(+), 33 deletions(-) diff --git a/scripts/tasks/generate-changelog.js b/scripts/tasks/generate-changelog.js index 158346d2d9a..17818573a96 100644 --- a/scripts/tasks/generate-changelog.js +++ b/scripts/tasks/generate-changelog.js @@ -23,7 +23,7 @@ const repoRoot = path.resolve(__dirname, '..', '..'); function parseArgs(argv) { const parser = yargs(argv) .usage( - 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [<pkg@version> ...]' + 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [--format <text|csv|json>] [<pkg@version> ...]' ) .example( '$0 --codex eslint-plugin-react-hooks@7.0.1', @@ -50,6 +50,12 @@ function parseArgs(argv) { describe: 'Enable verbose debug logging.', default: false, }) + .option('format', { + type: 'string', + describe: 'Output format for the generated changelog.', + choices: ['text', 'csv', 'json'], + default: 'text', + }) .help('help') .alias('h', 'help') .version(false) @@ -61,6 +67,7 @@ function parseArgs(argv) { const args = parser.scriptName('generate-changelog').parse(); const packageSpecs = []; const debug = !!args.debug; + const format = args.format || 'text'; let summarizer = null; if (args.codex && args.claude) { throw new Error('Choose either --codex or --claude, not both.'); @@ -123,6 +130,7 @@ function parseArgs(argv) { return { debug, + format, summarizer, packageSpecs, }; @@ -484,6 +492,22 @@ async function summarizePackageCommits({ function noopLogger() {} +function escapeCsvValue(value) { + if (value == null) { + return ''; + } + + const stringValue = String(value).replace(/\r?\n|\r/g, ' '); + if (stringValue.includes('"') || stringValue.includes(',')) { + return `"${stringValue.replace(/"/g, '""')}"`; + } + return stringValue; +} + +function toCsvRow(values) { + return values.map(escapeCsvValue).join(','); +} + async function runSummarizer(command, prompt) { const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024}; @@ -634,7 +658,9 @@ async function fetchPullRequestMetadata(prNumber, {log}) { } async function main() { - const {packageSpecs, summarizer, debug} = parseArgs(process.argv.slice(2)); + const {packageSpecs, summarizer, debug, format} = parseArgs( + process.argv.slice(2) + ); const log = debug ? (...args) => console.log('[generate-changelog]', ...args) : noopLogger; @@ -754,60 +780,214 @@ async function main() { log, }); - const outputLines = []; + const noChangesMessage = 'No changes since the last release.'; + const changelogEntries = []; for (let i = 0; i < packageSpecs.length; i++) { const spec = packageSpecs[i]; - outputLines.push(`## ${spec.name}@${spec.displayVersion || spec.version}`); + const versionText = spec.displayVersion || spec.version; const commitsForPackage = commitsByPackage.get(spec.name) || []; + const entry = { + package: spec.name, + version: versionText, + hasChanges: commitsForPackage.length > 0, + commits: [], + note: null, + }; - if (commitsForPackage.length === 0) { - outputLines.push('* No changes since the last release.'); - outputLines.push(''); + if (!entry.hasChanges) { + entry.note = noChangesMessage; + changelogEntries.push(entry); continue; } - commitsForPackage.forEach(commit => { + const summaryMap = summariesByPackage.get(spec.name) || new Map(); + entry.commits = commitsForPackage.map(commit => { if (commit.prNumber && prMetadata.has(commit.prNumber)) { - commit.authorLogin = prMetadata.get(commit.prNumber).authorLogin; + const metadata = prMetadata.get(commit.prNumber); + if (metadata && metadata.authorLogin) { + commit.authorLogin = metadata.authorLogin; + } } - const prFragment = commit.prNumber - ? `[#${commit.prNumber}](https://github.com/facebook/react/pull/${commit.prNumber})` - : `commit ${commit.sha.slice(0, 7)}`; + let summary = summaryMap.get(commit.sha) || commit.subject; + if (commit.prNumber) { + const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); + summary = summary.replace(prPattern, '').trim(); + } - let authorFragment = commit.authorLogin - ? `[@${commit.authorLogin}](https://github.com/${commit.authorLogin})` - : commit.authorName || 'unknown author'; + const prNumber = commit.prNumber || null; + const prUrl = prNumber + ? `https://github.com/facebook/react/pull/${prNumber}` + : null; + const commitSha = commit.sha; + const commitUrl = `https://github.com/facebook/react/commit/${commitSha}`; + + const authorLogin = commit.authorLogin || null; + const authorName = commit.authorName || null; + const authorEmail = commit.authorEmail || null; + + let authorUrl = null; + let authorDisplay = authorName || 'unknown author'; + + if (authorLogin) { + authorUrl = `https://github.com/${authorLogin}`; + authorDisplay = `[@${authorLogin}](${authorUrl})`; + } else if (authorName && authorName.startsWith('@')) { + const username = authorName.slice(1); + authorUrl = `https://github.com/${username}`; + authorDisplay = `[@${username}](${authorUrl})`; + } - if ( - !commit.authorLogin && - commit.authorName && - commit.authorName.startsWith('@') - ) { - const username = commit.authorName.slice(1); - authorFragment = `[@${username}](https://github.com/${username})`; + const referenceDisplay = prNumber + ? `[#${prNumber}](${prUrl})` + : `commit ${commitSha.slice(0, 7)}`; + const referenceType = prNumber ? 'pr' : 'commit'; + const referenceId = prNumber ? `#${prNumber}` : commitSha.slice(0, 7); + const referenceUrl = prNumber ? prUrl : commitUrl; + + return { + summary, + prNumber, + prUrl, + commitSha, + commitUrl, + authorLogin, + authorName, + authorEmail, + authorUrl, + authorDisplay, + referenceDisplay, + referenceType, + referenceId, + referenceUrl, + }; + }); + + changelogEntries.push(entry); + } + + log('Generated changelog sections.'); + if (format === 'text') { + const outputLines = []; + for (let i = 0; i < changelogEntries.length; i++) { + const entry = changelogEntries[i]; + outputLines.push(`## ${entry.package}@${entry.version}`); + if (!entry.hasChanges) { + outputLines.push(`* ${entry.note}`); + outputLines.push(''); + continue; } - const summaryMap = summariesByPackage.get(spec.name) || new Map(); - let summary = summaryMap.get(commit.sha) || commit.subject; + entry.commits.forEach(commit => { + outputLines.push( + `* ${commit.summary} (${commit.referenceDisplay} by ${commit.authorDisplay})` + ); + }); + outputLines.push(''); + } - if (commit.prNumber) { - const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); - summary = summary.replace(prPattern, '').trim(); + while (outputLines.length && outputLines[outputLines.length - 1] === '') { + outputLines.pop(); + } + + console.log(outputLines.join('\n')); + return; + } + + if (format === 'csv') { + const header = [ + 'package', + 'version', + 'summary', + 'reference_type', + 'reference_id', + 'reference_url', + 'author_name', + 'author_login', + 'author_url', + 'author_email', + 'commit_sha', + 'commit_url', + ]; + const rows = [header]; + changelogEntries.forEach(entry => { + if (!entry.hasChanges) { + rows.push([ + entry.package, + entry.version, + entry.note, + '', + '', + '', + '', + '', + '', + '', + '', + '', + ]); + return; } - outputLines.push(`* ${summary} (${prFragment} by ${authorFragment})`); + entry.commits.forEach(commit => { + const authorName = + commit.authorName || + (commit.authorLogin ? `@${commit.authorLogin}` : 'unknown author'); + rows.push([ + entry.package, + entry.version, + commit.summary, + commit.referenceType, + commit.referenceId, + commit.referenceUrl, + authorName, + commit.authorLogin || '', + commit.authorUrl || '', + commit.authorEmail || '', + commit.commitSha, + commit.commitUrl, + ]); + }); }); - outputLines.push(''); + const csvLines = rows.map(toCsvRow); + console.log(csvLines.join('\n')); + return; } - while (outputLines.length && outputLines[outputLines.length - 1] === '') { - outputLines.pop(); + if (format === 'json') { + const payload = changelogEntries.map(entry => ({ + package: entry.package, + version: entry.version, + hasChanges: entry.hasChanges, + note: entry.hasChanges ? undefined : entry.note, + commits: entry.commits.map(commit => ({ + summary: commit.summary, + prNumber: commit.prNumber, + prUrl: commit.prUrl, + commitSha: commit.commitSha, + commitUrl: commit.commitUrl, + author: { + login: commit.authorLogin, + name: commit.authorName, + email: commit.authorEmail, + url: commit.authorUrl, + display: commit.authorDisplay, + }, + reference: { + type: commit.referenceType, + id: commit.referenceId, + url: commit.referenceUrl, + label: commit.referenceDisplay, + }, + })), + })); + + console.log(JSON.stringify(payload, null, 2)); + return; } - log('Generated changelog sections.'); - console.log(outputLines.join('\n')); + throw new Error(`Unsupported format: ${format}`); } main().catch(error => { From 17b3765244b83e4c6f7a8c9b78ea4c8fa3a35622 Mon Sep 17 00:00:00 2001 From: lauren <poteto@users.noreply.github.com> Date: Mon, 27 Oct 2025 18:04:48 -0400 Subject: [PATCH 142/276] [generate-changelog] Refactor (#34993) Just a light reorganization. --- package.json | 2 +- scripts/tasks/generate-changelog.js | 996 ------------------ scripts/tasks/generate-changelog/args.js | 128 +++ scripts/tasks/generate-changelog/data.js | 190 ++++ .../tasks/generate-changelog/formatters.js | 228 ++++ scripts/tasks/generate-changelog/index.js | 158 +++ scripts/tasks/generate-changelog/summaries.js | 306 ++++++ scripts/tasks/generate-changelog/utils.js | 62 ++ 8 files changed, 1073 insertions(+), 997 deletions(-) delete mode 100644 scripts/tasks/generate-changelog.js create mode 100644 scripts/tasks/generate-changelog/args.js create mode 100644 scripts/tasks/generate-changelog/data.js create mode 100644 scripts/tasks/generate-changelog/formatters.js create mode 100644 scripts/tasks/generate-changelog/index.js create mode 100644 scripts/tasks/generate-changelog/summaries.js create mode 100644 scripts/tasks/generate-changelog/utils.js diff --git a/package.json b/package.json index 9fb3082f0c6..1b88aa171a8 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ "download-build-in-codesandbox-ci": "yarn build --type=node react/index react.react-server react-dom/index react-dom/client react-dom/src/server react-dom/test-utils react-dom.react-server scheduler/index react/jsx-runtime react/jsx-dev-runtime react-server-dom-webpack", "check-release-dependencies": "node ./scripts/release/check-release-dependencies", "generate-inline-fizz-runtime": "node ./scripts/rollup/generate-inline-fizz-runtime.js", - "generate-changelog": "node ./scripts/tasks/generate-changelog.js", + "generate-changelog": "node ./scripts/tasks/generate-changelog/index.js", "flags": "node ./scripts/flags/flags.js" }, "resolutions": { diff --git a/scripts/tasks/generate-changelog.js b/scripts/tasks/generate-changelog.js deleted file mode 100644 index 17818573a96..00000000000 --- a/scripts/tasks/generate-changelog.js +++ /dev/null @@ -1,996 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -'use strict'; - -const fs = require('fs'); -const path = require('path'); -const https = require('https'); -const {execFile} = require('child_process'); -const {promisify} = require('util'); -const semver = require('semver'); -const yargs = require('yargs/yargs'); - -const {stablePackages} = require('../../ReactVersions'); - -const execFileAsync = promisify(execFile); -const repoRoot = path.resolve(__dirname, '..', '..'); - -function parseArgs(argv) { - const parser = yargs(argv) - .usage( - 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [--format <text|csv|json>] [<pkg@version> ...]' - ) - .example( - '$0 --codex eslint-plugin-react-hooks@7.0.1', - 'Generate changelog for a single package using Codex.' - ) - .example( - '$0 --claude react@19.3 react-dom@19.3', - 'Generate changelog entries for multiple packages using Claude.' - ) - .example( - '$0 --codex', - 'Generate changelog for all stable packages using recorded versions.' - ) - .option('codex', { - type: 'boolean', - describe: 'Use Codex for commit summarization.', - }) - .option('claude', { - type: 'boolean', - describe: 'Use Claude for commit summarization.', - }) - .option('debug', { - type: 'boolean', - describe: 'Enable verbose debug logging.', - default: false, - }) - .option('format', { - type: 'string', - describe: 'Output format for the generated changelog.', - choices: ['text', 'csv', 'json'], - default: 'text', - }) - .help('help') - .alias('h', 'help') - .version(false) - .parserConfiguration({ - 'parse-numbers': false, - 'parse-positional-numbers': false, - }); - - const args = parser.scriptName('generate-changelog').parse(); - const packageSpecs = []; - const debug = !!args.debug; - const format = args.format || 'text'; - let summarizer = null; - if (args.codex && args.claude) { - throw new Error('Choose either --codex or --claude, not both.'); - } - if (args.codex) { - summarizer = 'codex'; - } else if (args.claude) { - summarizer = 'claude'; - } - - const positionalArgs = Array.isArray(args._) ? args._ : []; - for (let i = 0; i < positionalArgs.length; i++) { - const token = String(positionalArgs[i]).trim(); - if (!token) { - continue; - } - - const atIndex = token.lastIndexOf('@'); - if (atIndex <= 0 || atIndex === token.length - 1) { - throw new Error(`Invalid package specification: ${token}`); - } - - const packageName = token.slice(0, atIndex); - const versionText = token.slice(atIndex + 1); - const validVersion = - semver.valid(versionText) || semver.valid(semver.coerce(versionText)); - if (!validVersion) { - throw new Error(`Invalid version for ${packageName}: ${versionText}`); - } - - packageSpecs.push({ - name: packageName, - version: validVersion, - displayVersion: versionText, - }); - } - - if (packageSpecs.length === 0) { - Object.keys(stablePackages).forEach(pkgName => { - const versionText = stablePackages[pkgName]; - const validVersion = semver.valid(versionText); - if (!validVersion) { - throw new Error( - `Invalid stable version configured for ${pkgName}: ${versionText}` - ); - } - packageSpecs.push({ - name: pkgName, - version: validVersion, - displayVersion: versionText, - }); - }); - } - - if (summarizer && !isCommandAvailable(summarizer)) { - throw new Error( - `Requested summarizer "${summarizer}" is not available on the PATH.` - ); - } - - return { - debug, - format, - summarizer, - packageSpecs, - }; -} - -async function fetchNpmInfo(packageName, {log}) { - const npmArgs = ['view', `${packageName}@latest`, '--json']; - const options = {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024}; - log(`Fetching npm info for ${packageName}...`); - const {stdout} = await execFileAsync('npm', npmArgs, options); - - let data = stdout.trim(); - if (!data) { - throw new Error(`npm view returned empty result for ${packageName}`); - } - - let info = JSON.parse(data); - if (Array.isArray(info)) { - info = info[info.length - 1]; - } - - const version = info.version || info['dist-tags']?.latest; - let gitHead = info.gitHead || null; - - if (!gitHead) { - const gitHeadResult = await execFileAsync( - 'npm', - ['view', `${packageName}@${version}`, 'gitHead'], - {cwd: repoRoot, maxBuffer: 1024 * 1024} - ); - const possibleGitHead = gitHeadResult.stdout.trim(); - if ( - possibleGitHead && - possibleGitHead !== 'undefined' && - possibleGitHead !== 'null' - ) { - log(`Found gitHead for ${packageName}@${version}: ${possibleGitHead}`); - gitHead = possibleGitHead; - } - } - - if (!version) { - throw new Error( - `Unable to determine latest published version for ${packageName}` - ); - } - if (!gitHead) { - throw new Error( - `Unable to determine git commit for ${packageName}@${version}` - ); - } - - return { - publishedVersion: version, - gitHead, - }; -} - -async function collectCommitsSince(packageName, sinceGitSha, {log}) { - log(`Collecting commits for ${packageName} since ${sinceGitSha}...`); - await execFileAsync('git', ['cat-file', '-e', `${sinceGitSha}^{commit}`], { - cwd: repoRoot, - }); - const {stdout} = await execFileAsync( - 'git', - [ - 'rev-list', - '--reverse', - `${sinceGitSha}..HEAD`, - '--', - path.posix.join('packages', packageName), - ], - {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} - ); - - return stdout - .trim() - .split('\n') - .map(line => line.trim()) - .filter(Boolean); -} - -async function loadCommitDetails(sha, {log}) { - log(`Loading commit details for ${sha}...`); - const format = ['%H', '%s', '%an', '%ae', '%ct', '%B'].join('%n'); - const {stdout} = await execFileAsync( - 'git', - ['show', '--quiet', `--format=${format}`, sha], - {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} - ); - - const [commitSha, subject, authorName, authorEmail, timestamp, ...rest] = - stdout.split('\n'); - const body = rest.join('\n').trim(); - - return { - sha: commitSha.trim(), - subject: subject.trim(), - authorName: authorName.trim(), - authorEmail: authorEmail.trim(), - timestamp: +timestamp.trim() || 0, - body, - }; -} - -function extractPrNumber(subject, body) { - const patterns = [ - /$#(\d+)$/, - /https:\/\/github\.com\/facebook\/react\/pull\/(\d+)/, - ]; - - for (let i = 0; i < patterns.length; i++) { - const pattern = patterns[i]; - const subjectMatch = subject && subject.match(pattern); - if (subjectMatch) { - return subjectMatch[1]; - } - const bodyMatch = body && body.match(pattern); - if (bodyMatch) { - return bodyMatch[1]; - } - } - - return null; -} - -function isCommandAvailable(command) { - const paths = (process.env.PATH || '').split(path.delimiter); - const extensions = - process.platform === 'win32' && process.env.PATHEXT - ? process.env.PATHEXT.split(';') - : ['']; - - for (let i = 0; i < paths.length; i++) { - const dir = paths[i]; - if (!dir) { - continue; - } - for (let j = 0; j < extensions.length; j++) { - const ext = extensions[j]; - const fullPath = path.join(dir, `${command}${ext}`); - try { - fs.accessSync(fullPath, fs.constants.X_OK); - return true; - } catch { - // Keep searching. - } - } - } - return false; -} - -function readChangelogSnippet(preferredPackage) { - const cacheKey = - preferredPackage === 'eslint-plugin-react-hooks' - ? preferredPackage - : 'root'; - if (!readChangelogSnippet.cache) { - readChangelogSnippet.cache = new Map(); - } - const cache = readChangelogSnippet.cache; - if (cache.has(cacheKey)) { - return cache.get(cacheKey); - } - - const targetPath = - preferredPackage === 'eslint-plugin-react-hooks' - ? path.join( - repoRoot, - 'packages', - 'eslint-plugin-react-hooks', - 'CHANGELOG.md' - ) - : path.join(repoRoot, 'CHANGELOG.md'); - - let content = ''; - try { - content = fs.readFileSync(targetPath, 'utf8'); - } catch { - content = ''; - } - - const snippet = content.slice(0, 4000); - cache.set(cacheKey, snippet); - return snippet; -} - -function sanitizeSummary(text) { - if (!text) { - return ''; - } - - const trimmed = text.trim(); - const withoutBullet = trimmed.replace(/^([-*]\s+|\d+\s*[\.)]\s+)/, ''); - - return withoutBullet.replace(/\s+/g, ' ').trim(); -} - -async function summarizePackages({ - summarizer, - packageSpecs, - packageTargets, - commitsByPackage, - log, -}) { - const summariesByPackage = new Map(); - if (!summarizer) { - packageSpecs.forEach(spec => { - const commits = commitsByPackage.get(spec.name) || []; - const summaryMap = new Map(); - for (let i = 0; i < commits.length; i++) { - const commit = commits[i]; - summaryMap.set(commit.sha, commit.subject); - } - summariesByPackage.set(spec.name, summaryMap); - }); - return summariesByPackage; - } - - const tasks = packageSpecs.map(spec => { - const commits = commitsByPackage.get(spec.name) || []; - return summarizePackageCommits({ - summarizer, - spec, - commits, - packageTargets, - allPackageSpecs: packageSpecs, - log, - }); - }); - - const results = await Promise.all(tasks); - results.forEach(entry => { - summariesByPackage.set(entry.packageName, entry.summaries); - }); - return summariesByPackage; -} - -async function summarizePackageCommits({ - summarizer, - spec, - commits, - packageTargets, - allPackageSpecs, - log, -}) { - const summaries = new Map(); - if (commits.length === 0) { - return {packageName: spec.name, summaries}; - } - - const rootStyle = readChangelogSnippet('root'); - const hooksStyle = readChangelogSnippet('eslint-plugin-react-hooks'); - const targetList = allPackageSpecs.map( - targetSpec => - `${targetSpec.name}@${targetSpec.displayVersion || targetSpec.version}` - ); - const payload = commits.map(commit => { - const packages = Array.from(commit.packages || []).sort(); - const usesHooksStyle = (commit.packages || new Set()).has( - 'eslint-plugin-react-hooks' - ); - const packagesWithVersions = packages.map(pkgName => { - const targetSpec = packageTargets.get(pkgName); - if (!targetSpec) { - return pkgName; - } - return `${pkgName}@${targetSpec.displayVersion || targetSpec.version}`; - }); - return { - sha: commit.sha, - packages, - packagesWithVersions, - style: usesHooksStyle ? 'eslint-plugin-react-hooks' : 'root', - subject: commit.subject, - body: commit.body || '', - }; - }); - - const promptParts = [ - `You are preparing changelog summaries for ${spec.name} ${ - spec.displayVersion || spec.version - }.`, - 'The broader release includes:', - ...targetList.map(line => `- ${line}`), - '', - 'For each commit payload, write a single concise sentence without a leading bullet.', - 'Match the tone and formatting of the provided style samples. Do not mention commit hashes.', - 'Return a JSON array where each element has the shape `{ "sha": "<sha>", "summary": "<text>" }`.', - 'The JSON must contain one entry per commit in the same order they are provided.', - 'Use `"root"` style unless the payload specifies `"eslint-plugin-react-hooks"`, in which case use that style sample.', - '', - '--- STYLE: root ---', - rootStyle, - '--- END STYLE ---', - '', - '--- STYLE: eslint-plugin-react-hooks ---', - hooksStyle, - '--- END STYLE ---', - '', - `Commits affecting ${spec.name}:`, - ]; - - payload.forEach((item, index) => { - promptParts.push( - `Commit ${index + 1}:`, - `sha: ${item.sha}`, - `style: ${item.style}`, - `packages: ${item.packagesWithVersions.join(', ') || 'none'}`, - `subject: ${item.subject}`, - 'body:', - item.body || '(empty)', - '' - ); - }); - promptParts.push('Return ONLY the JSON array.', ''); - - const prompt = promptParts.join('\n'); - log( - `Invoking ${summarizer} for ${payload.length} commit summaries targeting ${spec.name}.` - ); - log(`Summarizer prompt length: ${prompt.length} characters.`); - - try { - const raw = await runSummarizer(summarizer, prompt); - log(`Summarizer output length: ${raw.length}`); - const parsed = parseSummariesResponse(raw); - if (!parsed) { - throw new Error('Unable to parse summarizer output.'); - } - parsed.forEach(entry => { - const summary = sanitizeSummary(entry.summary || ''); - if (summary) { - summaries.set(entry.sha, summary); - } - }); - } catch (error) { - if (log !== noopLogger) { - log( - `Warning: failed to summarize commits for ${spec.name} with ${summarizer}. Falling back to subjects. ${error.message}` - ); - if (error && error.stack) { - log(error.stack); - } - } - } - - for (let i = 0; i < commits.length; i++) { - const commit = commits[i]; - if (!summaries.has(commit.sha)) { - summaries.set(commit.sha, commit.subject); - } - } - - log(`Summaries available for ${summaries.size} commit(s) for ${spec.name}.`); - - return {packageName: spec.name, summaries}; -} - -function noopLogger() {} - -function escapeCsvValue(value) { - if (value == null) { - return ''; - } - - const stringValue = String(value).replace(/\r?\n|\r/g, ' '); - if (stringValue.includes('"') || stringValue.includes(',')) { - return `"${stringValue.replace(/"/g, '""')}"`; - } - return stringValue; -} - -function toCsvRow(values) { - return values.map(escapeCsvValue).join(','); -} - -async function runSummarizer(command, prompt) { - const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024}; - - if (command === 'codex') { - const {stdout} = await execFileAsync( - 'codex', - ['exec', '--json', prompt], - options - ); - return parseCodexSummary(stdout); - } - - if (command === 'claude') { - const {stdout} = await execFileAsync('claude', ['-p', prompt], options); - return stripClaudeBanner(stdout); - } - - throw new Error(`Unsupported summarizer command: ${command}`); -} - -function parseCodexSummary(output) { - let last = ''; - const lines = output.split('\n'); - for (let i = 0; i < lines.length; i++) { - const trimmed = lines[i].trim(); - if (!trimmed) { - continue; - } - try { - const event = JSON.parse(trimmed); - if ( - event.type === 'item.completed' && - event.item?.type === 'agent_message' - ) { - last = event.item.text || ''; - } - } catch { - last = trimmed; - } - } - return last || output; -} - -function stripClaudeBanner(text) { - return text - .split('\n') - .filter( - line => - line.trim() !== - 'Claude Code at Meta (https://fburl.com/claude.code.users)' - ) - .join('\n'); -} - -function parseSummariesResponse(raw) { - const candidates = []; - const trimmed = raw.trim(); - const fencedMatch = trimmed.match(/```(?:json)?\s*([\s\S]*?)```/i); - if (fencedMatch) { - candidates.push(fencedMatch[1].trim()); - } - - const firstBracket = trimmed.indexOf('['); - if (firstBracket !== -1) { - candidates.push(trimmed.slice(firstBracket).trim()); - } - - for (let i = 0; i < candidates.length; i++) { - const candidate = candidates[i]; - if (!candidate) { - continue; - } - try { - const parsed = JSON.parse(candidate); - if (Array.isArray(parsed)) { - return parsed; - } - } catch { - // Try the next candidate. - } - } - - try { - const parsed = JSON.parse(trimmed); - if (Array.isArray(parsed)) { - return parsed; - } - } catch { - // Fall through. - } - - return null; -} - -async function fetchPullRequestMetadata(prNumber, {log}) { - log(`Fetching PR metadata for #${prNumber}...`); - const token = process.env.GITHUB_TOKEN || process.env.GH_TOKEN || null; - const requestOptions = { - hostname: 'api.github.com', - path: `/repos/facebook/react/pulls/${prNumber}`, - method: 'GET', - headers: { - 'User-Agent': 'generate-changelog-script', - Accept: 'application/vnd.github+json', - }, - }; - if (token) { - requestOptions.headers.Authorization = `Bearer ${token}`; - } - - return new Promise(resolve => { - const req = https.request(requestOptions, res => { - let raw = ''; - res.on('data', chunk => { - raw += chunk; - }); - res.on('end', () => { - if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { - try { - const json = JSON.parse(raw); - resolve({ - authorLogin: json.user?.login || null, - }); - } catch (error) { - process.stderr.write( - `Warning: unable to parse GitHub response for PR #${prNumber}: ${error.message}\n` - ); - resolve(null); - } - } else { - process.stderr.write( - `Warning: GitHub API request failed for PR #${prNumber} with status ${res.statusCode}\n` - ); - resolve(null); - } - }); - }); - - req.on('error', error => { - process.stderr.write( - `Warning: GitHub API request errored for PR #${prNumber}: ${error.message}\n` - ); - resolve(null); - }); - - req.end(); - }); -} - -async function main() { - const {packageSpecs, summarizer, debug, format} = parseArgs( - process.argv.slice(2) - ); - const log = debug - ? (...args) => console.log('[generate-changelog]', ...args) - : noopLogger; - const allStablePackages = Object.keys(stablePackages); - - const packageTargets = new Map(); - for (let i = 0; i < packageSpecs.length; i++) { - const spec = packageSpecs[i]; - if (!allStablePackages.includes(spec.name)) { - throw new Error( - `Package "${spec.name}" is not listed in stablePackages.` - ); - } - if (packageTargets.has(spec.name)) { - throw new Error(`Package "${spec.name}" was specified more than once.`); - } - packageTargets.set(spec.name, spec); - } - - const targetPackages = packageSpecs.map(spec => spec.name); - log( - `Starting changelog generation for: ${packageSpecs - .map(spec => `${spec.name}@${spec.displayVersion || spec.version}`) - .join(', ')}` - ); - - const packageInfoMap = new Map(); - const packageInfoResults = await Promise.all( - targetPackages.map(async pkg => { - const info = await fetchNpmInfo(pkg, {log}); - return {pkg, info}; - }) - ); - for (let i = 0; i < packageInfoResults.length; i++) { - const entry = packageInfoResults[i]; - packageInfoMap.set(entry.pkg, entry.info); - } - - const commitPackagesMap = new Map(); - const commitCollections = await Promise.all( - targetPackages.map(async pkg => { - const {gitHead} = packageInfoMap.get(pkg); - const commits = await collectCommitsSince(pkg, gitHead, {log}); - log(`Package ${pkg} has ${commits.length} commit(s) since ${gitHead}.`); - return {pkg, commits}; - }) - ); - for (let i = 0; i < commitCollections.length; i++) { - const entry = commitCollections[i]; - const pkg = entry.pkg; - const commits = entry.commits; - for (let j = 0; j < commits.length; j++) { - const sha = commits[j]; - if (!commitPackagesMap.has(sha)) { - commitPackagesMap.set(sha, new Set()); - } - commitPackagesMap.get(sha).add(pkg); - } - } - log(`Found ${commitPackagesMap.size} commits touching target packages.`); - - if (commitPackagesMap.size === 0) { - console.log('No commits found for the selected packages.'); - return; - } - - const commitDetails = await Promise.all( - Array.from(commitPackagesMap.entries()).map( - async ([sha, packagesTouched]) => { - const detail = await loadCommitDetails(sha, {log}); - detail.packages = packagesTouched; - detail.prNumber = extractPrNumber(detail.subject, detail.body); - return detail; - } - ) - ); - - commitDetails.sort((a, b) => a.timestamp - b.timestamp); - log(`Ordered ${commitDetails.length} commit(s) chronologically.`); - - const commitsByPackage = new Map(); - commitDetails.forEach(commit => { - commit.packages.forEach(pkgName => { - if (!commitsByPackage.has(pkgName)) { - commitsByPackage.set(pkgName, []); - } - commitsByPackage.get(pkgName).push(commit); - }); - }); - - const uniquePrNumbers = Array.from( - new Set(commitDetails.map(commit => commit.prNumber).filter(Boolean)) - ); - log(`Identified ${uniquePrNumbers.length} unique PR number(s).`); - - const prMetadata = new Map(); - log(`Summarizer selected: ${summarizer || 'none (using commit titles)'}`); - const prMetadataResults = await Promise.all( - uniquePrNumbers.map(async prNumber => { - const meta = await fetchPullRequestMetadata(prNumber, {log}); - return {prNumber, meta}; - }) - ); - for (let i = 0; i < prMetadataResults.length; i++) { - const entry = prMetadataResults[i]; - if (entry.meta) { - prMetadata.set(entry.prNumber, entry.meta); - } - } - log(`Fetched metadata for ${prMetadata.size} PR(s).`); - - const summariesByPackage = await summarizePackages({ - summarizer, - packageSpecs, - packageTargets, - commitsByPackage, - log, - }); - - const noChangesMessage = 'No changes since the last release.'; - const changelogEntries = []; - for (let i = 0; i < packageSpecs.length; i++) { - const spec = packageSpecs[i]; - const versionText = spec.displayVersion || spec.version; - const commitsForPackage = commitsByPackage.get(spec.name) || []; - const entry = { - package: spec.name, - version: versionText, - hasChanges: commitsForPackage.length > 0, - commits: [], - note: null, - }; - - if (!entry.hasChanges) { - entry.note = noChangesMessage; - changelogEntries.push(entry); - continue; - } - - const summaryMap = summariesByPackage.get(spec.name) || new Map(); - entry.commits = commitsForPackage.map(commit => { - if (commit.prNumber && prMetadata.has(commit.prNumber)) { - const metadata = prMetadata.get(commit.prNumber); - if (metadata && metadata.authorLogin) { - commit.authorLogin = metadata.authorLogin; - } - } - - let summary = summaryMap.get(commit.sha) || commit.subject; - if (commit.prNumber) { - const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); - summary = summary.replace(prPattern, '').trim(); - } - - const prNumber = commit.prNumber || null; - const prUrl = prNumber - ? `https://github.com/facebook/react/pull/${prNumber}` - : null; - const commitSha = commit.sha; - const commitUrl = `https://github.com/facebook/react/commit/${commitSha}`; - - const authorLogin = commit.authorLogin || null; - const authorName = commit.authorName || null; - const authorEmail = commit.authorEmail || null; - - let authorUrl = null; - let authorDisplay = authorName || 'unknown author'; - - if (authorLogin) { - authorUrl = `https://github.com/${authorLogin}`; - authorDisplay = `[@${authorLogin}](${authorUrl})`; - } else if (authorName && authorName.startsWith('@')) { - const username = authorName.slice(1); - authorUrl = `https://github.com/${username}`; - authorDisplay = `[@${username}](${authorUrl})`; - } - - const referenceDisplay = prNumber - ? `[#${prNumber}](${prUrl})` - : `commit ${commitSha.slice(0, 7)}`; - const referenceType = prNumber ? 'pr' : 'commit'; - const referenceId = prNumber ? `#${prNumber}` : commitSha.slice(0, 7); - const referenceUrl = prNumber ? prUrl : commitUrl; - - return { - summary, - prNumber, - prUrl, - commitSha, - commitUrl, - authorLogin, - authorName, - authorEmail, - authorUrl, - authorDisplay, - referenceDisplay, - referenceType, - referenceId, - referenceUrl, - }; - }); - - changelogEntries.push(entry); - } - - log('Generated changelog sections.'); - if (format === 'text') { - const outputLines = []; - for (let i = 0; i < changelogEntries.length; i++) { - const entry = changelogEntries[i]; - outputLines.push(`## ${entry.package}@${entry.version}`); - if (!entry.hasChanges) { - outputLines.push(`* ${entry.note}`); - outputLines.push(''); - continue; - } - - entry.commits.forEach(commit => { - outputLines.push( - `* ${commit.summary} (${commit.referenceDisplay} by ${commit.authorDisplay})` - ); - }); - outputLines.push(''); - } - - while (outputLines.length && outputLines[outputLines.length - 1] === '') { - outputLines.pop(); - } - - console.log(outputLines.join('\n')); - return; - } - - if (format === 'csv') { - const header = [ - 'package', - 'version', - 'summary', - 'reference_type', - 'reference_id', - 'reference_url', - 'author_name', - 'author_login', - 'author_url', - 'author_email', - 'commit_sha', - 'commit_url', - ]; - const rows = [header]; - changelogEntries.forEach(entry => { - if (!entry.hasChanges) { - rows.push([ - entry.package, - entry.version, - entry.note, - '', - '', - '', - '', - '', - '', - '', - '', - '', - ]); - return; - } - - entry.commits.forEach(commit => { - const authorName = - commit.authorName || - (commit.authorLogin ? `@${commit.authorLogin}` : 'unknown author'); - rows.push([ - entry.package, - entry.version, - commit.summary, - commit.referenceType, - commit.referenceId, - commit.referenceUrl, - authorName, - commit.authorLogin || '', - commit.authorUrl || '', - commit.authorEmail || '', - commit.commitSha, - commit.commitUrl, - ]); - }); - }); - - const csvLines = rows.map(toCsvRow); - console.log(csvLines.join('\n')); - return; - } - - if (format === 'json') { - const payload = changelogEntries.map(entry => ({ - package: entry.package, - version: entry.version, - hasChanges: entry.hasChanges, - note: entry.hasChanges ? undefined : entry.note, - commits: entry.commits.map(commit => ({ - summary: commit.summary, - prNumber: commit.prNumber, - prUrl: commit.prUrl, - commitSha: commit.commitSha, - commitUrl: commit.commitUrl, - author: { - login: commit.authorLogin, - name: commit.authorName, - email: commit.authorEmail, - url: commit.authorUrl, - display: commit.authorDisplay, - }, - reference: { - type: commit.referenceType, - id: commit.referenceId, - url: commit.referenceUrl, - label: commit.referenceDisplay, - }, - })), - })); - - console.log(JSON.stringify(payload, null, 2)); - return; - } - - throw new Error(`Unsupported format: ${format}`); -} - -main().catch(error => { - process.stderr.write(`${error.message}\n`); - process.exit(1); -}); diff --git a/scripts/tasks/generate-changelog/args.js b/scripts/tasks/generate-changelog/args.js new file mode 100644 index 00000000000..cee42f24ecd --- /dev/null +++ b/scripts/tasks/generate-changelog/args.js @@ -0,0 +1,128 @@ +'use strict'; + +const semver = require('semver'); +const yargs = require('yargs/yargs'); + +const {stablePackages} = require('../../../ReactVersions'); +const {isCommandAvailable} = require('./utils'); + +function parseArgs(argv) { + const parser = yargs(argv) + .usage( + 'Usage: yarn generate-changelog [--codex|--claude] [--debug] [--format <text|csv|json>] [<pkg@version> ...]' + ) + .example( + '$0 --codex eslint-plugin-react-hooks@7.0.1', + 'Generate changelog for a single package using Codex.' + ) + .example( + '$0 --claude react@19.3 react-dom@19.3', + 'Generate changelog entries for multiple packages using Claude.' + ) + .example( + '$0 --codex', + 'Generate changelog for all stable packages using recorded versions.' + ) + .option('codex', { + type: 'boolean', + describe: 'Use Codex for commit summarization.', + }) + .option('claude', { + type: 'boolean', + describe: 'Use Claude for commit summarization.', + }) + .option('debug', { + type: 'boolean', + describe: 'Enable verbose debug logging.', + default: false, + }) + .option('format', { + type: 'string', + describe: 'Output format for the generated changelog.', + choices: ['text', 'csv', 'json'], + default: 'text', + }) + .help('help') + .alias('h', 'help') + .version(false) + .parserConfiguration({ + 'parse-numbers': false, + 'parse-positional-numbers': false, + }); + + const args = parser.scriptName('generate-changelog').parse(); + const packageSpecs = []; + const debug = !!args.debug; + const format = args.format || 'text'; + let summarizer = null; + + if (args.codex && args.claude) { + throw new Error('Choose either --codex or --claude, not both.'); + } + if (args.codex) { + summarizer = 'codex'; + } else if (args.claude) { + summarizer = 'claude'; + } + + const positionalArgs = Array.isArray(args._) ? args._ : []; + for (let i = 0; i < positionalArgs.length; i++) { + const token = String(positionalArgs[i]).trim(); + if (!token) { + continue; + } + + const atIndex = token.lastIndexOf('@'); + if (atIndex <= 0 || atIndex === token.length - 1) { + throw new Error(`Invalid package specification: ${token}`); + } + + const packageName = token.slice(0, atIndex); + const versionText = token.slice(atIndex + 1); + const validVersion = + semver.valid(versionText) || semver.valid(semver.coerce(versionText)); + if (!validVersion) { + throw new Error(`Invalid version for ${packageName}: ${versionText}`); + } + + packageSpecs.push({ + name: packageName, + version: validVersion, + displayVersion: versionText, + }); + } + + if (packageSpecs.length === 0) { + Object.keys(stablePackages).forEach(pkgName => { + const versionText = stablePackages[pkgName]; + const validVersion = semver.valid(versionText); + if (!validVersion) { + throw new Error( + `Invalid stable version configured for ${pkgName}: ${versionText}` + ); + } + packageSpecs.push({ + name: pkgName, + version: validVersion, + displayVersion: versionText, + }); + }); + } + + if (summarizer && !isCommandAvailable(summarizer)) { + throw new Error( + `Requested summarizer "${summarizer}" is not available on the PATH.` + ); + } + + return { + debug, + format, + summarizer, + packageSpecs, + }; +} + +module.exports = { + parseArgs, +}; diff --git a/scripts/tasks/generate-changelog/data.js b/scripts/tasks/generate-changelog/data.js new file mode 100644 index 00000000000..17e25e0a763 --- /dev/null +++ b/scripts/tasks/generate-changelog/data.js @@ -0,0 +1,190 @@ +'use strict'; + +const https = require('https'); +const path = require('path'); + +const {execFileAsync, repoRoot} = require('./utils'); + +async function fetchNpmInfo(packageName, {log}) { + const npmArgs = ['view', `${packageName}@latest`, '--json']; + const options = {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024}; + log(`Fetching npm info for ${packageName}...`); + const {stdout} = await execFileAsync('npm', npmArgs, options); + + let data = stdout.trim(); + if (!data) { + throw new Error(`npm view returned empty result for ${packageName}`); + } + + let info = JSON.parse(data); + if (Array.isArray(info)) { + info = info[info.length - 1]; + } + + const version = info.version || info['dist-tags']?.latest; + let gitHead = info.gitHead || null; + + if (!gitHead) { + const gitHeadResult = await execFileAsync( + 'npm', + ['view', `${packageName}@${version}`, 'gitHead'], + {cwd: repoRoot, maxBuffer: 1024 * 1024} + ); + const possibleGitHead = gitHeadResult.stdout.trim(); + if ( + possibleGitHead && + possibleGitHead !== 'undefined' && + possibleGitHead !== 'null' + ) { + log(`Found gitHead for ${packageName}@${version}: ${possibleGitHead}`); + gitHead = possibleGitHead; + } + } + + if (!version) { + throw new Error( + `Unable to determine latest published version for ${packageName}` + ); + } + if (!gitHead) { + throw new Error( + `Unable to determine git commit for ${packageName}@${version}` + ); + } + + return { + publishedVersion: version, + gitHead, + }; +} + +async function collectCommitsSince(packageName, sinceGitSha, {log}) { + log(`Collecting commits for ${packageName} since ${sinceGitSha}...`); + await execFileAsync('git', ['cat-file', '-e', `${sinceGitSha}^{commit}`], { + cwd: repoRoot, + }); + const {stdout} = await execFileAsync( + 'git', + [ + 'rev-list', + '--reverse', + `${sinceGitSha}..HEAD`, + '--', + path.posix.join('packages', packageName), + ], + {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} + ); + + return stdout + .trim() + .split('\n') + .map(line => line.trim()) + .filter(Boolean); +} + +async function loadCommitDetails(sha, {log}) { + log(`Loading commit details for ${sha}...`); + const format = ['%H', '%s', '%an', '%ae', '%ct', '%B'].join('%n'); + const {stdout} = await execFileAsync( + 'git', + ['show', '--quiet', `--format=${format}`, sha], + {cwd: repoRoot, maxBuffer: 10 * 1024 * 1024} + ); + + const [commitSha, subject, authorName, authorEmail, timestamp, ...rest] = + stdout.split('\n'); + const body = rest.join('\n').trim(); + + return { + sha: commitSha.trim(), + subject: subject.trim(), + authorName: authorName.trim(), + authorEmail: authorEmail.trim(), + timestamp: +timestamp.trim() || 0, + body, + }; +} + +function extractPrNumber(subject, body) { + const patterns = [ + /$#(\d+)$/, + /https:\/\/github\.com\/facebook\/react\/pull\/(\d+)/, + ]; + + for (let i = 0; i < patterns.length; i++) { + const pattern = patterns[i]; + const subjectMatch = subject && subject.match(pattern); + if (subjectMatch) { + return subjectMatch[1]; + } + const bodyMatch = body && body.match(pattern); + if (bodyMatch) { + return bodyMatch[1]; + } + } + + return null; +} + +async function fetchPullRequestMetadata(prNumber, {log}) { + log(`Fetching PR metadata for #${prNumber}...`); + const token = process.env.GITHUB_TOKEN || process.env.GH_TOKEN || null; + const requestOptions = { + hostname: 'api.github.com', + path: `/repos/facebook/react/pulls/${prNumber}`, + method: 'GET', + headers: { + 'User-Agent': 'generate-changelog-script', + Accept: 'application/vnd.github+json', + }, + }; + if (token) { + requestOptions.headers.Authorization = `Bearer ${token}`; + } + + return new Promise(resolve => { + const req = https.request(requestOptions, res => { + let raw = ''; + res.on('data', chunk => { + raw += chunk; + }); + res.on('end', () => { + if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) { + try { + const json = JSON.parse(raw); + resolve({ + authorLogin: json.user?.login || null, + }); + } catch (error) { + process.stderr.write( + `Warning: unable to parse GitHub response for PR #${prNumber}: ${error.message}\n` + ); + resolve(null); + } + } else { + process.stderr.write( + `Warning: GitHub API request failed for PR #${prNumber} with status ${res.statusCode}\n` + ); + resolve(null); + } + }); + }); + + req.on('error', error => { + process.stderr.write( + `Warning: GitHub API request errored for PR #${prNumber}: ${error.message}\n` + ); + resolve(null); + }); + + req.end(); + }); +} + +module.exports = { + fetchNpmInfo, + collectCommitsSince, + loadCommitDetails, + extractPrNumber, + fetchPullRequestMetadata, +}; diff --git a/scripts/tasks/generate-changelog/formatters.js b/scripts/tasks/generate-changelog/formatters.js new file mode 100644 index 00000000000..49ed2a6a106 --- /dev/null +++ b/scripts/tasks/generate-changelog/formatters.js @@ -0,0 +1,228 @@ +'use strict'; + +const {toCsvRow} = require('./utils'); + +const NO_CHANGES_MESSAGE = 'No changes since the last release.'; + +function buildChangelogEntries({ + packageSpecs, + commitsByPackage, + summariesByPackage, + prMetadata, +}) { + const entries = []; + + for (let i = 0; i < packageSpecs.length; i++) { + const spec = packageSpecs[i]; + const version = spec.displayVersion || spec.version; + const commitsForPackage = commitsByPackage.get(spec.name) || []; + + if (commitsForPackage.length === 0) { + entries.push({ + package: spec.name, + version, + hasChanges: false, + note: NO_CHANGES_MESSAGE, + commits: [], + }); + continue; + } + + const summaryMap = summariesByPackage.get(spec.name) || new Map(); + const commitEntries = commitsForPackage.map(commit => { + let summary = summaryMap.get(commit.sha) || commit.subject; + if (commit.prNumber) { + const prPattern = new RegExp(`\\s*\$#${commit.prNumber}\$$`); + summary = summary.replace(prPattern, '').trim(); + } + + const commitSha = commit.sha; + const commitUrl = `https://github.com/facebook/react/commit/${commitSha}`; + const prNumber = commit.prNumber || null; + const prUrl = prNumber + ? `https://github.com/facebook/react/pull/${prNumber}` + : null; + const prEntry = prNumber ? prMetadata.get(prNumber) : null; + + const authorLogin = prEntry?.authorLogin || null; + const authorName = commit.authorName || null; + const authorEmail = commit.authorEmail || null; + + let authorUrl = null; + let authorDisplay = authorName || 'unknown author'; + + if (authorLogin) { + authorUrl = `https://github.com/${authorLogin}`; + authorDisplay = `[@${authorLogin}](${authorUrl})`; + } else if (authorName && authorName.startsWith('@')) { + const username = authorName.slice(1); + authorUrl = `https://github.com/${username}`; + authorDisplay = `[@${username}](${authorUrl})`; + } + + const referenceType = prNumber ? 'pr' : 'commit'; + const referenceId = prNumber ? `#${prNumber}` : commitSha.slice(0, 7); + const referenceUrl = prNumber ? prUrl : commitUrl; + const referenceLabel = prNumber + ? `[#${prNumber}](${prUrl})` + : `commit ${commitSha.slice(0, 7)}`; + + return { + summary, + prNumber, + prUrl, + commitSha, + commitUrl, + author: { + login: authorLogin, + name: authorName, + email: authorEmail, + url: authorUrl, + display: authorDisplay, + }, + reference: { + type: referenceType, + id: referenceId, + url: referenceUrl, + label: referenceLabel, + }, + }; + }); + + entries.push({ + package: spec.name, + version, + hasChanges: true, + note: null, + commits: commitEntries, + }); + } + + return entries; +} + +function renderChangelog(entries, format) { + if (format === 'text') { + const lines = []; + for (let i = 0; i < entries.length; i++) { + const entry = entries[i]; + lines.push(`## ${entry.package}@${entry.version}`); + if (!entry.hasChanges) { + lines.push(`* ${entry.note}`); + lines.push(''); + continue; + } + + entry.commits.forEach(commit => { + lines.push( + `* ${commit.summary} (${commit.reference.label} by ${commit.author.display})` + ); + }); + lines.push(''); + } + + while (lines.length && lines[lines.length - 1] === '') { + lines.pop(); + } + + return lines.join('\n'); + } + + if (format === 'csv') { + const header = [ + 'package', + 'version', + 'summary', + 'reference_type', + 'reference_id', + 'reference_url', + 'author_name', + 'author_login', + 'author_url', + 'author_email', + 'commit_sha', + 'commit_url', + ]; + const rows = [header]; + + entries.forEach(entry => { + if (!entry.hasChanges) { + rows.push([ + entry.package, + entry.version, + entry.note, + '', + '', + '', + '', + '', + '', + '', + '', + '', + ]); + return; + } + + entry.commits.forEach(commit => { + const authorName = + commit.author.name || + (commit.author.login ? `@${commit.author.login}` : 'unknown author'); + rows.push([ + entry.package, + entry.version, + commit.summary, + commit.reference.type, + commit.reference.id, + commit.reference.url, + authorName, + commit.author.login || '', + commit.author.url || '', + commit.author.email || '', + commit.commitSha, + commit.commitUrl, + ]); + }); + }); + + return rows.map(toCsvRow).join('\n'); + } + + if (format === 'json') { + const payload = entries.map(entry => ({ + package: entry.package, + version: entry.version, + hasChanges: entry.hasChanges, + note: entry.hasChanges ? undefined : entry.note, + commits: entry.commits.map(commit => ({ + summary: commit.summary, + prNumber: commit.prNumber, + prUrl: commit.prUrl, + commitSha: commit.commitSha, + commitUrl: commit.commitUrl, + author: { + login: commit.author.login, + name: commit.author.name, + email: commit.author.email, + url: commit.author.url, + display: commit.author.display, + }, + reference: { + type: commit.reference.type, + id: commit.reference.id, + url: commit.reference.url, + label: commit.reference.label, + }, + })), + })); + + return JSON.stringify(payload, null, 2); + } + + throw new Error(`Unsupported format: ${format}`); +} + +module.exports = { + buildChangelogEntries, + renderChangelog, +}; diff --git a/scripts/tasks/generate-changelog/index.js b/scripts/tasks/generate-changelog/index.js new file mode 100644 index 00000000000..816ad7959bf --- /dev/null +++ b/scripts/tasks/generate-changelog/index.js @@ -0,0 +1,158 @@ +'use strict'; + +const {stablePackages} = require('../../../ReactVersions'); +const {parseArgs} = require('./args'); +const { + fetchNpmInfo, + collectCommitsSince, + loadCommitDetails, + extractPrNumber, + fetchPullRequestMetadata, +} = require('./data'); +const {summarizePackages} = require('./summaries'); +const {buildChangelogEntries, renderChangelog} = require('./formatters'); +const {noopLogger} = require('./utils'); + +async function main() { + const {packageSpecs, summarizer, debug, format} = parseArgs( + process.argv.slice(2) + ); + const log = debug + ? (...args) => console.log('[generate-changelog]', ...args) + : noopLogger; + + const allStablePackages = Object.keys(stablePackages); + const packageTargets = new Map(); + for (let i = 0; i < packageSpecs.length; i++) { + const spec = packageSpecs[i]; + if (!allStablePackages.includes(spec.name)) { + throw new Error( + `Package "${spec.name}" is not listed in stablePackages.` + ); + } + if (packageTargets.has(spec.name)) { + throw new Error(`Package "${spec.name}" was specified more than once.`); + } + packageTargets.set(spec.name, spec); + } + + const targetPackages = packageSpecs.map(spec => spec.name); + log( + `Starting changelog generation for: ${packageSpecs + .map(spec => `${spec.name}@${spec.displayVersion || spec.version}`) + .join(', ')}` + ); + + const packageInfoMap = new Map(); + const packageInfoResults = await Promise.all( + targetPackages.map(async pkg => { + const info = await fetchNpmInfo(pkg, {log}); + return {pkg, info}; + }) + ); + for (let i = 0; i < packageInfoResults.length; i++) { + const entry = packageInfoResults[i]; + packageInfoMap.set(entry.pkg, entry.info); + } + + const commitPackagesMap = new Map(); + const commitCollections = await Promise.all( + targetPackages.map(async pkg => { + const {gitHead} = packageInfoMap.get(pkg); + const commits = await collectCommitsSince(pkg, gitHead, {log}); + log(`Package ${pkg} has ${commits.length} commit(s) since ${gitHead}.`); + return {pkg, commits}; + }) + ); + for (let i = 0; i < commitCollections.length; i++) { + const entry = commitCollections[i]; + const pkg = entry.pkg; + const commits = entry.commits; + for (let j = 0; j < commits.length; j++) { + const sha = commits[j]; + if (!commitPackagesMap.has(sha)) { + commitPackagesMap.set(sha, new Set()); + } + commitPackagesMap.get(sha).add(pkg); + } + } + log(`Found ${commitPackagesMap.size} commits touching target packages.`); + + if (commitPackagesMap.size === 0) { + console.log('No commits found for the selected packages.'); + return; + } + + const commitDetails = await Promise.all( + Array.from(commitPackagesMap.entries()).map( + async ([sha, packagesTouched]) => { + const detail = await loadCommitDetails(sha, {log}); + detail.packages = packagesTouched; + detail.prNumber = extractPrNumber(detail.subject, detail.body); + return detail; + } + ) + ); + + commitDetails.sort((a, b) => a.timestamp - b.timestamp); + log(`Ordered ${commitDetails.length} commit(s) chronologically.`); + + const commitsByPackage = new Map(); + commitDetails.forEach(commit => { + commit.packages.forEach(pkgName => { + if (!commitsByPackage.has(pkgName)) { + commitsByPackage.set(pkgName, []); + } + commitsByPackage.get(pkgName).push(commit); + }); + }); + + const uniquePrNumbers = Array.from( + new Set(commitDetails.map(commit => commit.prNumber).filter(Boolean)) + ); + log(`Identified ${uniquePrNumbers.length} unique PR number(s).`); + + const prMetadata = new Map(); + log(`Summarizer selected: ${summarizer || 'none (using commit titles)'}`); + const prMetadataResults = await Promise.all( + uniquePrNumbers.map(async prNumber => { + const meta = await fetchPullRequestMetadata(prNumber, {log}); + return {prNumber, meta}; + }) + ); + for (let i = 0; i < prMetadataResults.length; i++) { + const entry = prMetadataResults[i]; + if (entry.meta) { + prMetadata.set(entry.prNumber, entry.meta); + } + } + log(`Fetched metadata for ${prMetadata.size} PR(s).`); + + const summariesByPackage = await summarizePackages({ + summarizer, + packageSpecs, + packageTargets, + commitsByPackage, + log, + }); + + const changelogEntries = buildChangelogEntries({ + packageSpecs, + commitsByPackage, + summariesByPackage, + prMetadata, + }); + + log('Generated changelog sections.'); + const output = renderChangelog(changelogEntries, format); + console.log(output); +} + +if (require.main === module) { + main().catch(error => { + process.stderr.write(`${error.message}\n`); + process.exit(1); + }); +} else { + module.exports = main; +} diff --git a/scripts/tasks/generate-changelog/summaries.js b/scripts/tasks/generate-changelog/summaries.js new file mode 100644 index 00000000000..d0b73851efd --- /dev/null +++ b/scripts/tasks/generate-changelog/summaries.js @@ -0,0 +1,306 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); + +const {execFileAsync, repoRoot, noopLogger} = require('./utils'); + +function readChangelogSnippet(preferredPackage) { + const cacheKey = + preferredPackage === 'eslint-plugin-react-hooks' + ? preferredPackage + : 'root'; + if (!readChangelogSnippet.cache) { + readChangelogSnippet.cache = new Map(); + } + const cache = readChangelogSnippet.cache; + if (cache.has(cacheKey)) { + return cache.get(cacheKey); + } + + const targetPath = + preferredPackage === 'eslint-plugin-react-hooks' + ? path.join( + repoRoot, + 'packages', + 'eslint-plugin-react-hooks', + 'CHANGELOG.md' + ) + : path.join(repoRoot, 'CHANGELOG.md'); + + let content = ''; + try { + content = fs.readFileSync(targetPath, 'utf8'); + } catch { + content = ''; + } + + const snippet = content.slice(0, 4000); + cache.set(cacheKey, snippet); + return snippet; +} + +function sanitizeSummary(text) { + if (!text) { + return ''; + } + + const trimmed = text.trim(); + const withoutBullet = trimmed.replace(/^([-*]\s+|\d+\s*[\.)]\s+)/, ''); + + return withoutBullet.replace(/\s+/g, ' ').trim(); +} + +async function summarizePackages({ + summarizer, + packageSpecs, + packageTargets, + commitsByPackage, + log, +}) { + const summariesByPackage = new Map(); + if (!summarizer) { + packageSpecs.forEach(spec => { + const commits = commitsByPackage.get(spec.name) || []; + const summaryMap = new Map(); + for (let i = 0; i < commits.length; i++) { + const commit = commits[i]; + summaryMap.set(commit.sha, commit.subject); + } + summariesByPackage.set(spec.name, summaryMap); + }); + return summariesByPackage; + } + + const tasks = packageSpecs.map(spec => { + const commits = commitsByPackage.get(spec.name) || []; + return summarizePackageCommits({ + summarizer, + spec, + commits, + packageTargets, + allPackageSpecs: packageSpecs, + log, + }); + }); + + const results = await Promise.all(tasks); + results.forEach(entry => { + summariesByPackage.set(entry.packageName, entry.summaries); + }); + return summariesByPackage; +} + +async function summarizePackageCommits({ + summarizer, + spec, + commits, + packageTargets, + allPackageSpecs, + log, +}) { + const summaries = new Map(); + if (commits.length === 0) { + return {packageName: spec.name, summaries}; + } + + const rootStyle = readChangelogSnippet('root'); + const hooksStyle = readChangelogSnippet('eslint-plugin-react-hooks'); + const targetList = allPackageSpecs.map( + targetSpec => + `${targetSpec.name}@${targetSpec.displayVersion || targetSpec.version}` + ); + const payload = commits.map(commit => { + const packages = Array.from(commit.packages || []).sort(); + const usesHooksStyle = (commit.packages || new Set()).has( + 'eslint-plugin-react-hooks' + ); + const packagesWithVersions = packages.map(pkgName => { + const targetSpec = packageTargets.get(pkgName); + if (!targetSpec) { + return pkgName; + } + return `${pkgName}@${targetSpec.displayVersion || targetSpec.version}`; + }); + return { + sha: commit.sha, + packages, + packagesWithVersions, + style: usesHooksStyle ? 'eslint-plugin-react-hooks' : 'root', + subject: commit.subject, + body: commit.body || '', + }; + }); + + const promptParts = [ + `You are preparing changelog summaries for ${spec.name} ${ + spec.displayVersion || spec.version + }.`, + 'The broader release includes:', + ...targetList.map(line => `- ${line}`), + '', + 'For each commit payload, write a single concise sentence without a leading bullet.', + 'Match the tone and formatting of the provided style samples. Do not mention commit hashes.', + 'Return a JSON array where each element has the shape `{ "sha": "<sha>", "summary": "<text>" }`.', + 'The JSON must contain one entry per commit in the same order they are provided.', + 'Use `"root"` style unless the payload specifies `"eslint-plugin-react-hooks"`, in which case use that style sample.', + '', + '--- STYLE: root ---', + rootStyle, + '--- END STYLE ---', + '', + '--- STYLE: eslint-plugin-react-hooks ---', + hooksStyle, + '--- END STYLE ---', + '', + `Commits affecting ${spec.name}:`, + ]; + + payload.forEach((item, index) => { + promptParts.push( + `Commit ${index + 1}:`, + `sha: ${item.sha}`, + `style: ${item.style}`, + `packages: ${item.packagesWithVersions.join(', ') || 'none'}`, + `subject: ${item.subject}`, + 'body:', + item.body || '(empty)', + '' + ); + }); + promptParts.push('Return ONLY the JSON array.', ''); + + const prompt = promptParts.join('\n'); + log( + `Invoking ${summarizer} for ${payload.length} commit summaries targeting ${spec.name}.` + ); + log(`Summarizer prompt length: ${prompt.length} characters.`); + + try { + const raw = await runSummarizer(summarizer, prompt); + log(`Summarizer output length: ${raw.length}`); + const parsed = parseSummariesResponse(raw); + if (!parsed) { + throw new Error('Unable to parse summarizer output.'); + } + parsed.forEach(entry => { + const summary = sanitizeSummary(entry.summary || ''); + if (summary) { + summaries.set(entry.sha, summary); + } + }); + } catch (error) { + if (log !== noopLogger) { + log( + `Warning: failed to summarize commits for ${spec.name} with ${summarizer}. Falling back to subjects. ${error.message}` + ); + if (error && error.stack) { + log(error.stack); + } + } + } + + for (let i = 0; i < commits.length; i++) { + const commit = commits[i]; + if (!summaries.has(commit.sha)) { + summaries.set(commit.sha, commit.subject); + } + } + + log(`Summaries available for ${summaries.size} commit(s) for ${spec.name}.`); + + return {packageName: spec.name, summaries}; +} + +async function runSummarizer(command, prompt) { + const options = {cwd: repoRoot, maxBuffer: 5 * 1024 * 1024}; + + if (command === 'codex') { + const {stdout} = await execFileAsync( + 'codex', + ['exec', '--json', prompt], + options + ); + return parseCodexSummary(stdout); + } + + if (command === 'claude') { + const {stdout} = await execFileAsync('claude', ['-p', prompt], options); + return stripClaudeBanner(stdout); + } + + throw new Error(`Unsupported summarizer command: ${command}`); +} + +function parseCodexSummary(output) { + let last = ''; + const lines = output.split('\n'); + for (let i = 0; i < lines.length; i++) { + const trimmed = lines[i].trim(); + if (!trimmed) { + continue; + } + try { + const event = JSON.parse(trimmed); + if ( + event.type === 'item.completed' && + event.item?.type === 'agent_message' + ) { + last = event.item.text || ''; + } + } catch { + last = trimmed; + } + } + return last || output; +} + +function stripClaudeBanner(text) { + return text + .split('\n') + .filter( + line => + line.trim() !== + 'Claude Code at Meta (https://fburl.com/claude.code.users)' + ) + .join('\n') + .trim(); +} + +function parseSummariesResponse(output) { + const trimmed = output.trim(); + const candidates = trimmed + .split('\n') + .map(line => line.trim()) + .filter(Boolean); + + for (let i = candidates.length - 1; i >= 0; i--) { + const candidate = candidates[i]; + if (!candidate) { + continue; + } + try { + const parsed = JSON.parse(candidate); + if (Array.isArray(parsed)) { + return parsed; + } + } catch { + // Try the next candidate. + } + } + + try { + const parsed = JSON.parse(trimmed); + if (Array.isArray(parsed)) { + return parsed; + } + } catch { + // Fall through. + } + + return null; +} + +module.exports = { + summarizePackages, +}; diff --git a/scripts/tasks/generate-changelog/utils.js b/scripts/tasks/generate-changelog/utils.js new file mode 100644 index 00000000000..fe4069eca02 --- /dev/null +++ b/scripts/tasks/generate-changelog/utils.js @@ -0,0 +1,62 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const {execFile} = require('child_process'); +const {promisify} = require('util'); + +const execFileAsync = promisify(execFile); +const repoRoot = path.resolve(__dirname, '..', '..', '..'); + +function isCommandAvailable(command) { + const paths = (process.env.PATH || '').split(path.delimiter); + const extensions = + process.platform === 'win32' && process.env.PATHEXT + ? process.env.PATHEXT.split(';') + : ['']; + + for (let i = 0; i < paths.length; i++) { + const dir = paths[i]; + if (!dir) { + continue; + } + for (let j = 0; j < extensions.length; j++) { + const ext = extensions[j]; + const fullPath = path.join(dir, `${command}${ext}`); + try { + fs.accessSync(fullPath, fs.constants.X_OK); + return true; + } catch { + // Keep searching. + } + } + } + return false; +} + +function noopLogger() {} + +function escapeCsvValue(value) { + if (value == null) { + return ''; + } + + const stringValue = String(value).replace(/\r?\n|\r/g, ' '); + if (stringValue.includes('"') || stringValue.includes(',')) { + return `"${stringValue.replace(/"/g, '""')}"`; + } + return stringValue; +} + +function toCsvRow(values) { + return values.map(escapeCsvValue).join(','); +} + +module.exports = { + execFileAsync, + repoRoot, + isCommandAvailable, + noopLogger, + escapeCsvValue, + toCsvRow, +}; From b4455a6ee6450fae830ae0b6e53e77f7a147bc27 Mon Sep 17 00:00:00 2001 From: Michael H <git@riskymh.dev> Date: Tue, 28 Oct 2025 09:06:45 +1100 Subject: [PATCH 143/276] [react-dom] Include all Node.js APIs in Bun entrypoint for `/server` (#34193) --- packages/react-dom/npm/server.bun.js | 2 ++ packages/react-dom/server.bun.js | 14 ++++++++++ .../src/server/react-dom-server.bun.js | 11 ++++++++ .../src/server/react-dom-server.bun.stable.js | 11 ++++++++ .../src/ReactServerStreamConfigBun.js | 27 ++++++++++++++++--- scripts/rollup/bundles.js | 2 +- scripts/shared/inlinedHostConfigs.js | 2 ++ 7 files changed, 65 insertions(+), 4 deletions(-) diff --git a/packages/react-dom/npm/server.bun.js b/packages/react-dom/npm/server.bun.js index bb44b38ec3c..ec94e0f0bc4 100644 --- a/packages/react-dom/npm/server.bun.js +++ b/packages/react-dom/npm/server.bun.js @@ -12,6 +12,8 @@ if (process.env.NODE_ENV === 'production') { exports.version = b.version; exports.renderToReadableStream = b.renderToReadableStream; +exports.renderToPipeableStream = b.renderToPipeableStream; +exports.resumeToPipeableStream = b.resumeToPipeableStream; exports.resume = b.resume; exports.renderToString = l.renderToString; exports.renderToStaticMarkup = l.renderToStaticMarkup; diff --git a/packages/react-dom/server.bun.js b/packages/react-dom/server.bun.js index 7d054e5534e..13e312e559a 100644 --- a/packages/react-dom/server.bun.js +++ b/packages/react-dom/server.bun.js @@ -38,3 +38,17 @@ export function resume() { arguments, ); } + +export function renderToPipeableStream() { + return require('./src/server/react-dom-server.bun').renderToPipeableStream.apply( + this, + arguments, + ); +} + +export function resumeToPipeableStream() { + return require('./src/server/react-dom-server.bun').resumeToPipeableStream.apply( + this, + arguments, + ); +} diff --git a/packages/react-dom/src/server/react-dom-server.bun.js b/packages/react-dom/src/server/react-dom-server.bun.js index 5ca420c2305..17c9c1f465a 100644 --- a/packages/react-dom/src/server/react-dom-server.bun.js +++ b/packages/react-dom/src/server/react-dom-server.bun.js @@ -8,3 +8,14 @@ */ export * from './ReactDOMFizzServerBun.js'; +export { + renderToPipeableStream, + resumeToPipeableStream, + resume, +} from './ReactDOMFizzServerNode.js'; +export { + prerenderToNodeStream, + prerender, + resumeAndPrerenderToNodeStream, + resumeAndPrerender, +} from './ReactDOMFizzStaticNode.js'; diff --git a/packages/react-dom/src/server/react-dom-server.bun.stable.js b/packages/react-dom/src/server/react-dom-server.bun.stable.js index 4d17773002f..50c83508ba9 100644 --- a/packages/react-dom/src/server/react-dom-server.bun.stable.js +++ b/packages/react-dom/src/server/react-dom-server.bun.stable.js @@ -8,3 +8,14 @@ */ export {renderToReadableStream, version} from './ReactDOMFizzServerBun.js'; +export { + renderToPipeableStream, + resume, + resumeToPipeableStream, +} from './ReactDOMFizzServerNode.js'; +export { + prerenderToNodeStream, + prerender, + resumeAndPrerenderToNodeStream, + resumeAndPrerender, +} from './ReactDOMFizzStaticNode.js'; diff --git a/packages/react-server/src/ReactServerStreamConfigBun.js b/packages/react-server/src/ReactServerStreamConfigBun.js index ef53ca96236..a9079bee43a 100644 --- a/packages/react-server/src/ReactServerStreamConfigBun.js +++ b/packages/react-server/src/ReactServerStreamConfigBun.js @@ -9,13 +9,22 @@ /* global Bun */ +import type {Writable} from 'stream'; + type BunReadableStreamController = ReadableStreamController & { end(): mixed, write(data: Chunk | BinaryChunk): void, error(error: Error): void, flush?: () => void, }; -export type Destination = BunReadableStreamController; + +interface MightBeFlushable { + flush?: () => void; +} + +export type Destination = + | BunReadableStreamController + | (Writable & MightBeFlushable); export type PrecomputedChunk = string; export opaque type Chunk = string; @@ -46,6 +55,7 @@ export function writeChunk( return; } + // $FlowFixMe[incompatible-call]: write() is compatible with both types in Bun destination.write(chunk); } @@ -53,6 +63,7 @@ export function writeChunkAndReturn( destination: Destination, chunk: PrecomputedChunk | Chunk | BinaryChunk, ): boolean { + // $FlowFixMe[incompatible-call]: write() is compatible with both types in Bun return !!destination.write(chunk); } @@ -86,11 +97,21 @@ export function byteLengthOfBinaryChunk(chunk: BinaryChunk): number { } export function closeWithError(destination: Destination, error: mixed): void { + // $FlowFixMe[incompatible-use] // $FlowFixMe[method-unbinding] if (typeof destination.error === 'function') { // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types. destination.error(error); - } else { + + // $FlowFixMe[incompatible-use] + // $FlowFixMe[method-unbinding] + } else if (typeof destination.destroy === 'function') { + // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types. + destination.destroy(error); + + // $FlowFixMe[incompatible-use] + // $FlowFixMe[method-unbinding] + } else if (typeof destination.close === 'function') { // Earlier implementations doesn't support this method. In that environment you're // supposed to throw from a promise returned but we don't return a promise in our // approach. We could fork this implementation but this is environment is an edge @@ -101,7 +122,7 @@ export function closeWithError(destination: Destination, error: mixed): void { } } -export function createFastHash(input: string): string | number { +export function createFastHash(input: string): number { return Bun.hash(input); } diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 69d0b534fce..c4176099b76 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -405,7 +405,7 @@ const bundles = [ global: 'ReactDOMServer', minifyWithProdErrorCodes: false, wrapWithModuleBoundaries: false, - externals: ['react', 'react-dom'], + externals: ['react', 'react-dom', 'crypto', 'stream', 'util'], }, /******* React DOM Fizz Server External Runtime *******/ diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js index 801060c4c54..ebdbf6cf52f 100644 --- a/scripts/shared/inlinedHostConfigs.js +++ b/scripts/shared/inlinedHostConfigs.js @@ -250,6 +250,8 @@ module.exports = [ 'react-dom/server.bun', 'react-dom/src/server/react-dom-server.bun', 'react-dom/src/server/ReactDOMFizzServerBun.js', + 'react-dom/src/server/ReactDOMFizzServerNode.js', + 'react-dom/src/server/ReactDOMFizzStaticNode.js', 'react-dom-bindings', 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js', 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js', From fb0d96073c588ca2f652f9c97849234576db534f Mon Sep 17 00:00:00 2001 From: Ricky <rickhanlonii@gmail.com> Date: Tue, 28 Oct 2025 12:53:30 -0400 Subject: [PATCH 144/276] [tests] disableLegacyMode in test-renderer (#35002) 500 tests failed from not using async act. Will fix the tests and then re-land this. --- .../shared/forks/ReactFeatureFlags.test-renderer.native-fb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index 0ff044250cb..eb56da603d3 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -16,7 +16,7 @@ export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; export const disableLegacyContext = false; export const disableLegacyContextForFunctionComponents = false; -export const disableLegacyMode = true; +export const disableLegacyMode = false; export const disableSchedulerTimeoutInWorkLoop = false; export const disableTextareaChildren = false; export const enableAsyncDebugInfo = false; From 0fa32506dab4293dfffae662e181d2f970aa95ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 28 Oct 2025 13:27:35 -0400 Subject: [PATCH 145/276] [Flight] Clone subsequent I/O nodes if it's resolved more than once (#35003) IO tasks can execute more than once. E.g. a connection may fire each time a new message or chunk comes in or a setInterval every time it executes. We used to treat these all as one I/O node and just updated the end time as we go. Most of the time this was fine because typically you would have a Promise instance whose end time is really the one that gets used as the I/O anyway. However, in a pattern like this it could be problematic: ```js setTimeout(() => { function App() { return Promise.resolve(123); } renderToReadableStream(<App />); }); ``` Because the I/O's end time is before the render started so it should be excluded from being considered I/O as part of the render. It happened outside of render. But because the `Promise.resolve()` is inside render its end time is after the render start so the promise is considered part of the render. This is usually not a problem because the end time of the I/O is still before the start of the render so even though the Promise is valid it has no I/O source so it's properly excluded. However, if the I/O's end time updates before we observe this then the I/O can be considered part of the render. E.g. if this was a setInterval it would be clearly wrong. But it turns out that even setTimeout can sometimes execute more than once in the async_hooks because each run of "process.nextTick" and microtasks respectively are ran in their own before/after. When a micro task executes after this main body it'll update the end time which can then turn the whole I/O as being inside the render. To solve this properly I create a new I/O node each time before() is invoked so that each one gets to observe a different end time. This has a potential CPU and memory allocation cost when there's a lot of them like in a quick stream. --- .../src/ReactFlightServerConfigDebugNode.js | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/react-server/src/ReactFlightServerConfigDebugNode.js b/packages/react-server/src/ReactFlightServerConfigDebugNode.js index e79c19cc73a..9bb521be406 100644 --- a/packages/react-server/src/ReactFlightServerConfigDebugNode.js +++ b/packages/react-server/src/ReactFlightServerConfigDebugNode.js @@ -208,10 +208,29 @@ export function initAsyncDebugInfo(): void { switch (node.tag) { case IO_NODE: { lastRanAwait = null; - // Log the end time when we resolved the I/O. This can happen - // more than once if it's a recurring resource like a connection. + // Log the end time when we resolved the I/O. const ioNode: IONode = (node: any); - ioNode.end = performance.now(); + if (ioNode.end < 0) { + ioNode.end = performance.now(); + } else { + // This can happen more than once if it's a recurring resource like a connection. + // Even for single events like setTimeout, this can happen three times due to ticks + // and microtasks each running its own scope. + // To preserve each operation's separate end time, we create a clone of the IO node. + // Any pre-existing reference will refer to the first resolution and any new resolutions + // will refer to the new node. + const clonedNode: IONode = { + tag: IO_NODE, + owner: ioNode.owner, + stack: ioNode.stack, + start: ioNode.start, + end: performance.now(), + promise: ioNode.promise, + awaited: ioNode.awaited, + previous: ioNode.previous, + }; + pendingOperations.set(asyncId, clonedNode); + } break; } case UNRESOLVED_AWAIT_NODE: { From 4f93170066c5ee7519749b45c5962a6b970cf977 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 29 Oct 2025 10:55:43 -0400 Subject: [PATCH 146/276] [Flight] Cache the value if we visit the same I/O or Promise multiple times along different paths (#35005) We avoid visiting the same async node twice but if we see it again we returned "null" indicating that there's no I/O there. This means that if you have two different Promises both resolving from the same I/O node then we only show one of them. However, in general we treat that as two different I/O entries to allow for things like batching to still show up separately. This fixes that by caching the return value for multiple visits. So if we found I/O (but no user space await) in one path and then we visit that path through a different Promise chain, then we'll still emit it twice. However, if we visit the same exact Promise that we emitted an await on then we skip it. Because there's no need to emit two awaits on the same thing. It only matters when the path ends up informing whether it has I/O or not. --- .../react-server/src/ReactFlightServer.js | 43 ++++++++++++++++--- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 84008f6757a..dcdf631a3d7 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -2316,15 +2316,37 @@ function visitAsyncNode( request: Request, task: Task, node: AsyncSequence, - visited: Set<AsyncSequence | ReactDebugInfo>, + visited: Map< + AsyncSequence | ReactDebugInfo, + void | null | PromiseNode | IONode, + >, cutOff: number, ): void | null | PromiseNode | IONode { if (visited.has(node)) { // It's possible to visit them same node twice when it's part of both an "awaited" path // and a "previous" path. This also gracefully handles cycles which would be a bug. - return null; + return visited.get(node); + } + // Set it as visited early in case we see ourselves before returning. + visited.set(node, null); + const result = visitAsyncNodeImpl(request, task, node, visited, cutOff); + if (result !== null) { + // If we ended up with a value, let's use that value for future visits. + visited.set(node, result); } - visited.add(node); + return result; +} + +function visitAsyncNodeImpl( + request: Request, + task: Task, + node: AsyncSequence, + visited: Map< + AsyncSequence | ReactDebugInfo, + void | null | PromiseNode | IONode, + >, + cutOff: number, +): void | null | PromiseNode | IONode { if (node.end >= 0 && node.end <= request.timeOrigin) { // This was already resolved when we started this render. It must have been either something // that's part of a start up sequence or externally cached data. We exclude that information. @@ -2416,7 +2438,7 @@ function visitAsyncNode( if (promise !== undefined) { const debugInfo = promise._debugInfo; if (debugInfo != null && !visited.has(debugInfo)) { - visited.add(debugInfo); + visited.set(debugInfo, null); forwardDebugInfo(request, task, debugInfo); } } @@ -2483,6 +2505,10 @@ function visitAsyncNode( // Promise that was ultimately awaited by the user space await. serializeIONode(request, ioNode, awaited.promise); + // If we ever visit this I/O node again, skip it because we already emitted this + // exact entry and we don't need two awaits on the same thing. + visited.set(ioNode, null); + // Ensure the owner is already outlined. if (node.owner != null) { outlineComponentInfo(request, node.owner); @@ -2521,7 +2547,7 @@ function visitAsyncNode( if (promise !== undefined) { const debugInfo = promise._debugInfo; if (debugInfo != null && !visited.has(debugInfo)) { - visited.add(debugInfo); + visited.set(debugInfo, null); forwardDebugInfo(request, task, debugInfo); } } @@ -2542,9 +2568,12 @@ function emitAsyncSequence( owner: null | ReactComponentInfo, stack: null | Error, ): void { - const visited: Set<AsyncSequence | ReactDebugInfo> = new Set(); + const visited: Map< + AsyncSequence | ReactDebugInfo, + void | null | PromiseNode | IONode, + > = new Map(); if (__DEV__ && alreadyForwardedDebugInfo) { - visited.add(alreadyForwardedDebugInfo); + visited.set(alreadyForwardedDebugInfo, null); } const awaitedNode = visitAsyncNode(request, task, node, visited, task.time); if (awaitedNode === undefined) { From 0a5fb67ddfbd50740e2cbd6f1e575e834f696444 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 29 Oct 2025 15:05:04 -0400 Subject: [PATCH 147/276] [DevTools] Sort suspense timeline by end time instead of just document order (#35011) Right now it's possible for things like server environments to appear before other content in the timeline just because it's in a different document order. Ofc the order in production is not guaranteed but we can at least use the timing information we have as a hint towards the actual order. Unfortunately since the end time of the RSC stream itself is always after the content that resolved to produce it, it becomes kind of determined by the chunking. Similarly since for a clean refresh, the scripts and styles will typically load after the server content they appear later. Similarly SSR typically finishes after the RSC parts. Therefore a hack here is that I artificially delay everything with a non-null environment (RSC) so that RSC always comes after client-side (Suspense). This is also consistent with how we color things that have an environment even if children are just Suspense. To ensure that we never show a child before a parent, in the timeline, each child has a minimum time of its parent. --- .../src/backend/fiber/renderer.js | 46 +++++++++++++++++-- .../src/devtools/store.js | 43 +++++++++++++++-- .../views/Profiler/CommitTreeBuilder.js | 3 +- .../devtools/views/SuspenseTab/SuspenseTab.js | 2 +- .../views/SuspenseTab/SuspenseTreeContext.js | 4 +- .../src/frontend/types.js | 2 + packages/react-devtools-shared/src/utils.js | 3 +- 7 files changed, 91 insertions(+), 12 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 9de9037690c..8cdc731058f 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -301,6 +301,7 @@ type SuspenseNode = { rects: null | Array<Rect>, // The bounding rects of content children. suspendedBy: Map<ReactIOInfo, Set<DevToolsInstance>>, // Tracks which data we're suspended by and the children that suspend it. environments: Map<string, number>, // Tracks the Flight environment names that suspended this. I.e. if the server blocked this. + endTime: number, // Track a short cut to the maximum end time value within the suspendedBy set. // Track whether any of the items in suspendedBy are unique this this Suspense boundaries or if they're all // also in the parent sets. This determine whether this could contribute in the loading sequence. hasUniqueSuspenders: boolean, @@ -330,6 +331,7 @@ function createSuspenseNode( rects: null, suspendedBy: new Map(), environments: new Map(), + endTime: 0, hasUniqueSuspenders: false, hasUnknownSuspenders: false, }); @@ -2156,8 +2158,8 @@ export function attach( // Regular operations pendingOperations.length + // All suspender changes are batched in a single message. - // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, isSuspended]] - (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 3 : 0), + // [SUSPENSE_TREE_OPERATION_SUSPENDERS, suspenderChangesLength, ...[id, hasUniqueSuspenders, endTime, isSuspended]] + (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 4 : 0), ); // Identify which renderer this update is coming from. @@ -2242,6 +2244,7 @@ export function attach( } operations[i++] = fiberIdWithChanges; operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0; + operations[i++] = Math.round(suspense.endTime * 1000); const instance = suspense.instance; const isSuspended = // TODO: Track if other SuspenseNode like SuspenseList rows are suspended. @@ -2912,12 +2915,19 @@ export function attach( // like owner instances to link down into the tree. if (!suspendedBySet.has(parentInstance)) { suspendedBySet.add(parentInstance); + const virtualEndTime = getVirtualEndTime(ioInfo); if ( !parentSuspenseNode.hasUniqueSuspenders && !ioExistsInSuspenseAncestor(parentSuspenseNode, ioInfo) ) { // This didn't exist in the parent before, so let's mark this boundary as having a unique suspender. parentSuspenseNode.hasUniqueSuspenders = true; + if (parentSuspenseNode.endTime < virtualEndTime) { + parentSuspenseNode.endTime = virtualEndTime; + } + recordSuspenseSuspenders(parentSuspenseNode); + } else if (parentSuspenseNode.endTime < virtualEndTime) { + parentSuspenseNode.endTime = virtualEndTime; recordSuspenseSuspenders(parentSuspenseNode); } } @@ -2979,6 +2989,26 @@ export function attach( } } + function getVirtualEndTime(ioInfo: ReactIOInfo): number { + if (ioInfo.env != null) { + // Sort client side content first so that scripts and streams don't + // cover up the effect of server time. + return ioInfo.end + 1000000; + } + return ioInfo.end; + } + + function computeEndTime(suspenseNode: SuspenseNode) { + let maxEndTime = 0; + suspenseNode.suspendedBy.forEach((set, ioInfo) => { + const virtualEndTime = getVirtualEndTime(ioInfo); + if (virtualEndTime > maxEndTime) { + maxEndTime = virtualEndTime; + } + }); + return maxEndTime; + } + function removePreviousSuspendedBy( instance: DevToolsInstance, previousSuspendedBy: null | Array<ReactAsyncInfo>, @@ -2996,6 +3026,7 @@ export function attach( if (previousSuspendedBy !== null && suspenseNode !== null) { const nextSuspendedBy = instance.suspendedBy; let changedEnvironment = false; + let mayHaveChangedEndTime = false; for (let i = 0; i < previousSuspendedBy.length; i++) { const asyncInfo = previousSuspendedBy[i]; if ( @@ -3009,6 +3040,11 @@ export function attach( const ioInfo = asyncInfo.awaited; const suspendedBySet = suspenseNode.suspendedBy.get(ioInfo); + if (suspenseNode.endTime === getVirtualEndTime(ioInfo)) { + // This may be the only remaining entry at this end time. Recompute the end time. + mayHaveChangedEndTime = true; + } + if ( suspendedBySet === undefined || !suspendedBySet.delete(instance) @@ -3066,7 +3102,11 @@ export function attach( } } } - if (changedEnvironment) { + const newEndTime = mayHaveChangedEndTime + ? computeEndTime(suspenseNode) + : suspenseNode.endTime; + if (changedEnvironment || newEndTime !== suspenseNode.endTime) { + suspenseNode.endTime = newEndTime; recordSuspenseSuspenders(suspenseNode); } } diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 9377fa01dfe..5d84d12d1b8 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -925,7 +925,7 @@ export default class Store extends EventEmitter<{ */ getSuspendableDocumentOrderSuspense( uniqueSuspendersOnly: boolean, - ): $ReadOnlyArray<SuspenseTimelineStep> { + ): Array<SuspenseTimelineStep> { const target: Array<SuspenseTimelineStep> = []; const roots = this.roots; let rootStep: null | SuspenseTimelineStep = null; @@ -949,17 +949,25 @@ export default class Store extends EventEmitter<{ rootStep = { id: suspense.id, environment: environmentName, + endTime: suspense.endTime, }; target.push(rootStep); - } else if (rootStep.environment === null) { - // If any root has an environment name, then let's use it. - rootStep.environment = environmentName; + } else { + if (rootStep.environment === null) { + // If any root has an environment name, then let's use it. + rootStep.environment = environmentName; + } + if (suspense.endTime > rootStep.endTime) { + // If any root has a higher end time, let's use that. + rootStep.endTime = suspense.endTime; + } } this.pushTimelineStepsInDocumentOrder( suspense.children, target, uniqueSuspendersOnly, environments, + 0, // Don't pass a minimum end time at the root. The root is always first so doesn't matter. ); } } @@ -972,6 +980,7 @@ export default class Store extends EventEmitter<{ target: Array<SuspenseTimelineStep>, uniqueSuspendersOnly: boolean, parentEnvironments: Array<string>, + parentEndTime: number, ): void { for (let i = 0; i < children.length; i++) { const child = this.getSuspenseByID(children[i]); @@ -996,10 +1005,15 @@ export default class Store extends EventEmitter<{ unionEnvironments.length > 0 ? unionEnvironments[unionEnvironments.length - 1] : null; + // The end time of a child boundary can in effect never be earlier than its parent even if + // everything unsuspended before that. + const maxEndTime = + parentEndTime > child.endTime ? parentEndTime : child.endTime; if (hasRects && (!uniqueSuspendersOnly || child.hasUniqueSuspenders)) { target.push({ id: child.id, environment: environmentName, + endTime: maxEndTime, }); } this.pushTimelineStepsInDocumentOrder( @@ -1007,10 +1021,28 @@ export default class Store extends EventEmitter<{ target, uniqueSuspendersOnly, unionEnvironments, + maxEndTime, ); } } + getEndTimeOrDocumentOrderSuspense( + uniqueSuspendersOnly: boolean, + ): $ReadOnlyArray<SuspenseTimelineStep> { + const timeline = + this.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly); + if (timeline.length === 0) { + return timeline; + } + const root = timeline[0]; + // We mutate in place since we assume we've got a fresh array. + timeline.sort((a, b) => { + // Root is always first + return a === root ? -1 : b === root ? 1 : a.endTime - b.endTime; + }); + return timeline; + } + getRendererIDForElement(id: number): number | null { let current = this._idToElement.get(id); while (current !== undefined) { @@ -1688,6 +1720,7 @@ export default class Store extends EventEmitter<{ hasUniqueSuspenders: false, isSuspended: isSuspended, environments: [], + endTime: 0, }); hasSuspenseTreeChanged = true; @@ -1884,6 +1917,7 @@ export default class Store extends EventEmitter<{ for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const id = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const endTime = operations[i++] / 1000; const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; const environmentNames = []; @@ -1919,6 +1953,7 @@ export default class Store extends EventEmitter<{ } suspense.hasUniqueSuspenders = hasUniqueSuspenders; + suspense.endTime = endTime; suspense.isSuspended = isSuspended; suspense.environments = environmentNames; } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js index 4addf109166..d2226a183a1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js @@ -460,13 +460,14 @@ function updateTree( for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const suspenseNodeId = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const endTime = operations[i++] / 1000; const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; i += environmentNamesLength; if (__DEBUG__) { debug( 'Suspender changes', - `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, + `Suspense node ${suspenseNodeId} unique suspenders set to ${String(hasUniqueSuspenders)} ending at ${String(endTime)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, ); } } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index 1344faf0a29..3b0839ccba2 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -74,7 +74,7 @@ function ToggleUniqueSuspenders() { function handleToggleUniqueSuspenders() { const nextUniqueSuspendersOnly = !uniqueSuspendersOnly; // TODO: Handle different timeline modes (e.g. random order) - const nextTimeline = store.getSuspendableDocumentOrderSuspense( + const nextTimeline = store.getEndTimeOrDocumentOrderSuspense( nextUniqueSuspendersOnly, ); suspenseTreeDispatch({ diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js index b1ba98acfb5..6cb4eb7a487 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js @@ -111,7 +111,7 @@ type Props = { function getInitialState(store: Store): SuspenseTreeState { const uniqueSuspendersOnly = true; const timeline = - store.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly); + store.getEndTimeOrDocumentOrderSuspense(uniqueSuspendersOnly); const timelineIndex = timeline.length - 1; const selectedSuspenseID = timelineIndex === -1 ? null : timeline[timelineIndex].id; @@ -182,7 +182,7 @@ function SuspenseTreeContextController({children}: Props): React.Node { } // TODO: Handle different timeline modes (e.g. random order) - const nextTimeline = store.getSuspendableDocumentOrderSuspense( + const nextTimeline = store.getEndTimeOrDocumentOrderSuspense( state.uniqueSuspendersOnly, ); diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js index 4eed49e6bac..130676ac715 100644 --- a/packages/react-devtools-shared/src/frontend/types.js +++ b/packages/react-devtools-shared/src/frontend/types.js @@ -196,6 +196,7 @@ export type Rect = { export type SuspenseTimelineStep = { id: SuspenseNode['id'], // TODO: Will become a group. environment: null | string, + endTime: number, }; export type SuspenseNode = { @@ -207,6 +208,7 @@ export type SuspenseNode = { hasUniqueSuspenders: boolean, isSuspended: boolean, environments: Array<string>, + endTime: number, }; // Serialized version of ReactIOInfo diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 6d31888cd9d..d0784eea036 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -432,11 +432,12 @@ export function printOperationsArray(operations: Array<number>) { for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) { const id = operations[i++]; const hasUniqueSuspenders = operations[i++] === 1; + const endTime = operations[i++] / 1000; const isSuspended = operations[i++] === 1; const environmentNamesLength = operations[i++]; i += environmentNamesLength; logs.push( - `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, + `Suspense node ${id} unique suspenders set to ${String(hasUniqueSuspenders)} ending at ${String(endTime)} is suspended set to ${String(isSuspended)} with ${String(environmentNamesLength)} environments`, ); } From 3a0ab8a7eea22394ba8948ff02af1c6d6e6e1921 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 29 Oct 2025 21:49:35 -0400 Subject: [PATCH 148/276] [DevTools] Synchronize Scroll Position Between Suspense Tab and Main Document (#34641) It's annoying to have to try to find where it lines up with no hints. This way when you hover over something it should be on screen. The strategy I went with is that it scrolls to a percentage along the scrollable axis but the two might not be exactly the same. Partially because they have different aspect ratios but also because suspended boundaries can shrink the document while the suspense tab needs to still be able to show the boundaries that are currently invisible. --- .../src/__tests__/bridge-test.js | 4 +- .../src/backend/views/Highlighter/index.js | 60 +++++++++ packages/react-devtools-shared/src/bridge.js | 6 +- .../views/SuspenseTab/SuspenseRects.js | 13 +- .../devtools/views/SuspenseTab/SuspenseTab.js | 125 +++++++++++++++++- 5 files changed, 199 insertions(+), 9 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/bridge-test.js b/packages/react-devtools-shared/src/__tests__/bridge-test.js index fe265e326c9..1cc47fbe5d8 100644 --- a/packages/react-devtools-shared/src/__tests__/bridge-test.js +++ b/packages/react-devtools-shared/src/__tests__/bridge-test.js @@ -27,7 +27,7 @@ describe('Bridge', () => { // Check that we're wired up correctly. bridge.send('reloadAppForProfiling'); jest.runAllTimers(); - expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling'); + expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling', undefined); // Should flush pending messages and then shut down. wall.send.mockClear(); @@ -37,7 +37,7 @@ describe('Bridge', () => { jest.runAllTimers(); expect(wall.send).toHaveBeenCalledWith('update', '1'); expect(wall.send).toHaveBeenCalledWith('update', '2'); - expect(wall.send).toHaveBeenCalledWith('shutdown'); + expect(wall.send).toHaveBeenCalledWith('shutdown', undefined); expect(shutdownCallback).toHaveBeenCalledTimes(1); // Verify that the Bridge doesn't send messages after shutdown. diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index b67b3964ed5..0adf3ff64ef 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -33,6 +33,66 @@ export default function setupHighlighter( bridge.addListener('shutdown', stopInspectingHost); bridge.addListener('startInspectingHost', startInspectingHost); bridge.addListener('stopInspectingHost', stopInspectingHost); + bridge.addListener('scrollTo', scrollDocumentTo); + bridge.addListener('requestScrollPosition', sendScroll); + + let applyingScroll = false; + + function scrollDocumentTo({ + left, + top, + right, + bottom, + }: { + left: number, + top: number, + right: number, + bottom: number, + }) { + if ( + left === Math.round(window.scrollX) && + top === Math.round(window.scrollY) + ) { + return; + } + applyingScroll = true; + window.scrollTo({ + top: top, + left: left, + behavior: 'smooth', + }); + } + + let scrollTimer = null; + function sendScroll() { + if (scrollTimer) { + clearTimeout(scrollTimer); + scrollTimer = null; + } + if (applyingScroll) { + return; + } + const left = window.scrollX; + const top = window.scrollY; + const right = left + window.innerWidth; + const bottom = top + window.innerHeight; + bridge.send('scrollTo', {left, top, right, bottom}); + } + + function scrollEnd() { + // Upon scrollend send it immediately. + sendScroll(); + applyingScroll = false; + } + + document.addEventListener('scroll', () => { + if (!scrollTimer) { + // Periodically synchronize the scroll while scrolling. + scrollTimer = setTimeout(sendScroll, 400); + } + }); + + document.addEventListener('scrollend', scrollEnd); function startInspectingHost(onlySuspenseNodes: boolean) { inspectOnlySuspenseNodes = onlySuspenseNodes; diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index 683b3419202..b00867cc0cb 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -217,6 +217,7 @@ export type BackendEvents = { selectElement: [number], shutdown: [], stopInspectingHost: [boolean], + scrollTo: [{left: number, top: number, right: number, bottom: number}], syncSelectionToBuiltinElementsPanel: [], unsupportedRendererVersion: [], @@ -270,6 +271,8 @@ type FrontendEvents = { startProfiling: [StartProfilingParams], stopInspectingHost: [], scrollToHostInstance: [ScrollToHostInstance], + scrollTo: [{left: number, top: number, right: number, bottom: number}], + requestScrollPosition: [], stopProfiling: [], storeAsGlobal: [StoreAsGlobalParams], updateComponentFilters: [Array<ComponentFilter>], @@ -416,7 +419,8 @@ class Bridge< try { if (this._messageQueue.length) { for (let i = 0; i < this._messageQueue.length; i += 2) { - this._wall.send(this._messageQueue[i], ...this._messageQueue[i + 1]); + // This only supports one argument in practice but the types suggests it should support multiple. + this._wall.send(this._messageQueue[i], this._messageQueue[i + 1][0]); } this._messageQueue.length = 0; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index d5f44eeb32b..556238f1ea9 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -18,7 +18,7 @@ import typeof { } from 'react-dom-bindings/src/events/SyntheticEvent'; import * as React from 'react'; -import {createContext, useContext} from 'react'; +import {createContext, useContext, useLayoutEffect} from 'react'; import { TreeDispatcherContext, TreeStateContext, @@ -435,7 +435,11 @@ function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node { const ViewBox = createContext<Rect>((null: any)); -function SuspenseRectsContainer(): React$Node { +function SuspenseRectsContainer({ + scaleRef, +}: { + scaleRef: {current: number}, +}): React$Node { const store = useContext(StoreContext); const {inspectedElementID} = useContext(TreeStateContext); const treeDispatch = useContext(TreeDispatcherContext); @@ -505,6 +509,11 @@ function SuspenseRectsContainer(): React$Node { const rootEnvironment = timeline.length === 0 ? null : timeline[0].environment; + useLayoutEffect(() => { + // 100% of the width represents this many pixels in the real document. + scaleRef.current = boundingBoxWidth; + }, [boundingBoxWidth]); + return ( <div className={ diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index 3b0839ccba2..766e6f51b29 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -35,7 +35,7 @@ import { SuspenseTreeDispatcherContext, SuspenseTreeStateContext, } from './SuspenseTreeContext'; -import {StoreContext, OptionsContext} from '../context'; +import {BridgeContext, StoreContext, OptionsContext} from '../context'; import Button from '../Button'; import Toggle from '../Toggle'; import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent'; @@ -157,6 +157,119 @@ function ToggleInspectedElement({ ); } +function SynchronizedScrollContainer({ + className, + children, + scaleRef, +}: { + className?: string, + children?: React.Node, + scaleRef: {current: number}, +}) { + const bridge = useContext(BridgeContext); + const ref = useRef(null); + const applyingScrollRef = useRef(false); + + // TODO: useEffectEvent + function scrollContainerTo({ + left, + top, + right, + bottom, + }: { + left: number, + top: number, + right: number, + bottom: number, + }): void { + const element = ref.current; + if (element === null) { + return; + } + const scale = scaleRef.current / element.clientWidth; + const targetLeft = Math.round(left / scale); + const targetTop = Math.round(top / scale); + if ( + targetLeft !== Math.round(element.scrollLeft) || + targetTop !== Math.round(element.scrollTop) + ) { + // Disable scroll events until we've applied the new scroll position. + applyingScrollRef.current = true; + element.scrollTo({ + left: targetLeft, + top: targetTop, + behavior: 'smooth', + }); + } + } + + useEffect(() => { + const callback = scrollContainerTo; + bridge.addListener('scrollTo', callback); + // Ask for the current scroll position when we mount so we can attach ourselves to it. + bridge.send('requestScrollPosition'); + return () => bridge.removeListener('scrollTo', callback); + }, [bridge]); + + const scrollTimer = useRef<null | TimeoutID>(null); + + // TODO: useEffectEvent + function sendScroll() { + if (scrollTimer.current) { + clearTimeout(scrollTimer.current); + scrollTimer.current = null; + } + if (applyingScrollRef.current) { + return; + } + const element = ref.current; + if (element === null) { + return; + } + const scale = scaleRef.current / element.clientWidth; + const left = element.scrollLeft * scale; + const top = element.scrollTop * scale; + const right = left + element.clientWidth * scale; + const bottom = top + element.clientHeight * scale; + bridge.send('scrollTo', {left, top, right, bottom}); + } + + // TODO: useEffectEvent + function throttleScroll() { + if (!scrollTimer.current) { + // Periodically synchronize the scroll while scrolling. + scrollTimer.current = setTimeout(sendScroll, 400); + } + } + + function scrollEnd() { + // Upon scrollend send it immediately. + sendScroll(); + applyingScrollRef.current = false; + } + + useEffect(() => { + const element = ref.current; + if (element === null) { + return; + } + const scrollCallback = throttleScroll; + const scrollEndCallback = scrollEnd; + element.addEventListener('scroll', scrollCallback); + element.addEventListener('scrollend', scrollEndCallback); + return () => { + element.removeEventListener('scroll', scrollCallback); + element.removeEventListener('scrollend', scrollEndCallback); + }; + }, [ref]); + + return ( + <div className={className} ref={ref}> + {children} + </div> + ); +} + function SuspenseTab(_: {}) { const store = useContext(StoreContext); const {hideSettings} = useContext(OptionsContext); @@ -341,6 +454,8 @@ function SuspenseTab(_: {}) { } }; + const scaleRef = useRef(0); + return ( <SettingsModalContextController> <div className={styles.SuspenseTab} ref={wrapperTreeRef}> @@ -388,9 +503,11 @@ function SuspenseTab(_: {}) { orientation="horizontal" /> </header> - <div className={styles.Rects}> - <SuspenseRects /> - </div> + <SynchronizedScrollContainer + className={styles.Rects} + scaleRef={scaleRef}> + <SuspenseRects scaleRef={scaleRef} /> + </SynchronizedScrollContainer> <footer className={styles.SuspenseTreeViewFooter}> <SuspenseTimeline /> <div className={styles.SuspenseTreeViewFooterButtons}> From 6fb77544940d033355c660556dbc48a08d1d6708 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Thu, 30 Oct 2025 15:26:49 -0400 Subject: [PATCH 149/276] [DevTools] Render selected outline on top of every other rect (#35012) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When rects are close together (or overlapping) the outline can end up being covered up by sibling rects or deeper rects. This renders the selected outline on top of everything so it's always visible. <img width="275" height="730" alt="Screenshot 2025-10-29 at 8 43 28 PM" src="https://github.com/user-attachments/assets/69224883-f548-45ec-ada1-1a04ec17eaf5" /> <img width="266" height="737" alt="Screenshot 2025-10-29 at 8 58 53 PM" src="https://github.com/user-attachments/assets/946f7dde-450d-49fd-9fbd-57487f67f461" /> Additionally, this makes it so that it's not part of the translucent tree when things are hidden by the timeline. That way it's easier to see what is selected inside a hidden tree. <img width="498" height="196" alt="Screenshot 2025-10-29 at 8 45 24 PM" src="https://github.com/user-attachments/assets/723107ab-a92c-42c2-8a7d-a548ac3332d0" /> <img width="571" height="735" alt="Screenshot 2025-10-29 at 8 59 06 PM" src="https://github.com/user-attachments/assets/d653f1a7-4096-45c3-b92a-ef155d4742e6" /> --- .../views/SuspenseTab/SuspenseRects.css | 10 ++--- .../views/SuspenseTab/SuspenseRects.js | 42 +++++++++++++++---- 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css index 0af7baf51a6..aadb6a0fba0 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css @@ -6,12 +6,6 @@ border-radius: 0.25rem; } -.SuspenseRectsContainer[data-highlighted='true'] { - outline-color: var(--color-transition); - outline-style: solid; - outline-width: 4px; -} - .SuspenseRectsRoot { cursor: pointer; outline-color: var(--color-transition); @@ -106,6 +100,10 @@ pointer-events: none; } +.SuspenseRectOutlineRoot { + outline-color: var(--color-transition); +} + .SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect { box-shadow: none; } diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js index 556238f1ea9..e08cdc41736 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js @@ -236,13 +236,6 @@ function SuspenseRects({ <span>{suspense.name}</span> </ScaledRect> ) : null} - {selected && visible ? ( - <ScaledRect - className={styles.SuspenseRectOutline} - rect={boundingBox} - adjust={true} - /> - ) : null} </ViewBox.Provider> </ScaledRect> ); @@ -514,6 +507,28 @@ function SuspenseRectsContainer({ scaleRef.current = boundingBoxWidth; }, [boundingBoxWidth]); + let selectedBoundingBox = null; + let selectedEnvironment = null; + if (isRootSelected) { + selectedBoundingBox = boundingBox; + selectedEnvironment = rootEnvironment; + } else if (inspectedElementID !== null) { + const selectedSuspenseNode = store.getSuspenseByID(inspectedElementID); + if ( + selectedSuspenseNode !== null && + (selectedSuspenseNode.hasUniqueSuspenders || !uniqueSuspendersOnly) + ) { + selectedBoundingBox = getBoundingBox(selectedSuspenseNode.rects); + for (let i = 0; i < timeline.length; i++) { + const timelineStep = timeline[i]; + if (timelineStep.id === inspectedElementID) { + selectedEnvironment = timelineStep.environment; + break; + } + } + } + } + return ( <div className={ @@ -524,7 +539,6 @@ function SuspenseRectsContainer({ } onClick={handleClick} onDoubleClick={handleDoubleClick} - data-highlighted={isRootSelected} data-hovered={isRootHovered}> <ViewBox.Provider value={boundingBox}> <div @@ -533,6 +547,18 @@ function SuspenseRectsContainer({ {roots.map(rootID => { return <SuspenseRectsRoot key={rootID} rootID={rootID} />; })} + {selectedBoundingBox !== null ? ( + <ScaledRect + className={ + styles.SuspenseRectOutline + + (isRootSelected ? ' ' + styles.SuspenseRectOutlineRoot : '') + + ' ' + + getClassNameForEnvironment(selectedEnvironment) + } + rect={selectedBoundingBox} + adjust={true} + /> + ) : null} </div> </ViewBox.Provider> </div> From c9ddee7e36c64311ad4e5e7acfca6c092d8a6264 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com> Date: Fri, 31 Oct 2025 12:57:11 +0100 Subject: [PATCH 150/276] [DevTools] Reset forced states when changing component filters (#34929) --- .../src/__tests__/setupTests.js | 10 +++ .../__tests__/storeComponentFilters-test.js | 78 +++++++++++++++++++ .../src/backend/fiber/renderer.js | 40 ++++++++++ 3 files changed, 128 insertions(+) diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js index 610191fb2cd..aad3fbc00ea 100644 --- a/packages/react-devtools-shared/src/__tests__/setupTests.js +++ b/packages/react-devtools-shared/src/__tests__/setupTests.js @@ -116,6 +116,16 @@ function shouldIgnoreConsoleErrorOrWarn(args) { return false; } + const maybeError = args[1]; + if ( + maybeError !== null && + typeof maybeError === 'object' && + maybeError.message === 'Simulated error coming from DevTools' + ) { + // Error from forcing an error boundary. + return true; + } + return global._ignoredErrorOrWarningMessages.some(errorOrWarningMessage => { return firstArg.indexOf(errorOrWarningMessage) !== -1; }); diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js index 439315dc858..ce423e94895 100644 --- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js @@ -18,12 +18,14 @@ import { describe('Store component filters', () => { let React; let Types; + let agent; let bridge: FrontendBridge; let store: Store; let utils; let actAsync; beforeEach(() => { + agent = global.agent; bridge = global.bridge; store = global.store; store.collapseNodesByDefault = false; @@ -740,4 +742,80 @@ describe('Store component filters', () => { `); }); }); + + // @reactVersion >= 16.6 + it('resets forced error and fallback states when filters are changed', async () => { + store.componentFilters = []; + class ErrorBoundary extends React.Component { + state = {hasError: false}; + + static getDerivedStateFromError() { + return {hasError: true}; + } + + render() { + if (this.state.hasError) { + return <div key="did-error" />; + } + return this.props.children; + } + } + + function App() { + return ( + <> + <React.Suspense fallback={<div key="loading" />}> + <div key="suspense-content" /> + </React.Suspense> + <ErrorBoundary> + <div key="error-content" /> + </ErrorBoundary> + </> + ); + } + + await actAsync(async () => { + render(<App />); + }); + const rendererID = utils.getRendererID(); + await actAsync(() => { + agent.overrideSuspense({ + id: store.getElementIDAtIndex(2), + rendererID, + forceFallback: true, + }); + agent.overrideError({ + id: store.getElementIDAtIndex(4), + rendererID, + forceError: true, + }); + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <App> + ▾ <Suspense> + <div key="loading"> + ▾ <ErrorBoundary> + <div key="did-error"> + [suspense-root] rects={[]} + <Suspense name="App" rects={[]}> + `); + + await actAsync(() => { + store.componentFilters = [ + utils.createElementTypeFilter(Types.ElementTypeFunction, true), + ]; + }); + + expect(store).toMatchInlineSnapshot(` + [root] + ▾ <Suspense> + <div key="suspense-content"> + ▾ <ErrorBoundary> + <div key="error-content"> + [suspense-root] rects={[]} + <Suspense name="Unknown" rects={[]}> + `); + }); }); diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 8cdc731058f..ddafd014e7f 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -1512,6 +1512,11 @@ export function attach( throw Error('Cannot modify filter preferences while profiling'); } + const previousForcedFallbacks = + forceFallbackForFibers.size > 0 ? new Set(forceFallbackForFibers) : null; + const previousForcedErrors = + forceErrorForFibers.size > 0 ? new Map(forceErrorForFibers) : null; + // Recursively unmount all roots. hook.getFiberRoots(rendererID).forEach(root => { const rootInstance = rootToFiberInstanceMap.get(root); @@ -1532,6 +1537,41 @@ export function attach( // Reset pseudo counters so that new path selections will be persisted. rootDisplayNameCounter.clear(); + // We just cleared all the forced states. Schedule updates on the affected Fibers + // so that we get their initial states again according to the new filters. + if (typeof scheduleUpdate === 'function') { + if (previousForcedFallbacks !== null) { + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const fiber of previousForcedFallbacks) { + if (typeof scheduleRetry === 'function') { + scheduleRetry(fiber); + } else { + scheduleUpdate(fiber); + } + } + } + if ( + previousForcedErrors !== null && + typeof setErrorHandler === 'function' + ) { + // Unlike for Suspense, disabling the forced error state requires setting + // the status to false first. `shouldErrorFiberAccordingToMap` will clear + // the Fibers later. + setErrorHandler(shouldErrorFiberAccordingToMap); + // eslint-disable-next-line no-for-of-loops/no-for-of-loops + for (const [fiber, shouldError] of previousForcedErrors) { + forceErrorForFibers.set(fiber, false); + if (shouldError) { + if (typeof scheduleRetry === 'function') { + scheduleRetry(fiber); + } else { + scheduleUpdate(fiber); + } + } + } + } + } + // Recursively re-mount all roots with new filter criteria applied. hook.getFiberRoots(rendererID).forEach(root => { const current = root.current; From 26cf2804802f3d32c4d8f9db73ddea12ad6c1670 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 31 Oct 2025 12:58:18 -0400 Subject: [PATCH 151/276] Switch the default revealOrder to "forwards" and tail "hidden" on SuspenseList (#35018) We have warned about this for a while now so we can make the switch. Often when you reach for SuspenseList, you mean forwards. It doesn't make sense to have the default to just be a noop. While "together" is another useful mode that's more like a Group so isn't so associated with the default as List. So we're switching it. However, tail=hidden isn't as obvious of a default it does allow for a convenient pattern for streaming in list of items by default. This doesn't yet switch the rendering order of "backwards". That's coming in a follow up. --- .../ReactDOMFizzSuspenseList-test.js | 21 ++- .../react-reconciler/src/ReactChildFiber.js | 3 +- .../src/ReactFiberBeginWork.js | 80 +++++------- .../src/ReactFiberCompleteWork.js | 29 +++-- .../src/ReactFiberSuspenseComponent.js | 5 +- .../src/__tests__/ReactSuspenseList-test.js | 121 ++++++++++-------- packages/react-server/src/ReactFizzServer.js | 8 +- 7 files changed, 142 insertions(+), 125 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js index 74db51d2429..f434bf3cda8 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js @@ -134,7 +134,7 @@ describe('ReactDOMFizzSuspenseList', () => { } // @gate enableSuspenseList - it('shows content independently by default', async () => { + it('shows content forwards by default', async () => { const A = createAsyncText('A'); const B = createAsyncText('B'); const C = createAsyncText('C'); @@ -157,31 +157,38 @@ describe('ReactDOMFizzSuspenseList', () => { ); } - await A.resolve(); + await C.resolve(); await serverAct(async () => { const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />); pipe(writable); }); - assertLog(['A', 'Suspend! [B]', 'Suspend! [C]', 'Loading B', 'Loading C']); + assertLog([ + 'Suspend! [A]', + 'Suspend! [B]', // TODO: Defer rendering the content after fallback if previous suspended, + 'C', + 'Loading A', + 'Loading B', + 'Loading C', + ]); expect(getVisibleChildren(container)).toEqual( <div> - <span>A</span> + <span>Loading A</span> <span>Loading B</span> <span>Loading C</span> </div>, ); - await serverAct(() => C.resolve()); - assertLog(['C']); + await serverAct(() => A.resolve()); + assertLog(['A']); expect(getVisibleChildren(container)).toEqual( <div> <span>A</span> <span>Loading B</span> - <span>C</span> + <span>Loading C</span> </div>, ); diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js index f0d9c2e012e..8daf7fde4b4 100644 --- a/packages/react-reconciler/src/ReactChildFiber.js +++ b/packages/react-reconciler/src/ReactChildFiber.js @@ -2104,7 +2104,8 @@ export function validateSuspenseListChildren( ) { if (__DEV__) { if ( - (revealOrder === 'forwards' || + (revealOrder == null || + revealOrder === 'forwards' || revealOrder === 'backwards' || revealOrder === 'unstable_legacy-backwards') && children !== undefined && diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index 7251e52dd61..32ecd33edca 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -3245,6 +3245,7 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) { if (__DEV__) { const cacheKey = revealOrder == null ? 'null' : revealOrder; if ( + revealOrder != null && revealOrder !== 'forwards' && revealOrder !== 'unstable_legacy-backwards' && revealOrder !== 'together' && @@ -3252,13 +3253,7 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) { !didWarnAboutRevealOrder[cacheKey] ) { didWarnAboutRevealOrder[cacheKey] = true; - if (revealOrder == null) { - console.error( - 'The default for the <SuspenseList revealOrder="..."> prop is changing. ' + - 'To be future compatible you must explictly specify either ' + - '"independent" (the current default), "together", "forwards" or "legacy_unstable-backwards".', - ); - } else if (revealOrder === 'backwards') { + if (revealOrder === 'backwards') { console.error( 'The rendering order of <SuspenseList revealOrder="backwards"> is changing. ' + 'To be future compatible you must specify revealOrder="legacy_unstable-backwards" instead.', @@ -3314,18 +3309,7 @@ function validateTailOptions( const cacheKey = tailMode == null ? 'null' : tailMode; if (!didWarnAboutTailOptions[cacheKey]) { if (tailMode == null) { - if ( - revealOrder === 'forwards' || - revealOrder === 'backwards' || - revealOrder === 'unstable_legacy-backwards' - ) { - didWarnAboutTailOptions[cacheKey] = true; - console.error( - 'The default for the <SuspenseList tail="..."> prop is changing. ' + - 'To be future compatible you must explictly specify either ' + - '"visible" (the current default), "collapsed" or "hidden".', - ); - } + // The default tail is now "hidden". } else if ( tailMode !== 'visible' && tailMode !== 'collapsed' && @@ -3338,6 +3322,7 @@ function validateTailOptions( tailMode, ); } else if ( + revealOrder != null && revealOrder !== 'forwards' && revealOrder !== 'backwards' && revealOrder !== 'unstable_legacy-backwards' @@ -3345,7 +3330,7 @@ function validateTailOptions( didWarnAboutTailOptions[cacheKey] = true; console.error( '<SuspenseList tail="%s" /> is only valid if revealOrder is ' + - '"forwards" or "backwards". ' + + '"forwards" (default) or "backwards". ' + 'Did you mean to specify revealOrder="forwards"?', tailMode, ); @@ -3449,30 +3434,6 @@ function updateSuspenseListComponent( workInProgress.memoizedState = null; } else { switch (revealOrder) { - case 'forwards': { - const lastContentRow = findLastContentRow(workInProgress.child); - let tail; - if (lastContentRow === null) { - // The whole list is part of the tail. - // TODO: We could fast path by just rendering the tail now. - tail = workInProgress.child; - workInProgress.child = null; - } else { - // Disconnect the tail rows after the content row. - // We're going to render them separately later. - tail = lastContentRow.sibling; - lastContentRow.sibling = null; - } - initSuspenseListRenderState( - workInProgress, - false, // isBackwards - tail, - lastContentRow, - tailMode, - treeForkCount, - ); - break; - } case 'backwards': case 'unstable_legacy-backwards': { // We're going to find the first row that has existing content. @@ -3517,10 +3478,37 @@ function updateSuspenseListComponent( ); break; } - default: { - // The default reveal order is the same as not having + case 'independent': { + // The "independent" reveal order is the same as not having // a boundary. workInProgress.memoizedState = null; + break; + } + // The default is now forwards. + case 'forwards': + default: { + const lastContentRow = findLastContentRow(workInProgress.child); + let tail; + if (lastContentRow === null) { + // The whole list is part of the tail. + // TODO: We could fast path by just rendering the tail now. + tail = workInProgress.child; + workInProgress.child = null; + } else { + // Disconnect the tail rows after the content row. + // We're going to render them separately later. + tail = lastContentRow.sibling; + lastContentRow.sibling = null; + } + initSuspenseListRenderState( + workInProgress, + false, // isBackwards + tail, + lastContentRow, + tailMode, + treeForkCount, + ); + break; } } } diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js index d3abcb466e5..5ccf1b2ac7a 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js @@ -698,7 +698,11 @@ function cutOffTailIfNeeded( return; } switch (renderState.tailMode) { - case 'hidden': { + case 'visible': { + // Everything should remain as it was. + break; + } + case 'collapsed': { // Any insertions at the end of the tail list after this point // should be invisible. If there are already mounted boundaries // anything before them are not considered for collapsing. @@ -716,7 +720,13 @@ function cutOffTailIfNeeded( // last rendered item. if (lastTailNode === null) { // All remaining items in the tail are insertions. - renderState.tail = null; + if (!hasRenderedATailFallback && renderState.tail !== null) { + // We suspended during the head. We want to show at least one + // row at the tail. So we'll keep on and cut off the rest. + renderState.tail.sibling = null; + } else { + renderState.tail = null; + } } else { // Detach the insertion after the last node that was already // inserted. @@ -724,7 +734,9 @@ function cutOffTailIfNeeded( } break; } - case 'collapsed': { + // Hidden is now the default. + case 'hidden': + default: { // Any insertions at the end of the tail list after this point // should be invisible. If there are already mounted boundaries // anything before them are not considered for collapsing. @@ -742,13 +754,7 @@ function cutOffTailIfNeeded( // last rendered item. if (lastTailNode === null) { // All remaining items in the tail are insertions. - if (!hasRenderedATailFallback && renderState.tail !== null) { - // We suspended during the head. We want to show at least one - // row at the tail. So we'll keep on and cut off the rest. - renderState.tail.sibling = null; - } else { - renderState.tail = null; - } + renderState.tail = null; } else { // Detach the insertion after the last node that was already // inserted. @@ -1795,7 +1801,8 @@ function completeWork( // This might have been modified. if ( renderState.tail === null && - renderState.tailMode === 'hidden' && + renderState.tailMode !== 'collapsed' && + renderState.tailMode !== 'visible' && !renderedTail.alternate && !getIsHydrating() // We don't cut it if we're hydrating. ) { diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.js index 64ab4f29fcd..695c3697154 100644 --- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.js +++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.js @@ -79,10 +79,7 @@ export function findFirstSuspended(row: Fiber): null | Fiber { node.tag === SuspenseListComponent && // Independent revealOrder can't be trusted because it doesn't // keep track of whether it suspended or not. - (node.memoizedProps.revealOrder === 'forwards' || - node.memoizedProps.revealOrder === 'backwards' || - node.memoizedProps.revealOrder === 'unstable_legacy-backwards' || - node.memoizedProps.revealOrder === 'together') + node.memoizedProps.revealOrder !== 'independent' ) { const didSuspend = (node.flags & DidCapture) !== NoFlags; if (didSuspend) { diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js index bfbf165dbab..34600b7a672 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js @@ -218,7 +218,7 @@ describe('ReactSuspenseList', () => { }); // @gate enableSuspenseList - it('warns if no revealOrder is specified', async () => { + it('behaves as revealOrder=forwards by default', async () => { const A = createAsyncText('A'); const B = createAsyncText('B'); const C = createAsyncText('C'); @@ -239,54 +239,36 @@ describe('ReactSuspenseList', () => { ); } + ReactNoop.render(<Foo />); + + await waitForAll(['Suspend! [A]', 'Loading A']); + + expect(ReactNoop).toMatchRenderedOutput(null); + await A.resolve(); - ReactNoop.render(<Foo />); + await waitForAll(['A', 'Suspend! [B]', 'Loading B']); - await waitForAll([ - 'A', - 'Suspend! [B]', - 'Loading B', - 'Suspend! [C]', - 'Loading C', - // pre-warming - 'Suspend! [B]', - 'Suspend! [C]', - ]); + // Incremental loading is suspended. + jest.advanceTimersByTime(500); - assertConsoleErrorDev([ - 'The default for the <SuspenseList revealOrder="..."> prop is changing. ' + - 'To be future compatible you must explictly specify either ' + - '"independent" (the current default), "together", "forwards" or "legacy_unstable-backwards".' + - '\n in SuspenseList (at **)' + - '\n in Foo (at **)', - ]); + expect(ReactNoop).toMatchRenderedOutput(<span>A</span>); - expect(ReactNoop).toMatchRenderedOutput( - <> - <span>A</span> - <span>Loading B</span> - <span>Loading C</span> - </>, - ); + await act(() => B.resolve()); + assertLog(['B', 'Suspend! [C]', 'Loading C']); - await act(() => C.resolve()); - assertLog( - gate('alwaysThrottleRetries') - ? ['Suspend! [B]', 'C', 'Suspend! [B]'] - : ['C'], - ); + // Incremental loading is suspended. + jest.advanceTimersByTime(500); expect(ReactNoop).toMatchRenderedOutput( <> <span>A</span> - <span>Loading B</span> - <span>C</span> + <span>B</span> </>, ); - await act(() => B.resolve()); - assertLog(['B']); + await act(() => C.resolve()); + assertLog(['C']); expect(ReactNoop).toMatchRenderedOutput( <> @@ -1699,26 +1681,65 @@ describe('ReactSuspenseList', () => { }); // @gate enableSuspenseList - it('warns if no tail option is specified', async () => { + it('behaves as tail=hidden if no tail option is specified', async () => { + const A = createAsyncText('A'); + const B = createAsyncText('B'); + const C = createAsyncText('C'); + function Foo() { return ( <SuspenseList revealOrder="forwards"> - <Suspense fallback="Loading">A</Suspense> - <Suspense fallback="Loading">B</Suspense> + <Suspense fallback={<Text text="Loading A" />}> + <A /> + </Suspense> + <Suspense fallback={<Text text="Loading B" />}> + <B /> + </Suspense> + <Suspense fallback={<Text text="Loading C" />}> + <C /> + </Suspense> </SuspenseList> ); } - await act(() => { - ReactNoop.render(<Foo />); - }); - assertConsoleErrorDev([ - 'The default for the <SuspenseList tail="..."> prop is changing. ' + - 'To be future compatible you must explictly specify either ' + - '"visible" (the current default), "collapsed" or "hidden".' + - '\n in SuspenseList (at **)' + - '\n in Foo (at **)', - ]); + ReactNoop.render(<Foo />); + + await waitForAll(['Suspend! [A]', 'Loading A']); + + expect(ReactNoop).toMatchRenderedOutput(null); + + await A.resolve(); + + await waitForAll(['A', 'Suspend! [B]', 'Loading B']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + expect(ReactNoop).toMatchRenderedOutput(<span>A</span>); + + await act(() => B.resolve()); + assertLog(['B', 'Suspend! [C]', 'Loading C']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>B</span> + </>, + ); + + await act(() => C.resolve()); + assertLog(['C']); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>B</span> + <span>C</span> + </>, + ); }); // @gate enableSuspenseList @@ -1758,7 +1779,7 @@ describe('ReactSuspenseList', () => { }); assertConsoleErrorDev([ '<SuspenseList tail="collapsed" /> is only valid if ' + - 'revealOrder is "forwards" or "backwards". ' + + 'revealOrder is "forwards" (default) or "backwards". ' + 'Did you mean to specify revealOrder="forwards"?' + '\n in SuspenseList (at **)' + '\n in Foo (at **)', diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 07408d64e88..156bacbe148 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1913,7 +1913,7 @@ function renderSuspenseListRows( task: Task, keyPath: KeyNode, rows: Array<ReactNodeList>, - revealOrder: 'forwards' | 'backwards' | 'unstable_legacy-backwards', + revealOrder: void | 'forwards' | 'backwards' | 'unstable_legacy-backwards', ): void { // This is a fork of renderChildrenArray that's aware of tracking rows. const prevKeyPath = task.keyPath; @@ -2098,11 +2098,7 @@ function renderSuspenseList( const revealOrder: SuspenseListRevealOrder = props.revealOrder; // TODO: Support tail hidden/collapsed modes. // const tailMode: SuspenseListTailMode = props.tail; - if ( - revealOrder === 'forwards' || - revealOrder === 'backwards' || - revealOrder === 'unstable_legacy-backwards' - ) { + if (revealOrder !== 'independent' && revealOrder !== 'together') { // For ordered reveal, we need to produce rows from the children. if (isArray(children)) { renderSuspenseListRows(request, task, keyPath, children, revealOrder); From 488d88b018ee8fd1fac56cab22dfa8796ebce30b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Fri, 31 Oct 2025 13:33:23 -0400 Subject: [PATCH 152/276] Render children passed to "backwards" SuspenseList in reverse mount order (#35021) Stacked on #35018. This mounts the children of SuspenseList backwards. Meaning the first child is mounted last in the DOM (and effect list). It's like calling reverse() on the children. This is meant to set us up for allowing AsyncIterable children where the unknown number of children streams in at the end (which is the beginning in a backwards SuspenseList). For consistency we do that with other children too. `unstable_legacy-backwards` still exists for the old mode but is meant to be deprecated. <img width="100" alt="image" src="https://github.com/user-attachments/assets/5c2a95d7-34c4-4a4e-b602-3646a834d779" /> --- .../ReactDOMFizzSuspenseList-test.js | 81 +++++++++++++++++-- .../src/ReactFiberBeginWork.js | 62 ++++++++++++-- .../src/ReactFiberCompleteWork.js | 4 - .../src/__tests__/ReactSuspenseList-test.js | 20 ++--- packages/react-server/src/ReactFizzServer.js | 6 +- 5 files changed, 140 insertions(+), 33 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js index f434bf3cda8..0e2fff5cd45 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js @@ -656,6 +656,77 @@ describe('ReactDOMFizzSuspenseList', () => { ); }); + // @gate enableSuspenseList + it('displays each items in "backwards" mount order', async () => { + const A = createAsyncText('A'); + const B = createAsyncText('B'); + const C = createAsyncText('C'); + + function Foo() { + return ( + <div> + <SuspenseList revealOrder="backwards" tail="visible"> + <Suspense fallback={<Text text="Loading C" />}> + <C /> + </Suspense> + <Suspense fallback={<Text text="Loading B" />}> + <B /> + </Suspense> + <Suspense fallback={<Text text="Loading A" />}> + <A /> + </Suspense> + </SuspenseList> + </div> + ); + } + + await A.resolve(); + + await serverAct(async () => { + const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />); + pipe(writable); + }); + + assertLog([ + 'Suspend! [C]', + 'Suspend! [B]', // TODO: Defer rendering the content after fallback if previous suspended, + 'A', + 'Loading C', + 'Loading B', + 'Loading A', + ]); + + expect(getVisibleChildren(container)).toEqual( + <div> + <span>Loading A</span> + <span>Loading B</span> + <span>Loading C</span> + </div>, + ); + + await serverAct(() => C.resolve()); + assertLog(['C']); + + expect(getVisibleChildren(container)).toEqual( + <div> + <span>Loading A</span> + <span>Loading B</span> + <span>C</span> + </div>, + ); + + await serverAct(() => B.resolve()); + assertLog(['B']); + + expect(getVisibleChildren(container)).toEqual( + <div> + <span>A</span> + <span>B</span> + <span>C</span> + </div>, + ); + }); + // @gate enableSuspenseList it('displays each items in "backwards" order in legacy mode', async () => { const A = createAsyncText('A'); @@ -737,15 +808,13 @@ describe('ReactDOMFizzSuspenseList', () => { return ( <div> <SuspenseList revealOrder="forwards" tail="visible"> - <SuspenseList - revealOrder="unstable_legacy-backwards" - tail="visible"> - <Suspense fallback={<Text text="Loading A" />}> - <A /> - </Suspense> + <SuspenseList revealOrder="backwards" tail="visible"> <Suspense fallback={<Text text="Loading B" />}> <B /> </Suspense> + <Suspense fallback={<Text text="Loading A" />}> + <A /> + </Suspense> </SuspenseList> <Suspense fallback={<Text text="Loading C" />}> <C /> diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index 32ecd33edca..33fadfd5396 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -3247,18 +3247,14 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) { if ( revealOrder != null && revealOrder !== 'forwards' && + revealOrder !== 'backwards' && revealOrder !== 'unstable_legacy-backwards' && revealOrder !== 'together' && revealOrder !== 'independent' && !didWarnAboutRevealOrder[cacheKey] ) { didWarnAboutRevealOrder[cacheKey] = true; - if (revealOrder === 'backwards') { - console.error( - 'The rendering order of <SuspenseList revealOrder="backwards"> is changing. ' + - 'To be future compatible you must specify revealOrder="legacy_unstable-backwards" instead.', - ); - } else if (typeof revealOrder === 'string') { + if (typeof revealOrder === 'string') { switch (revealOrder.toLowerCase()) { case 'together': case 'forwards': @@ -3371,6 +3367,17 @@ function initSuspenseListRenderState( } } +function reverseChildren(fiber: Fiber): void { + let row = fiber.child; + fiber.child = null; + while (row !== null) { + const nextRow = row.sibling; + row.sibling = fiber.child; + fiber.child = row; + row = nextRow; + } +} + // This can end up rendering this component multiple passes. // The first pass splits the children fibers into two sets. A head and tail. // We first render the head. If anything is in fallback state, we do another @@ -3409,7 +3416,16 @@ function updateSuspenseListComponent( validateTailOptions(tailMode, revealOrder); validateSuspenseListChildren(newChildren, revealOrder); - reconcileChildren(current, workInProgress, newChildren, renderLanes); + if (revealOrder === 'backwards' && current !== null) { + // For backwards the current mounted set will be backwards. Reconciling against it + // will lead to mismatches and reorders. We need to swap the original set first + // and then restore it afterwards. + reverseChildren(current); + reconcileChildren(current, workInProgress, newChildren, renderLanes); + reverseChildren(current); + } else { + reconcileChildren(current, workInProgress, newChildren, renderLanes); + } // Read how many children forks this set pushed so we can push it every time we retry. const treeForkCount = getIsHydrating() ? getForksAtLevel(workInProgress) : 0; @@ -3434,7 +3450,37 @@ function updateSuspenseListComponent( workInProgress.memoizedState = null; } else { switch (revealOrder) { - case 'backwards': + case 'backwards': { + // We're going to find the first row that has existing content. + // We are also going to reverse the order of anything in the existing content + // since we want to actually render them backwards from the reconciled set. + // The tail is left in order, because it'll be added to the front as we + // complete each item. + const lastContentRow = findLastContentRow(workInProgress.child); + let tail; + if (lastContentRow === null) { + // The whole list is part of the tail. + tail = workInProgress.child; + workInProgress.child = null; + } else { + // Disconnect the tail rows after the content row. + // We're going to render them separately later in reverse order. + tail = lastContentRow.sibling; + lastContentRow.sibling = null; + // We have to now reverse the main content so it renders backwards too. + reverseChildren(workInProgress); + } + // TODO: If workInProgress.child is null, we can continue on the tail immediately. + initSuspenseListRenderState( + workInProgress, + true, // isBackwards + tail, + null, // last + tailMode, + treeForkCount, + ); + break; + } case 'unstable_legacy-backwards': { // We're going to find the first row that has existing content. // At the same time we're going to reverse the list of everything diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js index 5ccf1b2ac7a..0b1f1e4366e 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js @@ -1838,10 +1838,6 @@ function completeWork( } } if (renderState.isBackwards) { - // The effect list of the backwards tail will have been added - // to the end. This breaks the guarantee that life-cycles fire in - // sibling order but that isn't a strong guarantee promised by React. - // Especially since these might also just pop in during future commits. // Append to the beginning of the list. renderedTail.sibling = workInProgress.child; workInProgress.child = renderedTail; diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js index 34600b7a672..ba5b668652f 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js @@ -1022,7 +1022,7 @@ describe('ReactSuspenseList', () => { }); // @gate enableSuspenseList - it('warns if revealOrder="backwards" is specified', async () => { + it('displays each items in "backwards" order', async () => { const A = createAsyncText('A'); const B = createAsyncText('B'); const C = createAsyncText('C'); @@ -1030,14 +1030,14 @@ describe('ReactSuspenseList', () => { function Foo() { return ( <SuspenseList revealOrder="backwards" tail="visible"> - <Suspense fallback={<Text text="Loading A" />}> - <A /> + <Suspense fallback={<Text text="Loading C" />}> + <C /> </Suspense> <Suspense fallback={<Text text="Loading B" />}> <B /> </Suspense> - <Suspense fallback={<Text text="Loading C" />}> - <C /> + <Suspense fallback={<Text text="Loading A" />}> + <A /> </Suspense> </SuspenseList> ); @@ -1056,14 +1056,6 @@ describe('ReactSuspenseList', () => { 'Suspend! [C]', ]); - assertConsoleErrorDev([ - 'The rendering order of <SuspenseList revealOrder="backwards"> is changing. ' + - 'To be future compatible you must specify ' + - 'revealOrder="legacy_unstable-backwards" instead.' + - '\n in SuspenseList (at **)' + - '\n in Foo (at **)', - ]); - expect(ReactNoop).toMatchRenderedOutput( <> <span>Loading A</span> @@ -1101,7 +1093,7 @@ describe('ReactSuspenseList', () => { }); // @gate enableSuspenseList - it('displays each items in "backwards" order', async () => { + it('displays each items in "backwards" order (legacy)', async () => { const A = createAsyncText('A'); const B = createAsyncText('B'); const C = createAsyncText('C'); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 156bacbe148..33c0ab68a8e 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -2017,7 +2017,11 @@ function renderSuspenseListRows( const parentSegment = task.blockedSegment; const childIndex = parentSegment.children.length; const insertionIndex = parentSegment.chunks.length; - for (let i = totalChildren - 1; i >= 0; i--) { + for (let n = 0; n < totalChildren; n++) { + const i = + revealOrder === 'unstable_legacy-backwards' + ? totalChildren - 1 - n + : n; const node = rows[i]; task.row = previousSuspenseListRow = createSuspenseListRow( previousSuspenseListRow, From 561ee24d4a7c805e9837ee4cfbb5671a35e41b5a Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Sat, 1 Nov 2025 16:03:09 +0100 Subject: [PATCH 153/276] [Fizz] Push halted await to the owner stack for late-arriving I/O info (#35019) --- .../react-client/src/ReactFlightClient.js | 105 ++++++-- .../src/client/ReactFlightDOMClientBrowser.js | 2 + .../src/client/ReactFlightDOMClientNode.js | 2 + .../src/client/ReactFlightDOMClientBrowser.js | 2 + .../src/client/ReactFlightDOMClientEdge.js | 2 + .../src/client/ReactFlightDOMClientNode.js | 2 + .../src/client/ReactFlightDOMClientBrowser.js | 2 + .../src/client/ReactFlightDOMClientEdge.js | 2 + .../src/client/ReactFlightDOMClientNode.js | 2 + .../src/__tests__/ReactFlightDOMNode-test.js | 238 +++++++++++++++++- .../src/client/ReactFlightDOMClientBrowser.js | 2 + .../src/client/ReactFlightDOMClientEdge.js | 2 + .../src/client/ReactFlightDOMClientNode.js | 2 + packages/react-server/src/ReactFizzServer.js | 38 ++- 14 files changed, 363 insertions(+), 40 deletions(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 503f79e4cc5..2a5936be0f4 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -367,6 +367,7 @@ type Response = { _debugRootStack?: null | Error, // DEV-only _debugRootTask?: null | ConsoleTask, // DEV-only _debugStartTime: number, // DEV-only + _debugEndTime?: number, // DEV-only _debugIOStarted: boolean, // DEV-only _debugFindSourceMapURL?: void | FindSourceMapURLCallback, // DEV-only _debugChannel?: void | DebugChannel, // DEV-only @@ -500,6 +501,34 @@ function createErrorChunk<T>( return new ReactPromise(ERRORED, null, error); } +function filterDebugInfo( + response: Response, + value: {_debugInfo: ReactDebugInfo, ...}, +) { + if (response._debugEndTime === null) { + // No end time was defined, so we keep all debug info entries. + return; + } + + // Remove any debug info entries that arrived after the defined end time. + const relativeEndTime = + response._debugEndTime - + // $FlowFixMe[prop-missing] + performance.timeOrigin; + const debugInfo = []; + for (let i = 0; i < value._debugInfo.length; i++) { + const info = value._debugInfo[i]; + if (typeof info.time === 'number' && info.time > relativeEndTime) { + break; + } + if (info.awaited != null && info.awaited.end > relativeEndTime) { + break; + } + debugInfo.push(info); + } + value._debugInfo = debugInfo; +} + function moveDebugInfoFromChunkToInnerValue<T>( chunk: InitializedChunk<T> | InitializedStreamChunk<any>, value: T, @@ -534,7 +563,17 @@ function moveDebugInfoFromChunkToInnerValue<T>( } } +function processChunkDebugInfo<T>( + response: Response, + chunk: InitializedChunk<T> | InitializedStreamChunk<any>, + value: T, +): void { + filterDebugInfo(response, chunk); + moveDebugInfoFromChunkToInnerValue(chunk, value); +} + function wakeChunk<T>( + response: Response, listeners: Array<InitializationReference | (T => mixed)>, value: T, chunk: InitializedChunk<T>, @@ -544,16 +583,17 @@ function wakeChunk<T>( if (typeof listener === 'function') { listener(value); } else { - fulfillReference(listener, value, chunk); + fulfillReference(response, listener, value, chunk); } } if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(chunk, value); + processChunkDebugInfo(response, chunk, value); } } function rejectChunk( + response: Response, listeners: Array<InitializationReference | (mixed => mixed)>, error: mixed, ): void { @@ -562,7 +602,7 @@ function rejectChunk( if (typeof listener === 'function') { listener(error); } else { - rejectReference(listener, error); + rejectReference(response, listener.handler, error); } } } @@ -595,13 +635,14 @@ function resolveBlockedCycle<T>( } function wakeChunkIfInitialized<T>( + response: Response, chunk: SomeChunk<T>, resolveListeners: Array<InitializationReference | (T => mixed)>, rejectListeners: null | Array<InitializationReference | (mixed => mixed)>, ): void { switch (chunk.status) { case INITIALIZED: - wakeChunk(resolveListeners, chunk.value, chunk); + wakeChunk(response, resolveListeners, chunk.value, chunk); break; case BLOCKED: // It is possible that we're blocked on our own chunk if it's a cycle. @@ -615,7 +656,7 @@ function wakeChunkIfInitialized<T>( if (cyclicHandler !== null) { // This reference points back to this chunk. We can resolve the cycle by // using the value from that handler. - fulfillReference(reference, cyclicHandler.value, chunk); + fulfillReference(response, reference, cyclicHandler.value, chunk); resolveListeners.splice(i, 1); i--; if (rejectListeners !== null) { @@ -629,6 +670,7 @@ function wakeChunkIfInitialized<T>( case INITIALIZED: const initializedChunk: InitializedChunk<T> = (chunk: any); wakeChunk( + response, resolveListeners, initializedChunk.value, initializedChunk, @@ -636,7 +678,7 @@ function wakeChunkIfInitialized<T>( return; case ERRORED: if (rejectListeners !== null) { - rejectChunk(rejectListeners, chunk.reason); + rejectChunk(response, rejectListeners, chunk.reason); } return; } @@ -666,7 +708,7 @@ function wakeChunkIfInitialized<T>( break; case ERRORED: if (rejectListeners) { - rejectChunk(rejectListeners, chunk.reason); + rejectChunk(response, rejectListeners, chunk.reason); } break; } @@ -724,7 +766,7 @@ function triggerErrorOnChunk<T>( erroredChunk.status = ERRORED; erroredChunk.reason = error; if (listeners !== null) { - rejectChunk(listeners, error); + rejectChunk(response, listeners, error); } } @@ -832,7 +874,7 @@ function resolveModelChunk<T>( // longer be rendered or might not be the highest pri. initializeModelChunk(resolvedChunk); // The status might have changed after initialization. - wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners); + wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners); } } @@ -861,12 +903,11 @@ function resolveModuleChunk<T>( } if (resolveListeners !== null) { initializeModuleChunk(resolvedChunk); - wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners); + wakeChunkIfInitialized(response, chunk, resolveListeners, rejectListeners); } } type InitializationReference = { - response: Response, // TODO: Remove Response from here and pass it through instead. handler: InitializationHandler, parentObject: Object, key: string, @@ -1005,7 +1046,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void { if (typeof listener === 'function') { listener(value); } else { - fulfillReference(listener, value, cyclicChunk); + fulfillReference(response, listener, value, cyclicChunk); } } } @@ -1026,7 +1067,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void { initializedChunk.value = value; if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(initializedChunk, value); + processChunkDebugInfo(response, initializedChunk, value); } } catch (error) { const erroredChunk: ErroredChunk<T> = (chunk: any); @@ -1413,11 +1454,12 @@ function getChunk(response: Response, id: number): SomeChunk<any> { } function fulfillReference( + response: Response, reference: InitializationReference, value: any, fulfilledChunk: SomeChunk<any>, ): void { - const {response, handler, parentObject, key, map, path} = reference; + const {handler, parentObject, key, map, path} = reference; for (let i = 1; i < path.length; i++) { while ( @@ -1487,7 +1529,11 @@ function fulfillReference( return; } default: { - rejectReference(reference, referencedChunk.reason); + rejectReference( + response, + reference.handler, + referencedChunk.reason, + ); return; } } @@ -1585,21 +1631,20 @@ function fulfillReference( initializedChunk.value = handler.value; initializedChunk.reason = handler.reason; // Used by streaming chunks if (resolveListeners !== null) { - wakeChunk(resolveListeners, handler.value, initializedChunk); + wakeChunk(response, resolveListeners, handler.value, initializedChunk); } else { if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value); + processChunkDebugInfo(response, initializedChunk, handler.value); } } } } function rejectReference( - reference: InitializationReference, + response: Response, + handler: InitializationHandler, error: mixed, ): void { - const {handler, response} = reference; - if (handler.errored) { // We've already errored. We could instead build up an AggregateError // but if there are multiple errors we just take the first one like @@ -1690,7 +1735,6 @@ function waitForReference<T>( } const reference: InitializationReference = { - response, handler, parentObject, key, @@ -1838,10 +1882,10 @@ function loadServerReference<A: Iterable<any>, T>( initializedChunk.status = INITIALIZED; initializedChunk.value = handler.value; if (resolveListeners !== null) { - wakeChunk(resolveListeners, handler.value, initializedChunk); + wakeChunk(response, resolveListeners, handler.value, initializedChunk); } else { if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(initializedChunk, handler.value); + processChunkDebugInfo(response, initializedChunk, handler.value); } } } @@ -2578,6 +2622,7 @@ function ResponseInstance( replayConsole: boolean, // DEV-only environmentName: void | string, // DEV-only debugStartTime: void | number, // DEV-only + debugEndTime: void | number, // DEV-only debugChannel: void | DebugChannel, // DEV-only ) { const chunks: Map<number, SomeChunk<any>> = new Map(); @@ -2645,6 +2690,7 @@ function ResponseInstance( // and is not considered I/O required to load the stream. setTimeout(markIOStarted.bind(this), 0); } + this._debugEndTime = debugEndTime == null ? null : debugEndTime; this._debugFindSourceMapURL = findSourceMapURL; this._debugChannel = debugChannel; this._blockedConsole = null; @@ -2688,6 +2734,7 @@ export function createResponse( replayConsole: boolean, // DEV-only environmentName: void | string, // DEV-only debugStartTime: void | number, // DEV-only + debugEndTime: void | number, // DEV-only debugChannel: void | DebugChannel, // DEV-only ): WeakResponse { return getWeakResponse( @@ -2704,6 +2751,7 @@ export function createResponse( replayConsole, environmentName, debugStartTime, + debugEndTime, debugChannel, ), ); @@ -3075,10 +3123,10 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>( resolvedChunk.value = stream; resolvedChunk.reason = controller; if (resolveListeners !== null) { - wakeChunk(resolveListeners, chunk.value, (chunk: any)); + wakeChunk(response, resolveListeners, chunk.value, (chunk: any)); } else { if (__DEV__) { - moveDebugInfoFromChunkToInnerValue(resolvedChunk, stream); + processChunkDebugInfo(response, resolvedChunk, stream); } } } @@ -3218,7 +3266,12 @@ function startAsyncIterable<T>( initializedChunk.status = INITIALIZED; initializedChunk.value = {done: false, value: value}; if (resolveListeners !== null) { - wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners); + wakeChunkIfInitialized( + response, + chunk, + resolveListeners, + rejectListeners, + ); } } nextWriteIndex++; diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js index 371f08abc9a..ee2475287d0 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js @@ -53,6 +53,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, }; function createDebugCallbackFromWritableStream( @@ -107,6 +108,7 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js index 78dce936158..38ac43d0131 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js @@ -58,6 +58,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -116,6 +117,7 @@ function createFromNodeStream<T>( __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js index 0f0141e6409..b304d442046 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js @@ -132,6 +132,7 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } @@ -209,6 +210,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, }; export function createFromReadableStream<T>( diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js index 5c8d1023b23..f58f8534348 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js @@ -80,6 +80,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -111,6 +112,7 @@ function createResponseFromOptions(options?: Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js index fbc633a1753..a9b82e343fb 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js @@ -53,6 +53,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -107,6 +108,7 @@ export function createFromNodeStream<T>( __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js index b3d31bd1bbb..0bf61500198 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js @@ -52,6 +52,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, }; function createDebugCallbackFromWritableStream( @@ -106,6 +107,7 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js index 5517e0f73cf..c6dd4ee94ad 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js @@ -80,6 +80,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -113,6 +114,7 @@ function createResponseFromOptions(options: Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js index 6d117929df0..73d79800c92 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js @@ -61,6 +61,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -118,6 +119,7 @@ function createFromNodeStream<T>( __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js index d59f298f994..646735a54b7 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js @@ -86,12 +86,25 @@ describe('ReactFlightDOMNode', () => { ); } - function normalizeCodeLocInfo(str) { + const relativeFilename = path.relative(__dirname, __filename); + + function normalizeCodeLocInfo(str, {preserveLocation = false} = {}) { return ( str && - str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) { - return ' in ' + name + (/\d/.test(m) ? ' (at **)' : ''); - }) + str.replace( + /^ +(?:at|in) ([\S]+) ([^\n]*)/gm, + function (m, name, location) { + return ( + ' in ' + + name + + (/\d/.test(m) + ? preserveLocation + ? ' ' + location.replace(__filename, relativeFilename) + : ' (at **)' + : '') + ); + }, + ) ); } @@ -1169,4 +1182,221 @@ describe('ReactFlightDOMNode', () => { // Must not throw an error. await readable.pipeTo(writable); }); + + describe('with real timers', () => { + // These tests schedule their rendering in a way that requires real timers + // to be used to accurately represent how this interacts with React's + // internal scheduling. + + beforeEach(() => { + jest.useRealTimers(); + }); + + afterEach(() => { + jest.useFakeTimers(); + }); + + it('should use late-arriving I/O debug info to enhance component and owner stacks when aborting a prerender', async () => { + // This test is constructing a scenario where a framework might separate + // I/O into different phases, e.g. runtime I/O and dynamic I/O. The + // framework might choose to define an end time for the Flight client, + // indicating that all I/O info (or any debug info for that matter) that + // arrives after that time should be ignored. When rendering in Fizz is + // then aborted, the late-arriving debug info that's used to enhance the + // owner stack only includes I/O info up to that end time. + let resolveRuntimeData; + let resolveDynamicData; + + async function getRuntimeData() { + return new Promise(resolve => { + resolveRuntimeData = resolve; + }); + } + + async function getDynamicData() { + return new Promise(resolve => { + resolveDynamicData = resolve; + }); + } + + async function Dynamic() { + const runtimeData = await getRuntimeData(); + const dynamicData = await getDynamicData(); + + return ( + <p> + {runtimeData} {dynamicData} + </p> + ); + } + + function App() { + return ReactServer.createElement( + 'html', + null, + ReactServer.createElement( + 'body', + null, + ReactServer.createElement(Dynamic), + ), + ); + } + + const stream = await ReactServerDOMServer.renderToPipeableStream( + ReactServer.createElement(App), + webpackMap, + {filterStackFrame}, + ); + + const initialChunks = []; + const dynamicChunks = []; + let isDynamic = false; + + const passThrough = new Stream.PassThrough(streamOptions); + stream.pipe(passThrough); + + passThrough.on('data', chunk => { + if (isDynamic) { + dynamicChunks.push(chunk); + } else { + initialChunks.push(chunk); + } + }); + + let endTime; + + await new Promise(resolve => { + setTimeout(() => { + resolveRuntimeData('Hi'); + }); + setTimeout(() => { + isDynamic = true; + endTime = performance.now() + performance.timeOrigin; + resolveDynamicData('Josh'); + resolve(); + }); + }); + + await new Promise(resolve => { + passThrough.on('end', resolve); + }); + + // Create a new Readable and push all initial chunks immediately. + const readable = new Stream.Readable({...streamOptions, read() {}}); + for (let i = 0; i < initialChunks.length; i++) { + readable.push(initialChunks[i]); + } + + const abortController = new AbortController(); + + // When prerendering is aborted, push all dynamic chunks. They won't be + // considered for rendering, but they include debug info we want to use. + abortController.signal.addEventListener( + 'abort', + () => { + for (let i = 0; i < dynamicChunks.length; i++) { + readable.push(dynamicChunks[i]); + } + }, + {once: true}, + ); + + const response = ReactServerDOMClient.createFromNodeStream( + readable, + { + serverConsumerManifest: { + moduleMap: null, + moduleLoading: null, + }, + }, + { + // Debug info arriving after this end time will be ignored, e.g. the + // I/O info for the dynamic data. + endTime, + }, + ); + + function ClientRoot() { + return use(response); + } + + let componentStack; + let ownerStack; + + const {prelude} = await new Promise(resolve => { + let result; + + setTimeout(() => { + result = ReactDOMFizzStatic.prerenderToNodeStream( + React.createElement(ClientRoot), + { + signal: abortController.signal, + onError(error, errorInfo) { + componentStack = errorInfo.componentStack; + ownerStack = React.captureOwnerStack + ? React.captureOwnerStack() + : null; + }, + }, + ); + }); + + setTimeout(() => { + abortController.abort(); + resolve(result); + }); + }); + + const prerenderHTML = await readResult(prelude); + + expect(prerenderHTML).toBe(''); + + if (__DEV__) { + expect( + normalizeCodeLocInfo(componentStack, {preserveLocation: true}), + ).toBe( + '\n' + + ' in Dynamic' + + (gate(flags => flags.enableAsyncDebugInfo) + ? ' (file://ReactFlightDOMNode-test.js:1223:33)\n' + : '\n') + + ' in body\n' + + ' in html\n' + + ' in App (file://ReactFlightDOMNode-test.js:1240:25)\n' + + ' in ClientRoot (ReactFlightDOMNode-test.js:1320:16)', + ); + } else { + expect( + normalizeCodeLocInfo(componentStack, {preserveLocation: true}), + ).toBe( + '\n' + + ' in body\n' + + ' in html\n' + + ' in ClientRoot (ReactFlightDOMNode-test.js:1320:16)', + ); + } + + if (__DEV__) { + if (gate(flags => flags.enableAsyncDebugInfo)) { + expect( + normalizeCodeLocInfo(ownerStack, {preserveLocation: true}), + ).toBe( + '\n' + + ' in Dynamic (file://ReactFlightDOMNode-test.js:1223:33)\n' + + ' in App (file://ReactFlightDOMNode-test.js:1240:25)', + ); + } else { + expect( + normalizeCodeLocInfo(ownerStack, {preserveLocation: true}), + ).toBe( + '' + + '\n' + + ' in App (file://ReactFlightDOMNode-test.js:1240:25)', + ); + } + } else { + expect(ownerStack).toBeNull(); + } + }); + }); }); diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js index b3d31bd1bbb..0bf61500198 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js @@ -52,6 +52,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, }; function createDebugCallbackFromWritableStream( @@ -106,6 +107,7 @@ function createResponseFromOptions(options: void | Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js index bc4caac767f..2cf668f679d 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js @@ -80,6 +80,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Edge client we only support a single-direction debug channel. debugChannel?: {readable?: ReadableStream, ...}, }; @@ -113,6 +114,7 @@ function createResponseFromOptions(options: Options) { __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); } diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js index 6d117929df0..73d79800c92 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js @@ -61,6 +61,7 @@ export type Options = { replayConsoleLogs?: boolean, environmentName?: string, startTime?: number, + endTime?: number, // For the Node.js client we only support a single-direction debug channel. debugChannel?: Readable, }; @@ -118,6 +119,7 @@ function createFromNodeStream<T>( __DEV__ && options && options.startTime != null ? options.startTime : undefined, + __DEV__ && options && options.endTime != null ? options.endTime : undefined, debugChannel, ); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 33c0ab68a8e..6259357c839 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1004,14 +1004,6 @@ function pushHaltedAwaitOnComponentStack( if (debugInfo != null) { for (let i = debugInfo.length - 1; i >= 0; i--) { const info = debugInfo[i]; - if (typeof info.name === 'string') { - // This is a Server Component. Any awaits in previous Server Components already resolved. - break; - } - if (typeof info.time === 'number') { - // This had an end time. Any awaits before this must have already resolved. - break; - } if (info.awaited != null) { const asyncInfo: ReactAsyncInfo = (info: any); const bestStack = @@ -4653,10 +4645,36 @@ function abortTask(task: Task, request: Request, error: mixed): void { // If the task is not rendering, then this is an async abort. Conceptually it's as if // the abort happened inside the async gap. The abort reason's stack frame won't have that // on the stack so instead we use the owner stack and debug task of any halted async debug info. - const node: any = task.node; + let node: any = task.node; if (node !== null && typeof node === 'object') { // Push a fake component stack frame that represents the await. - pushHaltedAwaitOnComponentStack(task, node._debugInfo); + let debugInfo = node._debugInfo; + // First resolve lazy nodes to find debug info that has been transferred + // to the inner value. + while ( + typeof node === 'object' && + node !== null && + node.$$typeof === REACT_LAZY_TYPE + ) { + const payload = node._payload; + if (payload.status === 'fulfilled') { + node = payload.value; + continue; + } + break; + } + if ( + typeof node === 'object' && + node !== null && + (isArray(node) || + typeof node[ASYNC_ITERATOR] === 'function' || + node.$$typeof === REACT_ELEMENT_TYPE || + node.$$typeof === REACT_LAZY_TYPE) && + isArray(node._debugInfo) + ) { + debugInfo = node._debugInfo; + } + pushHaltedAwaitOnComponentStack(task, debugInfo); /* if (task.thenableState !== null) { // TODO: If we were stalled inside use() of a Client Component then we should From 67f7d47a9b8f450c93ee69edd16aed68e910ff1e Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Mon, 3 Nov 2025 22:59:40 +0100 Subject: [PATCH 154/276] [Flight] Fix debug info filtering to include later resolved I/O (#35036) In #35019, we excluded debug I/O info from being considered for enhancing the owner stack if it resolved after the defined `endTime` option that can be passed to the Flight client. However, we should include any I/O that was awaited before that end time, even if it resolved later. --- .../react-client/src/ReactFlightClient.js | 7 +- .../src/__tests__/ReactFlightDOMNode-test.js | 96 ++++++++----------- 2 files changed, 45 insertions(+), 58 deletions(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 2a5936be0f4..f8cc0a80f39 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -510,7 +510,9 @@ function filterDebugInfo( return; } - // Remove any debug info entries that arrived after the defined end time. + // Remove any debug info entries after the defined end time. For async info + // that means we're including anything that was awaited before the end time, + // but it doesn't need to be resolved before the end time. const relativeEndTime = response._debugEndTime - // $FlowFixMe[prop-missing] @@ -521,9 +523,6 @@ function filterDebugInfo( if (typeof info.time === 'number' && info.time > relativeEndTime) { break; } - if (info.awaited != null && info.awaited.end > relativeEndTime) { - break; - } debugInfo.push(info); } value._debugInfo = debugInfo; diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js index 646735a54b7..d9de7df43d3 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js @@ -1197,35 +1197,28 @@ describe('ReactFlightDOMNode', () => { }); it('should use late-arriving I/O debug info to enhance component and owner stacks when aborting a prerender', async () => { - // This test is constructing a scenario where a framework might separate - // I/O into different phases, e.g. runtime I/O and dynamic I/O. The - // framework might choose to define an end time for the Flight client, - // indicating that all I/O info (or any debug info for that matter) that - // arrives after that time should be ignored. When rendering in Fizz is - // then aborted, the late-arriving debug info that's used to enhance the - // owner stack only includes I/O info up to that end time. - let resolveRuntimeData; - let resolveDynamicData; - - async function getRuntimeData() { + let resolveDynamicData1; + let resolveDynamicData2; + + async function getDynamicData1() { return new Promise(resolve => { - resolveRuntimeData = resolve; + resolveDynamicData1 = resolve; }); } - async function getDynamicData() { + async function getDynamicData2() { return new Promise(resolve => { - resolveDynamicData = resolve; + resolveDynamicData2 = resolve; }); } async function Dynamic() { - const runtimeData = await getRuntimeData(); - const dynamicData = await getDynamicData(); + const data1 = await getDynamicData1(); + const data2 = await getDynamicData2(); return ( <p> - {runtimeData} {dynamicData} + {data1} {data2} </p> ); } @@ -1242,45 +1235,40 @@ describe('ReactFlightDOMNode', () => { ); } - const stream = await ReactServerDOMServer.renderToPipeableStream( - ReactServer.createElement(App), - webpackMap, - {filterStackFrame}, - ); - + let staticEndTime = -1; const initialChunks = []; const dynamicChunks = []; - let isDynamic = false; - const passThrough = new Stream.PassThrough(streamOptions); - stream.pipe(passThrough); + await new Promise(resolve => { + setTimeout(async () => { + const stream = ReactServerDOMServer.renderToPipeableStream( + ReactServer.createElement(App), + webpackMap, + {filterStackFrame}, + ); - passThrough.on('data', chunk => { - if (isDynamic) { - dynamicChunks.push(chunk); - } else { - initialChunks.push(chunk); - } - }); + const passThrough = new Stream.PassThrough(streamOptions); + stream.pipe(passThrough); - let endTime; + passThrough.on('data', chunk => { + if (staticEndTime < 0) { + initialChunks.push(chunk); + } else { + dynamicChunks.push(chunk); + } + }); - await new Promise(resolve => { - setTimeout(() => { - resolveRuntimeData('Hi'); + passThrough.on('end', resolve); }); setTimeout(() => { - isDynamic = true; - endTime = performance.now() + performance.timeOrigin; - resolveDynamicData('Josh'); - resolve(); + staticEndTime = performance.now() + performance.timeOrigin; + resolveDynamicData1('Hi'); + setTimeout(() => { + resolveDynamicData2('Josh'); + }); }); }); - await new Promise(resolve => { - passThrough.on('end', resolve); - }); - // Create a new Readable and push all initial chunks immediately. const readable = new Stream.Readable({...streamOptions, read() {}}); for (let i = 0; i < initialChunks.length; i++) { @@ -1311,8 +1299,8 @@ describe('ReactFlightDOMNode', () => { }, { // Debug info arriving after this end time will be ignored, e.g. the - // I/O info for the dynamic data. - endTime, + // I/O info for the second dynamic data. + endTime: staticEndTime, }, ); @@ -1358,12 +1346,12 @@ describe('ReactFlightDOMNode', () => { '\n' + ' in Dynamic' + (gate(flags => flags.enableAsyncDebugInfo) - ? ' (file://ReactFlightDOMNode-test.js:1223:33)\n' + ? ' (file://ReactFlightDOMNode-test.js:1216:27)\n' : '\n') + ' in body\n' + ' in html\n' + - ' in App (file://ReactFlightDOMNode-test.js:1240:25)\n' + - ' in ClientRoot (ReactFlightDOMNode-test.js:1320:16)', + ' in App (file://ReactFlightDOMNode-test.js:1233:25)\n' + + ' in ClientRoot (ReactFlightDOMNode-test.js:1308:16)', ); } else { expect( @@ -1372,7 +1360,7 @@ describe('ReactFlightDOMNode', () => { '\n' + ' in body\n' + ' in html\n' + - ' in ClientRoot (ReactFlightDOMNode-test.js:1320:16)', + ' in ClientRoot (ReactFlightDOMNode-test.js:1308:16)', ); } @@ -1382,8 +1370,8 @@ describe('ReactFlightDOMNode', () => { normalizeCodeLocInfo(ownerStack, {preserveLocation: true}), ).toBe( '\n' + - ' in Dynamic (file://ReactFlightDOMNode-test.js:1223:33)\n' + - ' in App (file://ReactFlightDOMNode-test.js:1240:25)', + ' in Dynamic (file://ReactFlightDOMNode-test.js:1216:27)\n' + + ' in App (file://ReactFlightDOMNode-test.js:1233:25)', ); } else { expect( @@ -1391,7 +1379,7 @@ describe('ReactFlightDOMNode', () => { ).toBe( '' + '\n' + - ' in App (file://ReactFlightDOMNode-test.js:1240:25)', + ' in App (file://ReactFlightDOMNode-test.js:1233:25)', ); } } else { From edd05f181b72272fb87b77bd84d2c048a4613955 Mon Sep 17 00:00:00 2001 From: Jack Pope <jackpope1@gmail.com> Date: Mon, 3 Nov 2025 17:51:00 -0500 Subject: [PATCH 155/276] Add fragment handles to children of FragmentInstances (#34935) This PR adds a `unstable_reactFragments?: Set<FragmentInstance>` property to DOM nodes that belong to a Fragment with a ref (top level host components). This allows you to access a FragmentInstance from a DOM node. This is flagged behind `enableFragmentRefsInstanceHandles`. The primary use case to unblock is reusing IntersectionObserver instances. A fairly common practice is to cache and reuse IntersectionObservers that share the same config, with a map of node->callbacks to run for each entry in the IO callback. Currently this is not possible with Fragment Ref `observeUsing` because the key in the cache would have to be the `FragmentInstance` and you can't find it without a handle from the node. This works now by accessing `entry.target.fragments`. This also opens up possibilities to use `FragmentInstance` operations in other places, such as events. We can do `event.target.unstable_reactFragments`, then access `fragmentInstance.getClientRects` for example. In a future PR, we can assign an event's `currentTarget` as the Fragment Ref for a more direct handle when the event has been dispatched by the Fragment itself. The first commit here implemented a handle only on observed elements. This is awkward because there isn't a good way to document or expose this temporary property. `element.fragments` is closer to what we would expect from a DOM API if a standard was implemented here. And by assigning it to all top-level nodes of a Fragment, it can be used beyond the cached IntersectionObserver callback. One tradeoff here is adding extra work during the creation of FragmentInstances as well as keeping track of adding/removing nodes. Previously we only track the Fiber on creation but here we add a traversal which could apply to a large set of top-level host children. The `element.unstable_reactFragments` Set can also be randomly ordered. --- .../src/client/ReactFiberConfigDOM.js | 55 +++++- .../__tests__/ReactDOMFragmentRefs-test.js | 167 ++++++++++++++++++ .../src/ReactFiberConfigFabric.js | 58 +++++- packages/shared/ReactFeatureFlags.js | 1 + .../ReactFeatureFlags.native-fb-dynamic.js | 1 + .../forks/ReactFeatureFlags.native-fb.js | 1 + .../forks/ReactFeatureFlags.native-oss.js | 1 + .../forks/ReactFeatureFlags.test-renderer.js | 1 + .../ReactFeatureFlags.test-renderer.www.js | 1 + .../shared/forks/ReactFeatureFlags.www.js | 2 + 10 files changed, 281 insertions(+), 7 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 0af810924bb..bbecbb66356 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -126,6 +126,7 @@ import { enableHydrationChangeEvent, enableFragmentRefsScrollIntoView, enableProfilerTimer, + enableFragmentRefsInstanceHandles, } from 'shared/ReactFeatureFlags'; import { HostComponent, @@ -214,6 +215,10 @@ export type Container = export type Instance = Element; export type TextInstance = Text; +type InstanceWithFragmentHandles = Instance & { + unstable_reactFragments?: Set<FragmentInstanceType>, +}; + declare class ActivityInterface extends Comment {} declare class SuspenseInterface extends Comment { _reactRetry: void | (() => void); @@ -3390,10 +3395,44 @@ if (enableFragmentRefsScrollIntoView) { }; } +function addFragmentHandleToFiber( + child: Fiber, + fragmentInstance: FragmentInstanceType, +): boolean { + if (enableFragmentRefsInstanceHandles) { + const instance = + getInstanceFromHostFiber<InstanceWithFragmentHandles>(child); + if (instance != null) { + addFragmentHandleToInstance(instance, fragmentInstance); + } + } + return false; +} + +function addFragmentHandleToInstance( + instance: InstanceWithFragmentHandles, + fragmentInstance: FragmentInstanceType, +): void { + if (enableFragmentRefsInstanceHandles) { + if (instance.unstable_reactFragments == null) { + instance.unstable_reactFragments = new Set(); + } + instance.unstable_reactFragments.add(fragmentInstance); + } +} + export function createFragmentInstance( fragmentFiber: Fiber, ): FragmentInstanceType { - return new (FragmentInstance: any)(fragmentFiber); + const fragmentInstance = new (FragmentInstance: any)(fragmentFiber); + if (enableFragmentRefsInstanceHandles) { + traverseFragmentInstance( + fragmentFiber, + addFragmentHandleToFiber, + fragmentInstance, + ); + } + return fragmentInstance; } export function updateFragmentInstanceFiber( @@ -3404,7 +3443,7 @@ export function updateFragmentInstanceFiber( } export function commitNewChildToFragmentInstance( - childInstance: Instance, + childInstance: InstanceWithFragmentHandles, fragmentInstance: FragmentInstanceType, ): void { const eventListeners = fragmentInstance._eventListeners; @@ -3419,17 +3458,25 @@ export function commitNewChildToFragmentInstance( observer.observe(childInstance); }); } + if (enableFragmentRefsInstanceHandles) { + addFragmentHandleToInstance(childInstance, fragmentInstance); + } } export function deleteChildFromFragmentInstance( - childElement: Instance, + childInstance: InstanceWithFragmentHandles, fragmentInstance: FragmentInstanceType, ): void { const eventListeners = fragmentInstance._eventListeners; if (eventListeners !== null) { for (let i = 0; i < eventListeners.length; i++) { const {type, listener, optionsOrUseCapture} = eventListeners[i]; - childElement.removeEventListener(type, listener, optionsOrUseCapture); + childInstance.removeEventListener(type, listener, optionsOrUseCapture); + } + } + if (enableFragmentRefsInstanceHandles) { + if (childInstance.unstable_reactFragments != null) { + childInstance.unstable_reactFragments.delete(fragmentInstance); } } } diff --git a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js index 90dfa9d2f30..a5b9eae6fad 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js @@ -110,6 +110,53 @@ describe('FragmentRefs', () => { await act(() => root.render(<Test />)); }); + // @gate enableFragmentRefs && enableFragmentRefsInstanceHandles + it('attaches fragment handles to nodes', async () => { + const fragmentParentRef = React.createRef(); + const fragmentRef = React.createRef(); + + function Test({show}) { + return ( + <Fragment ref={fragmentParentRef}> + <Fragment ref={fragmentRef}> + <div id="childA">A</div> + <div id="childB">B</div> + </Fragment> + <div id="childC">C</div> + {show && <div id="childD">D</div>} + </Fragment> + ); + } + + const root = ReactDOMClient.createRoot(container); + await act(() => root.render(<Test show={false} />)); + + const childA = document.querySelector('#childA'); + const childB = document.querySelector('#childB'); + const childC = document.querySelector('#childC'); + + expect(childA.unstable_reactFragments.has(fragmentRef.current)).toBe(true); + expect(childB.unstable_reactFragments.has(fragmentRef.current)).toBe(true); + expect(childC.unstable_reactFragments.has(fragmentRef.current)).toBe(false); + expect(childA.unstable_reactFragments.has(fragmentParentRef.current)).toBe( + true, + ); + expect(childB.unstable_reactFragments.has(fragmentParentRef.current)).toBe( + true, + ); + expect(childC.unstable_reactFragments.has(fragmentParentRef.current)).toBe( + true, + ); + + await act(() => root.render(<Test show={true} />)); + + const childD = document.querySelector('#childD'); + expect(childD.unstable_reactFragments.has(fragmentRef.current)).toBe(false); + expect(childD.unstable_reactFragments.has(fragmentParentRef.current)).toBe( + true, + ); + }); + describe('focus methods', () => { describe('focus()', () => { // @gate enableFragmentRefs @@ -1045,6 +1092,126 @@ describe('FragmentRefs', () => { {withoutStack: true}, ); }); + + // @gate enableFragmentRefs && enableFragmentRefsInstanceHandles + it('attaches handles to observed elements to allow caching of observers', async () => { + const targetToCallbackMap = new WeakMap(); + let cachedObserver = null; + function createObserverIfNeeded(fragmentInstance, onIntersection) { + const callbacks = targetToCallbackMap.get(fragmentInstance); + targetToCallbackMap.set( + fragmentInstance, + callbacks ? [...callbacks, onIntersection] : [onIntersection], + ); + if (cachedObserver !== null) { + return cachedObserver; + } + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + const fragmentInstances = entry.target.unstable_reactFragments; + if (fragmentInstances) { + Array.from(fragmentInstances).forEach(fInstance => { + const cbs = targetToCallbackMap.get(fInstance) || []; + cbs.forEach(callback => { + callback(entry); + }); + }); + } + + targetToCallbackMap.get(entry.target)?.forEach(callback => { + callback(entry); + }); + }); + }); + cachedObserver = observer; + return observer; + } + + function IntersectionObserverFragment({onIntersection, children}) { + const fragmentRef = React.useRef(null); + React.useLayoutEffect(() => { + const observer = createObserverIfNeeded( + fragmentRef.current, + onIntersection, + ); + fragmentRef.current.observeUsing(observer); + const lastRefValue = fragmentRef.current; + return () => { + lastRefValue.unobserveUsing(observer); + }; + }, []); + return <React.Fragment ref={fragmentRef}>{children}</React.Fragment>; + } + + let logs = []; + function logIntersection(id) { + logs.push(`observe: ${id}`); + } + + function ChildWithManualIO({id}) { + const divRef = React.useRef(null); + React.useLayoutEffect(() => { + const observer = createObserverIfNeeded(divRef.current, entry => { + logIntersection(id); + }); + observer.observe(divRef.current); + return () => { + observer.unobserve(divRef.current); + }; + }, []); + return ( + <div id={id} ref={divRef}> + {id} + </div> + ); + } + + function Test() { + return ( + <> + <IntersectionObserverFragment + onIntersection={() => logIntersection('grandparent')}> + <IntersectionObserverFragment + onIntersection={() => logIntersection('parentA')}> + <div id="childA">A</div> + </IntersectionObserverFragment> + </IntersectionObserverFragment> + <IntersectionObserverFragment + onIntersection={() => logIntersection('parentB')}> + <div id="childB">B</div> + <ChildWithManualIO id="childC" /> + </IntersectionObserverFragment> + </> + ); + } + + const root = ReactDOMClient.createRoot(container); + await act(() => root.render(<Test />)); + + simulateIntersection([ + container.querySelector('#childA'), + {y: 0, x: 0, width: 1, height: 1}, + 1, + ]); + expect(logs).toEqual(['observe: grandparent', 'observe: parentA']); + + logs = []; + + simulateIntersection([ + container.querySelector('#childB'), + {y: 0, x: 0, width: 1, height: 1}, + 1, + ]); + expect(logs).toEqual(['observe: parentB']); + + logs = []; + simulateIntersection([ + container.querySelector('#childC'), + {y: 0, x: 0, width: 1, height: 1}, + 1, + ]); + expect(logs).toEqual(['observe: parentB', 'observe: childC']); + }); }); describe('getClientRects', () => { diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js index 0f334eea860..f5a4361fd41 100644 --- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js +++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js @@ -40,6 +40,7 @@ import { type PublicTextInstance, type PublicRootInstance, } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'; +import {enableFragmentRefsInstanceHandles} from 'shared/ReactFeatureFlags'; const { createNode, @@ -119,6 +120,9 @@ export type TextInstance = { }; export type HydratableInstance = Instance | TextInstance; export type PublicInstance = ReactNativePublicInstance; +type PublicInstanceWithFragmentHandles = PublicInstance & { + unstable_reactFragments?: Set<FragmentInstanceType>, +}; export type Container = { containerTag: number, publicInstance: PublicRootInstance | null, @@ -794,10 +798,45 @@ function collectClientRects(child: Fiber, rects: Array<DOMRect>): boolean { return false; } +function addFragmentHandleToFiber( + child: Fiber, + fragmentInstance: FragmentInstanceType, +): boolean { + if (enableFragmentRefsInstanceHandles) { + const instance = ((getPublicInstanceFromHostFiber( + child, + ): any): PublicInstanceWithFragmentHandles); + if (instance != null) { + addFragmentHandleToInstance(instance, fragmentInstance); + } + } + return false; +} + +function addFragmentHandleToInstance( + instance: PublicInstanceWithFragmentHandles, + fragmentInstance: FragmentInstanceType, +): void { + if (enableFragmentRefsInstanceHandles) { + if (instance.unstable_reactFragments == null) { + instance.unstable_reactFragments = new Set(); + } + instance.unstable_reactFragments.add(fragmentInstance); + } +} + export function createFragmentInstance( fragmentFiber: Fiber, ): FragmentInstanceType { - return new (FragmentInstance: any)(fragmentFiber); + const fragmentInstance = new (FragmentInstance: any)(fragmentFiber); + if (enableFragmentRefsInstanceHandles) { + traverseFragmentInstance( + fragmentFiber, + addFragmentHandleToFiber, + fragmentInstance, + ); + } + return fragmentInstance; } export function updateFragmentInstanceFiber( @@ -821,13 +860,26 @@ export function commitNewChildToFragmentInstance( observer.observe(publicInstance); }); } + if (enableFragmentRefsInstanceHandles) { + addFragmentHandleToInstance( + ((publicInstance: any): PublicInstanceWithFragmentHandles), + fragmentInstance, + ); + } } export function deleteChildFromFragmentInstance( - child: Instance, + childInstance: Instance, fragmentInstance: FragmentInstanceType, ): void { - // Noop + const publicInstance = ((getPublicInstance( + childInstance, + ): any): PublicInstanceWithFragmentHandles); + if (enableFragmentRefsInstanceHandles) { + if (publicInstance.unstable_reactFragments != null) { + publicInstance.unstable_reactFragments.delete(fragmentInstance); + } + } } export const NotPendingTransition: TransitionStatus = null; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 4e08b56d114..68410612b5d 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -147,6 +147,7 @@ export const enableInfiniteRenderLoopDetection: boolean = false; export const enableFragmentRefs: boolean = true; export const enableFragmentRefsScrollIntoView: boolean = true; +export const enableFragmentRefsInstanceHandles: boolean = false; // ----------------------------------------------------------------------------- // Ready for next major. diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js index 0cbcd61a876..f139a3fcf28 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js @@ -25,4 +25,5 @@ export const passChildrenWhenCloningPersistedNodes = __VARIANT__; export const renameElementSymbol = __VARIANT__; export const enableFragmentRefs = __VARIANT__; export const enableFragmentRefsScrollIntoView = __VARIANT__; +export const enableFragmentRefsInstanceHandles = __VARIANT__; export const enableComponentPerformanceTrack = __VARIANT__; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index dd0bd8624f3..8a2e7921bdd 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -27,6 +27,7 @@ export const { renameElementSymbol, enableFragmentRefs, enableFragmentRefsScrollIntoView, + enableFragmentRefsInstanceHandles, } = dynamicFlags; // The rest of the flags are static for better dead code elimination. diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 555307cef00..e9de8e6b4a4 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -74,6 +74,7 @@ export const ownerStackLimit = 1e4; export const enableFragmentRefs: boolean = true; export const enableFragmentRefsScrollIntoView: boolean = false; +export const enableFragmentRefsInstanceHandles: boolean = false; // Profiling Only export const enableProfilerTimer: boolean = __PROFILE__; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 9d2e73024d1..57de815d9c3 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -75,6 +75,7 @@ export const ownerStackLimit = 1e4; export const enableFragmentRefs: boolean = true; export const enableFragmentRefsScrollIntoView: boolean = true; +export const enableFragmentRefsInstanceHandles: boolean = false; // TODO: This must be in sync with the main ReactFeatureFlags file because // the Test Renderer's value must be the same as the one used by the diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index f652ec4047c..90e24f264d1 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -82,6 +82,7 @@ export const enableDefaultTransitionIndicator: boolean = true; export const enableFragmentRefs: boolean = false; export const enableFragmentRefsScrollIntoView: boolean = false; +export const enableFragmentRefsInstanceHandles: boolean = false; export const ownerStackLimit = 1e4; // Flow magic to verify the exports of this file match the original version. diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 6ba56d9d54e..9d8be29c658 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -111,5 +111,7 @@ export const enableDefaultTransitionIndicator: boolean = true; export const ownerStackLimit = 1e4; +export const enableFragmentRefsInstanceHandles: boolean = true; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); From f646e8ffd85ddf5bd8be23327ac887196355bf9b Mon Sep 17 00:00:00 2001 From: Hendrik Liebau <mail@hendrik-liebau.de> Date: Tue, 4 Nov 2025 16:30:08 +0100 Subject: [PATCH 156/276] [Flight] Fix `hasReadable` flag in Node.js clients' debug channel (#35039) For Edge Flight servers, that use Web Streams, we're defining the `debugChannel` option as: ``` debugChannel?: {readable?: ReadableStream, writable?: WritableStream, ...} ``` Whereas for Node.js Flight servers, that use Node.js Streams, we're defining it as: ``` debugChannel?: Readable | Writable | Duplex | WebSocket ``` For the Edge Flight clients, there is currently only one direction of the debug channel supported, so we define the option as: ``` debugChannel?: {readable?: ReadableStream, ...} ``` Consequently, for the Node.js Flight clients, we define the option as: ``` debugChannel?: Readable ``` The presence of a readable debug channel is passed to the Flight client internally via the `hasReadable` flag on the internal `debugChannel` option. For the Node.js clients, that flag was accidentally derived from the public option `debugChannel.readable`, which is conceptually incorrect, because `debugChannel` is a `Readable` stream, not an options object with a `readable` property. However, a `Readable` also has a `readable` property, which is a boolean that indicates whether the stream is in a readable state. This meant that the `hasReadable` flag was incidentally still set correctly. Regardless, this was confusing and unintentional, so we're now fixing it to always set `hasReadable` to `true` when a `debugChannel` is provided to the Node.js clients. We'll revisit this in case we ever add support for writable debug channels in Node.js (and Edge) clients. --- .../src/client/ReactFlightDOMClientNode.js | 5 +---- .../src/client/ReactFlightDOMClientNode.js | 5 +---- .../src/client/ReactFlightDOMClientNode.js | 5 +---- .../src/client/ReactFlightDOMClientNode.js | 5 +---- 4 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js index 38ac43d0131..ae11dc29bff 100644 --- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js @@ -93,10 +93,7 @@ function createFromNodeStream<T>( ): Thenable<T> { const debugChannel: void | DebugChannel = __DEV__ && options && options.debugChannel !== undefined - ? { - hasReadable: options.debugChannel.readable !== undefined, - callback: null, - } + ? {hasReadable: true, callback: null} : undefined; const response: Response = createResponse( diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js index a9b82e343fb..e8716bdc6bb 100644 --- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js @@ -86,10 +86,7 @@ export function createFromNodeStream<T>( ): Thenable<T> { const debugChannel: void | DebugChannel = __DEV__ && options && options.debugChannel !== undefined - ? { - hasReadable: options.debugChannel.readable !== undefined, - callback: null, - } + ? {hasReadable: true, callback: null} : undefined; const response: Response = createResponse( diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js index 73d79800c92..8863b1bf1c6 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js @@ -95,10 +95,7 @@ function createFromNodeStream<T>( ): Thenable<T> { const debugChannel: void | DebugChannel = __DEV__ && options && options.debugChannel !== undefined - ? { - hasReadable: options.debugChannel.readable !== undefined, - callback: null, - } + ? {hasReadable: true, callback: null} : undefined; const response: Response = createResponse( diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js index 73d79800c92..8863b1bf1c6 100644 --- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js @@ -95,10 +95,7 @@ function createFromNodeStream<T>( ): Thenable<T> { const debugChannel: void | DebugChannel = __DEV__ && options && options.debugChannel !== undefined - ? { - hasReadable: options.debugChannel.readable !== undefined, - callback: null, - } + ? {hasReadable: true, callback: null} : undefined; const response: Response = createResponse( From d000261eef6109c332a1880e92836856473f6a39 Mon Sep 17 00:00:00 2001 From: Alex Hunt <hello@alexhunt.dev> Date: Tue, 4 Nov 2025 17:07:31 +0000 Subject: [PATCH 157/276] [Tracks] Annotate devtools.performanceIssue for Cascading Updates in DEV (#34961) --- .../src/ReactFiberPerformanceTrack.js | 15 +++++++++++++++ packages/shared/ReactFeatureFlags.js | 5 +++++ .../shared/forks/ReactFeatureFlags.native-fb.js | 2 ++ .../shared/forks/ReactFeatureFlags.native-oss.js | 1 + .../forks/ReactFeatureFlags.test-renderer.js | 1 + .../ReactFeatureFlags.test-renderer.native-fb.js | 1 + .../forks/ReactFeatureFlags.test-renderer.www.js | 1 + packages/shared/forks/ReactFeatureFlags.www.js | 2 ++ 8 files changed, 28 insertions(+) diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index 5f94bd35e02..f926bd6085b 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -36,6 +36,7 @@ import { import { enableProfilerTimer, enableGestureTransition, + enablePerformanceIssueReporting, } from 'shared/ReactFeatureFlags'; const supportsUserTiming = @@ -203,6 +204,15 @@ const reusableComponentOptions: PerformanceMeasureOptions = { const reusableChangedPropsEntry = ['Changed Props', '']; +const reusableCascadingUpdateIssue = { + name: 'React: Cascading Update', + severity: 'warning', + description: + 'A cascading update is an update that is triggered during an ongoing render. This can lead to performance issues.', + learnMoreUrl: + 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', +}; + const DEEP_EQUALITY_WARNING = 'This component received deeply equal props. It might benefit from useMemo or the React Compiler in its owner.'; @@ -761,6 +771,11 @@ export function logBlockingStart( }, }, }; + if (enablePerformanceIssueReporting && isSpawnedUpdate) { + // $FlowFixMe[prop-missing] - detail is untyped + measureOptions.detail.devtools.performanceIssue = + reusableCascadingUpdateIssue; + } if (debugTask) { debugTask.run( diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 68410612b5d..6d45a30718a 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -232,6 +232,11 @@ export const enableProfilerTimer = __PROFILE__; // All calls should also be gated on enableProfilerTimer. export const enableComponentPerformanceTrack: boolean = true; +// Enables annotating of React performance track events with `performanceIssue` +// metadata, to more prominently highlight performance issues to users +// (initially, an experimental feature in React Native). +export const enablePerformanceIssueReporting: boolean = false; + // Adds user timing marks for e.g. state updates, suspense, and work loop stuff, // for an experimental timeline tool. export const enableSchedulingProfiler: boolean = diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 8a2e7921bdd..dbf92a2190e 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -83,6 +83,8 @@ export const enableDefaultTransitionIndicator: boolean = true; export const ownerStackLimit = 1e4; export const enableComponentPerformanceTrack: boolean = __PROFILE__ && dynamicFlags.enableComponentPerformanceTrack; +export const enablePerformanceIssueReporting: boolean = + enableComponentPerformanceTrack; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index e9de8e6b4a4..c509dbce69f 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -42,6 +42,7 @@ export const enablePostpone: boolean = false; export const enableReactTestRendererWarning: boolean = false; export const enableRetryLaneExpiration: boolean = false; export const enableComponentPerformanceTrack: boolean = true; +export const enablePerformanceIssueReporting: boolean = false; export const enableSchedulingProfiler: boolean = !enableComponentPerformanceTrack && __PROFILE__; export const enableScopeAPI: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 57de815d9c3..5ae58dab14d 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -16,6 +16,7 @@ export const enableProfilerTimer: boolean = __PROFILE__; export const enableProfilerCommitHooks: boolean = __PROFILE__; export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__; export const enableComponentPerformanceTrack: boolean = true; +export const enablePerformanceIssueReporting: boolean = false; export const enableUpdaterTracking: boolean = false; export const enableLegacyCache: boolean = __EXPERIMENTAL__; export const enableAsyncIterableChildren: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index eb56da603d3..91803ab38ac 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -41,6 +41,7 @@ export const enableReactTestRendererWarning = false; export const enableRetryLaneExpiration = false; export const enableSchedulingProfiler = __PROFILE__; export const enableComponentPerformanceTrack = false; +export const enablePerformanceIssueReporting = false; export const enableScopeAPI = false; export const enableEagerAlternateStateNodeCleanup = true; export const enableSuspenseAvoidThisFallback = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 90e24f264d1..dd982851075 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -16,6 +16,7 @@ export const enableProfilerTimer: boolean = __PROFILE__; export const enableProfilerCommitHooks: boolean = __PROFILE__; export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__; export const enableComponentPerformanceTrack: boolean = false; +export const enablePerformanceIssueReporting: boolean = false; export const enableUpdaterTracking: boolean = false; export const enableLegacyCache: boolean = true; export const enableAsyncIterableChildren: boolean = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 9d8be29c658..542d72c2f6f 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -59,6 +59,8 @@ export const enableThrottledScheduling: boolean = false; export const enableHydrationLaneScheduling: boolean = true; +export const enablePerformanceIssueReporting: boolean = false; + // Logs additional User Timing API marks for use with an experimental profiling tool. export const enableSchedulingProfiler: boolean = __PROFILE__ && dynamicFeatureFlags.enableSchedulingProfiler; From 8f8b336734d7c807f5aa11b0f31540e63302d789 Mon Sep 17 00:00:00 2001 From: Jordan Brown <jmbrown@meta.com> Date: Tue, 4 Nov 2025 14:59:29 -0500 Subject: [PATCH 158/276] [eslint] Fix useEffectEvent checks in component syntax (#35041) We were not recording uEE calls in component/hook syntax. Easy fix. Added tests matching function component syntax for component syntax + added one for hooks --- .../__tests__/ESLintRulesOfHooks-test.js | 344 ++++++++++++++++++ .../src/rules/RulesOfHooks.ts | 12 + 2 files changed, 356 insertions(+) diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js index 05bdb1e71ed..3d60a36824d 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js @@ -585,6 +585,29 @@ const allTests = { code: normalizeIndent` // Valid: useEffectEvent can be called in custom effect hooks configured via ESLint settings function MyComponent({ theme }) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useMyEffect(() => { + onClick(); + }); + useServerEffect(() => { + onClick(); + }); + } + `, + settings: { + 'react-hooks': { + additionalEffectHooks: '(useMyEffect|useServerEffect)', + }, + }, + }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid: useEffectEvent can be called in custom effect hooks configured via ESLint settings + component MyComponent(theme: any) { const onClick = useEffectEvent(() => { showNotification(theme); }); @@ -618,6 +641,24 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be called in a useEffect. + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useEffect(() => { + onClick(); + }); + React.useEffect(() => { + onClick(); + }); + } + `, + }, { code: normalizeIndent` // Valid because functions created with useEffectEvent can be passed by reference in useEffect @@ -644,6 +685,34 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be passed by reference in useEffect + // and useEffectEvent. + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + const onClick2 = useEffectEvent(() => { + debounce(onClick); + debounce(() => onClick()); + debounce(() => { onClick() }); + deboucne(() => debounce(onClick)); + }); + useEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + React.useEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + return null; + } + `, + }, { code: normalizeIndent` function MyComponent({ theme }) { @@ -656,6 +725,20 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + component MyComponent(theme: any) { + useEffect(() => { + onClick(); + }); + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + } + `, + }, { code: normalizeIndent` function MyComponent({ theme }) { @@ -673,6 +756,25 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + component MyComponent(theme: any) { + // Can receive arguments + const onEvent = useEffectEvent((text) => { + console.log(text); + }); + + useEffect(() => { + onEvent('Hello world'); + }); + React.useEffect(() => { + onEvent('Hello world'); + }); + } + `, + }, { code: normalizeIndent` // Valid because functions created with useEffectEvent can be called in useLayoutEffect. @@ -689,6 +791,24 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be called in useLayoutEffect. + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useLayoutEffect(() => { + onClick(); + }); + React.useLayoutEffect(() => { + onClick(); + }); + } + `, + }, { code: normalizeIndent` // Valid because functions created with useEffectEvent can be called in useInsertionEffect. @@ -705,6 +825,24 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be called in useInsertionEffect. + component MyComponent(theme) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useInsertionEffect(() => { + onClick(); + }); + React.useInsertionEffect(() => { + onClick(); + }); + } + `, + }, { code: normalizeIndent` // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect @@ -739,6 +877,42 @@ const allTests = { } `, }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect. + // and useInsertionEffect. + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + const onClick2 = useEffectEvent(() => { + debounce(onClick); + debounce(() => onClick()); + debounce(() => { onClick() }); + deboucne(() => debounce(onClick)); + }); + useLayoutEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + React.useLayoutEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + useInsertionEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + React.useInsertionEffect(() => { + let id = setInterval(() => onClick(), 100); + return () => clearInterval(onClick); + }, []); + return null; + } + `, + }, ], invalid: [ { @@ -1525,6 +1699,22 @@ const allTests = { `, errors: [useEffectEventError('onClick', true)], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Invalid: useEffectEvent should not be callable in regular custom hooks without additional configuration + component MyComponent() { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useCustomHook(() => { + onClick(); + }); + } + `, + errors: [useEffectEventError('onClick', true)], + }, { code: normalizeIndent` // Invalid: useEffectEvent should not be callable in hooks not matching the settings regex @@ -1544,6 +1734,27 @@ const allTests = { }, errors: [useEffectEventError('onClick', true)], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Invalid: useEffectEvent should not be callable in hooks not matching the settings regex + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + useWrongHook(() => { + onClick(); + }); + } + `, + settings: { + 'react-hooks': { + additionalEffectHooks: 'useMyEffect', + }, + }, + errors: [useEffectEventError('onClick', true)], + }, { code: normalizeIndent` function MyComponent({ theme }) { @@ -1555,6 +1766,19 @@ const allTests = { `, errors: [useEffectEventError('onClick', false)], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + return <Child onClick={onClick}></Child>; + } + `, + errors: [useEffectEventError('onClick', false)], + }, { code: normalizeIndent` // Invalid because useEffectEvent is being passed down @@ -1566,6 +1790,19 @@ const allTests = { `, errors: [{...useEffectEventError(null, false), line: 4}], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Invalid because useEffectEvent is being passed down + component MyComponent(theme: any) { + return <Child onClick={useEffectEvent(() => { + showNotification(theme); + })} />; + } + `, + errors: [{...useEffectEventError(null, false), line: 5}], + }, { code: normalizeIndent` // This should error even though it shares an identifier name with the below @@ -1601,6 +1838,43 @@ const allTests = { {...useEffectEventError('onClick', true), line: 15}, ], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // This should error even though it shares an identifier name with the below + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme) + }); + return <Child onClick={onClick} /> + } + + // The useEffectEvent function shares an identifier name with the above + component MyOtherComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme) + }); + return <Child onClick={() => onClick()} /> + } + + // The useEffectEvent function shares an identifier name with the above + component MyLastComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme) + }); + useEffect(() => { + onClick(); // No error here, errors on all other uses + onClick; + }) + return <Child /> + } + `, + errors: [ + {...useEffectEventError('onClick', false), line: 8}, + {...useEffectEventError('onClick', true), line: 16}, + ], + }, { code: normalizeIndent` const MyComponent = ({ theme }) => { @@ -1625,6 +1899,21 @@ const allTests = { `, errors: [{...useEffectEventError('onClick', false), line: 7}], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Invalid because onClick is being aliased to foo but not invoked + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + let foo = onClick; + return <Bar onClick={foo} /> + } + `, + errors: [{...useEffectEventError('onClick', false), line: 8}], + }, { code: normalizeIndent` // Should error because it's being passed down to JSX, although it's been referenced once @@ -1641,6 +1930,24 @@ const allTests = { `, errors: [useEffectEventError('onClick', false)], }, + { + syntax: 'flow', + code: normalizeIndent` + // Component syntax version + // Should error because it's being passed down to JSX, although it's been referenced once + // in an effect + component MyComponent(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(them); + }); + useEffect(() => { + setTimeout(onClick, 100); + }); + return <Child onClick={onClick} /> + } + `, + errors: [useEffectEventError('onClick', false)], + }, { code: normalizeIndent` // Invalid because functions created with useEffectEvent cannot be called in arbitrary closures. @@ -1676,6 +1983,43 @@ const allTests = { `It cannot be assigned to a variable or passed down.`, ], }, + { + syntax: 'flow', + code: normalizeIndent` + // Hook syntax version + // Invalid because functions created with useEffectEvent cannot be called in arbitrary closures. + hook useMyHook(theme: any) { + const onClick = useEffectEvent(() => { + showNotification(theme); + }); + // error message 1 + const onClick2 = () => { onClick() }; + // error message 2 + const onClick3 = useCallback(() => onClick(), []); + // error message 3 + const onClick4 = onClick; + return <> + {/** error message 4 */} + <Child onClick={onClick}></Child> + <Child onClick={onClick2}></Child> + <Child onClick={onClick3}></Child> + </>; + } + `, + // Explicitly test error messages here for various cases + errors: [ + `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` + + 'Effects and Effect Events in the same component.', + `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` + + 'Effects and Effect Events in the same component.', + `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` + + `Effects and Effect Events in the same component. ` + + `It cannot be assigned to a variable or passed down.`, + `\`onClick\` is a function created with React Hook "useEffectEvent", and can only be called from ` + + `Effects and Effect Events in the same component. ` + + `It cannot be assigned to a variable or passed down.`, + ], + }, ], }; diff --git a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts index 4e49e96bfe6..ca82c99e2f5 100644 --- a/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts +++ b/packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts @@ -833,6 +833,18 @@ const rule = { recordAllUseEffectEventFunctions(getScope(node)); } }, + + // @ts-expect-error parser-hermes produces these node types + ComponentDeclaration(node) { + // component MyComponent() { const onClick = useEffectEvent(...) } + recordAllUseEffectEventFunctions(getScope(node)); + }, + + // @ts-expect-error parser-hermes produces these node types + HookDeclaration(node) { + // hook useMyHook() { const onClick = useEffectEvent(...) } + recordAllUseEffectEventFunctions(getScope(node)); + }, }; }, } satisfies Rule.RuleModule; From 986323f8c65927490036183357d644974a14b8a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 4 Nov 2025 22:11:33 -0500 Subject: [PATCH 159/276] [Fiber] SuspenseList with "hidden" tail row should "catch" suspense (#35042) Normally if you suspend in a SuspenseList row above a Suspense boundary in that row, it'll suspend the parent. Which can itself delay the commit or resuspend a parent boundary. That's because SuspenseList mostly just coordinates the state of the inner boundaries and isn't a boundary itself. However, for tail "hidden" and "collapsed" this is not quite the case because the rows themselves can avoid being rendered. In the case of "collapsed" we require at least one Suspense boundary above to have successfully rendered before committing the list because the idea of this mode is that you should at least always show some indicator that things are still loading. Since we'd never try the next one after that at all, this just works. Expect there was an unrelated bug that meant that "suspend with delay" on a Retry didn't suspend the commit. This caused a scenario were it'd allow a commit proceed when it shouldn't. So I fixed that too. The counter intuitive thing here is that we won't actually show a previous completed row if the loading state of the next row is still loading. For tail "hidden" it's a little different because we don't actually require any loading indicator at all to be shown while it's loading. If we attempt a row and it suspends, we can just hide it (and the rest) and move to commit. Therefore this implements a path where if all the rest of the tail are new mounts (we wouldn't be required to unmount any existing boundaries) then we can treat the SuspenseList boundary itself as "catching" the suspense. This is more coherent semantics since any future row that we didn't attempt also wouldn't resuspend the parent. This allows simple cases like `<SuspenseList>{list}</SuspenseList>` to stream in each row without any indicator and no need for Suspense boundaries. --- .../src/ReactFiberBeginWork.js | 15 ++ .../src/ReactFiberCompleteWork.js | 36 ++- .../src/ReactFiberSuspenseContext.js | 36 ++- .../react-reconciler/src/ReactFiberThrow.js | 11 +- .../src/ReactFiberUnwindWork.js | 28 ++- .../src/ReactFiberWorkLoop.js | 2 +- .../src/__tests__/ReactSuspenseList-test.js | 221 ++++++++++++++++++ 7 files changed, 337 insertions(+), 12 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index 33fadfd5396..25918e8b387 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -3397,6 +3397,13 @@ function updateSuspenseListComponent( let suspenseContext: SuspenseContext = suspenseStackCursor.current; + if (workInProgress.flags & DidCapture) { + // This is the second pass after having suspended in a row. Proceed directly + // to the complete phase. + pushSuspenseListContext(workInProgress, suspenseContext); + return null; + } + const shouldForceFallback = hasSuspenseListContext( suspenseContext, (ForceSuspenseFallback: SuspenseContext), @@ -4011,6 +4018,14 @@ function attemptEarlyBailoutIfNoScheduledUpdate( break; } case SuspenseListComponent: { + if (workInProgress.flags & DidCapture) { + // Second pass caught. + return updateSuspenseListComponent( + current, + workInProgress, + renderLanes, + ); + } const didSuspendBefore = (current.flags & DidCapture) !== NoFlags; let hasChildWork = includesSomeLane( diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js index 0b1f1e4366e..dab1b2272bd 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js @@ -138,6 +138,7 @@ import { popSuspenseListContext, popSuspenseHandler, pushSuspenseListContext, + pushSuspenseListCatch, setShallowSuspenseListContext, ForceSuspenseFallback, setDefaultShallowSuspenseListContext, @@ -765,6 +766,17 @@ function cutOffTailIfNeeded( } } +function isOnlyNewMounts(tail: Fiber): boolean { + let fiber: null | Fiber = tail; + while (fiber !== null) { + if (fiber.alternate !== null) { + return false; + } + fiber = fiber.sibling; + } + return true; +} + function bubbleProperties(completedWork: Fiber) { const didBailout = completedWork.alternate !== null && @@ -1855,7 +1867,10 @@ function completeWork( if (renderState.tail !== null) { // We still have tail rows to render. // Pop a row. + // TODO: Consider storing the first of the new mount tail in the state so + // that we don't have to recompute this for every row in the list. const next = renderState.tail; + const onlyNewMounts = isOnlyNewMounts(next); renderState.rendering = next; renderState.tail = next.sibling; renderState.renderingStartTime = now(); @@ -1874,7 +1889,26 @@ function completeWork( suspenseContext = setDefaultShallowSuspenseListContext(suspenseContext); } - pushSuspenseListContext(workInProgress, suspenseContext); + if ( + renderState.tailMode === 'visible' || + renderState.tailMode === 'collapsed' || + !onlyNewMounts || + // TODO: While hydrating, we still let it suspend the parent. Tail mode hidden has broken + // hydration anyway right now but this preserves the previous semantics out of caution. + // Once proper hydration is implemented, this special case should be removed as it should + // never be needed. + getIsHydrating() + ) { + pushSuspenseListContext(workInProgress, suspenseContext); + } else { + // If we are rendering in 'hidden' (default) tail mode, then we if we suspend in the + // tail itself, we can delete it rather than suspend the parent. So we act as a catch in that + // case. For 'collapsed' we need to render at least one in suspended state, after which we'll + // have cut off the rest to never attempt it so it never hits this case. + // If this is an updated node, we cannot delete it from the tail so it's effectively visible. + // As a consequence, if it resuspends it actually suspends the parent by taking the other path. + pushSuspenseListCatch(workInProgress, suspenseContext); + } // Do a pass over the next row. if (getIsHydrating()) { // Re-apply tree fork since we popped the tree fork context in the beginning of this function. diff --git a/packages/react-reconciler/src/ReactFiberSuspenseContext.js b/packages/react-reconciler/src/ReactFiberSuspenseContext.js index 3177b9d1b35..aec47af4656 100644 --- a/packages/react-reconciler/src/ReactFiberSuspenseContext.js +++ b/packages/react-reconciler/src/ReactFiberSuspenseContext.js @@ -48,9 +48,10 @@ export function pushPrimaryTreeSuspenseHandler(handler: Fiber): void { // Shallow Suspense context fields, like ForceSuspenseFallback, should only be // propagated a single level. For example, when ForceSuspenseFallback is set, // it should only force the nearest Suspense boundary into fallback mode. - pushSuspenseListContext( - handler, + push( + suspenseStackCursor, setDefaultShallowSuspenseListContext(suspenseStackCursor.current), + handler, ); // Experimental feature: Some Suspense boundaries are marked as having an @@ -113,7 +114,7 @@ export function pushDehydratedActivitySuspenseHandler(fiber: Fiber): void { // Reuse the current value on the stack. // TODO: We can avoid needing to push here by by forking popSuspenseHandler // into separate functions for Activity, Suspense and Offscreen. - pushSuspenseListContext(fiber, suspenseStackCursor.current); + push(suspenseStackCursor, suspenseStackCursor.current, fiber); push(suspenseHandlerStackCursor, fiber, fiber); if (shellBoundary === null) { // We can contain any suspense inside the Activity boundary. @@ -127,7 +128,7 @@ export function pushOffscreenSuspenseHandler(fiber: Fiber): void { // Reuse the current value on the stack. // TODO: We can avoid needing to push here by by forking popSuspenseHandler // into separate functions for Activity, Suspense and Offscreen. - pushSuspenseListContext(fiber, suspenseStackCursor.current); + push(suspenseStackCursor, suspenseStackCursor.current, fiber); push(suspenseHandlerStackCursor, fiber, fiber); if (shellBoundary === null) { // We're rendering hidden content. If it suspends, we can handle it by @@ -141,7 +142,7 @@ export function pushOffscreenSuspenseHandler(fiber: Fiber): void { } export function reuseSuspenseHandlerOnStack(fiber: Fiber) { - pushSuspenseListContext(fiber, suspenseStackCursor.current); + push(suspenseStackCursor, suspenseStackCursor.current, fiber); push(suspenseHandlerStackCursor, getSuspenseHandler(), fiber); } @@ -155,7 +156,7 @@ export function popSuspenseHandler(fiber: Fiber): void { // Popping back into the shell. shellBoundary = null; } - popSuspenseListContext(fiber); + pop(suspenseStackCursor, fiber); } // SuspenseList context @@ -201,9 +202,32 @@ export function pushSuspenseListContext( fiber: Fiber, newContext: SuspenseContext, ): void { + // Push the current handler in this case since we're not catching at the SuspenseList + // for typical rows. + const handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, fiber); + push(suspenseStackCursor, newContext, fiber); +} + +export function pushSuspenseListCatch( + fiber: Fiber, + newContext: SuspenseContext, +): void { + // In this case we do want to handle catching suspending on the actual boundary itself. + // This is used for rows that are allowed to be hidden anyway. + push(suspenseHandlerStackCursor, fiber, fiber); push(suspenseStackCursor, newContext, fiber); + if (shellBoundary === null) { + // We can contain the effects to hiding the current row. + shellBoundary = fiber; + } } export function popSuspenseListContext(fiber: Fiber): void { pop(suspenseStackCursor, fiber); + pop(suspenseHandlerStackCursor, fiber); + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } diff --git a/packages/react-reconciler/src/ReactFiberThrow.js b/packages/react-reconciler/src/ReactFiberThrow.js index 92540176fe8..8ff61b02697 100644 --- a/packages/react-reconciler/src/ReactFiberThrow.js +++ b/packages/react-reconciler/src/ReactFiberThrow.js @@ -27,6 +27,7 @@ import { ActivityComponent, SuspenseComponent, OffscreenComponent, + SuspenseListComponent, } from './ReactWorkTags'; import { DidCapture, @@ -400,7 +401,8 @@ function throwException( if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case ActivityComponent: - case SuspenseComponent: { + case SuspenseComponent: + case SuspenseListComponent: { // If this suspense/activity boundary is not already showing a fallback, mark // the in-progress render as suspended. We try to perform this logic // as soon as soon as possible during the render phase, so the work @@ -561,6 +563,13 @@ function throwException( // Instead of surfacing the error, find the nearest Suspense boundary // and render it again without hydration. if (hydrationBoundary !== null) { + if (__DEV__) { + if (hydrationBoundary.tag === SuspenseListComponent) { + console.error( + 'SuspenseList should never catch while hydrating. This is a bug in React.', + ); + } + } if ((hydrationBoundary.flags & ShouldCapture) === NoFlags) { // Set a flag to indicate that we should try rendering the normal // children again, not the fallback. diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.js b/packages/react-reconciler/src/ReactFiberUnwindWork.js index efe08a43ac7..b2954c41f5a 100644 --- a/packages/react-reconciler/src/ReactFiberUnwindWork.js +++ b/packages/react-reconciler/src/ReactFiberUnwindWork.js @@ -11,7 +11,10 @@ import type {ReactContext} from 'shared/ReactTypes'; import type {Fiber, FiberRoot} from './ReactInternalTypes'; import type {Lanes} from './ReactFiberLane'; import type {ActivityState} from './ReactFiberActivityComponent'; -import type {SuspenseState} from './ReactFiberSuspenseComponent'; +import type { + SuspenseState, + SuspenseListRenderState, +} from './ReactFiberSuspenseComponent'; import type {Cache} from './ReactFiberCacheComponent'; import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent'; @@ -31,7 +34,7 @@ import { CacheComponent, TracingMarkerComponent, } from './ReactWorkTags'; -import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags'; +import {DidCapture, NoFlags, ShouldCapture, Update} from './ReactFiberFlags'; import {NoMode, ProfileMode} from './ReactTypeOfMode'; import { enableProfilerTimer, @@ -180,8 +183,27 @@ function unwindWork( } case SuspenseListComponent: { popSuspenseListContext(workInProgress); - // SuspenseList doesn't actually catch anything. It should've been + // SuspenseList doesn't normally catch anything. It should've been // caught by a nested boundary. If not, it should bubble through. + const flags = workInProgress.flags; + if (flags & ShouldCapture) { + workInProgress.flags = (flags & ~ShouldCapture) | DidCapture; + // If we caught something on the SuspenseList itself it's because + // we want to ignore something. Re-enter the cycle and handle it + // in the complete phase. + const renderState: null | SuspenseListRenderState = + workInProgress.memoizedState; + if (renderState !== null) { + // Cut off any remaining tail work and don't commit the rendering one. + // This assumes that we have already confirmed that none of these are + // already mounted. + renderState.rendering = null; + renderState.tail = null; + } + // Schedule the commit phase to attach retry listeners. + workInProgress.flags |= Update; + return workInProgress; + } return null; } case HostPortal: diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index 3de2ab6b16f..f7200458be1 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -1355,7 +1355,7 @@ function finishConcurrentRender( throw new Error('Root did not complete. This is a bug in React.'); } case RootSuspendedWithDelay: { - if (!includesOnlyTransitions(lanes)) { + if (!includesOnlyTransitions(lanes) && !includesOnlyRetries(lanes)) { // Commit the placeholder. break; } diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js index ba5b668652f..c7d4de1421e 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js @@ -2346,6 +2346,227 @@ describe('ReactSuspenseList', () => { ); }); + // @gate enableSuspenseList + it('reveals "hidden" rows one by one without suspense boundaries', async () => { + const A = createAsyncText('A'); + const B = createAsyncText('B'); + const C = createAsyncText('C'); + + function Foo() { + return ( + <SuspenseList revealOrder="forwards" tail="hidden"> + <div> + <A /> + </div> + <B /> + <C /> + </SuspenseList> + ); + } + + ReactNoop.render( + <Suspense fallback="Loading root"> + <Foo /> + </Suspense>, + ); + + await waitForAll(['Suspend! [A]']); + + // We can commit without any rows at all leaving empty. + expect(ReactNoop).toMatchRenderedOutput(null); + + await act(() => A.resolve()); + assertLog(['A', 'Suspend! [B]']); + + expect(ReactNoop).toMatchRenderedOutput( + <div> + <span>A</span> + </div>, + ); + + await act(() => B.resolve()); + assertLog(['B', 'Suspend! [C]']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <div> + <span>A</span> + </div> + <span>B</span> + </>, + ); + + await act(() => C.resolve()); + assertLog(['C']); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <div> + <span>A</span> + </div> + <span>B</span> + <span>C</span> + </>, + ); + }); + + // @gate enableSuspenseList + it('preserves already mounted rows when a new hidden on is inserted in the tail', async () => { + const B = createAsyncText('B'); + const C = createAsyncText('C'); + + let count = 0; + function MountCount({children}) { + // This component should only mount once. + React.useLayoutEffect(() => { + count++; + }, []); + return children; + } + + function Foo({insert}) { + return ( + <SuspenseList + revealOrder="forwards" + tail={insert ? 'hidden' : 'visible'}> + <Text text="A" /> + {insert ? <B /> : null} + <MountCount> + <Suspense fallback={<Text text="Loading C" />}> + <C /> + </Suspense> + </MountCount> + </SuspenseList> + ); + } + + await act(() => { + ReactNoop.render(<Foo insert={false} />); + }); + assertLog(['A', 'Suspend! [C]', 'Loading C', 'Suspend! [C]']); + + expect(count).toBe(1); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>Loading C</span> + </>, + ); + + await act(() => { + ReactNoop.render(<Foo insert={true} />); + }); + + assertLog(['A', 'Suspend! [B]', 'A', 'Suspend! [B]']); + + expect(count).toBe(1); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>Loading C</span> + </>, + ); + + await act(async () => { + await B.resolve(); + await C.resolve(); + }); + + assertLog(['A', 'B', 'C']); + + expect(count).toBe(1); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>B</span> + <span>C</span> + </>, + ); + }); + + // @gate enableSuspenseList + it('reveals "collapsed" rows one by one after the first without boundaries', async () => { + const A = createAsyncText('A'); + const B = createAsyncText('B'); + const C = createAsyncText('C'); + + function Foo() { + return ( + <SuspenseList revealOrder="forwards" tail="collapsed"> + <A /> + <Suspense fallback={<Text text="Loading B" />}> + <B /> + </Suspense> + <C /> + </SuspenseList> + ); + } + + await act(async () => { + ReactNoop.render( + <Suspense fallback="Loading root"> + <Foo /> + </Suspense>, + ); + await waitForAll(['Suspend! [A]', 'Suspend! [A]']); + }); + + // The root is still blocked on the first row. + expect(ReactNoop).toMatchRenderedOutput('Loading root'); + + await A.resolve(); + + await waitForAll(['A', 'Suspend! [B]', 'Loading B']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + // Because we have a Suspense boundary that can commit we can now unblock the rest. + // If it wasn't a boundary then we couldn't make progress because it would commit + // without any loading state. + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>Loading B</span> + </>, + ); + + await act(() => B.resolve()); + assertLog(['B', 'Suspend! [C]', 'B', 'Suspend! [C]']); + + // Incremental loading is suspended. + jest.advanceTimersByTime(500); + + // Surprisingly unsuspending B actually causes the parent to resuspend + // because C is now unblocked which resuspends the parent. Preventing the + // Retry from committing. That's because we don't want to commit into a + // state that doesn't have any loading indicators at all. That's what + // "collapsed" is for. To ensure there's always a loading indicator. + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>Loading B</span> + </>, + ); + + await act(() => C.resolve()); + assertLog(['B', 'C']); + + expect(ReactNoop).toMatchRenderedOutput( + <> + <span>A</span> + <span>B</span> + <span>C</span> + </>, + ); + }); + // @gate enableSuspenseList it('eventually resolves a nested forwards suspense list', async () => { const B = createAsyncText('B'); From c308cb590598b61a7fc1766e15edf454d758d226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Tue, 4 Nov 2025 23:23:25 -0500 Subject: [PATCH 160/276] Disable enablePostpone flag in experimental (#31042) I don't think we're ready to land this yet since we're using it to run other experiments and our tests. I'm opening this PR to indicate intent to disable and to ensure tests in other combinations still work. Such as enableHalt without enablePostpone. I think we'll also need to rewrite some tests that depend on enablePostpone to preserve some coverage. The conclusion after this experiment is that try/catch around these are too likely to block these signals and consider them error. Throwing works for Hooks and `use()` because the lint rule can ensure that they're not wrapped in try/catch. Throwing in arbitrary functions not quite ecosystem compatible. It's also why there's `use()` and not just throwing a Promise. This might also affect the Catch proposal. The "prerender" for SSR that's supporting "Partial Prerendering" is still there. This just disables the `React.postpone()` API for creating the holes. --- .../src/__tests__/ReactDOMFizzStatic-test.js | 66 ------------------- .../react/index.experimental.development.js | 1 - packages/react/index.experimental.js | 1 - packages/react/src/ReactClient.js | 2 - .../ReactServer.experimental.development.js | 2 - .../react/src/ReactServer.experimental.js | 2 - packages/shared/ReactFeatureFlags.js | 2 +- 7 files changed, 1 insertion(+), 75 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js index 65012023420..a4ac87c92c4 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js @@ -400,72 +400,6 @@ describe('ReactDOMFizzStatic', () => { ); }); - // @gate enablePostpone - it('does not fatally error when aborting with a postpone during a prerender', async () => { - let postponedValue; - try { - React.unstable_postpone('aborting with postpone'); - } catch (e) { - postponedValue = e; - } - - const controller = new AbortController(); - const infinitePromise = new Promise(() => {}); - function App() { - React.use(infinitePromise); - return <div>aborted</div>; - } - - const errors = []; - const pendingResult = ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - onError: error => { - errors.push(error); - }, - signal: controller.signal, - }); - pendingResult.catch(() => {}); - - await Promise.resolve(); - controller.abort(postponedValue); - - const result = await pendingResult; - - await act(async () => { - result.prelude.pipe(writable); - }); - expect(getVisibleChildren(container)).toEqual(undefined); - expect(errors).toEqual([]); - }); - - // @gate enablePostpone - it('does not fatally error when aborting with a postpone during a prerender from within', async () => { - let postponedValue; - try { - React.unstable_postpone('aborting with postpone'); - } catch (e) { - postponedValue = e; - } - - const controller = new AbortController(); - function App() { - controller.abort(postponedValue); - return <div>aborted</div>; - } - - const errors = []; - const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - onError: error => { - errors.push(error); - }, - signal: controller.signal, - }); - await act(async () => { - result.prelude.pipe(writable); - }); - expect(getVisibleChildren(container)).toEqual(undefined); - expect(errors).toEqual([]); - }); - // @gate enableHalt it('will halt a prerender when aborting with an error during a render', async () => { const controller = new AbortController(); diff --git a/packages/react/index.experimental.development.js b/packages/react/index.experimental.development.js index b2374493073..9b0e301a8c9 100644 --- a/packages/react/index.experimental.development.js +++ b/packages/react/index.experimental.development.js @@ -30,7 +30,6 @@ export { cacheSignal, startTransition, Activity, - unstable_postpone, unstable_getCacheForType, unstable_SuspenseList, ViewTransition, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index 37800ede07a..0145e9137e9 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -31,7 +31,6 @@ export { startTransition, Activity, Activity as unstable_Activity, - unstable_postpone, unstable_getCacheForType, unstable_SuspenseList, ViewTransition, diff --git a/packages/react/src/ReactClient.js b/packages/react/src/ReactClient.js index 9f7c5dce36d..d881030b7d0 100644 --- a/packages/react/src/ReactClient.js +++ b/packages/react/src/ReactClient.js @@ -34,7 +34,6 @@ import {lazy} from './ReactLazy'; import {forwardRef} from './ReactForwardRef'; import {memo} from './ReactMemo'; import {cache, cacheSignal} from './ReactCacheClient'; -import {postpone} from './ReactPostpone'; import { getCacheForType, useCallback, @@ -84,7 +83,6 @@ export { memo, cache, cacheSignal, - postpone as unstable_postpone, useCallback, useContext, useEffect, diff --git a/packages/react/src/ReactServer.experimental.development.js b/packages/react/src/ReactServer.experimental.development.js index df8b3d79b3a..10d0123843d 100644 --- a/packages/react/src/ReactServer.experimental.development.js +++ b/packages/react/src/ReactServer.experimental.development.js @@ -38,7 +38,6 @@ import {lazy} from './ReactLazy'; import {memo} from './ReactMemo'; import {cache, cacheSignal} from './ReactCacheServer'; import {startTransition} from './ReactStartTransition'; -import {postpone} from './ReactPostpone'; import {captureOwnerStack} from './ReactOwnerStack'; import version from 'shared/ReactVersion'; @@ -76,7 +75,6 @@ export { cacheSignal, startTransition, getCacheForType as unstable_getCacheForType, - postpone as unstable_postpone, useId, useCallback, useDebugValue, diff --git a/packages/react/src/ReactServer.experimental.js b/packages/react/src/ReactServer.experimental.js index 06c0a9bf896..9fc26341314 100644 --- a/packages/react/src/ReactServer.experimental.js +++ b/packages/react/src/ReactServer.experimental.js @@ -38,7 +38,6 @@ import {lazy} from './ReactLazy'; import {memo} from './ReactMemo'; import {cache, cacheSignal} from './ReactCacheServer'; import {startTransition} from './ReactStartTransition'; -import {postpone} from './ReactPostpone'; import version from 'shared/ReactVersion'; const Children = { @@ -75,7 +74,6 @@ export { cacheSignal, startTransition, getCacheForType as unstable_getCacheForType, - postpone as unstable_postpone, useId, useCallback, useDebugValue, diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 6d45a30718a..1881d3fc289 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -80,7 +80,7 @@ export const enableAsyncIterableChildren = __EXPERIMENTAL__; export const enableTaint = __EXPERIMENTAL__; -export const enablePostpone = __EXPERIMENTAL__; +export const enablePostpone: boolean = false; // Probably won't ship in this form. export const enableHalt: boolean = true; From dd048c3b2d8b5760dec718fb0926ca0b68660922 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu> Date: Wed, 5 Nov 2025 00:05:59 -0500 Subject: [PATCH 161/276] Clean up enablePostpone Experiment (#35048) We're not shipping this and it's a lot of code to maintain that is blocking my refactor of Fizz for SuspenseList. --- .../react-client/src/ReactFlightClient.js | 105 -- .../ReactDOMFizzDeferredValue-test.js | 37 - .../src/__tests__/ReactDOMFizzServer-test.js | 1569 +---------------- .../ReactDOMFizzServerBrowser-test.js | 41 - .../src/__tests__/ReactDOMFizzStatic-test.js | 40 +- .../ReactDOMFizzStaticBrowser-test.js | 1230 +------------ .../__tests__/ReactDOMFizzStaticFloat-test.js | 283 --- .../__tests__/ReactDOMFizzStaticNode-test.js | 28 +- .../src/server/ReactDOMFizzServerBrowser.js | 10 +- .../src/server/ReactDOMFizzServerBun.js | 4 +- .../src/server/ReactDOMFizzServerEdge.js | 10 +- .../src/server/ReactDOMFizzServerNode.js | 7 - .../src/server/ReactDOMFizzStaticBrowser.js | 29 +- .../src/server/ReactDOMFizzStaticEdge.js | 29 +- .../src/server/ReactDOMFizzStaticNode.js | 48 +- .../react-markup/src/ReactMarkupClient.js | 1 - .../react-markup/src/ReactMarkupServer.js | 2 - .../src/ReactNoopFlightServer.js | 2 - .../src/ReactFiberBeginWork.js | 38 +- .../src/ReactFiberCommitWork.js | 4 +- .../react-reconciler/src/ReactFiberThrow.js | 6 - .../src/server/ReactFlightDOMServerNode.js | 4 - .../src/server/ReactFlightDOMServerBrowser.js | 3 - .../src/server/ReactFlightDOMServerEdge.js | 3 - .../src/server/ReactFlightDOMServerNode.js | 6 - .../src/server/ReactFlightDOMServerBrowser.js | 3 - .../src/server/ReactFlightDOMServerEdge.js | 3 - .../src/server/ReactFlightDOMServerNode.js | 6 - .../src/__tests__/ReactFlightDOM-test.js | 89 +- .../__tests__/ReactFlightDOMBrowser-test.js | 116 +- .../src/__tests__/ReactFlightDOMEdge-test.js | 14 +- .../src/__tests__/ReactFlightDOMNode-test.js | 4 +- .../src/server/ReactFlightDOMServerBrowser.js | 3 - .../src/server/ReactFlightDOMServerEdge.js | 3 - .../src/server/ReactFlightDOMServerNode.js | 6 - packages/react-server/README.md | 2 - packages/react-server/src/ReactFizzServer.js | 358 +--- .../react-server/src/ReactFlightServer.js | 151 +- packages/react/src/ReactPostpone.js | 23 - packages/shared/ReactFeatureFlags.js | 2 - packages/shared/ReactSymbols.js | 2 - .../forks/ReactFeatureFlags.native-fb.js | 1 - .../forks/ReactFeatureFlags.native-oss.js | 1 - .../forks/ReactFeatureFlags.test-renderer.js | 1 - ...actFeatureFlags.test-renderer.native-fb.js | 1 - .../ReactFeatureFlags.test-renderer.www.js | 1 - .../shared/forks/ReactFeatureFlags.www.js | 2 - 47 files changed, 216 insertions(+), 4115 deletions(-) delete mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzStaticFloat-test.js delete mode 100644 packages/react/src/ReactPostpone.js diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index f8cc0a80f39..7b635636157 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -39,12 +39,9 @@ import type { EncodeFormActionCallback, } from './ReactFlightReplyClient'; -import type {Postpone} from 'react/src/ReactPostpone'; - import type {TemporaryReferenceSet} from './ReactFlightTemporaryReferences'; import { - enablePostpone, enableProfilerTimer, enableComponentPerformanceTrack, enableAsyncDebugInfo, @@ -89,7 +86,6 @@ import { import { REACT_LAZY_TYPE, REACT_ELEMENT_TYPE, - REACT_POSTPONE_TYPE, ASYNC_ITERATOR, REACT_FRAGMENT_TYPE, } from 'shared/ReactSymbols'; @@ -3460,88 +3456,6 @@ function resolveErrorDev( return error; } -function resolvePostponeProd( - response: Response, - id: number, - streamState: StreamState, -): void { - if (__DEV__) { - // These errors should never make it into a build so we don't need to encode them in codes.json - // eslint-disable-next-line react-internal/prod-error-codes - throw new Error( - 'resolvePostponeProd should never be called in development mode. Use resolvePostponeDev instead. This is a bug in React.', - ); - } - const error = new Error( - 'A Server Component was postponed. The reason is omitted in production' + - ' builds to avoid leaking sensitive details.', - ); - const postponeInstance: Postpone = (error: any); - postponeInstance.$$typeof = REACT_POSTPONE_TYPE; - postponeInstance.stack = 'Error: ' + error.message; - const chunks = response._chunks; - const chunk = chunks.get(id); - if (!chunk) { - const newChunk: ErroredChunk<any> = createErrorChunk( - response, - postponeInstance, - ); - chunks.set(id, newChunk); - } else { - triggerErrorOnChunk(response, chunk, postponeInstance); - } -} - -function resolvePostponeDev( - response: Response, - id: number, - reason: string, - stack: ReactStackTrace, - env: string, - streamState: StreamState, -): void { - if (!__DEV__) { - // These errors should never make it into a build so we don't need to encode them in codes.json - // eslint-disable-next-line react-internal/prod-error-codes - throw new Error( - 'resolvePostponeDev should never be called in production mode. Use resolvePostponeProd instead. This is a bug in React.', - ); - } - let postponeInstance: Postpone; - const callStack = buildFakeCallStack( - response, - stack, - env, - false, - // $FlowFixMe[incompatible-use] - Error.bind(null, reason || ''), - ); - const rootTask = response._debugRootTask; - if (rootTask != null) { - postponeInstance = rootTask.run(callStack); - } else { - postponeInstance = callStack(); - } - postponeInstance.$$typeof = REACT_POSTPONE_TYPE; - const chunks = response._chunks; - const chunk = chunks.get(id); - if (!chunk) { - const newChunk: ErroredChunk<any> = createErrorChunk( - response, - postponeInstance, - ); - if (__DEV__) { - resolveChunkDebugInfo(response, streamState, newChunk); - } - chunks.set(id, newChunk); - } else { - if (__DEV__) { - resolveChunkDebugInfo(response, streamState, chunk); - } - triggerErrorOnChunk(response, chunk, postponeInstance); - } -} - function resolveErrorModel( response: Response, id: number, @@ -4893,25 +4807,6 @@ function processFullStringRow( return; } // Fallthrough - case 80 /* "P" */: { - if (enablePostpone) { - if (__DEV__) { - const postponeInfo = JSON.parse(row); - resolvePostponeDev( - response, - id, - postponeInfo.reason, - postponeInfo.stack, - postponeInfo.env, - streamState, - ); - } else { - resolvePostponeProd(response, id, streamState); - } - return; - } - } - // Fallthrough default: /* """ "{" "[" "t" "f" "n" "0" - "9" */ { if (__DEV__ && row === '') { resolveDebugHalt(response, id); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js index 529e3be3132..805bf89c4f1 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js @@ -90,43 +90,6 @@ describe('ReactDOMFizzForm', () => { expect(container.textContent).toEqual('Final'); }); - // @gate enablePostpone - it( - 'if initial value postpones during hydration, it will switch to the ' + - 'final value instead', - async () => { - function Content() { - const isInitial = useDeferredValue(false, true); - if (isInitial) { - React.unstable_postpone(); - } - return <Text text="Final" />; - } - - function App() { - return ( - <div> - <Suspense fallback={<Text text="Loading..." />}> - <Content /> - </Suspense> - </div> - ); - } - - const stream = await serverAct(() => - ReactDOMServer.renderToReadableStream(<App />), - ); - await readIntoContainer(stream); - expect(container.textContent).toEqual('Loading...'); - - assertLog(['Loading...']); - // After hydration, it's updated to the final value - await act(() => ReactDOMClient.hydrateRoot(container, <App />)); - expect(container.textContent).toEqual('Final'); - assertLog(['Loading...', 'Final']); - }, - ); - it( 'useDeferredValue during hydration has higher priority than remaining ' + 'incremental hydration', diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index b988bd72caf..18cf6124444 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -6665,150 +6665,6 @@ describe('ReactDOMFizzServer', () => { ]); }); - // @gate enablePostpone - it('client renders postponed boundaries without erroring', async () => { - function Postponed({isClient}) { - if (!isClient) { - React.unstable_postpone('testing postpone'); - } - return 'client only'; - } - - function App({isClient}) { - return ( - <div> - <Suspense fallback={'loading...'}> - <Postponed isClient={isClient} /> - </Suspense> - </div> - ); - } - - const errors = []; - - await act(() => { - const {pipe} = renderToPipeableStream(<App isClient={false} />, { - onError(error) { - errors.push(error.message); - }, - }); - pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual(<div>loading...</div>); - - ReactDOMClient.hydrateRoot(container, <App isClient={true} />, { - onRecoverableError(error) { - errors.push(error.message); - }, - }); - await waitForAll([]); - // Postponing should not be logged as a recoverable error since it's intentional. - expect(errors).toEqual([]); - expect(getVisibleChildren(container)).toEqual(<div>client only</div>); - }); - - // @gate enablePostpone - it('errors if trying to postpone outside a Suspense boundary', async () => { - function Postponed() { - React.unstable_postpone('testing postpone'); - return 'client only'; - } - - function App() { - return ( - <div> - <Postponed /> - </div> - ); - } - - const errors = []; - const fatalErrors = []; - const postponed = []; - let written = false; - - const testWritable = new Stream.Writable(); - testWritable._write = (chunk, encoding, next) => { - written = true; - }; - - await act(() => { - const {pipe} = renderToPipeableStream(<App />, { - onPostpone(reason) { - postponed.push(reason); - }, - onError(error) { - errors.push(error.message); - }, - onShellError(error) { - fatalErrors.push(error.message); - }, - }); - pipe(testWritable); - }); - - expect(written).toBe(false); - // Postponing is not logged as an error but as a postponed reason. - expect(errors).toEqual([]); - expect(postponed).toEqual(['testing postpone']); - // However, it does error the shell. - expect(fatalErrors).toEqual(['testing postpone']); - }); - - // @gate enablePostpone - it('can postpone in a fallback', async () => { - function Postponed({isClient}) { - if (!isClient) { - React.unstable_postpone('testing postpone'); - } - return 'loading...'; - } - - const lazyText = React.lazy(async () => { - await 0; // causes the fallback to start work - return {default: 'Hello'}; - }); - - function App({isClient}) { - return ( - <div> - <Suspense fallback="Outer"> - <Suspense fallback={<Postponed isClient={isClient} />}> - {lazyText} - </Suspense> - </Suspense> - </div> - ); - } - - const errors = []; - - await act(() => { - const {pipe} = renderToPipeableStream(<App isClient={false} />, { - onError(error) { - errors.push(error.message); - }, - }); - pipe(writable); - }); - - // TODO: This should actually be fully resolved because the value could eventually - // resolve on the server even though the fallback couldn't so we should have been - // able to render it. - expect(getVisibleChildren(container)).toEqual(<div>Outer</div>); - - ReactDOMClient.hydrateRoot(container, <App isClient={true} />, { - onRecoverableError(error) { - errors.push(error.message); - }, - }); - await waitForAll([]); - // Postponing should not be logged as a recoverable error since it's intentional. - expect(errors).toEqual([]); - expect(getVisibleChildren(container)).toEqual(<div>Hello</div>); - }); - it( 'a transition that flows into a dehydrated boundary should not suspend ' + 'if the boundary is showing a fallback', @@ -6860,37 +6716,63 @@ describe('ReactDOMFizzServer', () => { }, ); - // @gate enablePostpone - it('supports postponing in prerender and resuming later', async () => { + // @gate enableHalt + it('can resume a prerender that was aborted', async () => { + const promise = new Promise(r => {}); + let prerendering = true; - function Postpone() { + + function Wait() { if (prerendering) { - React.unstable_postpone(); + return React.use(promise); + } else { + return 'Hello'; } - return 'Hello'; } function App() { return ( <div> <Suspense fallback="Loading..."> - <Postpone /> + <p> + <span> + <Suspense fallback="Loading again..."> + <Wait /> + </Suspense> + </span> + </p> + <p> + <span> + <Suspense fallback="Loading again too..."> + <Wait /> + </Suspense> + </span> + </p> </Suspense> </div> ); } - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); + const controller = new AbortController(); + const signal = controller.signal; - prerendering = false; + const errors = []; + function onError(error) { + errors.push(error); + } + let pendingPrerender; + await act(() => { + pendingPrerender = ReactDOMFizzStatic.prerenderToNodeStream(<App />, { + signal, + onError, + }); + }); + controller.abort('boom'); - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ); + const prerendered = await pendingPrerender; + + expect(errors).toEqual(['boom', 'boom']); - // Create a separate stream so it doesn't close the writable. I.e. simple concat. const preludeWritable = new Stream.PassThrough(); preludeWritable.setEncoding('utf8'); preludeWritable.on('data', chunk => { @@ -6901,1378 +6783,45 @@ describe('ReactDOMFizzServer', () => { prerendered.prelude.pipe(preludeWritable); }); - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await act(() => { - resumed.pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual(<div>Hello</div>); - }); - - // @gate enablePostpone - it('client renders a component if it errors during resuming', async () => { - let prerendering = true; - let ssr = true; - function PostponeAndError() { - if (prerendering) { - React.unstable_postpone(); - } - if (ssr) { - throw new Error('server error'); - } - return 'Hello'; - } - - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - const lazyPostponeAndError = React.lazy(async () => { - return {default: <PostponeAndError />}; - }); - - function ReplayError() { - if (prerendering) { - return <Postpone />; - } - if (ssr) { - throw new Error('replay error'); - } - return 'Hello'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading1"> - <PostponeAndError /> - </Suspense> - <Suspense fallback="Loading2"> - <Postpone /> - <Suspense fallback="Loading3">{lazyPostponeAndError}</Suspense> - </Suspense> - <Suspense fallback="Loading4"> - <ReplayError /> - </Suspense> - </div> - ); - } - - const prerenderErrors = []; - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream( - <App />, - { - onError(x) { - prerenderErrors.push(x.message); - }, - }, + expect(getVisibleChildren(container)).toEqual( + <div> + <p> + <span>Loading again...</span> + </p> + <p> + <span>Loading again too...</span> + </p> + </div>, ); - expect(prerendered.postponed).not.toBe(null); prerendering = false; - const ssrErrors = []; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( + errors.length = 0; + const resumed = await ReactDOMFizzServer.resumeToPipeableStream( <App />, JSON.parse(JSON.stringify(prerendered.postponed)), { - onError(x) { - ssrErrors.push(x.message); - }, + onError, }, ); - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Loading2'} - {'Loading4'} - </div>, - ); - await act(() => { resumed.pipe(writable); }); - expect(prerenderErrors).toEqual([]); - - expect(ssrErrors).toEqual(['server error', 'server error', 'replay error']); - - // Still loading... - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Hello'} - {'Loading3'} - {'Loading4'} - </div>, - ); - - const recoverableErrors = []; - - ssr = false; - - await clientAct(() => { - ReactDOMClient.hydrateRoot(container, <App />, { - onRecoverableError(x) { - recoverableErrors.push(x.message); - }, - }); - }); - - expect(recoverableErrors).toEqual( - __DEV__ - ? [ - 'Switched to client rendering because the server rendering errored:\n\n' + - 'server error', - 'Switched to client rendering because the server rendering errored:\n\n' + - 'replay error', - 'Switched to client rendering because the server rendering errored:\n\n' + - 'server error', - ] - : [ - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - ], - ); + expect(errors).toEqual([]); expect(getVisibleChildren(container)).toEqual( <div> - {'Hello'} - {'Hello'} - {'Hello'} - {'Hello'} + <p> + <span>Hello</span> + </p> + <p> + <span>Hello</span> + </p> </div>, ); }); - // @gate enablePostpone - it('client renders a component if we abort before resuming', async () => { - let prerendering = true; - let ssr = true; - const promise = new Promise(() => {}); - function PostponeAndSuspend() { - if (prerendering) { - React.unstable_postpone(); - } - if (ssr) { - React.use(promise); - } - return 'Hello'; - } - - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function DelayedBoundary() { - if (!prerendering && ssr) { - // We delay discovery of the boundary so we can abort before finding it. - React.use(promise); - } - return ( - <Suspense fallback="Loading3"> - <Postpone /> - </Suspense> - ); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading1"> - <PostponeAndSuspend /> - </Suspense> - <Suspense fallback="Loading2"> - <Postpone /> - </Suspense> - <Suspense fallback="Not used"> - <DelayedBoundary /> - </Suspense> - </div> - ); - } - - const prerenderErrors = []; - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream( - <App />, - { - onError(x) { - prerenderErrors.push(x.message); - }, - }, - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const ssrErrors = []; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError(x) { - ssrErrors.push(x.message); - }, - }, - ); - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Loading2'} - {'Loading3'} - </div>, - ); - - await act(() => { - resumed.pipe(writable); - }); - - const recoverableErrors = []; - - ssr = false; - - await clientAct(() => { - ReactDOMClient.hydrateRoot(container, <App />, { - onRecoverableError(x) { - recoverableErrors.push(x.message); - }, - }); - }); - - expect(recoverableErrors).toEqual([]); - expect(prerenderErrors).toEqual([]); - expect(ssrErrors).toEqual([]); - - // Still loading... - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {/* - This used to show "Hello" in this slot because the boundary was able to be flushed - early but we now prevent flushing while pendingRootTasks is not zero. This is how Edge - would work anyway because you don't get the stream until the root is unblocked on a resume - so Node now aligns with edge bevavior - {'Hello'} - */} - {'Loading2'} - {'Loading3'} - </div>, - ); - - await clientAct(async () => { - await act(() => { - resumed.abort(new Error('aborted')); - }); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hello'} - {'Hello'} - {'Hello'} - </div>, - ); - - expect(prerenderErrors).toEqual([]); - expect(ssrErrors).toEqual(['aborted', 'aborted']); - expect(recoverableErrors).toEqual( - __DEV__ - ? [ - 'Switched to client rendering because the server rendering aborted due to:\n\n' + - 'aborted', - 'Switched to client rendering because the server rendering aborted due to:\n\n' + - 'aborted', - ] - : [ - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - ], - ); - }); - - // @gate enablePostpone - it('client renders remaining boundaries below the error in shell', async () => { - let prerendering = true; - let ssr = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function ReplayError({children}) { - if (!prerendering && ssr) { - throw new Error('replay error'); - } - return children; - } - - function App() { - return ( - <div> - <div> - <Suspense fallback="Loading1"> - <Postpone /> - </Suspense> - <ReplayError> - <Suspense fallback="Loading2"> - <Postpone /> - </Suspense> - </ReplayError> - <Suspense fallback="Loading3"> - <Postpone /> - </Suspense> - </div> - <Suspense fallback="Not used"> - <div> - <Suspense fallback="Loading4"> - <Postpone /> - </Suspense> - </div> - </Suspense> - <Suspense fallback="Loading5"> - <Postpone /> - <ReplayError> - <Suspense fallback="Loading6"> - <Postpone /> - </Suspense> - </ReplayError> - </Suspense> - </div> - ); - } - - const prerenderErrors = []; - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream( - <App />, - { - onError(x) { - prerenderErrors.push(x.message); - }, - }, - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const ssrErrors = []; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError(x) { - ssrErrors.push(x.message); - }, - }, - ); - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <div> - {'Loading1'} - {'Loading2'} - {'Loading3'} - </div> - <div>{'Loading4'}</div> - {'Loading5'} - </div>, - ); - - await act(() => { - resumed.pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <div> - {'Hello' /* This was matched and completed before the error */} - { - 'Loading2' /* This will be client rendered because its parent errored during replay */ - } - { - 'Hello' /* This should be renderable since we matched which previous sibling errored */ - } - </div> - <div> - { - 'Hello' /* This should be able to resume because it's in a different parent. */ - } - </div> - {'Hello'} - {'Loading6' /* The parent could resolve even if the child didn't */} - </div>, - ); - - const recoverableErrors = []; - - ssr = false; - - await clientAct(() => { - ReactDOMClient.hydrateRoot(container, <App />, { - onRecoverableError(x) { - recoverableErrors.push(x.message); - }, - }); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <div> - {'Hello'} - {'Hello'} - {'Hello'} - </div> - <div>{'Hello'}</div> - {'Hello'} - {'Hello'} - </div>, - ); - - // We should've logged once for each boundary that this affected. - expect(prerenderErrors).toEqual([]); - expect(ssrErrors).toEqual([ - // This error triggered in two replay components. - 'replay error', - 'replay error', - ]); - expect(recoverableErrors).toEqual( - // It surfaced in two different suspense boundaries. - __DEV__ - ? [ - 'Switched to client rendering because the server rendering errored:\n\n' + - 'replay error', - 'Switched to client rendering because the server rendering errored:\n\n' + - 'replay error', - ] - : [ - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - ], - ); - }); - - // @gate enablePostpone - it('can client render a boundary after having already postponed', async () => { - let prerendering = true; - let ssr = true; - - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function ServerError() { - if (ssr) { - throw new Error('server error'); - } - return 'World'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading1"> - <Postpone /> - <ServerError /> - </Suspense> - <Suspense fallback="Loading2"> - <Postpone /> - </Suspense> - </div> - ); - } - - const prerenderErrors = []; - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream( - <App />, - { - onError(x) { - prerenderErrors.push(x.message); - }, - }, - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const ssrErrors = []; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError(x) { - ssrErrors.push(x.message); - }, - }, - ); - - const windowErrors = []; - function globalError(e) { - windowErrors.push(e.message); - } - window.addEventListener('error', globalError); - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(windowErrors).toEqual([]); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Loading2'} - </div>, - ); - - await act(() => { - resumed.pipe(writable); - }); - - expect(prerenderErrors).toEqual(['server error']); - - // Since this errored, we shouldn't have to replay it. - expect(ssrErrors).toEqual([]); - - expect(windowErrors).toEqual([]); - - // Still loading... - expect(getVisibleChildren(container)).toEqual( - <div> - {'Loading1'} - {'Hello'} - </div>, - ); - - const recoverableErrors = []; - - ssr = false; - - await clientAct(() => { - ReactDOMClient.hydrateRoot(container, <App />, { - onRecoverableError(x) { - recoverableErrors.push(x.message); - }, - }); - }); - - expect(recoverableErrors).toEqual( - __DEV__ - ? [ - 'Switched to client rendering because the server rendering errored:\n\n' + - 'server error', - ] - : [ - 'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.', - ], - ); - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hello'} - {'World'} - {'Hello'} - </div>, - ); - - expect(windowErrors).toEqual([]); - - window.removeEventListener('error', globalError); - }); - - // @gate enablePostpone - it('can postpone in fallback', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - let resolve; - const promise = new Promise(r => (resolve = r)); - - function PostponeAndDelay() { - if (prerendering) { - React.unstable_postpone(); - } - return React.use(promise); - } - - const Lazy = React.lazy(async () => { - await 0; - return {default: Postpone}; - }); - - function App() { - return ( - <div> - <Suspense fallback="Outer"> - <Suspense fallback={<Postpone />}> - <PostponeAndDelay /> World - </Suspense> - <Suspense fallback={<Postpone />}> - <Lazy /> - </Suspense> - </Suspense> - </div> - ); - } - - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - const resumed = await ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ); - - expect(getVisibleChildren(container)).toEqual(<div>Outer</div>); - - // Read what we've completed so far - await act(() => { - resumed.pipe(writable); - }); - - // Should have now resolved the postponed loading state, but not the promise - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hello'} - {'Hello'} - </div>, - ); - - // Resolve the final promise - await act(() => { - resolve('Hi'); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hi'} - {' World'} - {'Hello'} - </div>, - ); - }); - - // @gate enablePostpone - it('can discover new suspense boundaries in the resume', async () => { - let prerendering = true; - let resolveA; - const promiseA = new Promise(r => (resolveA = r)); - let resolveB; - const promiseB = new Promise(r => (resolveB = r)); - - function WaitA() { - return React.use(promiseA); - } - function WaitB() { - return React.use(promiseB); - } - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - <span> - <Suspense fallback="Loading again..."> - <WaitA /> - </Suspense> - <WaitB /> - </span> - ); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <Postpone /> - </p> - </Suspense> - </div> - ); - } - - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - const resumed = await ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - // Read what we've completed so far - await act(() => { - resumed.pipe(writable); - }); - - // Still blocked - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - // Resolve the first promise, this unblocks the inner boundary - await act(() => { - resolveA('Hello'); - }); - - // Still blocked - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - // Resolve the second promise, this unblocks the outer boundary - await act(() => { - resolveB('World'); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span> - {'Hello'} - {'World'} - </span> - </p> - </div>, - ); - }); - - // @gate enablePostpone - it('does not call onError when you abort with a postpone instance during prerender', async () => { - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - <p> - <span> - <Suspense fallback="Loading again too..."> - <Wait /> - </Suspense> - </span> - </p> - </Suspense> - </div> - ); - } - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - - const controller = new AbortController(); - const signal = controller.signal; - - const errors = []; - function onError(error) { - errors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - let pendingPrerender; - await act(() => { - pendingPrerender = ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - signal, - onError, - onPostpone, - }); - }); - controller.abort(postponeInstance); - - const prerendered = await pendingPrerender; - - expect(errors).toEqual([]); - expect(postpones).toEqual(['manufactured', 'manufactured']); - - await act(() => { - prerendered.prelude.pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again too...</span> - </p> - </div>, - ); - }); - - // @gate enableHalt - it('can resume a prerender that was aborted', async () => { - const promise = new Promise(r => {}); - - let prerendering = true; - - function Wait() { - if (prerendering) { - return React.use(promise); - } else { - return 'Hello'; - } - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - <p> - <span> - <Suspense fallback="Loading again too..."> - <Wait /> - </Suspense> - </span> - </p> - </Suspense> - </div> - ); - } - - const controller = new AbortController(); - const signal = controller.signal; - - const errors = []; - function onError(error) { - errors.push(error); - } - let pendingPrerender; - await act(() => { - pendingPrerender = ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - signal, - onError, - }); - }); - controller.abort('boom'); - - const prerendered = await pendingPrerender; - - expect(errors).toEqual(['boom', 'boom']); - - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again too...</span> - </p> - </div>, - ); - - prerendering = false; - - errors.length = 0; - const resumed = await ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError, - }, - ); - - await act(() => { - resumed.pipe(writable); - }); - - expect(errors).toEqual([]); - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Hello</span> - </p> - <p> - <span>Hello</span> - </p> - </div>, - ); - }); - - // @gate enablePostpone - it('does not call onError when you abort with a postpone instance during resume', async () => { - let prerendering = true; - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - ); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <Postpone /> - </p> - <p> - <Postpone /> - </p> - </Suspense> - </div> - ); - } - - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - - const errors = []; - function onError(error) { - errors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - - prerendering = false; - - const resumed = await ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError, - onPostpone, - }, - ); - - await act(() => { - resumed.pipe(writable); - }); - await act(() => { - resumed.abort(postponeInstance); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again...</span> - </p> - </div>, - ); - - expect(errors).toEqual([]); - expect(postpones).toEqual(['manufactured', 'manufactured']); - }); - - // @gate enablePostpone - it('does not call onError when you abort with a postpone instance during a render', async () => { - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - </Suspense> - </div> - ); - } - - const errors = []; - function onError(error) { - errors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - const result = await renderToPipeableStream(<App />, {onError, onPostpone}); - await act(() => { - result.pipe(writable); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again...</span> - </p> - </div>, - ); - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - await act(() => { - result.abort(postponeInstance); - }); - - expect(getVisibleChildren(container)).toEqual( - <div> - <p> - <span>Loading again...</span> - </p> - <p> - <span>Loading again...</span> - </p> - </div>, - ); - - expect(errors).toEqual([]); - expect(postpones).toEqual(['manufactured', 'manufactured']); - }); - - // @gate enablePostpone - it('fatally errors if you abort with a postpone in the shell during resume', async () => { - let prerendering = true; - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - ); - } - - function PostponeInShell() { - if (prerendering) { - React.unstable_postpone(); - } - return <span>in shell</span>; - } - - function App() { - return ( - <div> - <PostponeInShell /> - <Suspense fallback="Loading..."> - <p> - <Postpone /> - </p> - <p> - <Postpone /> - </p> - </Suspense> - </div> - ); - } - - const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - // Create a separate stream so it doesn't close the writable. I.e. simple concat. - const preludeWritable = new Stream.PassThrough(); - preludeWritable.setEncoding('utf8'); - preludeWritable.on('data', chunk => { - writable.write(chunk); - }); - - await act(() => { - prerendered.prelude.pipe(preludeWritable); - }); - - expect(getVisibleChildren(container)).toEqual(undefined); - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - - const errors = []; - function onError(error) { - errors.push(error); - } - const shellErrors = []; - function onShellError(error) { - shellErrors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - - prerendering = false; - - const resumed = ReactDOMFizzServer.resumeToPipeableStream( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError, - onShellError, - onPostpone, - }, - ); - await act(() => { - resumed.abort(postponeInstance); - }); - expect(errors).toEqual([ - new Error( - 'The render was aborted with postpone when the shell is incomplete. Reason: manufactured', - ), - ]); - expect(shellErrors).toEqual([ - new Error( - 'The render was aborted with postpone when the shell is incomplete. Reason: manufactured', - ), - ]); - expect(postpones).toEqual([]); - }); - - // @gate enablePostpone - it('fatally errors if you abort with a postpone in the shell during render', async () => { - const promise = new Promise(r => {}); - - function Wait() { - return React.use(promise); - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - <p> - <span> - <Suspense fallback="Loading again..."> - <Wait /> - </Suspense> - </span> - </p> - </Suspense> - </div> - ); - } - - const errors = []; - function onError(error) { - errors.push(error); - } - const shellErrors = []; - function onShellError(error) { - shellErrors.push(error); - } - const postpones = []; - function onPostpone(reason) { - postpones.push(reason); - } - const result = renderToPipeableStream(<App />, { - onError, - onShellError, - onPostpone, - }); - - let postponeInstance; - try { - React.unstable_postpone('manufactured'); - } catch (p) { - postponeInstance = p; - } - await act(() => { - result.abort(postponeInstance); - }); - - expect(getVisibleChildren(container)).toEqual(undefined); - - expect(errors).toEqual([ - new Error( - 'The render was aborted with postpone when the shell is incomplete. Reason: manufactured', - ), - ]); - expect(shellErrors).toEqual([ - new Error( - 'The render was aborted with postpone when the shell is incomplete. Reason: manufactured', - ), - ]); - expect(postpones).toEqual([]); - }); - it('should NOT warn for using generator functions as components', async () => { function* Foo() { yield <h1 key="1">Hello</h1>; diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js index bc96750d460..27e74750c45 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js @@ -551,45 +551,4 @@ describe('ReactDOMFizzServerBrowser', () => { `"<link rel="preload" as="script" fetchPriority="low" nonce="R4nd0m" href="init.js"/><link rel="modulepreload" fetchPriority="low" nonce="R4nd0m" href="init.mjs"/><div>hello world</div><script nonce="${nonce}" id="_R_">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`, ); }); - - // @gate enablePostpone - it('errors if trying to postpone outside a Suspense boundary', async () => { - function Postponed() { - React.unstable_postpone('testing postpone'); - return 'client only'; - } - - function App() { - return ( - <div> - <Postponed /> - </div> - ); - } - - const errors = []; - const postponed = []; - - let caughtError = null; - try { - await serverAct(() => - ReactDOMFizzServer.renderToReadableStream(<App />, { - onError(error) { - errors.push(error.message); - }, - onPostpone(reason) { - postponed.push(reason); - }, - }), - ); - } catch (error) { - caughtError = error; - } - - // Postponing is not logged as an error but as a postponed reason. - expect(errors).toEqual([]); - expect(postponed).toEqual(['testing postpone']); - // However, it does error the shell. - expect(caughtError.message).toEqual('testing postpone'); - }); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js index a4ac87c92c4..4542ca618ba 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js @@ -231,9 +231,7 @@ describe('ReactDOMFizzStatic', () => { const result = await promise; expect(result.postponed).toBe( - gate(flags => flags.enableHalt || flags.enablePostpone) - ? null - : undefined, + gate(flags => flags.enableHalt) ? null : undefined, ); await act(async () => { @@ -302,42 +300,6 @@ describe('ReactDOMFizzStatic', () => { expect(getVisibleChildren(container)).toEqual('hello'); }); - // @gate enablePostpone - it('includes stylesheet preloads in onHeaders when postponing in the Shell', async () => { - let headers; - function onHeaders(x) { - headers = x; - } - - function App() { - ReactDOM.preload('image', {as: 'image', fetchPriority: 'high'}); - ReactDOM.preinit('style', {as: 'style'}); - React.unstable_postpone(); - return ( - <html> - <body>hello</body> - </html> - ); - } - - const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, { - onHeaders, - }); - expect(headers).toEqual({ - Link: ` -<image>; rel=preload; as="image"; fetchpriority="high", - <style>; rel=preload; as="style" -` - .replaceAll('\n', '') - .trim(), - }); - - await act(async () => { - result.prelude.pipe(writable); - }); - expect(getVisibleChildren(container)).toEqual(undefined); - }); - it('will prerender Suspense fallbacks before children', async () => { const values = []; function Indirection({children}) { diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js index cf4a65821e4..beebd3a1165 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js @@ -25,7 +25,6 @@ global.TextDecoder = require('util').TextDecoder; let JSDOM; let React; -let ReactDOM; let ReactDOMFizzServer; let ReactDOMFizzStatic; let Suspense; @@ -46,7 +45,6 @@ describe('ReactDOMFizzStaticBrowser', () => { serverAct = require('internal-test-utils').serverAct; React = require('react'); - ReactDOM = require('react-dom'); ReactDOMFizzServer = require('react-dom/server.browser'); ReactDOMFizzStatic = require('react-dom/static.browser'); Suspense = React.Suspense; @@ -71,36 +69,6 @@ describe('ReactDOMFizzStaticBrowser', () => { throw theInfinitePromise; } - function concat(streamA, streamB) { - const readerA = streamA.getReader(); - const readerB = streamB.getReader(); - return new ReadableStream({ - start(controller) { - function readA() { - readerA.read().then(({done, value}) => { - if (done) { - readB(); - return; - } - controller.enqueue(value); - readA(); - }); - } - function readB() { - readerB.read().then(({done, value}) => { - if (done) { - controller.close(); - return; - } - controller.enqueue(value); - readB(); - }); - } - readA(); - }, - }); - } - async function readContent(stream) { const reader = stream.getReader(); let content = ''; @@ -609,1202 +577,28 @@ describe('ReactDOMFizzStaticBrowser', () => { expect(errors).toEqual(['uh oh', 'uh oh']); }); - // @gate enablePostpone - it('supports postponing in prerender and resuming later', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ['Hello', 'World']; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <Postpone /> - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( - <div>{['Hello', 'World']}</div>, - ); - }); - - // @gate enablePostpone - it('supports postponing in prerender and resuming with a prefix', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'World'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - Hello - <Postpone /> - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( - <div>{['Hello', 'World']}</div>, - ); - }); - - // @gate enablePostpone - it('supports postponing in lazy in prerender and resuming later', async () => { - let prerendering = true; - const Hole = React.lazy(async () => { - React.unstable_postpone(); - }); - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - Hi - {prerendering ? Hole : 'Hello'} - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( - <div> - {'Hi'} - {'Hello'} - </div>, - ); - }); - - // @gate enablePostpone - it('supports postponing in a nested array', async () => { - let prerendering = true; - const Hole = React.lazy(async () => { - React.unstable_postpone(); - }); - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - Hi - {[<Postpone key="key" />, prerendering ? Hole : 'World']} - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( - <div>{['Hi', 'Hello', 'World']}</div>, - ); - }); - - // @gate enablePostpone - it('supports postponing in lazy as a direct child', async () => { - let prerendering = true; - const Hole = React.lazy(async () => { - React.unstable_postpone(); - }); - function Postpone() { - return prerendering ? Hole : 'Hello'; - } - - function App() { - return ( - <div> - <Suspense fallback="Loading..."> - <Postpone key="key" /> - </Suspense> - </div> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual(<div>Hello</div>); - }); - - // @gate enablePostpone - it('only emits end tags once when resuming', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function App() { - return ( - <html> - <body> - <Suspense fallback="Loading..."> - <Postpone /> - </Suspense> - </body> - </html> - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(<App />), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const content = await serverAct(() => - ReactDOMFizzServer.resume( - <App />, - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - const html = await readContent(concat(prerendered.prelude, content)); - const htmlEndTags = /<\/html\s*>/gi; - const bodyEndTags = /<\/body\s*>/gi; - expect(Array.from(html.matchAll(htmlEndTags)).length).toBe(1); - expect(Array.from(html.matchAll(bodyEndTags)).length).toBe(1); - }); - - // @gate enablePostpone - it('can prerender various hoistables and deduped resources', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - <> - <link rel="stylesheet" href="my-style2" precedence="low" /> - <link rel="stylesheet" href="my-style1" precedence="high" /> - <style precedence="high" href="my-style3"> - style - </style> - <img src="my-img" /> - </> - ); + it('logs an error if onHeaders throws but continues the prerender', async () => { + const errors = []; + function onError(error) { + errors.push(error.message); } - function App() { - ReactDOM.preconnect('example.com'); - ReactDOM.preload('my-font', {as: 'font', type: 'font/woff2'}); - ReactDOM.preload('my-style0', {as: 'style'}); - // This should transfer the props in to the style that loads later. - ReactDOM.preload('my-style2', { - as: 'style', - crossOrigin: 'use-credentials', - }); - return ( - <div> - <Suspense fallback="Loading..."> - <link rel="stylesheet" href="my-style1" precedence="high" /> - <img src="my-img" /> - <Postpone /> - </Suspense> - <title>Hello World -

- ); + function onHeaders(x) { + throw new Error('bad onHeaders'); } - let calledInit = false; - jest.mock( - 'init.js', - () => { - calledInit = true; - }, - {virtual: true}, - ); - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(, { - bootstrapScripts: ['init.js'], + ReactDOMFizzStatic.prerender(

hello

, { + onHeaders, + onError, }), ); - expect(prerendered.postponed).not.toBe(null); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual([ - , - , - , - , - , - , - , - Hello World, -

, - ]); - - prerendering = false; - const content = await serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(content); - - expect(calledInit).toBe(true); - - // Dispatch load event to injected stylesheet - const link = document.querySelector( - 'link[rel="stylesheet"][href="my-style2"]', - ); - const event = document.createEvent('Events'); - event.initEvent('load', true, true); - link.dispatchEvent(event); - - // Wait for the instruction microtasks to flush. - await 0; - await 0; - jest.runAllTimers(); - - expect(getVisibleChildren(container)).toEqual([ - , - , - , - , - , - , - , - , - , - Hello World, -

, - ]); - }); - - // @gate enablePostpone - it('can postpone a boundary after it has already been added', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function App() { - return ( -

- - - - - - - -

- ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - ), + expect(prerendered.postponed).toBe( + gate(flags => flags.enableHalt) ? null : undefined, ); + expect(errors).toEqual(['bad onHeaders']); await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(

); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( -

{['Hello', 'Hello', 'Hello']}

, - ); - }); - - // @gate enablePostpone - it('can postpone in fallback', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - const Lazy = React.lazy(async () => { - await 0; - return {default: Postpone}; - }); - - function App() { - return ( -

- - }> - World - - }> - - - -

- ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(

Outer

); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual( -

- {'Hello'} - {' World'} - {'Hello'} -

, - ); - }); - - // @gate enablePostpone - it('can postpone in fallback without postponing the tree', async () => { - function Postpone() { - React.unstable_postpone(); - } - - const lazyText = React.lazy(async () => { - await 0; // causes the fallback to start work - return {default: 'Hello'}; - }); - - function App() { - return ( -

- - }>{lazyText} - -

- ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(), - ); - // TODO: This should actually be null because we should've been able to fully - // resolve the render on the server eventually, even though the fallback postponed. - // So we should not need to resume. - expect(prerendered.postponed).not.toBe(null); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual(

Outer

); - - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await readIntoContainer(resumed); - - expect(getVisibleChildren(container)).toEqual(

Hello

); - }); - - // @gate enablePostpone - it('errors if the replay does not line up', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function Wrapper({children}) { - return children; - } - - const lazySpan = React.lazy(async () => { - await 0; - return {default: }; - }); - - function App() { - const children = ( - - - - ); - return ( - <> -

{prerendering ? {children} : children}

- {prerendering ? ( - -

- -

- - ) : ( - lazySpan - )} -

- - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(), - ); - expect(prerendered.postponed).not.toBe(null); - - await readIntoContainer(prerendered.prelude); - - expect(getVisibleChildren(container)).toEqual([ -

, -

, - ]); - - prerendering = false; - - const errors = []; - const resumed = await serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - { - onError(x) { - errors.push(x.message); - }, - }, - ), - ); - - expect(errors).toEqual([ - 'Expected the resume to render in this slot but instead it rendered . ' + - "The tree doesn't match so React will fallback to client rendering.", - 'Expected the resume to render in this slot but instead it rendered . ' + - "The tree doesn't match so React will fallback to client rendering.", - ]); - - // TODO: Test the component stack but we don't expose it to the server yet. - - await readIntoContainer(resumed); - - // Client rendered - expect(getVisibleChildren(container)).toEqual([ -

, -

, - ]); - }); - - // @gate enablePostpone - it('can abort the resume', async () => { - let prerendering = true; - const infinitePromise = new Promise(() => {}); - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function App() { - if (!prerendering) { - React.use(infinitePromise); - } - return ( -

- - - -

); - - prerendering = false; - - const controller = new AbortController(); - - const errors = []; - - const resumedPromise = serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - { - signal: controller.signal, - onError(x) { - errors.push(x); - }, - }, - ), - ); - - controller.abort('abort'); - - const resumed = await resumedPromise; - await resumed.allReady; - - expect(errors).toEqual(['abort']); - - await readIntoContainer(resumed); - - // Client rendered - expect(getVisibleChildren(container)).toEqual(

); - }); - - // @gate enablePostpone - it('can suspend in a replayed component several layers deep', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - let resolve; - const promise = new Promise(r => (resolve = r)); - function Delay({children}) { - if (!prerendering) { - React.use(promise); - } - return children; - } - - // This wrapper will cause us to do one destructive render past this. - function Outer({children}) { - return children; - } - - function App() { - return ( -

- - - - - - - -

- ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(), - ); - expect(prerendered.postponed).not.toBe(null); - - await readIntoContainer(prerendered.prelude); - - prerendering = false; - - const resumedPromise = serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - await jest.runAllTimers(); - - expect(getVisibleChildren(container)).toEqual(

); - - await resolve(); - - await readIntoContainer(await resumedPromise); - - expect(getVisibleChildren(container)).toEqual(

Hello

); - }); - - // @gate enablePostpone - it('emits an empty prelude and resumes at the root if we postpone in the shell', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - function App() { - return ( - - - - - - - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - expect(await readContent(prerendered.prelude)).toBe(''); - - const content = await serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - expect(await readContent(content)).toBe( - '' + - '' + - (gate(flags => flags.enableFizzBlockingRender) - ? '' - : '') + - '' + - 'Hello' + - (gate(flags => flags.enableFizzBlockingRender) - ? '' - : '') + - '', - ); - }); - - // @gate enablePostpone - it('emits an empty prelude if we have not rendered html or head tags yet', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return ( - - Hello - - ); - } - - function App() { - return ( - <> - - - - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - expect(await readContent(prerendered.prelude)).toBe(''); - - const content = await serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - expect(await readContent(content)).toBe( - '' + - '' + - '' + - 'Hello', - ); - }); - - // @gate enablePostpone - it('emits an empty prelude if a postpone in a promise in the shell', async () => { - let prerendering = true; - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return 'Hello'; - } - - const Lazy = React.lazy(async () => { - await 0; - return {default: Postpone}; - }); - - function App() { - return ( - - - -

- -

- - - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - expect(await readContent(prerendered.prelude)).toBe(''); - - const content = await serverAct(() => - ReactDOMFizzServer.resume( - , - JSON.parse(JSON.stringify(prerendered.postponed)), - ), - ); - - expect(await readContent(content)).toBe( - '' + - '' + - '' + - '

Hello

', - ); - }); - - // @gate enablePostpone - it('does not emit preloads during resume for Resources preloaded through onHeaders', async () => { - let prerendering = true; - - let hasLoaded = false; - let resolve; - const promise = new Promise(r => (resolve = r)); - function WaitIfResuming({children}) { - if (!prerendering && !hasLoaded) { - throw promise; - } - return children; - } - - function Postpone() { - if (prerendering) { - React.unstable_postpone(); - } - return null; - } - - let headers; - function onHeaders(x) { - headers = x; - } - - function App() { - ReactDOM.preload('image', {as: 'image', fetchPriority: 'high'}); - return ( - - - hello - - - world - - - - - - - ); - } - - const prerendered = await serverAct(() => - ReactDOMFizzStatic.prerender(, { - onHeaders, - }), - ); - expect(prerendered.postponed).not.toBe(null); - - prerendering = false; - - expect(await readContent(prerendered.prelude)).toBe(''); - expect(headers).toEqual( - new Headers({ - Link: ` -; rel=preload; as="image"; fetchpriority="high", -