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 <noahtallen@gmail.com>

.yarnrc.yml

@@ -111,6 +111,12 @@ logFilters:
     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"
   - level: discard
     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"
+  - level: discard
+    pattern: "@wordpress/data-controls@npm:2.27.0 doesn't provide react (p90380), requested by @wordpress/data"
+  - level: discard
+    pattern: "@wordpress/notices@npm:3.27.0 doesn't provide react (pcdad4), requested by @wordpress/data"
+  - level: discard
+    pattern: "calypso@workspace:client provides @wordpress/data (pd64ed) with version 7.6.0, which doesn't satisfy what @automattic/subscription-manager requests"
 
 nodeLinker: node-modules
 
@@ -123,28 +129,13 @@ packageExtensions:
   "@signal-noise/stylelint-scales@2.0.3":
     peerDependencies:
       postcss: "*"
-  "@types/wordpress__block-editor@6.0.5":
-    peerDependencies:
-      react: "*"
-      react-dom: "*"
-  "@types/wordpress__blocks@6.4.12":
-    peerDependencies:
-      react: "*"
   "@types/wordpress__components@14.0.10":
     peerDependencies:
       react: "*"
-  "@types/wordpress__editor@10.0.1":
-    peerDependencies:
-      react: "*"
-      react-dom: "*"
-  "@types/wordpress__media-utils@0.2.4":
-    peerDependencies:
-      react: "*"
-      react-dom: "*"
   "@types/wordpress__plugins@3.0.0":
     peerDependencies:
       react: "*"
-  "@wordpress/stylelint-config@20.0.3":
+  "@wordpress/stylelint-config@21.10.0":
     peerDependencies:
       postcss: "*"
   fake-indexeddb@3.1.7:

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

@@ -7,6 +7,7 @@ import { inIframe } from '../../block-inserter-modifications/contextual-tips/uti
 import { IMMEDIATE_LAUNCH_QUERY_ARG } from './constants';
 import { LAUNCH_STORE, SITE_STORE } from './stores';
 import { openCheckout, redirectToWpcomPath, getCurrentLaunchFlowUrl } from './utils';
