Skip to content

Commit d469891

Browse files
authored
Disable legacy context (#27991)
Disable legacy context This enables the `disableLegacyContext` flag for web and React Native.
1 parent 17eaaca commit d469891

File tree

8 files changed

+66
-26
lines changed

8 files changed

+66
-26
lines changed

packages/react-devtools-shared/src/__tests__/editing-test.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -934,6 +934,7 @@ describe('editing interface', () => {
934934
}
935935

936936
// @reactVersion >= 16.9
937+
// @gate !disableLegacyContext
937938
it('should have editable values', async () => {
938939
await mountTestApp();
939940

@@ -983,6 +984,7 @@ describe('editing interface', () => {
983984
});
984985

985986
// @reactVersion >= 16.9
987+
// @gate !disableLegacyContext
986988
// Tests the combination of older frontend (DevTools UI) with newer backend (embedded within a renderer).
987989
it('should still support overriding context values with legacy backend methods', async () => {
988990
await mountTestApp();
@@ -1014,6 +1016,7 @@ describe('editing interface', () => {
10141016
});
10151017

10161018
// @reactVersion >= 16.9
1019+
// @gate !disableLegacyContext
10171020
it('should have editable paths', async () => {
10181021
await mountTestApp();
10191022

@@ -1055,6 +1058,7 @@ describe('editing interface', () => {
10551058
});
10561059

10571060
// @reactVersion >= 16.9
1061+
// @gate !disableLegacyContext
10581062
it('should enable adding new object properties and array values', async () => {
10591063
await mountTestApp();
10601064

@@ -1109,6 +1113,7 @@ describe('editing interface', () => {
11091113
});
11101114

11111115
// @reactVersion >= 16.9
1116+
// @gate !disableLegacyContext
11121117
it('should have deletable keys', async () => {
11131118
await mountTestApp();
11141119

packages/react-devtools-shared/src/__tests__/profilingCache-test.js

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,21 @@ describe('ProfilingCache', () => {
411411
},
412412
}
413413
`);
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+
414429
expect(changeDescriptions[1]).toMatchInlineSnapshot(`
415430
Map {
416431
5 => {
@@ -436,15 +451,11 @@ describe('ProfilingCache', () => {
436451
"didHooksChange": false,
437452
"hooks": [],
438453
"isFirstMount": false,
439-
"props": [
440-
"count",
441-
],
454+
"props": [],
442455
"state": null,
443456
},
444457
6 => {
445-
"context": [
446-
"count",
447-
],
458+
"context": null,
448459
"didHooksChange": false,
449460
"hooks": null,
450461
"isFirstMount": false,
@@ -490,7 +501,7 @@ describe('ProfilingCache', () => {
490501
"state": null,
491502
},
492503
6 => {
493-
"context": [],
504+
"context": null,
494505
"didHooksChange": false,
495506
"hooks": null,
496507
"isFirstMount": false,
@@ -536,7 +547,7 @@ describe('ProfilingCache', () => {
536547
"state": null,
537548
},
538549
6 => {
539-
"context": [],
550+
"context": null,
540551
"didHooksChange": false,
541552
"hooks": null,
542553
"isFirstMount": false,
@@ -583,7 +594,7 @@ describe('ProfilingCache', () => {
583594
"state": null,
584595
},
585596
6 => {
586-
"context": [],
597+
"context": null,
587598
"didHooksChange": false,
588599
"hooks": null,
589600
"isFirstMount": false,

packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1112,6 +1112,7 @@ describe('ReactComponentLifeCycle', () => {
11121112
});
11131113

11141114
if (!require('shared/ReactFeatureFlags').disableModulePatternComponents) {
1115+
// @gate !disableLegacyContext
11151116
it('calls effects on module-pattern component', async () => {
11161117
const log = [];
11171118

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -880,7 +880,6 @@ describe('ReactErrorBoundaries', () => {
880880
});
881881

882882
// @gate !disableModulePatternComponents
883-
// @gate !disableLegacyContext
884883
it('renders an error state if module-style context provider throws in componentWillMount', async () => {
885884
function BrokenComponentWillMountWithContext() {
886885
return {
@@ -901,23 +900,31 @@ describe('ReactErrorBoundaries', () => {
901900

902901
const container = document.createElement('div');
903902
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([
914913
'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
915914
'returns a class instance. ' +
916915
'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
917916
"If you can't use a class try assigning the prototype on the function as a workaround. " +
918917
'`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
919918
"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+
]);
921928

922929
expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
923930
});

packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -859,14 +859,22 @@ describe('ReactLegacyErrorBoundaries', () => {
859859
</ErrorBoundary>,
860860
container,
861861
),
862-
).toErrorDev(
862+
).toErrorDev([
863863
'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
864864
'returns a class instance. ' +
865865
'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
866866
"If you can't use a class try assigning the prototype on the function as a workaround. " +
867867
'`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
868868
"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+
]);
870878
expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
871879
});
872880
}

packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1782,6 +1782,14 @@ describe('ReactIncrementalErrorHandling', () => {
17821782
"If you can't use a class try assigning the prototype on the function as a workaround. " +
17831783
'`Provider.prototype = React.Component.prototype`. ' +
17841784
"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+
),
17851793
]);
17861794
});
17871795

packages/shared/ReactFeatureFlags.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ export const transitionLaneExpirationMs = 5000;
140140
// -----------------------------------------------------------------------------
141141
const __NEXT_MAJOR__ = __EXPERIMENTAL__;
142142

143-
// Not ready to break experimental yet.
144-
export const disableLegacyContext = false;
143+
// Removes legacy style context
144+
export const disableLegacyContext = __NEXT_MAJOR__;
145145

146146
// Not ready to break experimental yet.
147147
// Disable javascript: URL strings in href for XSS protection.

packages/shared/forks/ReactFeatureFlags.test-renderer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ export const disableIEWorkarounds = true;
3333
export const enableScopeAPI = false;
3434
export const enableCreateEventHandleAPI = false;
3535
export const enableSuspenseCallback = false;
36-
export const disableLegacyContext = false;
3736
export const enableTrustedTypesIntegration = false;
3837
export const disableTextareaChildren = false;
3938
export const disableModulePatternComponents = false;
@@ -100,6 +99,7 @@ export const disableStringRefs = __NEXT_MAJOR__;
10099
export const enableReactTestRendererWarning = false;
101100
export const enableBigIntSupport = __NEXT_MAJOR__;
102101
export const disableLegacyMode = __NEXT_MAJOR__;
102+
export const disableLegacyContext = __NEXT_MAJOR__;
103103

104104
// Flow magic to verify the exports of this file match the original version.
105105
((((null: any): ExportsType): FeatureFlagsType): ExportsType);

0 commit comments

Comments
 (0)