mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
[flags] Delete enableSuspenseAvoidThisFallbackFizz (#31779)
We're not shipping `enableSuspenseAvoidThisFallback` and the fizz flag is already off so we can delete it.
This commit is contained in:
@@ -3886,18 +3886,6 @@ const clientRenderedSuspenseBoundaryError1D =
|
||||
const clientRenderedSuspenseBoundaryError2 =
|
||||
stringToPrecomputedChunk('></template>');
|
||||
|
||||
export function pushStartCompletedSuspenseBoundary(
|
||||
target: Array<Chunk | PrecomputedChunk>,
|
||||
) {
|
||||
target.push(startCompletedSuspenseBoundary);
|
||||
}
|
||||
|
||||
export function pushEndCompletedSuspenseBoundary(
|
||||
target: Array<Chunk | PrecomputedChunk>,
|
||||
) {
|
||||
target.push(endSuspenseBoundary);
|
||||
}
|
||||
|
||||
export function writeStartCompletedSuspenseBoundary(
|
||||
destination: Destination,
|
||||
renderState: RenderState,
|
||||
|
||||
@@ -142,8 +142,6 @@ export {
|
||||
makeId,
|
||||
pushStartInstance,
|
||||
pushEndInstance,
|
||||
pushStartCompletedSuspenseBoundary,
|
||||
pushEndCompletedSuspenseBoundary,
|
||||
pushFormStateMarkerIsMatching,
|
||||
pushFormStateMarkerIsNotMatching,
|
||||
writeStartSegment,
|
||||
|
||||
@@ -2211,151 +2211,6 @@ describe('ReactDOMFizzServer', () => {
|
||||
expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
|
||||
});
|
||||
|
||||
// @gate enableSuspenseAvoidThisFallbackFizz
|
||||
it('should respect unstable_avoidThisFallback', async () => {
|
||||
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, depth}) => {
|
||||
if (isClient) {
|
||||
// Resuspend after re-rendering on client to check that fallback shows on client
|
||||
throw new Promise(() => {});
|
||||
}
|
||||
if (!resolved[depth]) {
|
||||
throw promises[depth];
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Text text={`resolved ${depth}`} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function App({isClient}) {
|
||||
return (
|
||||
<div>
|
||||
<Text text="Non Suspense Content" />
|
||||
<Suspense
|
||||
fallback={
|
||||
<span>
|
||||
<Text text="Avoided Fallback" />
|
||||
</span>
|
||||
}
|
||||
unstable_avoidThisFallback={true}>
|
||||
<InnerComponent isClient={isClient} depth={0} />
|
||||
<div>
|
||||
<Suspense fallback={<Text text="Fallback" />}>
|
||||
<Suspense
|
||||
fallback={
|
||||
<span>
|
||||
<Text text="Avoided Fallback2" />
|
||||
</span>
|
||||
}
|
||||
unstable_avoidThisFallback={true}>
|
||||
<InnerComponent isClient={isClient} depth={1} />
|
||||
</Suspense>
|
||||
</Suspense>
|
||||
</div>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
await jest.runAllTimers();
|
||||
|
||||
await act(() => {
|
||||
const {pipe} = renderToPipeableStream(<App isClient={false} />);
|
||||
pipe(writable);
|
||||
});
|
||||
|
||||
// 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(() => {
|
||||
promiseRes[0]();
|
||||
});
|
||||
|
||||
expect(getVisibleChildren(container)).toEqual(
|
||||
<div>
|
||||
Non Suspense Content
|
||||
<div>resolved 0</div>
|
||||
<div>Fallback</div>
|
||||
</div>,
|
||||
);
|
||||
|
||||
expect(container.innerHTML).not.toContain('Avoided Fallback2');
|
||||
|
||||
await act(() => {
|
||||
promiseRes[1]();
|
||||
});
|
||||
|
||||
expect(getVisibleChildren(container)).toEqual(
|
||||
<div>
|
||||
Non Suspense Content
|
||||
<div>resolved 0</div>
|
||||
<div>
|
||||
<div>resolved 1</div>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
|
||||
let root;
|
||||
await act(async () => {
|
||||
root = ReactDOMClient.hydrateRoot(container, <App isClient={false} />);
|
||||
await waitForAll([]);
|
||||
await jest.runAllTimers();
|
||||
});
|
||||
|
||||
// No change after hydration
|
||||
expect(getVisibleChildren(container)).toEqual(
|
||||
<div>
|
||||
Non Suspense Content
|
||||
<div>resolved 0</div>
|
||||
<div>
|
||||
<div>resolved 1</div>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
// Trigger update by changing isClient to true
|
||||
root.render(<App isClient={true} />);
|
||||
await waitForAll([]);
|
||||
await jest.runAllTimers();
|
||||
});
|
||||
|
||||
// Now that we've resuspended at the root we show the root fallback
|
||||
expect(getVisibleChildren(container)).toEqual(
|
||||
<div>
|
||||
Non Suspense Content
|
||||
<div style="display: none;">resolved 0</div>
|
||||
<div style="display: none;">
|
||||
<div>resolved 1</div>
|
||||
</div>
|
||||
<span>Avoided Fallback</span>
|
||||
</div>,
|
||||
);
|
||||
});
|
||||
|
||||
it('calls getServerSnapshot instead of getSnapshot', async () => {
|
||||
const ref = React.createRef();
|
||||
|
||||
|
||||
@@ -49,8 +49,6 @@ export {
|
||||
getChildFormatContext,
|
||||
makeId,
|
||||
pushEndInstance,
|
||||
pushStartCompletedSuspenseBoundary,
|
||||
pushEndCompletedSuspenseBoundary,
|
||||
pushFormStateMarkerIsMatching,
|
||||
pushFormStateMarkerIsNotMatching,
|
||||
writeStartSegment,
|
||||
|
||||
+1
-33
@@ -65,8 +65,6 @@ import {
|
||||
pushTextInstance,
|
||||
pushStartInstance,
|
||||
pushEndInstance,
|
||||
pushStartCompletedSuspenseBoundary,
|
||||
pushEndCompletedSuspenseBoundary,
|
||||
pushSegmentFinale,
|
||||
getChildFormatContext,
|
||||
writeHoistables,
|
||||
@@ -155,7 +153,6 @@ import {
|
||||
disableLegacyContext,
|
||||
disableLegacyContextForFunctionComponents,
|
||||
enableScopeAPI,
|
||||
enableSuspenseAvoidThisFallbackFizz,
|
||||
enableCache,
|
||||
enablePostpone,
|
||||
enableHalt,
|
||||
@@ -1490,28 +1487,6 @@ function replaySuspenseBoundary(
|
||||
request.pingedTasks.push(suspendedFallbackTask);
|
||||
}
|
||||
|
||||
function renderBackupSuspenseBoundary(
|
||||
request: Request,
|
||||
task: Task,
|
||||
keyPath: KeyNode,
|
||||
props: Object,
|
||||
) {
|
||||
const content = props.children;
|
||||
const segment = task.blockedSegment;
|
||||
const prevKeyPath = task.keyPath;
|
||||
task.keyPath = keyPath;
|
||||
if (segment === null) {
|
||||
// Replay
|
||||
renderNode(request, task, content, -1);
|
||||
} else {
|
||||
// Render
|
||||
pushStartCompletedSuspenseBoundary(segment.chunks);
|
||||
renderNode(request, task, content, -1);
|
||||
pushEndCompletedSuspenseBoundary(segment.chunks);
|
||||
}
|
||||
task.keyPath = prevKeyPath;
|
||||
}
|
||||
|
||||
function renderHostElement(
|
||||
request: Request,
|
||||
task: Task,
|
||||
@@ -2194,14 +2169,7 @@ function renderElement(
|
||||
throw new Error('ReactDOMServer does not yet support scope components.');
|
||||
}
|
||||
case REACT_SUSPENSE_TYPE: {
|
||||
if (
|
||||
enableSuspenseAvoidThisFallbackFizz &&
|
||||
props.unstable_avoidThisFallback === true
|
||||
) {
|
||||
renderBackupSuspenseBoundary(request, task, keyPath, props);
|
||||
} else {
|
||||
renderSuspenseBoundary(request, task, keyPath, props);
|
||||
}
|
||||
renderSuspenseBoundary(request, task, keyPath, props);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,10 +51,6 @@ export const makeId = $$$config.makeId;
|
||||
export const pushTextInstance = $$$config.pushTextInstance;
|
||||
export const pushStartInstance = $$$config.pushStartInstance;
|
||||
export const pushEndInstance = $$$config.pushEndInstance;
|
||||
export const pushStartCompletedSuspenseBoundary =
|
||||
$$$config.pushStartCompletedSuspenseBoundary;
|
||||
export const pushEndCompletedSuspenseBoundary =
|
||||
$$$config.pushEndCompletedSuspenseBoundary;
|
||||
export const pushSegmentFinale = $$$config.pushSegmentFinale;
|
||||
export const pushFormStateMarkerIsMatching =
|
||||
$$$config.pushFormStateMarkerIsMatching;
|
||||
|
||||
@@ -108,8 +108,6 @@ export const enableLegacyHidden = false;
|
||||
|
||||
// Enables unstable_avoidThisFallback feature in Fiber
|
||||
export const enableSuspenseAvoidThisFallback = false;
|
||||
// Enables unstable_avoidThisFallback feature in Fizz
|
||||
export const enableSuspenseAvoidThisFallbackFizz = false;
|
||||
|
||||
export const enableCPUSuspense = __EXPERIMENTAL__;
|
||||
|
||||
|
||||
@@ -73,7 +73,6 @@ export const enableComponentPerformanceTrack = false;
|
||||
export const enableScopeAPI = false;
|
||||
export const enableServerComponentLogs = true;
|
||||
export const enableSuspenseAvoidThisFallback = false;
|
||||
export const enableSuspenseAvoidThisFallbackFizz = false;
|
||||
export const enableSuspenseCallback = true;
|
||||
export const enableTaint = true;
|
||||
export const enableTransitionTracing = false;
|
||||
|
||||
@@ -63,7 +63,6 @@ export const enableScopeAPI = false;
|
||||
export const enableServerComponentLogs = true;
|
||||
export const enableShallowPropDiffing = false;
|
||||
export const enableSuspenseAvoidThisFallback = false;
|
||||
export const enableSuspenseAvoidThisFallbackFizz = false;
|
||||
export const enableSuspenseCallback = false;
|
||||
export const enableTaint = true;
|
||||
export const enableTransitionTracing = false;
|
||||
|
||||
@@ -33,7 +33,6 @@ export const enableSuspenseCallback = false;
|
||||
export const enableTrustedTypesIntegration = false;
|
||||
export const disableTextareaChildren = false;
|
||||
export const enableSuspenseAvoidThisFallback = false;
|
||||
export const enableSuspenseAvoidThisFallbackFizz = false;
|
||||
export const enableCPUSuspense = false;
|
||||
export const enableNoCloningMemoCache = false;
|
||||
export const enableUseEffectEventHook = false;
|
||||
|
||||
@@ -57,7 +57,6 @@ export const enableScopeAPI = false;
|
||||
export const enableServerComponentLogs = true;
|
||||
export const enableShallowPropDiffing = false;
|
||||
export const enableSuspenseAvoidThisFallback = false;
|
||||
export const enableSuspenseAvoidThisFallbackFizz = false;
|
||||
export const enableSuspenseCallback = false;
|
||||
export const enableTaint = true;
|
||||
export const enableTransitionTracing = false;
|
||||
|
||||
@@ -35,7 +35,6 @@ export const disableLegacyContextForFunctionComponents = false;
|
||||
export const enableTrustedTypesIntegration = false;
|
||||
export const disableTextareaChildren = false;
|
||||
export const enableSuspenseAvoidThisFallback = true;
|
||||
export const enableSuspenseAvoidThisFallbackFizz = false;
|
||||
export const enableCPUSuspense = false;
|
||||
export const enableNoCloningMemoCache = false;
|
||||
export const enableUseEffectEventHook = false;
|
||||
|
||||
@@ -51,7 +51,6 @@ export const enableUpdaterTracking = __PROFILE__;
|
||||
export const enableFabricCompleteRootInCommitPhase = false;
|
||||
|
||||
export const enableSuspenseAvoidThisFallback = true;
|
||||
export const enableSuspenseAvoidThisFallbackFizz = false;
|
||||
|
||||
export const enableCPUSuspense = true;
|
||||
export const enableUseEffectEventHook = true;
|
||||
|
||||
Reference in New Issue
Block a user