+import type { LaunchSelect, SiteSelect } from '@automattic/data-stores';
 
 const registerPlugin = ( name: string, settings: Omit< PluginSettings, 'icon' > ) =>
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17,12 +18,12 @@ registerPlugin( 'a8c-editor-editor-focused-launch', {
 		const currentSiteId = window._currentSiteId;
 
 		const isSiteLaunched = useSelect(
-			( select ) => select( SITE_STORE ).isSiteLaunched( currentSiteId ),
+			( select ) => ( select( SITE_STORE ) as SiteSelect ).isSiteLaunched( currentSiteId ),
 			[ currentSiteId ]
 		);
 
 		const { isFocusedLaunchOpen, isAnchorFm } = useSelect(
-			( select ) => select( LAUNCH_STORE ).getState(),
+			( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getState(),
 			[]
 		);
 

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

@@ -9,14 +9,18 @@ import { FLOW_ID } from './constants';
 import LaunchModal from './launch-modal';
 import { LAUNCH_STORE } from './stores';
 import { openCheckout, redirectToWpcomPath, getCurrentLaunchFlowUrl } from './utils';
+import type { LaunchSelect } from '@automattic/data-stores';
 
 const registerPlugin = ( name: string, settings: Omit< PluginSettings, 'icon' > ) =>
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	originalRegisterPlugin( name, settings as any );
 
 registerPlugin( 'a8c-editor-site-launch', {
 	render: function LaunchSidebar() {
-		const { isSidebarOpen } = useSelect( ( select ) => select( LAUNCH_STORE ).getState() );
+		const { isSidebarOpen } = useSelect(
+			( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getState(),
+			[]
+		);
 		const { closeSidebar, setSidebarFullscreen, unsetSidebarFullscreen } =
 			useDispatch( LAUNCH_STORE );
 

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { LAUNCH_STORE } from '../stores';
 import LaunchMenuItem from './item';
 import type { LaunchStepType } from '../../../common/data-stores/launch';
+import type { LaunchSelect } from '@automattic/data-stores';
 
 import './styles.scss';
 
@@ -16,15 +17,16 @@ const LaunchMenu: React.FunctionComponent< Props > = ( { onMenuItemClick } ) =>
 
 	const { currentStep, LaunchStep, LaunchSequence, isStepCompleted, isFlowCompleted } = useSelect(
 		( select ) => {
-			const launchStore = select( LAUNCH_STORE );
+			const launchStore: LaunchSelect = select( LAUNCH_STORE );
 			return {
 				currentStep: launchStore.getCurrentStep(),
 				LaunchStep: launchStore.getLaunchStep(),
 				LaunchSequence: launchStore.getLaunchSequence(),
 				isStepCompleted: launchStore.isStepCompleted,
 				isFlowCompleted: launchStore.isFlowCompleted(),
 			};
-		}
+		},
+		[]
 	);
 
 	const LaunchStepMenuItemTitles = {

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

@@ -10,6 +10,7 @@ import Launch from '../launch';
 import LaunchProgress from '../launch-progress';
 import LaunchSidebar from '../launch-sidebar';
 import { LAUNCH_STORE, SITE_STORE, PLANS_STORE } from '../stores';
+import type { LaunchSelect, PlansSelect } from '@automattic/data-stores';
 
 import './styles.scss';
 
@@ -21,8 +22,9 @@ interface Props {
 const LaunchModal: React.FunctionComponent< Props > = ( { onClose, isLaunchImmediately } ) => {
 	const { siteId } = React.useContext( LaunchContext );
 
-	const { step: currentStep, isSidebarFullscreen } = useSelect( ( select ) =>
-		select( LAUNCH_STORE ).getState()
+	const { step: currentStep, isSidebarFullscreen } = useSelect(
+		( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getState(),
+		[]
 	);
 	const [ isLaunching, setIsLaunching ] = React.useState( false );
 	const [ isImmediateLaunchStarted, setIsImmediateLaunchStarted ] = React.useState( false );
@@ -32,8 +34,9 @@ const LaunchModal: React.FunctionComponent< Props > = ( { onClose, isLaunchImmed
 
 	const locale = useLocale();
 	const { setPlanProductId } = useDispatch( LAUNCH_STORE );
-	const defaultFreePlan = useSelect( ( select ) =>
-		select( PLANS_STORE ).getDefaultFreePlan( locale )
+	const defaultFreePlan = useSelect(
+		( select ) => ( select( PLANS_STORE ) as PlansSelect ).getDefaultFreePlan( locale ),
+		[ locale ]
 	);
 
 	const handleLaunch = React.useCallback( () => {

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

@@ -3,19 +3,20 @@ import { sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import * as React from 'react';
 import { LAUNCH_STORE } from '../stores';
+import type { LaunchSelect } from '@automattic/data-stores';
 
 import './styles.scss';
 
 const LaunchProgress: React.FunctionComponent = () => {
 	const { __ } = useI18n();
 
 	const { currentStep, LaunchSequence } = useSelect( ( select ) => {
-		const launchStore = select( LAUNCH_STORE );
+		const launchStore: LaunchSelect = select( LAUNCH_STORE );
 		return {
 			currentStep: launchStore.getCurrentStep(),
 			LaunchSequence: launchStore.getLaunchSequence(),
 		};
-	} );
+	}, [] );
 
 	const current = LaunchSequence.indexOf( currentStep ) + 1;
 	const total = LaunchSequence.length;

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

@@ -4,13 +4,16 @@ import { __ } from '@wordpress/i18n';
 import * as React from 'react';
 import LaunchMenu from '../launch-menu';
 import { LAUNCH_STORE } from '../stores';
-
+import type { LaunchSelect } from '@automattic/data-stores';
 import './styles.scss';
 
 const LaunchSidebar: React.FunctionComponent = () => {
 	const { setStep, unsetSidebarFullscreen } = useDispatch( LAUNCH_STORE );
 
-	const LaunchSequence = useSelect( ( select ) => select( LAUNCH_STORE ).getLaunchSequence() );
+	const LaunchSequence = useSelect(
+		( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getLaunchSequence(),
+		[]
+	);
 
 	const handleStart = () => {
 		setStep( LaunchSequence[ 0 ] );

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

@@ -22,6 +22,7 @@ import classnames from 'classnames';
 import * as React from 'react';
 import LaunchStepContainer, { Props as LaunchStepProps } from '../../launch-step';
 import { LAUNCH_STORE, PLANS_STORE } from '../../stores';
+import type { LaunchSelect, PlansSelect } from '@automattic/data-stores';
 
 import './styles.scss';
 
@@ -30,24 +31,28 @@ const TickIcon = <Icon icon={ check } size={ 17 } />;
 const FinalStep: React.FunctionComponent< LaunchStepProps > = ( { onNextStep, onPrevStep } ) => {
 	const { domain, LaunchStep, isStepCompleted, isFlowCompleted, planProductId } = useSelect(
 		( select ) => {
-			const launchStore = select( LAUNCH_STORE );
+			const launchStore: LaunchSelect = select( LAUNCH_STORE );
 			return {
 				domain: launchStore.getSelectedDomain(),
 				LaunchStep: launchStore.getLaunchStep(),
 				isStepCompleted: launchStore.isStepCompleted,
 				isFlowCompleted: launchStore.isFlowCompleted(),
 				planProductId: launchStore.getSelectedPlanProductId(),
 			};
-		}
+		},
+		[]
 	);
 
 	const { __, hasTranslation } = useI18n();
 	const locale = useLocale();
 
-	const [ plan, planProduct ] = useSelect( ( select ) => [
-		select( PLANS_STORE ).getPlanByProductId( planProductId, locale ),
-		select( PLANS_STORE ).getPlanProductById( planProductId ),
-	] );
+	const { plan, planProduct } = useSelect(
+		( select ) => ( {
+			plan: ( select( PLANS_STORE ) as PlansSelect ).getPlanByProductId( planProductId, locale ),
+			planProduct: ( select( PLANS_STORE ) as PlansSelect ).getPlanProductById( planProductId ),
+		} ),
+		[ planProductId, locale ]
+	);
 
 	const { title } = useTitle();
 	const { siteSubdomain } = useSiteDomains();

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

@@ -6,18 +6,19 @@ import { __, sprintf } from '@wordpress/i18n';
 import * as React from 'react';
 import LaunchStepContainer, { Props as LaunchStepProps } from '../../launch-step';
 import { LAUNCH_STORE } from '../../stores';
+import type { LaunchSelect } from '@automattic/data-stores';
 
 import './styles.scss';
 
 const PlanStep: React.FunctionComponent< LaunchStepProps > = ( { onPrevStep, onNextStep } ) => {
 	const { domain, LaunchStep, selectedPlanProductId } = useSelect( ( select ) => {
-		const launchStore = select( LAUNCH_STORE );
+		const launchStore: LaunchSelect = select( LAUNCH_STORE );
 		return {
 			domain: launchStore.getSelectedDomain(),
 			LaunchStep: launchStore.getLaunchStep(),
 			selectedPlanProductId: launchStore.getSelectedPlanProductId(),
 		};
-	} );
+	}, [] );
 
 	const { setPlanProductId, setStep } = useDispatch( LAUNCH_STORE );
 

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

@@ -5,18 +5,28 @@ import FinalStep from '../launch-steps/final-step';
 import NameStep from '../launch-steps/name-step';
 import PlanStep from '../launch-steps/plan-step';
 import { LAUNCH_STORE } from '../stores';
+import type { LaunchSelect } from '@automattic/data-stores';
 
 interface Props {
 	onSubmit?: () => void;
 }
 
 const Launch: React.FunctionComponent< Props > = ( { onSubmit } ) => {
-	const { step: currentStep } = useSelect( ( select ) => select( LAUNCH_STORE ).getState() );
-
-	const LaunchStep = useSelect( ( select ) => select( LAUNCH_STORE ).getLaunchStep() );
-	const LaunchSequence = useSelect( ( select ) => select( LAUNCH_STORE ).getLaunchSequence() );
-	const firstIncompleteStep = useSelect( ( select ) =>
-		select( LAUNCH_STORE ).getFirstIncompleteStep()
+	const { step: currentStep } = useSelect(
+		( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getState(),
+		[]
+	);
+	const LaunchStep = useSelect(
+		( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getLaunchStep(),
+		[]
+	);
+	const LaunchSequence = useSelect(
+		( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getLaunchSequence(),
+		[]
+	);
+	const firstIncompleteStep = useSelect(
+		( select ) => ( select( LAUNCH_STORE ) as LaunchSelect ).getFirstIncompleteStep(),
+		[]
 	);
 
 	const { setStep, setSidebarFullscreen, unsetSidebarFullscreen } = useDispatch( LAUNCH_STORE );

apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-patterns-plugin.tsx

@@ -3,7 +3,8 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { addFilter, removeFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
-
+import { selectors as starterPageTemplatesSelectors } from '../starter-page-templates/store';
+import type { SelectFromMap } from '@automattic/data-stores';
 import '@wordpress/nux';
 
 const INSERTING_HOOK_NAME = 'isInsertingPagePattern';
@@ -12,6 +13,17 @@ const INSERTING_HOOK_NAMESPACE = 'automattic/full-site-editing/inserting-pattern
 interface PagePatternsPluginProps {
 	patterns: PatternDefinition[];
 }
+type StarterPageTemplatesSelectors = SelectFromMap< typeof starterPageTemplatesSelectors >;
+type CoreEditorPlaceholder = {
+	getBlocks: ( ...args: unknown[] ) => Array< { name: string; clientId: string } >;
+	getEditedPostAttribute: ( ...args: unknown[] ) => unknown;
+};
+type CoreEditPostPlaceholder = {
+	isFeatureActive: ( ...args: unknown[] ) => boolean;
+};
+type CoreNuxPlaceholder = {
+	areTipsEnabled: ( ...args: unknown[] ) => boolean;
+};
 
 export function PagePatternsPlugin( props: PagePatternsPluginProps ) {
 	const { setOpenState } = useDispatch( 'automattic/starter-page-layouts' );
@@ -22,12 +34,16 @@ export function PagePatternsPlugin( props: PagePatternsPluginProps ) {
 	const { disableTips } = useDispatch( 'core/nux' );
 
 	const selectProps = useSelect( ( select ) => {
-		const { isOpen, isPatternPicker } = select( 'automattic/starter-page-layouts' );
+		const { isOpen, isPatternPicker }: StarterPageTemplatesSelectors = select(
+			'automattic/starter-page-layouts'
+		);
 		return {
 			isOpen: isOpen(),
-			isWelcomeGuideActive: select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' ) as boolean, // Gutenberg 7.2.0 or higher
+			isWelcomeGuideActive: (
+				select( 'core/edit-post' ) as CoreEditPostPlaceholder
+			 ).isFeatureActive( 'welcomeGuide' ) as boolean, // Gutenberg 7.2.0 or higher
 			areTipsEnabled: select( 'core/nux' )
-				? ( select( 'core/nux' ).areTipsEnabled() as boolean )
+				? ( ( select( 'core/nux' ) as CoreNuxPlaceholder ).areTipsEnabled() as boolean )
 				: false, // Gutenberg 7.1.0 or lower
 			...( isPatternPicker() && {
 				title: __( 'Choose a Pattern', 'full-site-editing' ),
@@ -37,21 +53,22 @@ export function PagePatternsPlugin( props: PagePatternsPluginProps ) {
 				),
 			} ),
 		};
-	} );
+	}, [] );
 
 	const { getMeta, postContentBlock } = useSelect( ( select ) => {
-		const getMeta = () => select( 'core/editor' ).getEditedPostAttribute( 'meta' );
-		const currentBlocks = select( 'core/editor' ).getBlocks();
+		const getMeta = () =>
+			( select( 'core/editor' ) as CoreEditorPlaceholder ).getEditedPostAttribute( 'meta' );
+		const currentBlocks = ( select( 'core/editor' ) as CoreEditorPlaceholder ).getBlocks();
 		return {
 			getMeta,
 			postContentBlock: currentBlocks.find( ( block ) => block.name === 'a8c/post-content' ),
 		};
-	} );
+	}, [] );
 
 	const savePatternChoice = useCallback(
 		( name: string ) => {
 			// Save selected pattern slug in meta.
-			const currentMeta = getMeta();
+			const currentMeta = getMeta() as Record< string, unknown >;
 			editPost( {
 				meta: {
 					...currentMeta,

apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/store.ts

@@ -14,7 +14,7 @@ const actions = {
 	} ),
 };
 
-const selectors = {
+export const selectors = {
 	isOpen: ( state: OpenState ): boolean => 'CLOSED' !== state,
 	isPatternPicker: ( state: OpenState ): boolean => 'OPEN_FOR_BLANK_CANVAS' === state,
 };
@@ -30,11 +30,3 @@ registerStore( STORE_KEY, {
 	actions,
 	selectors,
 } );
-
-declare module '@wordpress/data' {
-	function dispatch( key: 'automattic/starter-page-layouts' ): typeof actions;
-	function select( key: 'automattic/starter-page-layouts' ): {
-		isOpen: () => ReturnType< typeof selectors.isOpen >;
-		isPatternPicker: () => ReturnType< typeof selectors.isPatternPicker >;
-	};
-}