Skip to content

Commit 9651d4a

Browse files
tyxlanoahtallen
tyxla
and
noahtallen
authored
Try #2: Upgrade @WordPress packages to pre-React 18 (#73890)
* Update packages to pre- react 18 versions * Noop some type packages with stale @wordpress/data module declarations * Fix some TS errors * Fix some unit tests * Fix TS errors in wpcom-checkout * Fix more TS errors * Fix TS errors in wpcom-plans-ui data store * Fix a bunch of other TS errors * Fix a bunch of other TS errors * Fix a bunch more TS errors * Fix type confusion * Add core/data temp placeholder types * deduplicate packages * Ignore some logs * Fix another failing test * Fix a couple more tests * Fix a bad import * Force @wordpress/element resolution * Fix more code style errors * Fix some code style errors * Declare TS modules of the nooped types * Pin @wordpress/data-controls version * Fix a ton of ETK TS errors * Remove some undesired obsolete type packages * Restore @wordpress/data-controls types * Add necessary @wordpress/blocks types inline * Remove a duplicate __i18n_text_domain__ * Dedupe again * Revert "Remove a duplicate __i18n_text_domain__" This reverts commit 6fda7b7c54affc8044d4732b5790ac0aa92b972e. * Workaround a __i18n_text_domain__ duplication * Fix a bunch of store and checkout TS errors * Fix more package TS errors * Start fixing some more TS errors * More TS fixes * Fix a bunch more TS errors * More TS error fixes * Fix some imports * More TS errors * Fix bad import * A few more TS fixes * More TS errors fixed * Add @automattic/global-styles to tsconfig references * Fix a few more type errors * Fix a few more TS errors * Ignore another log entry * Fix more TS errors * Pin @wordpress/base-styles * Revert @wordpress/env upgrade * Add missing select dependency * Add missing data dependencies to useSelect calls * Remove some now uneeded ts-ignore lines * Polish some useSelect dependencies * Polish another useSelect data dependency * Account for possibly undefined stores * Add more data dependencies to useSelect calls * Fix render loop caused by obj reference changing each render --------- Co-authored-by: Noah Allen <[email protected]>
1 parent 39c7fe0 commit 9651d4a

File tree

296 files changed

+4206
-2856
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

296 files changed

+4206
-2856
lines changed

‎.yarnrc.yml‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,12 @@ logFilters:
111111
pattern: "@automattic/global-styles@workspace:packages/global-styles provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
112112
- level: discard
113113
pattern: "@automattic/global-styles@workspace:packages/global-styles provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
114+
- level: discard
115+
pattern: "@wordpress/data-controls@npm:2.27.0 doesn't provide react (p90380), requested by @wordpress/data"
116+
- level: discard
117+
pattern: "@wordpress/notices@npm:3.27.0 doesn't provide react (pcdad4), requested by @wordpress/data"
118+
- level: discard
119+
pattern: "calypso@workspace:client provides @wordpress/data (pd64ed) with version 7.6.0, which doesn't satisfy what @automattic/subscription-manager requests"
114120

115121
nodeLinker: node-modules
116122

@@ -123,28 +129,13 @@ packageExtensions:
123129
"@signal-noise/[email protected]":
124130
peerDependencies:
125131
postcss: "*"
126-
"@types/[email protected]":
127-
peerDependencies:
128-
react: "*"
129-
react-dom: "*"
130-
"@types/[email protected]":
131-
peerDependencies:
132-
react: "*"
133132
"@types/[email protected]":
134133
peerDependencies:
135134
react: "*"
136-
"@types/[email protected]":
137-
peerDependencies:
138-
react: "*"
139-
react-dom: "*"
140-
"@types/[email protected]":
141-
peerDependencies:
142-
react: "*"
143-
react-dom: "*"
144135
"@types/[email protected]":
145136
peerDependencies:
146137
react: "*"
147-
"@wordpress/stylelint-config@20.0.3":
138+
"@wordpress/stylelint-config@21.10.0":
148139
peerDependencies:
149140
postcss: "*"
150141
[email protected]:

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/attach-focused-launch.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { inIframe } from '../../block-inserter-modifications/contextual-tips/uti
77
import { IMMEDIATE_LAUNCH_QUERY_ARG } from './constants';
88
import { LAUNCH_STORE, SITE_STORE } from './stores';
99
import { openCheckout, redirectToWpcomPath, getCurrentLaunchFlowUrl } from './utils';
10+
import type { LaunchSelect, SiteSelect } from '@automattic/data-stores';
1011

