Enforce Strict `@types` Dependencies (#37351)

.syncpackrc

@@ -1,6 +1,6 @@
 {
 	"dev": true,
-	"filter": "^(?:config|react|react-dom|eslint|typescript|@typescript-eslint|@types/react|@wordpress|@types/wordpress__components|postcss).*$",
+	"filter": "^(?:config|react|react-dom|eslint|typescript|@typescript-eslint|@types/react|@wordpress|@types/wordpress__components|postcss|@types/node).*$",
 	"indent": "\t",
 	"overrides": true,
 	"peer": true,
@@ -59,7 +59,7 @@
 			"packages": [
 				"**"
 			],
-			"pinVersion": "^4.8.3"
+			"pinVersion": "^4.9.5"
 		},
 		{
 			"dependencies": [
@@ -154,6 +154,15 @@
 				"**"
 			],
 			"pinVersion": "^8.4.7"
+		},
+		{
+			"dependencies": [
+				"@types/node"
+			],
+			"packages": [
+				"**"
+			],
+			"pinVersion": "^16.18.18"
 		}
 	]
 }

package.json

@@ -3,6 +3,10 @@
 	"title": "WooCommerce Monorepo",
 	"description": "Monorepo for the WooCommerce ecosystem",
 	"homepage": "https://woocommerce.com/",
+	"engines": {
+		"node": "^16.13.1",
+		"pnpm": "^7.13.3"
+	},
 	"private": true,
 	"repository": {
 		"type": "git",
@@ -25,41 +29,41 @@
 		"sync-dependencies": "pnpm exec syncpack -- fix-mismatches"
 	},
 	"devDependencies": {
-		"@babel/preset-env": "^7.16.11",
+		"@babel/preset-env": "^7.20.2",
-		"@babel/runtime": "^7.17.2",
+		"@babel/runtime": "^7.21.0",
-		"@types/node": "14.14.33",
+		"@types/node": "^16.18.18",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@wordpress/data": "wp-6.0",
 		"@wordpress/eslint-plugin": "^11.1.0",
-		"@wordpress/prettier-config": "^1.1.1",
+		"@wordpress/prettier-config": "^1.4.0",
-		"babel-loader": "^8.2.3",
+		"babel-loader": "^8.3.0",
 		"chalk": "^4.1.2",
 		"copy-webpack-plugin": "^10.2.4",
-		"core-js": "^3.21.1",
+		"core-js": "^3.29.1",
-		"css-loader": "^6.7.0",
+		"css-loader": "^6.7.3",
-		"glob": "^7.2.0",
+		"glob": "^7.2.3",
 		"husky": "^7.0.4",
-		"jest": "^27.3.1",
+		"jest": "^27.5.1",
-		"lint-staged": "^12.3.7",
+		"lint-staged": "^12.5.0",
 		"mkdirp": "^1.0.4",
-		"moment": "^2.29.1",
+		"moment": "^2.29.4",
 		"node-stream-zip": "^1.15.0",
 		"postcss-loader": "^4.3.0",
-		"prettier": "npm:wp-prettier@^2.2.1-beta-1",
+		"prettier": "npm:wp-prettier@^2.6.2",
-		"regenerator-runtime": "^0.13.9",
+		"regenerator-runtime": "^0.13.11",
 		"request": "^2.88.2",
-		"sass": "^1.49.9",
+		"sass": "^1.59.3",
-		"sass-loader": "^10.2.1",
+		"sass-loader": "^10.4.1",
 		"syncpack": "^9.8.4",
-		"turbo": "^1.8.3",
+		"turbo": "^1.8.5",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"url-loader": "^1.1.2",
-		"webpack": "^5.70.0"
+		"webpack": "^5.76.2"
 	},
 	"dependencies": {
 		"@babel/core": "7.12.9",
-		"@wordpress/babel-plugin-import-jsx-pragma": "^3.1.0",
+		"@wordpress/babel-plugin-import-jsx-pragma": "^3.2.0",
-		"@wordpress/babel-preset-default": "^6.4.1",
+		"@wordpress/babel-preset-default": "^6.17.0",
 		"lodash": "^4.17.21",
 		"wp-textdomain": "1.0.1"
 	},

