Disable legacy context (#27991)
Disable legacy context This enables the `disableLegacyContext` flag for web and React Native.
Jan Kassens committed
Mar 12, 2024 at 18:00 UTC
d46989150e9225f2bf299dbca2270596d0829a58
8 files changed
+66
-26
packages/react-devtools-shared/src/__tests__/editing-test.js
+5
@@ -934,6 +934,7 @@ describe('editing interface', () => {
934
}
935
936
// @reactVersion >= 16.9
937
+ // @gate !disableLegacyContext
938
it('should have editable values', async () => {
939
await mountTestApp();
940
@@ -983,6 +984,7 @@ describe('editing interface', () => {
984
});
985
986
// @reactVersion >= 16.9
987
+ // @gate !disableLegacyContext
988
// Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
989
it('should still support overriding context values with legacy backend methods', async () => {
990
await mountTestApp();
@@ -1014,6 +1016,7 @@ describe('editing interface', () => {
1016
});
1017
1018
// @reactVersion >= 16.9
1019
+ // @gate !disableLegacyContext
1020
it('should have editable paths', async () => {
1021
await mountTestApp();
1022
@@ -1055,6 +1058,7 @@ describe('editing interface', () => {
1058
});
1059
1060
// @reactVersion >= 16.9
1061
+ // @gate !disableLegacyContext
1062
it('should enable adding new object properties and array values', async () => {
1063
await mountTestApp();
1064
@@ -1109,6 +1113,7 @@ describe('editing interface', () => {
1113
});
1114
1115
// @reactVersion >= 16.9
1116
+ // @gate !disableLegacyContext
1117
it('should have deletable keys', async () => {
1118
await mountTestApp();
1119
packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+20
-9
@@ -411,6 +411,21 @@ describe('ProfilingCache', () => {
411
},
412
}
413
`);
414
+
415
+ if (gate(flags => !flags.disableLegacyContext)) {
416
+ expect(changeDescriptions[1].get(6).context).toEqual(['count']);
417
+ expect(changeDescriptions[1].get(7).props).toEqual(['count']);
418
+ expect(changeDescriptions[2].get(6).context).toEqual([]);
419
+ expect(changeDescriptions[3].get(6).context).toEqual([]);
420
+ expect(changeDescriptions[4].get(6).context).toEqual([]);
421
+
422
+ changeDescriptions[1].get(6).context = null;
423
+ changeDescriptions[1].get(7).props = [];
424
+ changeDescriptions[2].get(6).context = null;
425
+ changeDescriptions[3].get(6).context = null;
426
+ changeDescriptions[4].get(6).context = null;
427
+ }
428
+
429
expect(changeDescriptions[1]).toMatchInlineSnapshot(`
430
Map {
431
5 => {
@@ -436,15 +451,11 @@ describe('ProfilingCache', () => {
451
"didHooksChange": false,
452
"hooks": [],
453
"isFirstMount": false,
439
- "props": [
440
- "count",
441
- ],
454
+ "props": [],
455
"state": null,
456
},
457
6 => {
445
- "context": [
446
- "count",
447
- ],
458
+ "context": null,
459
"didHooksChange": false,
460
"hooks": null,
461
"isFirstMount": false,
@@ -490,7 +501,7 @@ describe('ProfilingCache', () => {
501
"state": null,
502
},
503
6 => {
493
- "context": [],
504
+ "context": null,
505
"didHooksChange": false,
506
"hooks": null,
507
"isFirstMount": false,
@@ -536,7 +547,7 @@ describe('ProfilingCache', () => {
547
"state": null,
548
},
549
6 => {
539
- "context": [],
550
+ "context": null,
551
"didHooksChange": false,
552
"hooks": null,
553
"isFirstMount": false,
@@ -583,7 +594,7 @@ describe('ProfilingCache', () => {
594
"state": null,
595
},
596
6 => {
586
- "context": [],
597
+ "context": null,
598
"didHooksChange": false,
599
"hooks": null,
600
"isFirstMount": false,
packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
+1
@@ -1112,6 +1112,7 @@ describe('ReactComponentLifeCycle', () => {
1112
});
1113
1114
if (!require('shared/ReactFeatureFlags').disableModulePatternComponents) {
1115
+ // @gate !disableLegacyContext
1116
it('calls effects on module-pattern component', async () => {
1117
const log = [];
1118
packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+19
-12
@@ -880,7 +880,6 @@ describe('ReactErrorBoundaries', () => {
880
});
881
882
// @gate !disableModulePatternComponents
883
- // @gate !disableLegacyContext
883
it('renders an error state if module-style context provider throws in componentWillMount', async () => {
884
function BrokenComponentWillMountWithContext() {
885
return {
@@ -901,23 +900,31 @@ describe('ReactErrorBoundaries', () => {
900
901
const container = document.createElement('div');
902
const root = ReactDOMClient.createRoot(container);
904
- await expect(
905
- async () =>
906
- await act(async () => {
907
- root.render(
908
- <ErrorBoundary>
909
- <BrokenComponentWillMountWithContext />
910
- </ErrorBoundary>,
911
- );
912
- }),
913
- ).toErrorDev(
903
+
904
+ await expect(async () => {
905
+ await act(() => {
906
+ root.render(
907
+ <ErrorBoundary>
908
+ <BrokenComponentWillMountWithContext />
909
+ </ErrorBoundary>,
910
+ );
911
+ });
912
+ }).toErrorDev([
913
'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
914
'returns a class instance. ' +
915
'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
916
"If you can't use a class try assigning the prototype on the function as a workaround. " +
917
'`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
918
"Don't use an arrow function since it cannot be called with `new` by React.",
920
- );
919
+ ...gate(flags =>
920
+ flags.disableLegacyContext
921
+ ? [
922
+ 'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
923
+ 'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
924
+ ]
925
+ : [],
926
+ ),
927
+ ]);
928
929
expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
930
});
packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
+10
-2
@@ -859,14 +859,22 @@ describe('ReactLegacyErrorBoundaries', () => {
859
</ErrorBoundary>,
860
container,
861
),
862
- ).toErrorDev(
862
+ ).toErrorDev([
863
'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
864
'returns a class instance. ' +
865
'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
866
"If you can't use a class try assigning the prototype on the function as a workaround. " +
867
'`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
868
"Don't use an arrow function since it cannot be called with `new` by React.",
869
- );
869
+ ...gate(flags =>
870
+ flags.disableLegacyContext
871
+ ? [
872
+ 'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
873
+ 'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
874
+ ]
875
+ : [],
876
+ ),
877
+ ]);
878
expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
879
});
880
}
packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+8
@@ -1782,6 +1782,14 @@ describe('ReactIncrementalErrorHandling', () => {
1782
"If you can't use a class try assigning the prototype on the function as a workaround. " +
1783
'`Provider.prototype = React.Component.prototype`. ' +
1784
"Don't use an arrow function since it cannot be called with `new` by React.",
1785
+ ...gate(flags =>
1786
+ flags.disableLegacyContext
1787
+ ? [
1788
+ 'Warning: Provider uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
1789
+ 'Warning: Provider uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
1790
+ ]
1791
+ : [],
1792
+ ),
1793
]);
1794
});
1795
packages/shared/ReactFeatureFlags.js
+2
-2
@@ -140,8 +140,8 @@ export const transitionLaneExpirationMs = 5000;
140
// -----------------------------------------------------------------------------
141
const __NEXT_MAJOR__ = __EXPERIMENTAL__;
142
143
-// Not ready to break experimental yet.
144
-export const disableLegacyContext = false;
143
+// Removes legacy style context
144
+export const disableLegacyContext = __NEXT_MAJOR__;
145
146
// Not ready to break experimental yet.
147
// Disable javascript: URL strings in href for XSS protection.
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
-1
@@ -33,7 +33,6 @@ export const disableIEWorkarounds = true;
33
export const enableScopeAPI = false;
34
export const enableCreateEventHandleAPI = false;
35
export const enableSuspenseCallback = false;
36
-export const disableLegacyContext = false;
36
export const enableTrustedTypesIntegration = false;
37
export const disableTextareaChildren = false;
38
export const disableModulePatternComponents = false;
@@ -100,6 +99,7 @@ export const disableStringRefs = __NEXT_MAJOR__;
99
export const enableReactTestRendererWarning = false;
100
export const enableBigIntSupport = __NEXT_MAJOR__;
101
export const disableLegacyMode = __NEXT_MAJOR__;
102
+export const disableLegacyContext = __NEXT_MAJOR__;
103
104
// Flow magic to verify the exports of this file match the original version.
105
((((null: any): ExportsType): FeatureFlagsType): ExportsType);