1112
const registerPlugin = ( name: string, settings: Omit< PluginSettings, 'icon' > ) =>
1213
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17,12 +18,12 @@ registerPlugin( 'a8c-editor-editor-focused-launch', {
1718
const currentSiteId = window._currentSiteId;
1819

1920
const isSiteLaunched = useSelect(
20-
( select ) => select( SITE_STORE ).isSiteLaunched( currentSiteId ),
21+
( select ) => ( select( SITE_STORE ) as SiteSelect ).isSiteLaunched( currentSiteId ),
2122
[ currentSiteId ]
2223
);
2324

2425
const { isFocusedLaunchOpen, isAnchorFm } = useSelect(
25-
( select ) => select( LAUNCH_STORE ).getState(),
26+
( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getState(),
2627
[]
2728
);
2829

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/attach-launch-sidebar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,18 @@ import { FLOW_ID } from './constants';
99
import LaunchModal from './launch-modal';
1010
import { LAUNCH_STORE } from './stores';
1111
import { openCheckout, redirectToWpcomPath, getCurrentLaunchFlowUrl } from './utils';
12+
import type { LaunchSelect } from '@automattic/data-stores';
1213

1314
const registerPlugin = ( name: string, settings: Omit< PluginSettings, 'icon' > ) =>
1415
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1516
originalRegisterPlugin( name, settings as any );
1617

1718
registerPlugin( 'a8c-editor-site-launch', {
1819
render: function LaunchSidebar() {
19-
const { isSidebarOpen } = useSelect( ( select ) => select( LAUNCH_STORE ).getState() );
20+
const { isSidebarOpen } = useSelect(
21+
( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getState(),
22+
[]
23+
);
2024
const { closeSidebar, setSidebarFullscreen, unsetSidebarFullscreen } =
2125
useDispatch( LAUNCH_STORE );
2226

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-menu/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as React from 'react';
44
import { LAUNCH_STORE } from '../stores';
55
import LaunchMenuItem from './item';
66
import type { LaunchStepType } from '../../../common/data-stores/launch';
7+
import type { LaunchSelect } from '@automattic/data-stores';
78

89
import './styles.scss';
910

@@ -16,15 +17,16 @@ const LaunchMenu: React.FunctionComponent< Props > = ( { onMenuItemClick } ) =>
1617

1718
const { currentStep, LaunchStep, LaunchSequence, isStepCompleted, isFlowCompleted } = useSelect(
1819
( select ) => {
19-
const launchStore = select( LAUNCH_STORE );
20+
const launchStore: LaunchSelect = select( LAUNCH_STORE );
2021
return {
2122
currentStep: launchStore.getCurrentStep(),
2223
LaunchStep: launchStore.getLaunchStep(),
2324
LaunchSequence: launchStore.getLaunchSequence(),
2425
isStepCompleted: launchStore.isStepCompleted,
2526
isFlowCompleted: launchStore.isFlowCompleted(),
2627
};
27-
}
28+
},
29+
[]
2830
);
2931

3032
const LaunchStepMenuItemTitles = {

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-modal/index.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Launch from '../launch';
1010
import LaunchProgress from '../launch-progress';
1111
import LaunchSidebar from '../launch-sidebar';
1212
import { LAUNCH_STORE, SITE_STORE, PLANS_STORE } from '../stores';
13+
import type { LaunchSelect, PlansSelect } from '@automattic/data-stores';
1314

1415
import './styles.scss';
1516

@@ -21,8 +22,9 @@ interface Props {
2122
const LaunchModal: React.FunctionComponent< Props > = ( { onClose, isLaunchImmediately } ) => {
2223
const { siteId } = React.useContext( LaunchContext );
2324

24-
const { step: currentStep, isSidebarFullscreen } = useSelect( ( select ) =>
25-
select( LAUNCH_STORE ).getState()
25+
const { step: currentStep, isSidebarFullscreen } = useSelect(
26+
( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getState(),
27+
[]
2628
);
2729
const [ isLaunching, setIsLaunching ] = React.useState( false );
2830
const [ isImmediateLaunchStarted, setIsImmediateLaunchStarted ] = React.useState( false );
@@ -32,8 +34,9 @@ const LaunchModal: React.FunctionComponent< Props > = ( { onClose, isLaunchImmed
3234

3335
const locale = useLocale();
3436
const { setPlanProductId } = useDispatch( LAUNCH_STORE );
35-
const defaultFreePlan = useSelect( ( select ) =>
36-
select( PLANS_STORE ).getDefaultFreePlan( locale )
37+
const defaultFreePlan = useSelect(
38+
( select ) => ( select( PLANS_STORE ) as PlansSelect ).getDefaultFreePlan( locale ),
39+
[ locale ]
3740
);
3841

3942
const handleLaunch = React.useCallback( () => {

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-progress/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,20 @@ import { sprintf } from '@wordpress/i18n';
33
import { useI18n } from '@wordpress/react-i18n';
44
import * as React from 'react';
55
import { LAUNCH_STORE } from '../stores';
6+
import type { LaunchSelect } from '@automattic/data-stores';
67

78
import './styles.scss';
89

910
const LaunchProgress: React.FunctionComponent = () => {
1011
const { __ } = useI18n();
1112

1213
const { currentStep, LaunchSequence } = useSelect( ( select ) => {
13-
const launchStore = select( LAUNCH_STORE );
14+
const launchStore: LaunchSelect = select( LAUNCH_STORE );
1415
return {
1516
currentStep: launchStore.getCurrentStep(),
1617
LaunchSequence: launchStore.getLaunchSequence(),
1718
};
18-
} );
19+
}, [] );
1920

2021
const current = LaunchSequence.indexOf( currentStep ) + 1;
2122
const total = LaunchSequence.length;

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-sidebar/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@ import { __ } from '@wordpress/i18n';
44
import * as React from 'react';
55
import LaunchMenu from '../launch-menu';
66
import { LAUNCH_STORE } from '../stores';
7-
7+
import type { LaunchSelect } from '@automattic/data-stores';
88
import './styles.scss';
99

1010
const LaunchSidebar: React.FunctionComponent = () => {
1111
const { setStep, unsetSidebarFullscreen } = useDispatch( LAUNCH_STORE );
1212

13-
const LaunchSequence = useSelect( ( select ) => select( LAUNCH_STORE ).getLaunchSequence() );
13+
const LaunchSequence = useSelect(
14+
( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getLaunchSequence(),
15+
[]
16+
);
1417

1518
const handleStart = () => {
1619
setStep( LaunchSequence[ 0 ] );

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-steps/final-step/index.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import classnames from 'classnames';
2222
import * as React from 'react';
2323
import LaunchStepContainer, { Props as LaunchStepProps } from '../../launch-step';
2424
import { LAUNCH_STORE, PLANS_STORE } from '../../stores';
25+
import type { LaunchSelect, PlansSelect } from '@automattic/data-stores';
2526

2627
import './styles.scss';
2728

@@ -30,24 +31,28 @@ const TickIcon = <Icon icon={ check } size={ 17 } />;
3031
const FinalStep: React.FunctionComponent< LaunchStepProps > = ( { onNextStep, onPrevStep } ) => {
3132
const { domain, LaunchStep, isStepCompleted, isFlowCompleted, planProductId } = useSelect(
3233
( select ) => {
33-
const launchStore = select( LAUNCH_STORE );
34+
const launchStore: LaunchSelect = select( LAUNCH_STORE );
3435
return {
3536
domain: launchStore.getSelectedDomain(),
3637
LaunchStep: launchStore.getLaunchStep(),
3738
isStepCompleted: launchStore.isStepCompleted,
3839
isFlowCompleted: launchStore.isFlowCompleted(),
3940
planProductId: launchStore.getSelectedPlanProductId(),
4041
};
41-
}
42+
},
43+
[]
4244
);
4345

4446
const { __, hasTranslation } = useI18n();
4547
const locale = useLocale();
4648

47-
const [ plan, planProduct ] = useSelect( ( select ) => [
48-
select( PLANS_STORE ).getPlanByProductId( planProductId, locale ),
49-
select( PLANS_STORE ).getPlanProductById( planProductId ),
50-
] );
49+
const { plan, planProduct } = useSelect(
50+
( select ) => ( {
51+
plan: ( select( PLANS_STORE ) as PlansSelect ).getPlanByProductId( planProductId, locale ),
52+
planProduct: ( select( PLANS_STORE ) as PlansSelect ).getPlanProductById( planProductId ),
53+
} ),
54+
[ planProductId, locale ]
55+
);
5156

5257
const { title } = useTitle();
5358
const { siteSubdomain } = useSiteDomains();

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-steps/plan-step/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ import { __, sprintf } from '@wordpress/i18n';
66
import * as React from 'react';
77
import LaunchStepContainer, { Props as LaunchStepProps } from '../../launch-step';
88
import { LAUNCH_STORE } from '../../stores';
9+
import type { LaunchSelect } from '@automattic/data-stores';
910

1011
import './styles.scss';
1112

1213
const PlanStep: React.FunctionComponent< LaunchStepProps > = ( { onPrevStep, onNextStep } ) => {
1314
const { domain, LaunchStep, selectedPlanProductId } = useSelect( ( select ) => {
14-
const launchStore = select( LAUNCH_STORE );
15+
const launchStore: LaunchSelect = select( LAUNCH_STORE );
1516
return {
1617
domain: launchStore.getSelectedDomain(),
1718
LaunchStep: launchStore.getLaunchStep(),
1819
selectedPlanProductId: launchStore.getSelectedPlanProductId(),
1920
};
20-
} );
21+
}, [] );
2122

2223
const { setPlanProductId, setStep } = useDispatch( LAUNCH_STORE );
2324

‎apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch/index.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,28 @@ import FinalStep from '../launch-steps/final-step';
55
import NameStep from '../launch-steps/name-step';
66
import PlanStep from '../launch-steps/plan-step';
77
import { LAUNCH_STORE } from '../stores';
8+
import type { LaunchSelect } from '@automattic/data-stores';
89

910
interface Props {
1011
onSubmit?: () => void;
1112
}
1213

1314
const Launch: React.FunctionComponent< Props > = ( { onSubmit } ) => {
14-
const { step: currentStep } = useSelect( ( select ) => select( LAUNCH_STORE ).getState() );
15-
16-
const LaunchStep = useSelect( ( select ) => select( LAUNCH_STORE ).getLaunchStep() );
17-
const LaunchSequence = useSelect( ( select ) => select( LAUNCH_STORE ).getLaunchSequence() );
18-
const firstIncompleteStep = useSelect( ( select ) =>
19-
select( LAUNCH_STORE ).getFirstIncompleteStep()
15+
const { step: currentStep } = useSelect(
16+
( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getState(),
17+
[]
18+
);
19+
const LaunchStep = useSelect(
20+
( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getLaunchStep(),
21+
[]
22+
);
23+
const LaunchSequence = useSelect(
24+
( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getLaunchSequence(),
25+
[]
26+
);
27+
const firstIncompleteStep = useSelect(
28+
( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getFirstIncompleteStep(),
29+
[]
2030
);
2131

2232
const { setStep, setSidebarFullscreen, unsetSidebarFullscreen } = useDispatch( LAUNCH_STORE );

0 commit comments

Comments
 (0)