packages/js/admin-e2e-tests/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/admin-e2e-tests/package.json

@@ -50,7 +50,7 @@
 		"jest-mock-extended": "^1.0.18",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"publishConfig": {
 		"access": "public"

packages/js/admin-e2e-tests/tsconfig.json

@@ -2,6 +2,10 @@
 	"extends": "../tsconfig.json",
 	"compilerOptions": {
 	"rootDir": "src",
-			"outDir": "build"
+			"outDir": "build",
+			"typeRoots": [
+				"./typings",
+				"./node_modules/@types"
+			]
 	}
 }

packages/js/admin-layout/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/admin-layout/package.json

@@ -56,7 +56,7 @@
 		"react-dom": "^17.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},

packages/js/admin-layout/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/admin-layout/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/api/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/api/package.json

@@ -50,7 +50,7 @@
 	"devDependencies": {
 		"@types/create-hmac": "1.1.0",
 		"@types/jest": "^27.4.1",
-		"@types/node": "13.13.5",
+		"@types/node": "^16.18.18",
 		"@typescript-eslint/eslint-plugin": "^5.54.0",
 		"@typescript-eslint/parser": "^5.54.0",
 		"@woocommerce/eslint-plugin": "workspace:*",
@@ -58,7 +58,7 @@
 		"eslint": "^8.32.0",
 		"jest": "^27",
 		"ts-jest": "^27",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"publishConfig": {
 		"access": "public"

packages/js/api/tsconfig.json

@@ -4,7 +4,11 @@
 		"types": [ "node", "jest", "axios", "create-hmac" ],
 		"rootDir": "src",
 		"outDir": "dist",
-		"target": "es5"
+		"target": "es5",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	},
 	"include": [ "src/" ]
 }

packages/js/components/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/components/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/components/package.json

@@ -128,6 +128,7 @@
 		"@types/wordpress__viewport": "^2.5.4",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"@wordpress/browserslist-config": "wp-6.0",
 		"@wordpress/scripts": "^12.6.1",
 		"concurrently": "^7.0.0",
@@ -141,7 +142,7 @@
 		"rimraf": "^3.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"uuid": "^8.3.0",
 		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"

packages/js/components/src/experimental-tree-control/types.ts

