Skip to content

Commit

Permalink
Disable legacy context
Browse files Browse the repository at this point in the history 
This enables the `disableLegacyContext` flag for web and React Native.
  • Loading branch information
@kassens
kassens committed Mar 12, 2024
1 parent eb33bd7 commit f610b74
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 26 deletions.
5 changes: 5 additions & 0 deletions packages/react-devtools-shared/src/__tests__/editing-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -934,6 +934,7 @@ describe('editing interface', () => {
}

// @reactVersion >= 16.9
// @gate !disableLegacyContext
it('should have editable values', async () => {
await mountTestApp();

Expand Down Expand Up @@ -983,6 +984,7 @@ describe('editing interface', () => {
});

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

// @reactVersion >= 16.9
// @gate !disableLegacyContext
it('should have editable paths', async () => {
await mountTestApp();

Expand Down Expand Up @@ -1055,6 +1058,7 @@ describe('editing interface', () => {
});

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

Expand Down Expand Up @@ -1109,6 +1113,7 @@ describe('editing interface', () => {
});

// @reactVersion >= 16.9
// @gate !disableLegacyContext
it('should have deletable keys', async () => {
await mountTestApp();

Expand Down
29 changes: 20 additions & 9 deletions packages/react-devtools-shared/src/__tests__/profilingCache-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,21 @@ describe('ProfilingCache', () => {
},
}
`);

if (gate(flags => !flags.disableLegacyContext)) {
expect(changeDescriptions[1].get(6).context).toEqual(['count']);
expect(changeDescriptions[1].get(7).props).toEqual(['count']);
expect(changeDescriptions[2].get(6).context).toEqual([]);
expect(changeDescriptions[3].get(6).context).toEqual([]);
expect(changeDescriptions[4].get(6).context).toEqual([]);

changeDescriptions[1].get(6).context = null;
changeDescriptions[1].get(7).props = [];
changeDescriptions[2].get(6).context = null;
changeDescriptions[3].get(6).context = null;
changeDescriptions[4].get(6).context = null;
}

expect(changeDescriptions[1]).toMatchInlineSnapshot(`
Map {
5 => {
Expand All @@ -436,15 +451,11 @@ describe('ProfilingCache', () => {
"didHooksChange": false,
"hooks": [],
"isFirstMount": false,
"props": [
"count",
],
"props": [],
"state": null,
},
6 => {
"context": [
"count",
],
"context": null,
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
Expand Down Expand Up @@ -490,7 +501,7 @@ describe('ProfilingCache', () => {
"state": null,
},
6 => {
"context": [],
"context": null,
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
Expand Down Expand Up @@ -536,7 +547,7 @@ describe('ProfilingCache', () => {
"state": null,
},
6 => {
"context": [],
"context": null,
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
Expand Down Expand Up @@ -583,7 +594,7 @@ describe('ProfilingCache', () => {
"state": null,
},
6 => {
"context": [],
"context": null,
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
Expand Down
1 change: 1 addition & 0 deletions packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1112,6 +1112,7 @@ describe('ReactComponentLifeCycle', () => {
});

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

Expand Down
31 changes: 19 additions & 12 deletions packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -880,7 +880,6 @@ describe('ReactErrorBoundaries', () => {
});

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

const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(
async () =>
await act(async () => {
root.render(
<ErrorBoundary>
<BrokenComponentWillMountWithContext />
</ErrorBoundary>,
);
}),
).toErrorDev(

await expect(async () => {
await act(() => {
root.render(
<ErrorBoundary>
<BrokenComponentWillMountWithContext />
</ErrorBoundary>,
);
});
}).toErrorDev([
'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
'returns a class instance. ' +
'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
"If you can't use a class try assigning the prototype on the function as a workaround. " +
'`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
"Don't use an arrow function since it cannot be called with `new` by React.",
);
...gate(flags =>
flags.disableLegacyContext
? [
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
]
: [],
),
]);

expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
});
Expand Down
12 changes: 10 additions & 2 deletions packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -859,14 +859,22 @@ describe('ReactLegacyErrorBoundaries', () => {
</ErrorBoundary>,
container,
),
).toErrorDev(
).toErrorDev([
'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
'returns a class instance. ' +
'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
"If you can't use a class try assigning the prototype on the function as a workaround. " +
'`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
"Don't use an arrow function since it cannot be called with `new` by React.",
);
...gate(flags =>
flags.disableLegacyContext
? [
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
]
: [],
),
]);
expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
});
}
Expand Down
8 changes: 8 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1782,6 +1782,14 @@ describe('ReactIncrementalErrorHandling', () => {
"If you can't use a class try assigning the prototype on the function as a workaround. " +
'`Provider.prototype = React.Component.prototype`. ' +
"Don't use an arrow function since it cannot be called with `new` by React.",
...gate(flags =>
flags.disableLegacyContext
? [
'Warning: Provider uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: Provider uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
]
: [],
),
]);
});

Expand Down
4 changes: 2 additions & 2 deletions packages/shared/ReactFeatureFlags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,8 @@ export const transitionLaneExpirationMs = 5000;
// -----------------------------------------------------------------------------
const __NEXT_MAJOR__ = __EXPERIMENTAL__;

// Not ready to break experimental yet.
export const disableLegacyContext = false;
// Removes legacy style context
export const disableLegacyContext = __NEXT_MAJOR__;

// Not ready to break experimental yet.
// Disable javascript: URL strings in href for XSS protection.
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/forks/ReactFeatureFlags.test-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export const disableIEWorkarounds = true;
export const enableScopeAPI = false;
export const enableCreateEventHandleAPI = false;
export const enableSuspenseCallback = false;
export const disableLegacyContext = false;
export const enableTrustedTypesIntegration = false;
export const disableTextareaChildren = false;
export const disableModulePatternComponents = false;
Expand Down Expand Up @@ -100,6 +99,7 @@ export const disableStringRefs = __NEXT_MAJOR__;
export const enableReactTestRendererWarning = false;
export const enableBigIntSupport = __NEXT_MAJOR__;
export const disableLegacyMode = __NEXT_MAJOR__;
export const disableLegacyContext = __NEXT_MAJOR__;

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

0 comments on commit f610b74

Please sign in to comment.