[Follow-up] Land enableClientRenderFallbackOnTextMismatch

acdlite · acdlite · commit 327e4a1f96fb · 2022-06-13T12:01:44.000-04:00
This was meant to land in the previous commit; forgot to stage the
changes when I was rebasing.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3535,7 +3535,7 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental && enableClientRenderFallbackOnTextMismatch
+  // @gate experimental
   it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -3625,7 +3625,7 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
   });
 
-  // @gate experimental && enableClientRenderFallbackOnTextMismatch
+  // @gate experimental
   it('only warns once on hydration mismatch while within a suspense boundary', async () => {
     const originalConsoleError = console.error;
     const mockError = jest.fn();
@@ -4715,15 +4715,11 @@ describe('ReactDOMFizzServer', () => {
           },
         });
         expect(Scheduler).toFlushAndYield([]);
-        expect(errors).toEqual(
-          [
-            gate(flags => flags.enableClientRenderFallbackOnTextMismatch)
-              ? 'Text content does not match server-rendered HTML.'
-              : null,
-            'Hydration failed because the initial UI does not match what was rendered on the server.',
-            'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-          ].filter(Boolean),
-        );
+        expect(errors).toEqual([
+          'Text content does not match server-rendered HTML.',
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
         expect(getVisibleChildren(container)).toEqual(
           <title>{['hello1', 'hello2']}</title>,
         );
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -86,8 +86,7 @@ describe('ReactDOMServerHydration', () => {
           </div>
         );
       }
-      if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
             "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
               in main (at **)
@@ -98,16 +97,6 @@ describe('ReactDOMServerHydration', () => {
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
-      } else {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
-              in main (at **)
-              in div (at **)
-              in Mismatch (at **)",
-          ]
-        `);
-      }
     });
 
     // @gate __DEV__
@@ -357,8 +346,7 @@ describe('ReactDOMServerHydration', () => {
         function Mismatch({isClient}) {
           return <div className="parent">{isClient && 'only'}</div>;
         }
-        if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
                 in div (at **)
@@ -368,15 +356,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3416,7 +3416,6 @@ describe('ReactDOMServerPartialHydration', () => {
     );
   });
 
-  // @gate enableClientRenderFallbackOnTextMismatch
   it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
     function DirectTextChild({text}) {
       return <div>{text}</div>;
@@ -3448,7 +3447,6 @@ describe('ReactDOMServerPartialHydration', () => {
     ]);
   });
 
-  // @gate enableClientRenderFallbackOnTextMismatch
   it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
     function Sibling() {
       return 'Sibling';
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -72,7 +72,6 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
 import {
   enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
-  enableClientRenderFallbackOnTextMismatch,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -250,7 +249,7 @@ export function checkForUnmatchedText(
     }
   }
 
-  if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
+  if (isConcurrentMode) {
     // In concurrent roots, we throw when there's a text mismatch and revert to
     // client rendering, up to the nearest Suspense boundary.
     throw new Error('Text content does not match server-rendered HTML.');
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -169,7 +169,6 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate enableUseMutableSource
-  // @gate enableClientRenderFallbackOnTextMismatch
   it('should detect a tear before hydrating a component', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
@@ -31,9 +31,6 @@ export const enableSymbolFallbackForWWW = false;
 // internal tests need to be updated. The open source behavior is correct.
 export const skipUnmountedBoundaries = true;
 
-// TODO: Finish rolling out in www
-export const enableClientRenderFallbackOnTextMismatch = true;
-
 // TODO: Need to review this code one more time before landing
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -51,7 +51,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 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
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 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
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 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
@@ -50,7 +50,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 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
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 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
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 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
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 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
@@ -26,7 +26,6 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
-export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableSymbolFallbackForWWW = __VARIANT__;
 // Enable this flag to help with concurrent mode debugging.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,7 +32,6 @@ export const {
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-  enableClientRenderFallbackOnTextMismatch,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
