From 1f5cb0fa29a02e12394ca751201baa64e51a95b1 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Tue, 14 Sep 2021 16:10:14 -0400 Subject: [PATCH 01/20] add avoidThisFallback support in Fizz server --- .../src/__tests__/ReactDOMFizzServer-test.js | 77 +++++++++++++++++++ packages/react-server/src/ReactFizzServer.js | 38 +++++---- 2 files changed, 98 insertions(+), 17 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 6a5ba954bda3f..4fcc084285f02 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1478,4 +1478,81 @@ describe('ReactDOMFizzServer', () => { // We should've been able to display the content without waiting for the rest of the fallback. expect(getVisibleChildren(container)).toEqual(
Hello
); }); + + // @gate experimental + it('should respect unstable_avoidThisFallback', async () => { + let resolveInnerPromise; + const innerPromise = new Promise((res, rej) => { + resolveInnerPromise = res; + }); + let innerPromisesResolved = false; + + const InnerComponent = ({isClient}) => { + if (isClient) { + // Resuspend after re-rendering on client to check that fallback shows on client + throw new Promise(() => {}); + } + if (!innerPromisesResolved) { + throw innerPromise; + } + return ; + }; + + function App({isClient}) { + return ( +
+ + + + + } + unstable_avoidThisFallback={true}> + + + + +
+ ); + } + + await act(async () => { + const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable( + , + writable, + ); + startWriting(); + }); + + expect(getVisibleChildren(container)).toEqual( +
Non Suspense Content
, + ); + + await act(async () => { + innerPromisesResolved = true; + resolveInnerPromise(); + }); + + expect(getVisibleChildren(container)).toEqual( +
+ Non Suspense Contentinner component resolved +
, + ); + + // TODO: Get resuspending on the client to work to make sure it shows the fallback on the client; + // await act(async () => { + // const root = ReactDOM.createRoot(container, {hydrate: true}); + // root.render(); + + // Scheduler.unstable_flushAll(); + // await jest.runAllTimers(); + // }); + + // expect(getVisibleChildren(container)).toEqual( + //
+ // Non Suspense ContentLoading Outer + //
, + // ); + }); }); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 4b7eb46d94b48..0e3d8314a0841 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -498,24 +498,28 @@ function renderSuspenseBoundary( boundarySegment.status = COMPLETED; boundarySegment.children.push(innerSegment); - // We create suspended task for the fallback because we don't want to actually work - // on it yet in case we finish the main content, so we queue for later. - const suspendedFallbackTask = createTask( - request, - fallback, - parentBoundary, - innerSegment, - fallbackAbortSet, - task.legacyContext, - task.context, - null, - ); - if (__DEV__) { - suspendedFallbackTask.componentStack = task.componentStack; + // if avoidThisFallback is set to true then we act as though there is no fallback in SSR + // Instead, we let the client render the fallback if the component suspends there. + if (!props.unstable_avoidThisFallback === true) { + // We create suspended task for the fallback because we don't want to actually work + // on it yet in case we finish the main content, so we queue for later. + const suspendedFallbackTask = createTask( + request, + fallback, + parentBoundary, + innerSegment, + fallbackAbortSet, + task.legacyContext, + task.context, + null, + ); + if (__DEV__) { + suspendedFallbackTask.componentStack = task.componentStack; + } + // TODO: This should be queued at a separate lower priority queue so that we only work + // on preparing fallbacks if we don't have any more main content to task on. + request.pingedTasks.push(suspendedFallbackTask); } - // TODO: This should be queued at a separate lower priority queue so that we only work - // on preparing fallbacks if we don't have any more main content to task on. - request.pingedTasks.push(suspendedFallbackTask); popComponentStackInDEV(task); } From 56bf05fad7244ebe125a95f66af8e0ec17b3e934 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Tue, 14 Sep 2021 16:13:22 -0400 Subject: [PATCH 02/20] oops --- packages/react-server/src/ReactFizzServer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 0e3d8314a0841..ae36b51a3d75f 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -500,7 +500,7 @@ function renderSuspenseBoundary( // if avoidThisFallback is set to true then we act as though there is no fallback in SSR // Instead, we let the client render the fallback if the component suspends there. - if (!props.unstable_avoidThisFallback === true) { + if (props.unstable_avoidThisFallback !== true) { // We create suspended task for the fallback because we don't want to actually work // on it yet in case we finish the main content, so we queue for later. const suspendedFallbackTask = createTask( From 81e8c4c99f7b282a4ec895fb23116f67ae627061 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Tue, 14 Sep 2021 17:19:40 -0400 Subject: [PATCH 03/20] todo --- .../src/__tests__/ReactDOMFizzServer-test.js | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 4fcc084285f02..3d85d26a032ce 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1540,19 +1540,23 @@ describe('ReactDOMFizzServer', () => { , ); - // TODO: Get resuspending on the client to work to make sure it shows the fallback on the client; - // await act(async () => { - // const root = ReactDOM.createRoot(container, {hydrate: true}); - // root.render(); - - // Scheduler.unstable_flushAll(); - // await jest.runAllTimers(); - // }); - - // expect(getVisibleChildren(container)).toEqual( - //
- // Non Suspense ContentLoading Outer - //
, - // ); + await act(async () => { + const root = ReactDOM.createRoot(container, {hydrate: true}); + // TODO: Figure out why it takes two renders to get suspense fallback to show + // render 1 + root.render(); + Scheduler.unstable_flushAll(); + await jest.runAllTimers(); + // render 2 + root.render(); + Scheduler.unstable_flushAll(); + await jest.runAllTimers(); + }); + + expect(getVisibleChildren(container)).toEqual( +
+ Non Suspense ContentLoading Outer +
, + ); }); }); From eb6d0999c4afad55d8bb0cfa5bcae5a24a65e01e Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Wed, 15 Sep 2021 12:56:28 -0400 Subject: [PATCH 04/20] add feature flag and use hydrate root + initial forking. need to make new component --- .../src/__tests__/ReactDOMFizzServer-test.js | 24 +++- packages/react-server/src/ReactFizzServer.js | 134 +++++++++++++++--- packages/shared/ReactFeatureFlags.js | 2 + .../forks/ReactFeatureFlags.native-fb.js | 1 + .../forks/ReactFeatureFlags.native-oss.js | 1 + .../forks/ReactFeatureFlags.test-renderer.js | 1 + .../ReactFeatureFlags.test-renderer.native.js | 1 + .../ReactFeatureFlags.test-renderer.www.js | 1 + .../shared/forks/ReactFeatureFlags.testing.js | 1 + .../forks/ReactFeatureFlags.testing.www.js | 1 + .../forks/ReactFeatureFlags.www-dynamic.js | 1 + .../shared/forks/ReactFeatureFlags.www.js | 1 + 12 files changed, 141 insertions(+), 28 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 3d85d26a032ce..d1b68a2c7faa2 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1479,7 +1479,7 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual(
Hello
); }); - // @gate experimental + // @gate experimental && enableFizzSuspenseAvoidThisFallback it('should respect unstable_avoidThisFallback', async () => { let resolveInnerPromise; const innerPromise = new Promise((res, rej) => { @@ -1540,14 +1540,22 @@ describe('ReactDOMFizzServer', () => { , ); + let root; await act(async () => { - const root = ReactDOM.createRoot(container, {hydrate: true}); - // TODO: Figure out why it takes two renders to get suspense fallback to show - // render 1 - root.render(); + root = ReactDOM.hydrateRoot(container, ); Scheduler.unstable_flushAll(); await jest.runAllTimers(); - // render 2 + }); + + // No change after hydration + expect(getVisibleChildren(container)).toEqual( +
+ Non Suspense Contentinner component resolved +
, + ); + + await act(async () => { + // Trigger update by changing isClient to true root.render(); Scheduler.unstable_flushAll(); await jest.runAllTimers(); @@ -1555,7 +1563,9 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual(
- Non Suspense ContentLoading Outer + Non Suspense Content + inner component resolved + Loading Outer
, ); }); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index ae36b51a3d75f..83d00ae591465 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -107,6 +107,7 @@ import { warnAboutDefaultPropsOnFunctionComponents, enableScopeAPI, enableLazyElements, + enableFizzSuspenseAvoidThisFallback, } from 'shared/ReactFeatureFlags'; import getComponentNameFromType from 'shared/getComponentNameFromType'; @@ -498,29 +499,113 @@ function renderSuspenseBoundary( boundarySegment.status = COMPLETED; boundarySegment.children.push(innerSegment); - // if avoidThisFallback is set to true then we act as though there is no fallback in SSR - // Instead, we let the client render the fallback if the component suspends there. - if (props.unstable_avoidThisFallback !== true) { - // We create suspended task for the fallback because we don't want to actually work - // on it yet in case we finish the main content, so we queue for later. - const suspendedFallbackTask = createTask( - request, - fallback, - parentBoundary, - innerSegment, - fallbackAbortSet, - task.legacyContext, - task.context, - null, - ); - if (__DEV__) { - suspendedFallbackTask.componentStack = task.componentStack; + // We create suspended task for the fallback because we don't want to actually work + // on it yet in case we finish the main content, so we queue for later. + const suspendedFallbackTask = createTask( + request, + fallback, + parentBoundary, + innerSegment, + fallbackAbortSet, + task.legacyContext, + task.context, + null, + ); + if (__DEV__) { + suspendedFallbackTask.componentStack = task.componentStack; + } + // TODO: This should be queued at a separate lower priority queue so that we only work + // on preparing fallbacks if we don't have any more main content to task on. + request.pingedTasks.push(suspendedFallbackTask); + + popComponentStackInDEV(task); +} + +function renderSuspenseBoundaryWithoutFallback( + request: Request, + task: Task, + props: Object, +) { + pushBuiltInComponentStackInDEV(task, 'Suspense'); + const parentBoundary = task.blockedBoundary; + const parentSegment = task.blockedSegment; + + // We need to push an "empty" thing here to identify the parent suspense boundary. + pushEmpty(parentSegment.chunks, request.responseState, task.assignID); + task.assignID = null; + + const fallbackAbortSet: Set = new Set(); + const content: ReactNodeList = props.children; + + const newBoundary = createSuspenseBoundary(request, fallbackAbortSet); + const insertionIndex = parentSegment.chunks.length; + + // The children of the boundary segment is actually the fallback. + const boundarySegment = createPendingSegment( + request, + insertionIndex, + newBoundary, + parentSegment.formatContext, + ); + parentSegment.children.push(boundarySegment); + + // This segment is the actual child content. We can start rendering that immediately. + const contentRootSegment = createPendingSegment( + request, + 0, + null, + parentSegment.formatContext, + ); + // We mark the root segment as having its parent flushed. It's not really flushed but there is + // no parent segment so there's nothing to wait on. + contentRootSegment.parentFlushed = true; + + // Currently this is running synchronously. We could instead schedule this to pingedTasks. + // I suspect that there might be some efficiency benefits from not creating the suspended task + // and instead just using the stack if possible. + // TODO: Call this directly instead of messing with saving and restoring contexts. + + // We can reuse the current context and task to render the content immediately without + // context switching. We just need to temporarily switch which boundary and which segment + // we're writing to. If something suspends, it'll spawn new suspended task with that context. + task.blockedBoundary = newBoundary; + task.blockedSegment = contentRootSegment; + try { + // We use the safe form because we don't handle suspending here. Only error handling. + renderNode(request, task, content); + contentRootSegment.status = COMPLETED; + newBoundary.completedSegments.push(contentRootSegment); + if (newBoundary.pendingTasks === 0) { + // This must have been the last segment we were waiting on. This boundary is now complete. + // Therefore we won't need the fallback. We early return so that we don't have to create + // the fallback. + popComponentStackInDEV(task); + return; } - // TODO: This should be queued at a separate lower priority queue so that we only work - // on preparing fallbacks if we don't have any more main content to task on. - request.pingedTasks.push(suspendedFallbackTask); + } catch (error) { + contentRootSegment.status = ERRORED; + reportError(request, error); + newBoundary.forceClientRender = true; + // We don't need to decrement any task numbers because we didn't spawn any new task. + // We don't need to schedule any task because we know the parent has written yet. + } finally { + task.blockedBoundary = parentBoundary; + task.blockedSegment = parentSegment; } + // This injects an extra segment just to contain an empty tag with an ID. + // This means that we're not actually using the assignID anywhere. + // TODO: Rethink the assignID approach. + pushEmpty(boundarySegment.chunks, request.responseState, newBoundary.id); + const innerSegment = createPendingSegment( + request, + boundarySegment.chunks.length, + null, + boundarySegment.formatContext, + ); + boundarySegment.status = COMPLETED; + boundarySegment.children.push(innerSegment); + popComponentStackInDEV(task); } @@ -990,7 +1075,14 @@ function renderElement( } // eslint-disable-next-line-no-fallthrough case REACT_SUSPENSE_TYPE: { - renderSuspenseBoundary(request, task, props); + if ( + enableFizzSuspenseAvoidThisFallback && + props.unstable_avoidThisFallback === true + ) { + renderSuspenseBoundaryWithoutFallback(request, task, props); + } else { + renderSuspenseBoundary(request, task, props); + } return; } } diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index f6eb72375f801..d5caa5ee800a1 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -101,6 +101,8 @@ export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; +export const enableFizzSuspenseAvoidThisFallback = false; + export const enableComponentStackLocations = true; export const enableNewReconciler = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 41122a6c5ff30..8d9555d88ae16 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -49,6 +49,7 @@ export const disableModulePatternComponents = false; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; +export const enableFizzSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = false; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 0bfe6f3fecc76..3b90db5cc29cd 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -40,6 +40,7 @@ export const disableModulePatternComponents = false; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; +export const enableFizzSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = false; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index c0b6eda1b0387..1e92aafb0779a 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -40,6 +40,7 @@ export const disableModulePatternComponents = false; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; +export const enableFizzSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 03d7ed0734d06..fad22c418568a 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -50,6 +50,7 @@ export const enableGetInspectorDataForInstanceInProduction = false; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; export const warnOnSubscriptionInsideStartTransition = false; +export const enableFizzSuspenseAvoidThisFallback = false; export const enableStrictEffects = false; export const createRootStrictEffectsByDefault = false; export const enableUseRefAccessWarning = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 1618decf3843e..3e0f6a6f8b7fa 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -40,6 +40,7 @@ export const disableModulePatternComponents = true; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; +export const enableFizzSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index cca9a0d719325..b57c62b474cbe 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.js @@ -40,6 +40,7 @@ export const disableModulePatternComponents = false; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; +export const enableFizzSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index e1b633538cdee..7235fe71f07bf 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js @@ -40,6 +40,7 @@ export const disableModulePatternComponents = true; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; +export const enableFizzSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = !__EXPERIMENTAL__; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js index d6a5c77b837d1..0c06b8fa666c9 100644 --- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js @@ -26,6 +26,7 @@ export const enableLazyContextPropagation = __VARIANT__; export const enableSyncDefaultUpdates = __VARIANT__; export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__; export const warnOnSubscriptionInsideStartTransition = __VARIANT__; +export const enableFizzSuspenseAvoidThisFallback = __VARIANT__; // Enable this flag to help with concurrent mode debugging. // It logs information to the console about React scheduling, rendering, and commit phases. diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index cd66a719143a3..0520aaac8fcb0 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -32,6 +32,7 @@ export const { enableLazyContextPropagation, enableSyncDefaultUpdates, warnOnSubscriptionInsideStartTransition, + enableFizzSuspenseAvoidThisFallback, } = dynamicFeatureFlags; // On WWW, __EXPERIMENTAL__ is used for a new modern build. From 763f14e6fce66140a7331c35573e5f234b4b14b3 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 13:40:36 -0400 Subject: [PATCH 05/20] avoidWithFallback boundary also blocks parent boundary from flushing --- .../src/__tests__/ReactDOMFizzServer-test.js | 79 +++++++++++----- .../src/server/ReactDOMServerFormatConfig.js | 17 ++++ .../server/ReactNativeServerFormatConfig.js | 12 +++ packages/react-server/src/ReactFizzServer.js | 89 +++---------------- .../forks/ReactServerFormatConfig.custom.js | 2 + 5 files changed, 98 insertions(+), 101 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index d1b68a2c7faa2..ce11ec0fb7e47 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1481,21 +1481,25 @@ describe('ReactDOMFizzServer', () => { // @gate experimental && enableFizzSuspenseAvoidThisFallback it('should respect unstable_avoidThisFallback', async () => { - let resolveInnerPromise; - const innerPromise = new Promise((res, rej) => { - resolveInnerPromise = res; - }); - let innerPromisesResolved = false; + const resolved = { + 0: false, + 1: false, + } + const promiseRes = {} + const promises = { + 0: new Promise((res) => { promiseRes[0] = () => { resolved[0] = true; res(); } }), + 1: new Promise((res) => { promiseRes[1] = () => { resolved[1] = true; res(); } }), + } - const InnerComponent = ({isClient}) => { + const InnerComponent = ({ isClient, depth }) => { if (isClient) { // Resuspend after re-rendering on client to check that fallback shows on client throw new Promise(() => {}); } - if (!innerPromisesResolved) { - throw innerPromise; + if (!resolved[depth]) { + throw promises[depth]; } - return ; + return
; }; function App({isClient}) { @@ -1505,38 +1509,65 @@ describe('ReactDOMFizzServer', () => { - + } unstable_avoidThisFallback={true}> - - - + +
+ }> + + + + } + unstable_avoidThisFallback={true}> + + + +
); } + await jest.runAllTimers(); + await act(async () => { const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable( , writable, + { + onCompleteAll() { + console.log('ONCOMPLETEALL'); + } + } ); startWriting(); }); + // Nothing is output since root has a suspense with avoidedThisFallback that hasn't resolved + expect(getVisibleChildren(container)).toEqual(undefined); + + // resolve first suspense component with avoidThisFallback + await act(async () => { promiseRes[0]() }); + expect(getVisibleChildren(container)).toEqual( -
Non Suspense Content
, +
+ Non Suspense Content +
resolved 0
+
Fallback
+
, ); - await act(async () => { - innerPromisesResolved = true; - resolveInnerPromise(); - }); + await act(async () => { promiseRes[1]() }); expect(getVisibleChildren(container)).toEqual(
- Non Suspense Contentinner component resolved + Non Suspense Content +
resolved 0
+
resolved 1
, ); @@ -1550,7 +1581,9 @@ describe('ReactDOMFizzServer', () => { // No change after hydration expect(getVisibleChildren(container)).toEqual(
- Non Suspense Contentinner component resolved + Non Suspense Content +
resolved 0
+
resolved 1
, ); @@ -1561,11 +1594,13 @@ describe('ReactDOMFizzServer', () => { await jest.runAllTimers(); }); + // Now that we've resuspended at the root we show the root fallback expect(getVisibleChildren(container)).toEqual(
Non Suspense Content - inner component resolved - Loading Outer +
resolved 0
+
resolved 1
+ Avoided Fallback
, ); }); diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js index 58ddbeea3f7ba..786df0e04afde 100644 --- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js @@ -1480,6 +1480,23 @@ const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk( ); const endSuspenseBoundary = stringToPrecomputedChunk(''); +export function pushStartCompletedSuspenseBoundary( + target: Array, +) { + target.push(startCompletedSuspenseBoundary) +} + +export function pushEndSuspenseBoundary( + target: Array, + type: string, + props: Object, + responseState: ResponseState, + formatContext: FormatContext, + assignID: null | SuspenseBoundaryID, +) { + target.push(endSuspenseBoundary) +} + export function writeStartCompletedSuspenseBoundary( destination: Destination, responseState: ResponseState, diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js index 9f7501007ed87..6ffc698e3538d 100644 --- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js +++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js @@ -209,6 +209,13 @@ export function writeStartCompletedSuspenseBoundary( writeChunk(destination, SUSPENSE_COMPLETE); return writeChunk(destination, formatID(id)); } + +export function pushStartCompletedSuspenseBoundary( + target: Array +): void { + target.push(SUSPENSE_COMPLETE, formatID(id)) +} + export function writeStartPendingSuspenseBoundary( destination: Destination, responseState: ResponseState, @@ -231,6 +238,11 @@ export function writeEndCompletedSuspenseBoundary( ): boolean { return writeChunk(destination, END); } +export function pushEndCompletedSuspenseBoundary( + target: Array +): void { + target.push(END); +} export function writeEndPendingSuspenseBoundary( destination: Destination, responseState: ResponseState, diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 83d00ae591465..8f8a1ff527788 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -52,6 +52,8 @@ import { pushTextInstance, pushStartInstance, pushEndInstance, + pushStartCompletedSuspenseBoundary, + pushEndSuspenseBoundary, createSuspenseBoundaryID, getChildFormatContext, } from './ReactServerFormatConfig'; @@ -521,90 +523,19 @@ function renderSuspenseBoundary( popComponentStackInDEV(task); } -function renderSuspenseBoundaryWithoutFallback( +function renderBackupSuspenseBoundary( request: Request, task: Task, props: Object, ) { pushBuiltInComponentStackInDEV(task, 'Suspense'); - const parentBoundary = task.blockedBoundary; - const parentSegment = task.blockedSegment; - - // We need to push an "empty" thing here to identify the parent suspense boundary. - pushEmpty(parentSegment.chunks, request.responseState, task.assignID); - task.assignID = null; - - const fallbackAbortSet: Set = new Set(); - const content: ReactNodeList = props.children; - - const newBoundary = createSuspenseBoundary(request, fallbackAbortSet); - const insertionIndex = parentSegment.chunks.length; - // The children of the boundary segment is actually the fallback. - const boundarySegment = createPendingSegment( - request, - insertionIndex, - newBoundary, - parentSegment.formatContext, - ); - parentSegment.children.push(boundarySegment); - - // This segment is the actual child content. We can start rendering that immediately. - const contentRootSegment = createPendingSegment( - request, - 0, - null, - parentSegment.formatContext, - ); - // We mark the root segment as having its parent flushed. It's not really flushed but there is - // no parent segment so there's nothing to wait on. - contentRootSegment.parentFlushed = true; - - // Currently this is running synchronously. We could instead schedule this to pingedTasks. - // I suspect that there might be some efficiency benefits from not creating the suspended task - // and instead just using the stack if possible. - // TODO: Call this directly instead of messing with saving and restoring contexts. - - // We can reuse the current context and task to render the content immediately without - // context switching. We just need to temporarily switch which boundary and which segment - // we're writing to. If something suspends, it'll spawn new suspended task with that context. - task.blockedBoundary = newBoundary; - task.blockedSegment = contentRootSegment; - try { - // We use the safe form because we don't handle suspending here. Only error handling. - renderNode(request, task, content); - contentRootSegment.status = COMPLETED; - newBoundary.completedSegments.push(contentRootSegment); - if (newBoundary.pendingTasks === 0) { - // This must have been the last segment we were waiting on. This boundary is now complete. - // Therefore we won't need the fallback. We early return so that we don't have to create - // the fallback. - popComponentStackInDEV(task); - return; - } - } catch (error) { - contentRootSegment.status = ERRORED; - reportError(request, error); - newBoundary.forceClientRender = true; - // We don't need to decrement any task numbers because we didn't spawn any new task. - // We don't need to schedule any task because we know the parent has written yet. - } finally { - task.blockedBoundary = parentBoundary; - task.blockedSegment = parentSegment; - } + const content = props.children + const segment = task.blockedSegment; - // This injects an extra segment just to contain an empty tag with an ID. - // This means that we're not actually using the assignID anywhere. - // TODO: Rethink the assignID approach. - pushEmpty(boundarySegment.chunks, request.responseState, newBoundary.id); - const innerSegment = createPendingSegment( - request, - boundarySegment.chunks.length, - null, - boundarySegment.formatContext, - ); - boundarySegment.status = COMPLETED; - boundarySegment.children.push(innerSegment); + pushStartCompletedSuspenseBoundary(segment.chunks); + renderNode(request, task, content); + pushEndSuspenseBoundary(segment.chunks); popComponentStackInDEV(task); } @@ -1079,7 +1010,7 @@ function renderElement( enableFizzSuspenseAvoidThisFallback && props.unstable_avoidThisFallback === true ) { - renderSuspenseBoundaryWithoutFallback(request, task, props); + renderBackupSuspenseBoundary(request, task, props); } else { renderSuspenseBoundary(request, task, props); } @@ -1141,7 +1072,7 @@ function validateIterable(iterable, iteratorFn: Function): void { // We don't support rendering Generators because it's a mutation. // See https://github.com/facebook/react/issues/12995 if ( - typeof Symbol === 'function' && + typeof Symbol === 'function' && - // $FlowFixMe Flow doesn't know about toStringTag iterable[Symbol.toStringTag] === 'Generator' ) { diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js index 5458a4f50a9d5..d97d784c3be4b 100644 --- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js +++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js @@ -39,6 +39,8 @@ export const pushEmpty = $$$hostConfig.pushEmpty; export const pushTextInstance = $$$hostConfig.pushTextInstance; export const pushStartInstance = $$$hostConfig.pushStartInstance; export const pushEndInstance = $$$hostConfig.pushEndInstance; +export const pushStartCompletedSuspenseBoundary = $$$hostConfig.pushStartCompletedSuspenseBoundary; +export const pushEndSuspenseBoundary = $$$hostConfig.pushEndSuspenseBoundary; export const writePlaceholder = $$$hostConfig.writePlaceholder; export const writeStartCompletedSuspenseBoundary = $$$hostConfig.writeStartCompletedSuspenseBoundary; From bc89d098b85722081723d1d7f5e6348aa7e99aa2 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 13:43:10 -0400 Subject: [PATCH 06/20] explicit test for what shouldn't be there --- packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index ce11ec0fb7e47..3574b89dfdf1e 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1549,6 +1549,7 @@ describe('ReactDOMFizzServer', () => { // Nothing is output since root has a suspense with avoidedThisFallback that hasn't resolved expect(getVisibleChildren(container)).toEqual(undefined); + expect(container.innerHTML).not.toContain('Avoided Fallback') // resolve first suspense component with avoidThisFallback await act(async () => { promiseRes[0]() }); @@ -1561,6 +1562,8 @@ describe('ReactDOMFizzServer', () => { , ); + expect(container.innerHTML).not.toContain('Avoided Fallback2') + await act(async () => { promiseRes[1]() }); expect(getVisibleChildren(container)).toEqual( From e53b0e5c07fe240b67b16902ef7d45ee89b7977d Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 13:44:15 -0400 Subject: [PATCH 07/20] remove extraneous change --- packages/react-server/src/ReactFizzServer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 8f8a1ff527788..b28205e71d52b 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1072,7 +1072,7 @@ function validateIterable(iterable, iteratorFn: Function): void { // We don't support rendering Generators because it's a mutation. // See https://github.com/facebook/react/issues/12995 if ( - typeof Symbol === 'function' && - + typeof Symbol === 'function' && // $FlowFixMe Flow doesn't know about toStringTag iterable[Symbol.toStringTag] === 'Generator' ) { From 582c194aaa58047a84ec0ddf8419a1de71978d57 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 13:48:15 -0400 Subject: [PATCH 08/20] remove oncomplete all --- packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 3574b89dfdf1e..5ede44adc5fd3 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1538,11 +1538,6 @@ describe('ReactDOMFizzServer', () => { const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable( , writable, - { - onCompleteAll() { - console.log('ONCOMPLETEALL'); - } - } ); startWriting(); }); From c39c3ba79ccf8162d601c3b46fc04f4f992c9681 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 13:50:16 -0400 Subject: [PATCH 09/20] prettier --- .../src/__tests__/ReactDOMFizzServer-test.js | 52 ++++++++++++++----- .../src/server/ReactDOMServerFormatConfig.js | 4 +- .../server/ReactNativeServerFormatConfig.js | 6 +-- packages/react-server/src/ReactFizzServer.js | 2 +- .../forks/ReactServerFormatConfig.custom.js | 3 +- 5 files changed, 46 insertions(+), 21 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 5ede44adc5fd3..7b2f2ad53e039 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1484,14 +1484,24 @@ describe('ReactDOMFizzServer', () => { const resolved = { 0: false, 1: false, - } - const promiseRes = {} + }; + const promiseRes = {}; const promises = { - 0: new Promise((res) => { promiseRes[0] = () => { resolved[0] = true; res(); } }), - 1: new Promise((res) => { promiseRes[1] = () => { resolved[1] = true; res(); } }), - } + 0: new Promise(res => { + promiseRes[0] = () => { + resolved[0] = true; + res(); + }; + }), + 1: new Promise(res => { + promiseRes[1] = () => { + resolved[1] = true; + res(); + }; + }), + }; - const InnerComponent = ({ isClient, depth }) => { + const InnerComponent = ({isClient, depth}) => { if (isClient) { // Resuspend after re-rendering on client to check that fallback shows on client throw new Promise(() => {}); @@ -1499,7 +1509,11 @@ describe('ReactDOMFizzServer', () => { if (!resolved[depth]) { throw promises[depth]; } - return
; + return ( +
+ +
+ ); }; function App({isClient}) { @@ -1544,10 +1558,12 @@ describe('ReactDOMFizzServer', () => { // Nothing is output since root has a suspense with avoidedThisFallback that hasn't resolved expect(getVisibleChildren(container)).toEqual(undefined); - expect(container.innerHTML).not.toContain('Avoided Fallback') + expect(container.innerHTML).not.toContain('Avoided Fallback'); // resolve first suspense component with avoidThisFallback - await act(async () => { promiseRes[0]() }); + await act(async () => { + promiseRes[0](); + }); expect(getVisibleChildren(container)).toEqual(
@@ -1557,15 +1573,19 @@ describe('ReactDOMFizzServer', () => {
, ); - expect(container.innerHTML).not.toContain('Avoided Fallback2') + expect(container.innerHTML).not.toContain('Avoided Fallback2'); - await act(async () => { promiseRes[1]() }); + await act(async () => { + promiseRes[1](); + }); expect(getVisibleChildren(container)).toEqual(
Non Suspense Content
resolved 0
-
resolved 1
+
+
resolved 1
+
, ); @@ -1581,7 +1601,9 @@ describe('ReactDOMFizzServer', () => {
Non Suspense Content
resolved 0
-
resolved 1
+
+
resolved 1
+
, ); @@ -1597,7 +1619,9 @@ describe('ReactDOMFizzServer', () => {
Non Suspense Content
resolved 0
-
resolved 1
+
+
resolved 1
+
Avoided Fallback
, ); diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js index 786df0e04afde..67c97db68cb83 100644 --- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js @@ -1483,7 +1483,7 @@ const endSuspenseBoundary = stringToPrecomputedChunk(''); export function pushStartCompletedSuspenseBoundary( target: Array, ) { - target.push(startCompletedSuspenseBoundary) + target.push(startCompletedSuspenseBoundary); } export function pushEndSuspenseBoundary( @@ -1494,7 +1494,7 @@ export function pushEndSuspenseBoundary( formatContext: FormatContext, assignID: null | SuspenseBoundaryID, ) { - target.push(endSuspenseBoundary) + target.push(endSuspenseBoundary); } export function writeStartCompletedSuspenseBoundary( diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js index 6ffc698e3538d..40ea0494e0b0a 100644 --- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js +++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js @@ -211,9 +211,9 @@ export function writeStartCompletedSuspenseBoundary( } export function pushStartCompletedSuspenseBoundary( - target: Array + target: Array, ): void { - target.push(SUSPENSE_COMPLETE, formatID(id)) + target.push(SUSPENSE_COMPLETE, formatID(id)); } export function writeStartPendingSuspenseBoundary( @@ -239,7 +239,7 @@ export function writeEndCompletedSuspenseBoundary( return writeChunk(destination, END); } export function pushEndCompletedSuspenseBoundary( - target: Array + target: Array, ): void { target.push(END); } diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index b28205e71d52b..24bd649ac38a2 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -530,7 +530,7 @@ function renderBackupSuspenseBoundary( ) { pushBuiltInComponentStackInDEV(task, 'Suspense'); - const content = props.children + const content = props.children; const segment = task.blockedSegment; pushStartCompletedSuspenseBoundary(segment.chunks); diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js index d97d784c3be4b..a9bc277aa4cd6 100644 --- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js +++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js @@ -39,7 +39,8 @@ export const pushEmpty = $$$hostConfig.pushEmpty; export const pushTextInstance = $$$hostConfig.pushTextInstance; export const pushStartInstance = $$$hostConfig.pushStartInstance; export const pushEndInstance = $$$hostConfig.pushEndInstance; -export const pushStartCompletedSuspenseBoundary = $$$hostConfig.pushStartCompletedSuspenseBoundary; +export const pushStartCompletedSuspenseBoundary = + $$$hostConfig.pushStartCompletedSuspenseBoundary; export const pushEndSuspenseBoundary = $$$hostConfig.pushEndSuspenseBoundary; export const writePlaceholder = $$$hostConfig.writePlaceholder; export const writeStartCompletedSuspenseBoundary = From 7bb14927c47947b49bb2189556f11bcabd7670f4 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 13:54:01 -0400 Subject: [PATCH 10/20] update native format config --- .../src/server/ReactNativeServerFormatConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js index 40ea0494e0b0a..f63880ea79151 100644 --- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js +++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js @@ -213,7 +213,7 @@ export function writeStartCompletedSuspenseBoundary( export function pushStartCompletedSuspenseBoundary( target: Array, ): void { - target.push(SUSPENSE_COMPLETE, formatID(id)); + target.push(SUSPENSE_COMPLETE); } export function writeStartPendingSuspenseBoundary( From c097c293f9564c9fe74290d4d58b6be910abbe3d Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 14:09:54 -0400 Subject: [PATCH 11/20] add missing exports --- .../react-dom/src/server/ReactDOMServerLegacyFormatConfig.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js index 3dc354b452319..115a2bff61db9 100644 --- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js @@ -86,6 +86,8 @@ export { pushEmpty, pushStartInstance, pushEndInstance, + pushStartCompletedSuspenseBoundary, + pushEndSuspenseBoundary, writeStartSegment, writeEndSegment, writeCompletedSegmentInstruction, From 0b21bac078b97d706d02ef41409299737876f202 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 14:12:52 -0400 Subject: [PATCH 12/20] remove unnecessary arguments --- .../react-dom/src/server/ReactDOMServerFormatConfig.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js index 67c97db68cb83..9a8b503ee2f54 100644 --- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js @@ -1486,14 +1486,7 @@ export function pushStartCompletedSuspenseBoundary( target.push(startCompletedSuspenseBoundary); } -export function pushEndSuspenseBoundary( - target: Array, - type: string, - props: Object, - responseState: ResponseState, - formatContext: FormatContext, - assignID: null | SuspenseBoundaryID, -) { +export function pushEndSuspenseBoundary(target: Array) { target.push(endSuspenseBoundary); } From c6fef8fef0e95054387c5411425d06d0e3d25ee0 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 14:15:59 -0400 Subject: [PATCH 13/20] pushEndCompletedSuspenseBoundary --- packages/react-dom/src/server/ReactDOMServerFormatConfig.js | 2 +- .../react-dom/src/server/ReactDOMServerLegacyFormatConfig.js | 2 +- packages/react-server/src/ReactFizzServer.js | 4 ++-- .../react-server/src/forks/ReactServerFormatConfig.custom.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js index 9a8b503ee2f54..b3ad6fa075e37 100644 --- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js @@ -1486,7 +1486,7 @@ export function pushStartCompletedSuspenseBoundary( target.push(startCompletedSuspenseBoundary); } -export function pushEndSuspenseBoundary(target: Array) { +export function pushEndCompletedSuspenseBoundary(target: Array) { target.push(endSuspenseBoundary); } diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js index 115a2bff61db9..c74145c87274e 100644 --- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js @@ -87,7 +87,7 @@ export { pushStartInstance, pushEndInstance, pushStartCompletedSuspenseBoundary, - pushEndSuspenseBoundary, + pushEndCompletedSuspenseBoundary, writeStartSegment, writeEndSegment, writeCompletedSegmentInstruction, diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 24bd649ac38a2..cc0764945c5c6 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -53,7 +53,7 @@ import { pushStartInstance, pushEndInstance, pushStartCompletedSuspenseBoundary, - pushEndSuspenseBoundary, + pushEndCompletedSuspenseBoundary, createSuspenseBoundaryID, getChildFormatContext, } from './ReactServerFormatConfig'; @@ -535,7 +535,7 @@ function renderBackupSuspenseBoundary( pushStartCompletedSuspenseBoundary(segment.chunks); renderNode(request, task, content); - pushEndSuspenseBoundary(segment.chunks); + pushEndCompletedSuspenseBoundary(segment.chunks); popComponentStackInDEV(task); } diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js index a9bc277aa4cd6..ab39d3b28f0a1 100644 --- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js +++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js @@ -41,7 +41,7 @@ export const pushStartInstance = $$$hostConfig.pushStartInstance; export const pushEndInstance = $$$hostConfig.pushEndInstance; export const pushStartCompletedSuspenseBoundary = $$$hostConfig.pushStartCompletedSuspenseBoundary; -export const pushEndSuspenseBoundary = $$$hostConfig.pushEndSuspenseBoundary; +export const pushEndCompletedSuspenseBoundary = $$$hostConfig.pushEndCompletedSuspenseBoundary; export const writePlaceholder = $$$hostConfig.writePlaceholder; export const writeStartCompletedSuspenseBoundary = $$$hostConfig.writeStartCompletedSuspenseBoundary; From 683bcb1459177983206d3f572be820a16f89ded2 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 14:53:37 -0400 Subject: [PATCH 14/20] remove suspense id from {write|push}completedSuspenseBoundary --- .../react-dom/src/server/ReactDOMServerFormatConfig.js | 5 +++-- .../src/server/ReactDOMServerLegacyFormatConfig.js | 7 +------ .../src/server/ReactNativeServerFormatConfig.js | 10 +++------- packages/react-server/src/ReactFizzServer.js | 7 +------ .../src/forks/ReactServerFormatConfig.custom.js | 3 ++- 5 files changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js index b3ad6fa075e37..36d0fb712f896 100644 --- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js @@ -1486,14 +1486,15 @@ export function pushStartCompletedSuspenseBoundary( target.push(startCompletedSuspenseBoundary); } -export function pushEndCompletedSuspenseBoundary(target: Array) { +export function pushEndCompletedSuspenseBoundary( + target: Array, +) { target.push(endSuspenseBoundary); } export function writeStartCompletedSuspenseBoundary( destination: Destination, responseState: ResponseState, - id: SuspenseBoundaryID, ): boolean { return writeChunk(destination, startCompletedSuspenseBoundary); } diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js index c74145c87274e..3e698261a6c5a 100644 --- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js @@ -118,18 +118,13 @@ export function pushTextInstance( export function writeStartCompletedSuspenseBoundary( destination: Destination, responseState: ResponseState, - id: SuspenseBoundaryID, ): boolean { if (responseState.generateStaticMarkup) { // A completed boundary is done and doesn't need a representation in the HTML // if we're not going to be hydrating it. return true; } - return writeStartCompletedSuspenseBoundaryImpl( - destination, - responseState, - id, - ); + return writeStartCompletedSuspenseBoundaryImpl(destination, responseState); } export function writeStartClientRenderedSuspenseBoundary( destination: Destination, diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js index f63880ea79151..345088f3a52f3 100644 --- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js +++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js @@ -204,10 +204,8 @@ export function writePlaceholder( export function writeStartCompletedSuspenseBoundary( destination: Destination, responseState: ResponseState, - id: SuspenseBoundaryID, ): boolean { - writeChunk(destination, SUSPENSE_COMPLETE); - return writeChunk(destination, formatID(id)); + return writeChunk(destination, SUSPENSE_COMPLETE); } export function pushStartCompletedSuspenseBoundary( @@ -221,16 +219,14 @@ export function writeStartPendingSuspenseBoundary( responseState: ResponseState, id: SuspenseBoundaryID, ): boolean { - writeChunk(destination, SUSPENSE_PENDING); - return writeChunk(destination, formatID(id)); + return writeChunk(destination, SUSPENSE_PENDING); } export function writeStartClientRenderedSuspenseBoundary( destination: Destination, responseState: ResponseState, - id: SuspenseBoundaryID, ): boolean { writeChunk(destination, SUSPENSE_CLIENT_RENDER); - return writeChunk(destination, formatID(id)); + return writeChunk(destination); } export function writeEndCompletedSuspenseBoundary( destination: Destination, diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index cc0764945c5c6..3977ba3f5f24d 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1685,12 +1685,7 @@ function flushSegment( return writeEndPendingSuspenseBoundary(destination, request.responseState); } else { // We can inline this boundary's content as a complete boundary. - - writeStartCompletedSuspenseBoundary( - destination, - request.responseState, - boundary.id, - ); + writeStartCompletedSuspenseBoundary(destination, request.responseState); const completedSegments = boundary.completedSegments; invariant( diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js index ab39d3b28f0a1..22539f3aa86bf 100644 --- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js +++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js @@ -41,7 +41,8 @@ export const pushStartInstance = $$$hostConfig.pushStartInstance; export const pushEndInstance = $$$hostConfig.pushEndInstance; export const pushStartCompletedSuspenseBoundary = $$$hostConfig.pushStartCompletedSuspenseBoundary; -export const pushEndCompletedSuspenseBoundary = $$$hostConfig.pushEndCompletedSuspenseBoundary; +export const pushEndCompletedSuspenseBoundary = + $$$hostConfig.pushEndCompletedSuspenseBoundary; export const writePlaceholder = $$$hostConfig.writePlaceholder; export const writeStartCompletedSuspenseBoundary = $$$hostConfig.writeStartCompletedSuspenseBoundary; From 2c897e19c730db6a1cacc6bb7a4c99b62ca475f0 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 14:56:47 -0400 Subject: [PATCH 15/20] also remove id from writeClientRenderedSuspenseBoundary --- .../react-dom/src/server/ReactDOMServerLegacyFormatConfig.js | 2 -- packages/react-server/src/ReactFizzServer.js | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js index 3e698261a6c5a..60ab7544d88fa 100644 --- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js @@ -129,7 +129,6 @@ export function writeStartCompletedSuspenseBoundary( export function writeStartClientRenderedSuspenseBoundary( destination: Destination, responseState: ResponseState, - id: SuspenseBoundaryID, ): boolean { if (responseState.generateStaticMarkup) { // A client rendered boundary is done and doesn't need a representation in the HTML @@ -139,7 +138,6 @@ export function writeStartClientRenderedSuspenseBoundary( return writeStartClientRenderedSuspenseBoundaryImpl( destination, responseState, - id, ); } export function writeEndCompletedSuspenseBoundary( diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index 3977ba3f5f24d..f7c15934d7832 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1631,7 +1631,6 @@ function flushSegment( writeStartClientRenderedSuspenseBoundary( destination, request.responseState, - boundary.id, ); // Flush the fallback. From 5317edd243a02d7e0edc293d1119d9ed96be93e2 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 15:04:41 -0400 Subject: [PATCH 16/20] also remove id from writeClientRenderedSuspenseBoundary --- packages/react-dom/src/server/ReactDOMServerFormatConfig.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js index 36d0fb712f896..1b2bbc28f6669 100644 --- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js @@ -1508,7 +1508,6 @@ export function writeStartPendingSuspenseBoundary( export function writeStartClientRenderedSuspenseBoundary( destination: Destination, responseState: ResponseState, - id: SuspenseBoundaryID, ): boolean { return writeChunk(destination, startClientRenderedSuspenseBoundary); } From cd6927e94318979c470b4eee0b0ec5ffe26135ee Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 15:12:26 -0400 Subject: [PATCH 17/20] also remove id from writeClientRenderedSuspenseBoundary again xd --- .../src/server/ReactNativeServerFormatConfig.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js index 345088f3a52f3..3915392d2f1d1 100644 --- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js +++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js @@ -225,8 +225,7 @@ export function writeStartClientRenderedSuspenseBoundary( destination: Destination, responseState: ResponseState, ): boolean { - writeChunk(destination, SUSPENSE_CLIENT_RENDER); - return writeChunk(destination); + return writeChunk(destination, SUSPENSE_CLIENT_RENDER); } export function writeEndCompletedSuspenseBoundary( destination: Destination, From dfef6e2e22c8dbeaa8bb71f23196a0a83e217609 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Sat, 18 Sep 2021 10:37:17 -0400 Subject: [PATCH 18/20] fix oopsie and rename flag --- packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 2 +- .../src/server/ReactNativeServerFormatConfig.js | 3 ++- packages/react-server/src/ReactFizzServer.js | 4 ++-- packages/shared/ReactFeatureFlags.js | 2 +- packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +- packages/shared/forks/ReactFeatureFlags.native-oss.js | 2 +- packages/shared/forks/ReactFeatureFlags.test-renderer.js | 2 +- .../shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +- packages/shared/forks/ReactFeatureFlags.test-renderer.www.js | 2 +- packages/shared/forks/ReactFeatureFlags.testing.js | 2 +- packages/shared/forks/ReactFeatureFlags.testing.www.js | 2 +- packages/shared/forks/ReactFeatureFlags.www-dynamic.js | 2 +- packages/shared/forks/ReactFeatureFlags.www.js | 2 +- 13 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 7b2f2ad53e039..183caf4a3f218 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1479,7 +1479,7 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual(
Hello
); }); - // @gate experimental && enableFizzSuspenseAvoidThisFallback + // @gate experimental && enableSuspenseAvoidThisFallback it('should respect unstable_avoidThisFallback', async () => { const resolved = { 0: false, diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js index 3915392d2f1d1..24e9da45423d2 100644 --- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js +++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js @@ -219,7 +219,8 @@ export function writeStartPendingSuspenseBoundary( responseState: ResponseState, id: SuspenseBoundaryID, ): boolean { - return writeChunk(destination, SUSPENSE_PENDING); + writeChunk(destination, SUSPENSE_PENDING); + return writeChunk(destination, formatID(id)); } export function writeStartClientRenderedSuspenseBoundary( destination: Destination, diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index f7c15934d7832..f19f45e41f182 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -109,7 +109,7 @@ import { warnAboutDefaultPropsOnFunctionComponents, enableScopeAPI, enableLazyElements, - enableFizzSuspenseAvoidThisFallback, + enableSuspenseAvoidThisFallback, } from 'shared/ReactFeatureFlags'; import getComponentNameFromType from 'shared/getComponentNameFromType'; @@ -1007,7 +1007,7 @@ function renderElement( // eslint-disable-next-line-no-fallthrough case REACT_SUSPENSE_TYPE: { if ( - enableFizzSuspenseAvoidThisFallback && + enableSuspenseAvoidThisFallback && props.unstable_avoidThisFallback === true ) { renderBackupSuspenseBoundary(request, task, props); diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index d5caa5ee800a1..cced80df06b65 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -101,7 +101,7 @@ export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; -export const enableFizzSuspenseAvoidThisFallback = false; +export const enableSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 8d9555d88ae16..cc956b618b81f 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -49,7 +49,7 @@ export const disableModulePatternComponents = false; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; -export const enableFizzSuspenseAvoidThisFallback = false; +export const enableSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = false; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 3b90db5cc29cd..0418b5e0e076c 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -40,7 +40,7 @@ export const disableModulePatternComponents = false; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; -export const enableFizzSuspenseAvoidThisFallback = false; +export const enableSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = false; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 1e92aafb0779a..b0b59d0bcb344 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -40,7 +40,7 @@ export const disableModulePatternComponents = false; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; -export const enableFizzSuspenseAvoidThisFallback = false; +export const enableSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index fad22c418568a..3252c3b13339b 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -50,7 +50,7 @@ export const enableGetInspectorDataForInstanceInProduction = false; export const enableNewReconciler = false; export const deferRenderPhaseUpdateToNextBatch = false; export const warnOnSubscriptionInsideStartTransition = false; -export const enableFizzSuspenseAvoidThisFallback = false; +export const enableSuspenseAvoidThisFallback = false; export const enableStrictEffects = false; export const createRootStrictEffectsByDefault = false; export const enableUseRefAccessWarning = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 3e0f6a6f8b7fa..92767a211df0e 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -40,7 +40,7 @@ export const disableModulePatternComponents = true; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; -export const enableFizzSuspenseAvoidThisFallback = false; +export const enableSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index b57c62b474cbe..e5847b1280e72 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.js @@ -40,7 +40,7 @@ export const disableModulePatternComponents = false; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; -export const enableFizzSuspenseAvoidThisFallback = false; +export const enableSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index 7235fe71f07bf..7bcb2d85df825 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js @@ -40,7 +40,7 @@ export const disableModulePatternComponents = true; export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const warnOnSubscriptionInsideStartTransition = false; -export const enableFizzSuspenseAvoidThisFallback = false; +export const enableSuspenseAvoidThisFallback = false; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = !__EXPERIMENTAL__; export const enableFilterEmptyStringAttributesDOM = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js index 0c06b8fa666c9..265c668a9907d 100644 --- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js @@ -26,7 +26,7 @@ export const enableLazyContextPropagation = __VARIANT__; export const enableSyncDefaultUpdates = __VARIANT__; export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__; export const warnOnSubscriptionInsideStartTransition = __VARIANT__; -export const enableFizzSuspenseAvoidThisFallback = __VARIANT__; +export const enableSuspenseAvoidThisFallback = __VARIANT__; // Enable this flag to help with concurrent mode debugging. // It logs information to the console about React scheduling, rendering, and commit phases. diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 0520aaac8fcb0..feb885c72079c 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -32,7 +32,7 @@ export const { enableLazyContextPropagation, enableSyncDefaultUpdates, warnOnSubscriptionInsideStartTransition, - enableFizzSuspenseAvoidThisFallback, + enableSuspenseAvoidThisFallback, } = dynamicFeatureFlags; // On WWW, __EXPERIMENTAL__ is used for a new modern build. From aa5de952277f94818f3b9a167485e5b98e368402 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Mon, 20 Sep 2021 12:15:11 -0400 Subject: [PATCH 19/20] prettier --- packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 08ef0e333fc29..edf5814023142 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1547,10 +1547,10 @@ describe('ReactDOMFizzServer', () => { - + ); } - + await jest.runAllTimers(); await act(async () => { @@ -1631,7 +1631,7 @@ describe('ReactDOMFizzServer', () => { , ); }); - + // @gate supportsNativeUseSyncExternalStore // @gate experimental it('calls getServerSnapshot instead of getSnapshot', async () => { From 759103e108ff2842cf0084ac4e842f957ec5f94b Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Mon, 20 Sep 2021 15:36:50 -0400 Subject: [PATCH 20/20] hardcode flag to false --- packages/shared/forks/ReactFeatureFlags.www-dynamic.js | 1 - packages/shared/forks/ReactFeatureFlags.www.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js index 252fc23ffd5b3..6400ef0422503 100644 --- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js @@ -27,7 +27,6 @@ export const enableLazyContextPropagation = __VARIANT__; export const enableSyncDefaultUpdates = __VARIANT__; export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__; export const warnOnSubscriptionInsideStartTransition = __VARIANT__; -export const enableSuspenseAvoidThisFallback = __VARIANT__; // Enable this flag to help with concurrent mode debugging. // It logs information to the console about React scheduling, rendering, and commit phases. diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 0e21004a0e156..c5dde53578c95 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -32,7 +32,6 @@ export const { enableLazyContextPropagation, enableSyncDefaultUpdates, warnOnSubscriptionInsideStartTransition, - enableSuspenseAvoidThisFallback, } = dynamicFeatureFlags; // On WWW, __EXPERIMENTAL__ is used for a new modern build. @@ -49,6 +48,7 @@ export const enableProfilerNestedUpdateScheduledHook = export const enableUpdaterTracking = __PROFILE__; export const enableSuspenseLayoutEffectSemantics = true; +export const enableSuspenseAvoidThisFallback = false; // Logs additional User Timing API marks for use with an experimental profiling tool. export const enableSchedulingProfiler =