Bump the typescript-eslint group with 2 updates

.eslintrc

@@ -333,11 +333,8 @@
       ],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "EXPERIMENTAL_useProjectService": true,
-        "warnOnUnsupportedTypeScriptVersion": false,
-        "project": [
-          ".tsconfig.json"
-        ]
+        "projectService": true,
+        "warnOnUnsupportedTypeScriptVersion": false
       },
       "rules": {
         "@typescript-eslint/no-shadow": ["error",

package.json

@@ -84,8 +84,8 @@
     "@types/node": "^22.9.3",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
     "@web-stories-wp/e2e-tests": "*",
     "@web-stories-wp/eslint-import-resolver": "*",
     "@web-stories-wp/jest-amp": "*",

packages/animation/src/components/test/animationProvider.tsx

@@ -24,9 +24,9 @@ import type { PropsWithChildren } from 'react';
 /**
  * Internal dependencies
  */
-import { AnimationProvider, useStoryAnimationContext } from '..';
 import { createAnimationPart } from '../../parts';
-import { AnimationType, type Element } from '../../types';
+import { AnimationType, type Element, type StoryAnimation } from '../../types';
+import { AnimationProvider, useStoryAnimationContext } from '..';
 
 jest.mock('flagged');
 jest.mock('../../parts', () => ({
@@ -187,13 +187,13 @@ describe('AnimationProvider', () => {
         rotationAngle: 0,
       };
       const elements = [element1, element2];
-      const animType = AnimationType.Move as const;
+      const animType = AnimationType.Move;
       const args = [
         { bounces: 3, duration: 1000 },
         { blinks: 2, offset: 20, blarks: 6, duration: 1000 },
         { columns: 4, duration: 400 },
       ];
-      const animations = [
+      const animations: StoryAnimation[] = [
         { id: '1', targets: [target], type: animType, ...args[0] },
         { id: '2', targets: [target], type: animType, ...args[1] },
         { id: '3', targets: [target2], type: animType, ...args[2] },

packages/animation/src/utils/getOffPageOffset.ts

@@ -24,27 +24,27 @@ import {
   type DimensionableElement,
 } from '@googleforcreators/units';
 
-function calcTopOffset(box: ElementBox, dangerZoneOffset: number) {
+function calcTopOffset(box: ElementBox, dangerZoneOffset: number): number {
   const { y, height } = box;
   const toTop = dangerZoneOffset + y;
-  return -Number((toTop / height) * 100.0 + 100.0).toFixed(5);
+  return -Number(Number((toTop / height) * 100.0 + 100.0).toFixed(5));
 }
 
-function calcBottomOffset(box: ElementBox, dangerZoneOffset: number) {
+function calcBottomOffset(box: ElementBox, dangerZoneOffset: number): number {
   const { y, height } = box;
   const toBottom = 100 - y + dangerZoneOffset;
-  return Number((toBottom / height) * 100.0).toFixed(5);
+  return Number(Number((toBottom / height) * 100.0).toFixed(5));
 }
 
-function calcLeftOffset(box: ElementBox) {
+function calcLeftOffset(box: ElementBox): number {
   const { x, width } = box;
-  return -Number((x / width) * 100.0 + 100.0).toFixed(5);
+  return -Number(Number((x / width) * 100.0 + 100.0).toFixed(5));
 }
 
-function calcRightOffset(box: ElementBox) {
+function calcRightOffset(box: ElementBox): number {
   const { x, width } = box;
   const toRight = 100 - x;
-  return Number((toRight / width) * 100.0).toFixed(5);
+  return Number(Number((toRight / width) * 100.0).toFixed(5));
 }
 
 function getOffPageOffset(element: DimensionableElement) {

packages/animation/src/utils/test/getTotalDuration.ts

@@ -24,7 +24,7 @@ const BASE_ANIMATION = {
   id: '1',
   targets: [],
 };
-const type = AnimationType.BlinkOn as const;
+const type = AnimationType.BlinkOn;
 
 describe('getTotalDuration', () => {
   it('returns 0 if no animations supplied', () => {

packages/design-system/src/components/contextMenu/components/button.tsx

@@ -123,7 +123,9 @@ const Button = forwardRef(function Button(
 
   const handleClick = (evt: MouseEvent<HTMLButtonElement>) => {
     onClick(evt);
-    dismissOnClick && onDismiss(evt.nativeEvent);
+    if (dismissOnClick) {
+      onDismiss(evt.nativeEvent);
+    }
   };
 
   const handleFocus = (evt: FocusEvent<HTMLButtonElement>) => {

packages/design-system/src/components/snackbar/snackbarMessage.tsx

@@ -230,7 +230,9 @@ function SnackbarMessage({
   const handleAction = useCallback(
     (evt: MouseEvent<HTMLButtonElement>) => {
       onAction(evt);
-      !isPreventActionDismiss && onDismiss();
+      if (!isPreventActionDismiss) {
+        onDismiss();
+      }
     },
     [onAction, onDismiss, isPreventActionDismiss]
   );

packages/design-system/src/typings/styled.d.ts

@@ -25,5 +25,6 @@ import 'styled-components';
 import type { Theme } from '../theme';
 
 declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- On purpose.
   export interface DefaultTheme extends Theme {}
 }

packages/element-library/src/text/display.tsx

@@ -257,7 +257,7 @@ function TextDisplay({
     target.style.fontSize = updatedFontSize
       ? `${dataToEditorY(updatedFontSize)}px`
       : '';
-    const updatedMargin = transform?.updates?.marginOffset;
+    const updatedMargin = transform?.updates?.marginOffset as number;
     target.style.margin = updatedMargin
       ? `${dataToEditorY(-updatedMargin) / 2}px 0`
       : '';

packages/element-library/src/text/edit.tsx

@@ -337,7 +337,9 @@ function TextEdit({
         editWrapper.style.left = `${boxRef.current.x + dx}px`;
         editWrapper.style.top = `${boxRef.current.y + dy}px`;
       }
-      onResize && onResize();
+      if (onResize) {
+        onResize();
+      }
     }
   }, [dataToEditorY, editWrapper, element, onResize, top, bottom]);
   // Invoke on each content update.

packages/element-library/src/typings/styled.d.ts

@@ -21,5 +21,6 @@ import 'styled-components';
 import type { Theme } from '@googleforcreators/design-system';
 
 declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- On purpose.
   export interface DefaultTheme extends Theme {}
 }

packages/media/src/seekVideo.ts

@@ -32,7 +32,7 @@ function seekVideo(video: HTMLVideoElement, offset = 0.99): Promise<void> {
     video.addEventListener('seeking', (evt) => {
       const wait = setTimeout(() => {
         clearTimeout(wait);
-        reject(evt);
+        reject(evt as unknown as Error);
       }, THREE_SECONDS);
     });
     video.addEventListener('error', reject);

packages/rich-text/src/fauxSelection.ts

@@ -116,7 +116,7 @@ export function useFauxSelection(
 
           // Save that as the next editor state
           return selectedState;
-        } catch (e) {
+        } catch {
           // If the component has unmounted/remounted, some of the above might throw
           // if so, just ignore it and return old state
           return oldEditorState;

packages/rich-text/src/formatters/color.ts

@@ -57,7 +57,7 @@ function stylesToCSS(styles: DraftInlineStyle): null | CSSProperties {
   let color: Pattern;
   try {
     color = styleToColor(style);
-  } catch (e) {
+  } catch {
     return null;
   }
 

packages/rich-text/src/formatters/gradientColor.ts

@@ -68,7 +68,7 @@ function stylesToCSS(styles: DraftInlineStyle): null | CSSProperties {
   let color: Pattern;
   try {
     color = styleToColor(colorStyle);
-  } catch (e) {
+  } catch {
     return null;
   }
 

packages/rich-text/src/formatters/italic.ts

@@ -51,10 +51,7 @@ function isItalic(editorState: EditorState) {
   return !styles.includes(NONE);
 }
 
-function toggleItalic(
-  editorState: EditorState,
-  flag?: undefined | boolean
-): EditorState {
+function toggleItalic(editorState: EditorState, flag?: boolean): EditorState {
   if (typeof flag === 'boolean') {
     return togglePrefixStyle(editorState, ITALIC, () => flag);
   }

packages/rich-text/src/formatters/underline.ts

@@ -51,7 +51,7 @@ function isUnderline(editorState: EditorState) {
   return !styles.includes(NONE);
 }
 
-function toggleUnderline(editorState: EditorState, flag?: undefined | boolean) {
+function toggleUnderline(editorState: EditorState, flag?: boolean) {
   if (typeof flag === 'boolean') {
     return togglePrefixStyle(editorState, UNDERLINE, () => flag);
   }

packages/rich-text/src/formatters/uppercase.ts

@@ -51,7 +51,7 @@ function isUppercase(editorState: EditorState) {
   return !styles.includes(NONE);
 }
 
-function toggleUppercase(editorState: EditorState, flag?: undefined | boolean) {
+function toggleUppercase(editorState: EditorState, flag?: boolean) {
   if (typeof flag === 'boolean') {
     return togglePrefixStyle(editorState, UPPERCASE, () => flag);
   }

packages/rich-text/src/formatters/weight.ts

@@ -73,7 +73,7 @@ function isBold(editorState: EditorState) {
   return weights.every((w) => w >= SMALLEST_BOLD);
 }
 
-function toggleBold(editorState: EditorState, flag?: undefined | boolean) {
+function toggleBold(editorState: EditorState, flag?: boolean) {
   if (typeof flag === 'boolean') {
     if (flag) {
       const getDefault = () => weightToStyle(DEFAULT_BOLD);

packages/story-editor/src/app/canvas/useCanvasCopyPaste.ts

@@ -238,7 +238,7 @@ function useCanvasGlobalKeys() {
         if (files.length > 0) {
           uploadWithPreview(files);
         }
-      } catch (e) {
+      } catch {
         // Ignore.
       }
     },

packages/story-editor/src/app/media/utils/useDetectBaseColor.ts

@@ -130,7 +130,7 @@ function useDetectBaseColor({
             });
           }
         }
-      } catch (error) {
+      } catch {
         // This might happen as an author when trying to updateMedia() that
         // was uploaded by someone else.
         // Do nothing with the error for now.
@@ -163,7 +163,7 @@ function useDetectBaseColor({
           if (posterResource) {
             imageSrc = getSmallestUrlForWidth(0, posterResource);
           }
-        } catch (error) {
+        } catch {
           // The user might not have the permission to access the video with context=edit.
           // This might happen as an author when the video
           // was uploaded by someone else.
@@ -181,7 +181,7 @@ function useDetectBaseColor({
       try {
         const color = await getMediaBaseColor(imageSrcProxied);
         await saveBaseColor(resource, color);
-      } catch (error) {
+      } catch {
         // Do nothing for now.
       }
     },

packages/story-editor/src/app/media/utils/useDetectVideoHasAudio.ts

@@ -86,7 +86,7 @@ function useDetectVideoHasAudio({
             isMuted: !hasAudio,
           });
         }
-      } catch (error) {
+      } catch {
         // Do nothing for now.
       }
     },

packages/story-editor/src/app/media/utils/useFFmpeg.ts

@@ -619,7 +619,7 @@ function useFFmpeg() {
         try {
           ffmpeg?.exit();
           // eslint-disable-next-line no-empty -- no-op
-        } catch (e) {}
+        } catch {}
 
         trackTiming();
       }
@@ -674,7 +674,7 @@ function useFFmpeg() {
         try {
           ffmpeg?.exit();
           // eslint-disable-next-line no-empty -- no-op
-        } catch (e) {}
+        } catch {}
 
         trackTiming();
       }

packages/story-editor/src/app/media/utils/useProcessMedia.ts

@@ -236,7 +236,7 @@ function useProcessMedia({
         let file = null;
         try {
           file = await fetchRemoteFile(url, mimeType);
-        } catch (e) {
+        } catch {
           // Ignore for now.
           return;
         }
@@ -352,14 +352,14 @@ function useProcessMedia({
         let posterFile = null;
         try {
           file = await fetchRemoteFile(url, mimeType);
-        } catch (e) {
+        } catch {
           // Ignore for now.
           return;
         }
         if (poster) {
           try {
             posterFile = await fetchRemoteBlob(poster);
-          } catch (e) {
+          } catch {
             // Ignore for now.
           }
         }
@@ -451,14 +451,14 @@ function useProcessMedia({
         let posterFile = null;
         try {
           file = await fetchRemoteFile(url, mimeType);
-        } catch (e) {
+        } catch {
           // Ignore for now.
           return;
         }
         if (poster) {
           try {
             posterFile = await fetchRemoteBlob(poster);
-          } catch (e) {
+          } catch {
             // Ignore for now.
           }
         }
@@ -530,7 +530,7 @@ function useProcessMedia({
         let file = null;
         try {
           file = await fetchRemoteFile(url, mimeType);
-        } catch (e) {
+        } catch {
           // Ignore for now.
           return;
         }

packages/story-editor/src/app/story/effects/useHashState.ts

@@ -63,7 +63,7 @@ function useHashState(
         }
         _value = JSON.parse(decodeURI(paramValue)) as string;
       }
-    } catch (e) {
+    } catch {
       // @TODO Add some error handling
     }
     return _value;

packages/story-editor/src/components/canvas/utils/getElementProperties.ts

@@ -46,7 +46,7 @@ function getElementProperties(type: ElementType, element: Element) {
   let resource, scale, focalX, focalY, sticker;
   if (elementIs.sticker(element)) {
     sticker = element.sticker;
-    ratio = STICKERS?.[sticker.type as keyof typeof STICKERS]?.aspectRatio;
+    ratio = STICKERS?.[sticker.type]?.aspectRatio;
   } else if (elementIs.media(element)) {
     resource = element.resource;
     ratio =

packages/story-editor/src/components/mediaRecording/provider.js

@@ -249,7 +249,7 @@ function MediaRecordingProvider({ children }) {
           // remove these devices from the list.
           .filter((device) => device.label)
       );
-    } catch (err) {
+    } catch {
       // Do nothing for now.
     }
   }, []);

packages/story-editor/src/components/panels/design/link/link.js

@@ -177,7 +177,7 @@ function LinkPanel({ selectedElements, pushUpdateForObject }) {
             newIcon,
             needsProxy,
           });
-        } catch (e) {
+        } catch {
           setIsInvalidUrl(true);
         } finally {
           setFetchingMetadata(false);

packages/story-editor/src/utils/getMediaBaseColor.ts

@@ -41,7 +41,7 @@ async function extractColorFromImage(img: HTMLImageElement): Promise<string> {
       if (err instanceof Error) {
         void trackError('image_base_color', err.message);
       }
-      reject(err);
+      reject(err as Error);
     }
   });
 }

packages/story-editor/src/utils/useCORSProxy.ts

@@ -50,7 +50,7 @@ function useCORSProxy() {
       await fetch(link, {
         method: 'HEAD',
       });
-    } catch (err) {
+    } catch {
       shouldProxy = true;
     }