Components: Add eslint to prevent SSR breakage (#42248)

* Components: Add eslint to prevent SSR breakage

* Fix remaining issues

* Fix resizable-box

* Update changelog

.eslintrc.js

@@ -344,5 +344,11 @@ module.exports = {
 				'jsdoc/require-param': 'off',
 			},
 		},
+		{
+			files: [ 'packages/components/src/**' ],
+			excludedFiles: [ 'packages/components/src/**/@(test|stories)/**' ],
+			plugins: [ 'ssr-friendly' ],
+			extends: [ 'plugin:ssr-friendly/recommended' ],
+		},
 	],
 };

package.json

@@ -183,6 +183,7 @@
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.25.2",
 		"eslint-plugin-playwright": "0.8.0",
+		"eslint-plugin-ssr-friendly": "1.0.6",
 		"execa": "4.0.2",
 		"fast-glob": "3.2.7",
 		"filenamify": "4.2.0",

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Bug Fix
 
 -   `BoxControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#42094](https://github.com/WordPress/gutenberg/pull/42094)).
+-   `FocalPointPicker`, `FormTokenField`, `ResizableBox`: Fixed SSR breakage ([#42248](https://github.com/WordPress/gutenberg/pull/42248)).
 -   `Popover`: pass missing anchor ref to the `getAnchorRect` callback prop. ([#42076](https://github.com/WordPress/gutenberg/pull/42076))
 -   `ComboboxControl`: use custom prefix when generating the instanceId ([#42134](https://github.com/WordPress/gutenberg/pull/42134).
 

packages/components/src/focal-point-picker/grid.js

@@ -13,9 +13,6 @@ import {
 } from './styles/focal-point-picker-style';
 import { useUpdateEffect } from '../utils/hooks';
 
-const { clearTimeout, setTimeout } =
-	typeof window !== 'undefined' ? window : {};
-
 export default function FocalPointPickerGrid( {
 	bounds = {},
 	value,
@@ -52,11 +49,11 @@ function useRevealAnimation( value ) {
 
 	useUpdateEffect( () => {
 		setIsActive( true );
-		const timeout = setTimeout( () => {
+		const timeout = window.setTimeout( () => {
 			setIsActive( false );
 		}, 600 );
 
-		return () => clearTimeout( timeout );
+		return () => window.clearTimeout( timeout );
 	}, [ value ] );
 
 	return {

packages/components/src/form-token-field/suggestions-list.tsx

@@ -17,8 +17,6 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import type { SuggestionsListProps } from './types';
 
-const { setTimeout, clearTimeout } = window;
-
 const handleMouseDown: MouseEventHandler = ( e ) => {
 	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
@@ -54,14 +52,14 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onlyScrollIfNeeded: true,
 					}
 				);
-				id = setTimeout( () => {
+				id = window.setTimeout( () => {
 					setScrollingIntoView( false );
 				}, 100 );
 			}
 
 			return () => {
 				if ( id !== undefined ) {
-					clearTimeout( id );
+					window.clearTimeout( id );
 				}
 			};
 		},

packages/components/src/resizable-box/resize-tooltip/utils.ts

@@ -4,7 +4,6 @@
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
-const { clearTimeout, setTimeout } = window;
 const noop = () => {};
 
 export type Axis = 'x' | 'y';
@@ -97,10 +96,10 @@ export function useResizeLabel( {
 
 	const debounceUnsetMoveXY = () => {
 		if ( moveTimeoutRef.current ) {
-			clearTimeout( moveTimeoutRef.current );
+			window.clearTimeout( moveTimeoutRef.current );
 		}
 
-		moveTimeoutRef.current = setTimeout( unsetMoveXY, fadeTimeout );
+		moveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );
 	};
 
 	useEffect( () => {