@@ -66,7 +66,8 @@ export type TreeProps = BaseTreeProps &
 	> & {
 		level?: number;
 		items: LinkedTree[];
-		/** It gives a way to render a different Element as the
+		/**
+		 * It gives a way to render a different Element as the
 		 * tree item label.
 		 *
 		 * @example

packages/js/components/src/form/form-context.ts

@@ -18,7 +18,7 @@ export type FormErrors< Values > = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type FormContext< Values extends Record< string, any > > = {
+export type FormContextType< Values extends Record< string, any > > = {
 	values: Values;
 	errors: FormErrors< Values >;
 	isDirty: boolean;
@@ -51,14 +51,16 @@ export type FormContext< Values extends Record< string, any > > = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const FormContext = createContext< FormContext< any > >(
+export const FormContext: React.Context< FormContextType< any > > =
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	{} as FormContext< any >
+	createContext< FormContextType< any > >(
-);
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		{} as FormContextType< any >
+	);
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useFormContext< Values extends Record< string, any > >() {
-	const formContext = useContext< FormContext< Values > >( FormContext );
+	const formContext = useContext< FormContextType< Values > >( FormContext );
 
 	return formContext;
 }

packages/js/components/src/form/test/index.tsx

@@ -10,7 +10,7 @@ import { TextControl } from '@wordpress/components';
  * Internal dependencies
  */
 import { Form, useFormContext } from '../';
-import type { FormContext } from '../';
+import type { FormContextType } from '../';
 import { DateTimePickerControl } from '../../date-time-picker-control';
 
 const TestInputWithContext = () => {
@@ -44,7 +44,7 @@ describe( 'Form', () => {
 			>
 				{ ( {
 					handleSubmit,
-				}: FormContext< Record< string, string > > ) => {
+				}: FormContextType< Record< string, string > > ) => {
 					return <button onClick={ handleSubmit }>Submit</button>;
 				} }
 			</Form>
@@ -71,7 +71,7 @@ describe( 'Form', () => {
 				onChange={ mockOnChange }
 				validate={ () => ( {} ) }
 			>
-				{ ( { setValue }: FormContext< Record< string, string > > ) => {
+				{ ( { setValue }: FormContextType< Record< string, string > > ) => {
 					return (
 						<button
 							onClick={ () => {
@@ -103,7 +103,7 @@ describe( 'Form', () => {
 			<Form onSubmit={ mockOnSubmit } validate={ () => ( {} ) }>
 				{ ( {
 					handleSubmit,
-				}: FormContext< Record< string, string > > ) => {
+				}: FormContextType< Record< string, string > > ) => {
 					return <button onClick={ handleSubmit }>Submit</button>;
 				} }
 			</Form>
@@ -124,7 +124,7 @@ describe( 'Form', () => {
 
 		const { queryByText } = render(
 			<Form onChange={ mockOnChange } validate={ () => ( {} ) }>
-				{ ( { setValue }: FormContext< Record< string, string > > ) => {
+				{ ( { setValue }: FormContextType< Record< string, string > > ) => {
 					return (
 						<button
 							onClick={ () => {
@@ -156,7 +156,7 @@ describe( 'Form', () => {
 				{ ( {
 					setValue,
 					getInputProps,
-				}: FormContext< Record< string, string > > ) => {
+				}: FormContextType< Record< string, string > > ) => {
 					return (
 						<TextControl
 							label={ 'First Name' }
@@ -206,7 +206,7 @@ describe( 'Form', () => {
 				{ ( {
 					setValue,
 					getInputProps,
-				}: FormContext< Record< string, string > > ) => {
+				}: FormContextType< Record< string, string > > ) => {
 					return (
 						<TextControl
 							label={ 'First Name' }
@@ -243,7 +243,7 @@ describe( 'Form', () => {
 				{ ( {
 					setValue,
 					getInputProps,
-				}: FormContext< Record< string, string > > ) => {
+				}: FormContextType< Record< string, string > > ) => {
 					return (
 						<TextControl
 							label={ 'First Name' }
@@ -293,7 +293,7 @@ describe( 'Form', () => {
 				{ ( {
 					setValue,
 					getInputProps,
-				}: FormContext< Record< string, string > > ) => {
+				}: FormContextType< Record< string, string > > ) => {
 					return (
 						<TextControl
 							label={ 'First Name' }
@@ -329,7 +329,7 @@ describe( 'Form', () => {
 			<Form onChanges={ mockOnChanges } validate={ () => ( {} ) }>
 				{ ( {
 					setValues,
-				}: FormContext< Record< string, string > > ) => {
+				}: FormContextType< Record< string, string > > ) => {
 					return (
 						<button
 							onClick={ () => {
@@ -379,7 +379,7 @@ describe( 'Form', () => {
 			<Form onChanges={ mockOnChanges } validate={ validate }>
 				{ ( {
 					setValues,
-				}: FormContext< Record< string, string > > ) => {
+				}: FormContextType< Record< string, string > > ) => {
 					return (
 						<button
 							onClick={ () => {
@@ -428,7 +428,7 @@ describe( 'Form', () => {
 
 		const { container, queryByText } = render(
 			<Form< TestData > onChange={ mockOnChange } validate={ validate }>
-				{ ( { getInputProps, values }: FormContext< TestData > ) => {
+				{ ( { getInputProps, values }: FormContextType< TestData > ) => {
 					return (
 						<DateTimePickerControl
 							label={ 'Date' }

packages/js/components/src/index.ts

@@ -16,7 +16,7 @@ export { default as EmptyContent } from './empty-content';
 export { default as Flag } from './flag';
 export { Form, useFormContext } from './form';
 export { FormSection } from './form-section';
-export type { FormContext, FormRef, FormErrors } from './form';
+export type { FormContext, FormContextType, FormRef, FormErrors } from './form';
 export { default as FilterPicker } from './filter-picker';
 export { H, Section } from './section';
 export { ImageGallery, ImageGalleryItem } from './image-gallery';

packages/js/components/src/section/context.tsx

@@ -8,6 +8,6 @@ import { createContext } from '@wordpress/element';
  *
  * See https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3
  */
-const Level = createContext( 2 );
+const Level: React.Context< number > = createContext( 2 );
 
 export { Level };

packages/js/components/src/sortable/sortable.tsx

@@ -43,7 +43,7 @@ export type SortableProps = {
 
 const THROTTLE_TIME = 16;
 
-export const SortableContext = createContext( {} );
+export const SortableContext: React.Context< object > = createContext( {} );
 
 export const Sortable = ( {
 	children,

packages/js/components/src/utils.tsx

@@ -64,7 +64,7 @@ function createOrderedChildren< T = Fill.Props, S = Record< string, unknown > >(
 	order: number,
 	props: T,
 	injectProps?: S
-) {
+): React.ReactElement {
 	const { children: childrenToRender, props: propsToRender } =
 		getChildrenAndProps( children, order, props, injectProps );
 	return cloneElement( childrenToRender, propsToRender );

packages/js/components/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/components/tsconfig.json

@@ -5,6 +5,11 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"composite": true,
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/csv-export/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/csv-export/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/csv-export/package.json

@@ -26,6 +26,7 @@
 	"types": "build-types",
 	"react-native": "src/index",
 	"dependencies": {
+		"@types/node": "^16.18.18",
 		"browser-filesaver": "^1.1.1",
 		"moment": "^2.29.1"
 	},
@@ -50,13 +51,14 @@
 		"@babel/core": "^7.17.5",
 		"@types/jest": "^27.4.1",
 		"@woocommerce/eslint-plugin": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"eslint": "^8.32.0",
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
 		"concurrently": "^7.0.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [

packages/js/csv-export/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/csv-export/tsconfig.json

@@ -5,6 +5,11 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"composite": true,
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/currency/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/currency/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/currency/package.json

@@ -54,13 +54,14 @@
 		"@babel/core": "^7.17.5",
 		"@types/jest": "^27.4.1",
 		"@woocommerce/eslint-plugin": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"eslint": "^8.32.0",
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
 		"concurrently": "^7.0.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [

packages/js/currency/tsconfig-cjs.json

@@ -2,6 +2,10 @@
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
 		"declaration": true,
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/currency/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/customer-effort-score/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/customer-effort-score/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/customer-effort-score/package.json

@@ -52,6 +52,7 @@
 		"@woocommerce/internal-style-build": "workspace:*",
 		"@woocommerce/navigation": "workspace:*",
 		"@woocommerce/tracks": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"@wordpress/browserslist-config": "wp-6.0",
 		"concurrently": "^7.0.0",
 		"css-loader": "^3.6.0",
@@ -63,7 +64,7 @@
 		"rimraf": "^3.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},

packages/js/customer-effort-score/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/customer-effort-score/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/data/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/data/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/data/package.json

@@ -59,11 +59,13 @@
 		"@types/md5": "^2.3.2",
 		"@types/qs": "^6.9.7",
 		"@types/react": "^17.0.2",
+		"@types/node": "^16.18.18",
 		"@types/wordpress__compose": "^4.0.1",
 		"@types/wordpress__core-data": "^2.4.5",
 		"@types/wordpress__data": "^6.0.0",
 		"@types/wordpress__data-controls": "^2.2.0",
 		"@woocommerce/eslint-plugin": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"eslint": "^8.32.0",
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
@@ -71,7 +73,7 @@
 		"redux": "^4.1.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"peerDependencies": {
 		"@wordpress/core-data": "wp-6.0",

packages/js/data/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/data/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/date/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/date/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/date/package.json

@@ -35,10 +35,12 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.17.5",
+		"@types/node": "^16.18.18",
 		"@types/jest": "^27.4.1",
 		"@types/lodash": "^4.14.182",
 		"@types/qs": "^6.9.7",
 		"@woocommerce/eslint-plugin": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"d3-time-format": "^2.3.0",
 		"eslint": "^8.32.0",
 		"jest": "^27.5.1",
@@ -46,7 +48,7 @@
 		"concurrently": "^7.0.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"peerDependencies": {
 		"lodash": "^4.17.0"

packages/js/date/src/index.ts

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import moment from 'moment';
-import 'moment-timezone';
+import momentTz from 'moment-timezone';
 import { find, memoize } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { parse } from 'qs';
@@ -181,7 +181,7 @@ export function getStoreTimeZoneMoment() {
 		return moment().utcOffset( window.wcSettings.timeZone );
 	}
 
-	return moment().tz( window.wcSettings.timeZone );
+	return ( moment() as momentTz.Moment ).tz( window.wcSettings.timeZone );
 }
 
 /**

packages/js/date/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/date/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/dependency-extraction-webpack-plugin/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/dependency-extraction-webpack-plugin/package.json

@@ -35,7 +35,7 @@
 		"jest-cli": "^27.5.1",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},

packages/js/eslint-plugin/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/eslint-plugin/package.json

@@ -52,7 +52,7 @@
 		"jest-cli": "^27.5.1",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [

packages/js/experimental/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/experimental/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/experimental/package.json

@@ -62,6 +62,7 @@
 		"@types/wordpress__components": "^19.10.3",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"@wordpress/browserslist-config": "wp-6.0",
 		"concurrently": "^7.0.0",
 		"css-loader": "^3.6.0",
@@ -73,7 +74,7 @@
 		"rimraf": "^3.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},

packages/js/experimental/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/experimental/tsconfig.json

@@ -6,6 +6,10 @@
 		"target": "es2019",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/explat/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/explat/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/explat/package.json

@@ -41,17 +41,18 @@
 		"@babel/core": "^7.17.5",
 		"@types/cookie": "^0.4.1",
 		"@types/jest": "^27.4.1",
-		"@types/node": "^17.0.21",
+		"@types/node": "^16.18.18",
 		"@types/qs": "^6.9.7",
 		"@types/react": "^17.0.2",
 		"@woocommerce/eslint-plugin": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"eslint": "^8.32.0",
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
 		"concurrently": "^7.0.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"scripts": {
 		"turbo:build": "tsc --project tsconfig.json && tsc --project tsconfig-cjs.json",

packages/js/explat/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/explat/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	},
 }

packages/js/internal-js-tests/package.json

@@ -46,7 +46,8 @@
 		"resize-observer-polyfill": "1.5.1",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"babel-jest": "^27.5.1",
+		"typescript": "^4.9.5"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [

packages/js/internal-js-tests/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/internal-js-tests/tsconfig.json

@@ -2,6 +2,11 @@
 	"extends": "../tsconfig.json",
 	"compilerOptions": {
 		"rootDir": "src",
-		"outDir": "build-module"
+		"outDir": "build-module",
+		"composite": true,
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/internal-style-build/package.json

@@ -45,7 +45,7 @@
 		"jest-cli": "^27.5.1",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"webpack": "^5.70.0"
 	},
 	"lint-staged": {

packages/js/navigation/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/navigation/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/navigation/package.json

@@ -64,13 +64,14 @@
 		"@types/jest": "^27.4.1",
 		"@types/qs": "^6.9.7",
 		"@woocommerce/eslint-plugin": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"eslint": "^8.32.0",
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
 		"concurrently": "^7.0.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [

packages/js/navigation/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/navigation/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/notices/package.json

@@ -63,7 +63,7 @@
 		"redux": "^4.2.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [

packages/js/notices/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/notices/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/number/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/number/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/number/package.json

@@ -50,13 +50,14 @@
 		"@types/jest": "^27.4.1",
 		"@types/lodash": "^4.14.184",
 		"@woocommerce/eslint-plugin": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"eslint": "^8.32.0",
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
 		"concurrently": "^7.0.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [

packages/js/number/tsconfig-cjs.json

@@ -2,6 +2,10 @@
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
 		"declaration": true,
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/number/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/onboarding/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/onboarding/package.json

@@ -56,7 +56,7 @@
 		"rimraf": "^3.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},

packages/js/onboarding/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/onboarding/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/product-editor/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/product-editor/jest.config.json

@@ -1,4 +1,4 @@
 {
 	"rootDir": "./src",
-	"preset": "../../internal-js-tests/jest.config.js"
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
 }

packages/js/product-editor/package.json

@@ -80,6 +80,7 @@
 		"@types/wordpress__plugins": "^3.0.0",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"@wordpress/block-editor": "^9.8.0",
 		"@wordpress/browserslist-config": "wp-6.0",
 		"concurrently": "^7.0.0",
@@ -95,7 +96,7 @@
 		"rimraf": "^3.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3",
+		"typescript": "^4.9.5",
 		"webpack": "^5.70.0",
 		"webpack-cli": "^3.3.12"
 	},

packages/js/product-editor/src/components/details-categories-field/test/category-field.test.tsx

@@ -3,7 +3,7 @@
  */
 import { ReactElement, Component } from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { Form, FormContext } from '@woocommerce/components';
+import { Form, FormContextType } from '@woocommerce/components';
 import { Product, ProductCategory } from '@woocommerce/data';
 import { createElement } from '@wordpress/element';
 
@@ -114,7 +114,7 @@ describe( 'CategoryField', () => {
 	it( 'should render a dropdown select control', () => {
 		const { queryByText } = render(
 			<Form initialValues={ { categories: [] } }>
-				{ ( { getInputProps }: FormContext< Product > ) => (
+				{ ( { getInputProps }: FormContextType< Product > ) => (
 					<CategoryField
 						label="Categories"
 						placeholder="Search or create category…"
@@ -138,7 +138,7 @@ describe( 'CategoryField', () => {
 					],
 				} }
 			>
-				{ ( { getInputProps }: FormContext< Product > ) => (
+				{ ( { getInputProps }: FormContextType< Product > ) => (
 					<CategoryField
 						label="Categories"
 						placeholder="Search or create category…"
@@ -175,7 +175,7 @@ describe( 'CategoryField', () => {
 						categories: [],
 					} }
 				>
-					{ ( { getInputProps }: FormContext< Product > ) => (
+					{ ( { getInputProps }: FormContextType< Product > ) => (
 						<CategoryField
 							label="Categories"
 							placeholder="Search or create category…"
@@ -210,7 +210,7 @@ describe( 'CategoryField', () => {
 						categories: [ mockCategoryList[ 2 ] ],
 					} }
 				>
-					{ ( { getInputProps }: FormContext< Product > ) => (
+					{ ( { getInputProps }: FormContextType< Product > ) => (
 						<CategoryField
 							label="Categories"
 							placeholder="Search or create category…"
@@ -238,7 +238,7 @@ describe( 'CategoryField', () => {
 						categories: [ mockCategoryList[ 2 ] ],
 					} }
 				>
-					{ ( { getInputProps }: FormContext< Product > ) => (
+					{ ( { getInputProps }: FormContextType< Product > ) => (
 						<CategoryField
 							label="Categories"
 							placeholder="Search or create category…"
@@ -266,7 +266,7 @@ describe( 'CategoryField', () => {
 						categories: [ mockCategoryList[ 2 ] ],
 					} }
 				>
-					{ ( { getInputProps }: FormContext< Product > ) => (
+					{ ( { getInputProps }: FormContextType< Product > ) => (
 						<CategoryField
 							label="Categories"
 							placeholder="Search or create category…"
@@ -295,7 +295,7 @@ describe( 'CategoryField', () => {
 						categories: [ mockCategoryList[ 2 ] ],
 					} }
 				>
-					{ ( { getInputProps }: FormContext< Product > ) => (
+					{ ( { getInputProps }: FormContextType< Product > ) => (
 						<CategoryField
 							label="Categories"
 							placeholder="Search or create category…"

packages/js/product-editor/src/utils/create-ordered-children.tsx

@@ -64,7 +64,7 @@ function createOrderedChildren< T = Fill.Props, S = Record< string, unknown > >(
 	order: number,
 	props: T,
 	injectProps?: S
-) {
+): React.ReactElement {
 	const { children: childrenToRender, props: propsToRender } =
 		getChildrenAndProps( children, order, props, injectProps );
 	return cloneElement( childrenToRender, propsToRender );

packages/js/product-editor/tsconfig-cjs.json

@@ -6,6 +6,10 @@
 	],
 	"compilerOptions": {
 		"outDir": "build",
-		"resolveJsonModule": true
+		"resolveJsonModule": true,
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/product-editor/tsconfig.json

@@ -6,7 +6,11 @@
 		"declaration": true,
 		"declarationMap": true,
 		"declarationDir": "./build-types",
-		"resolveJsonModule": true
+		"resolveJsonModule": true,
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	},
 	"include": [
 		"**/*.d.ts",

packages/js/tracks/changelog/fix-typescript-package-isolation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Configuration change only
+
+

packages/js/tracks/package.json

@@ -52,7 +52,7 @@
 		"concurrently": "^7.0.0",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^27.1.3",
-		"typescript": "^4.8.3"
+		"typescript": "^4.9.5"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [

packages/js/tracks/tsconfig-cjs.json

@@ -1,6 +1,10 @@
 {
 	"extends": "../tsconfig-cjs",
 	"compilerOptions": {
-		"outDir": "build"
+		"outDir": "build",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/tracks/tsconfig.json

@@ -5,6 +5,10 @@
 		"outDir": "build-module",
 		"declaration": true,
 		"declarationMap": true,
-		"declarationDir": "./build-types"
+		"declarationDir": "./build-types",
+		"typeRoots": [
+			"./typings",
+			"./node_modules/@types"
+		]
 	}
 }

packages/js/tsconfig-cjs.json

@@ -1,7 +1,7 @@
 {
 	"extends": "./tsconfig",
 	"compilerOptions": {
-		"target": "es6",
+		"target": "es2019",
 		"module": "commonjs",
 		"declaration": false,
 		"declarationMap": false,

packages/js/tsconfig.json

@@ -9,7 +9,9 @@
 		"skipLibCheck": true,
 		"jsx": "react",
 		"jsxFactory": "createElement",
-		"jsxFragmentFactory": "Fragment"
+		"jsxFragmentFactory": "Fragment",
+		"incremental": true,
+		"typeRoots": []
 	},
 	"exclude": [
 		"node_modules",
@@ -19,6 +21,7 @@
 		"**/build-types",
 		"**/test/*",
 		"**/jest.config.js",
+		"**/jest-preset.js",
 		"**/webpack.*.js",
 		"**/babel.config.js"
 	]

plugins/woocommerce-admin/client/jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
 	rootDir: './',
-	preset: '../../../packages/js/internal-js-tests/jest.config.js',
+	preset: '../node_modules/@woocommerce/internal-js-tests/jest-preset.js',
 	globals: {
 		'ts-jest': {
 			diagnostics: {