fix lint errors

Author: aidenybai

src/core/index.ts

@@ -13,7 +13,7 @@ import { createPerfObserver } from './web/perf-observer';
 import { initReactScanOverlay } from './web/overlay';
 import {
   createInspectElementStateMachine,
-  States,
+  type States,
 } from './web/inspect-element/inspect-state-machine';
 import { createToolbar } from './web/toolbar';
 
@@ -112,6 +112,7 @@ export interface Internals {
       count: number;
       time: number;
       badRenders: Render[];
+      displayName: string | null;
     }
   >;
   reportData: Record<
@@ -129,21 +130,24 @@ export interface Internals {
 type Listener<T> = (value: T) => void;
 
 export interface StoreMethods<T extends object> {
-  subscribe<K extends keyof T>(key: K, listener: Listener<T[K]>): () => void;
-  set<K extends keyof T>(key: K, value: T[K]): void;
-  setState(state: Partial<T>): void;
-  emit<K extends keyof T>(key: K, value: T[K]): void;
-  subscribeMultiple(
-    subscribeTo: Array<keyof T>,
+  subscribe: <K extends keyof T>(
+    key: K,
+    listener: Listener<T[K]>,
+  ) => () => void;
+  set: <K extends keyof T>(key: K, value: T[K]) => void;
+  setState: (state: Partial<T>) => void;
+  emit: <K extends keyof T>(key: K, value: T[K]) => void;
+  subscribeMultiple: (
+    subscribeTo: (keyof T)[],
     listener: Listener<T>,
-  ): () => void;
+  ) => () => void;
 }
 
 type Store<T extends object> = T & StoreMethods<T>;
 
 const createStore = <T extends object>(initialData: T): Store<T> => {
   const data: T = { ...initialData };
-  const listeners: { [K in keyof T]?: Array<Listener<T[K]>> } = {};
+  const listeners: { [K in keyof T]?: Listener<T[K]>[] } = {};
 
   const emit = <K extends keyof T>(key: K, value: T[K]): void => {
     listeners[key]?.forEach((listener) => listener(value));
@@ -172,14 +176,14 @@ const createStore = <T extends object>(initialData: T): Store<T> => {
 
   const setState = (state: Partial<T>) => {
     for (const key in state) {
-      if (state.hasOwnProperty(key)) {
+      if (Object.prototype.hasOwnProperty.call(state, key)) {
         set(key as keyof T, state[key] as T[keyof T]);
       }
     }
   };
 
   const subscribeMultiple = (
-    subscribeTo: Array<keyof T>,
+    subscribeTo: (keyof T)[],
     listener: (store: typeof data) => void,
   ) => {
     subscribeTo.forEach((key) => {
@@ -191,9 +195,7 @@ const createStore = <T extends object>(initialData: T): Store<T> => {
 
     return () => {
       subscribeTo.forEach((key) => {
-        listeners[key as keyof T] = listeners[key as keyof T]?.filter(
-          (cb) => cb !== listener,
-        );
+        listeners[key] = listeners[key]?.filter((cb) => cb !== listener);
       });
     };
   };
@@ -208,13 +210,12 @@ const createStore = <T extends object>(initialData: T): Store<T> => {
 
       return Reflect.get(target, prop, receiver);
     },
-    set(target, prop, value, receiver) {
+    set(target, prop, value) {
       if (prop in target) {
         set(prop as keyof T, value as T[keyof T]);
         return true;
-      } else {
-        throw new Error(`Property "${String(prop)}" does not exist`);
       }
+      throw new Error(`Property "${String(prop)}" does not exist`);
     },
     deleteProperty(_, prop) {
       throw new Error(`Cannot delete property "${String(prop)}" from store`);

src/core/instrumentation/index.ts

@@ -1,6 +1,5 @@
 import type { Fiber, FiberRoot } from 'react-reconciler';
 import * as React from 'react';
-import { type NO_OP } from '../utils';
 import { ReactScanInternals } from '../index';
 import { getDisplayName, fastSerialize, getType } from './utils';
 import {
@@ -182,8 +181,7 @@ export const reportRenderFiber = (fiber: Fiber, renders: (Render | null)[]) => {
   ReactScanInternals.reportDataByFiber.set(reportFiber, {
     count: (report?.count ?? 0) + 1,
     time: (report?.time ?? 0) + (time !== 0 ? time : 0.1), // .1ms lowest precision
-    badRenders: report?.badRenders || [],
-    // @ts-expect-error
+    badRenders: report?.badRenders ?? [],
     displayName: getDisplayName(fiber.type),
   });
   ReactScanInternals.emit(

src/core/instrumentation/utils.ts

@@ -51,7 +51,7 @@ export const fastSerialize = (value: unknown) => {
   }
 };
 
-export const getType = (type: any) => {
+export const getType = (type: any): any => {
   if (typeof type === 'function') {
     return type;
   }

src/core/utils.ts

@@ -1,4 +1,3 @@
-import { ReactScanInternals } from '../index';
 import type { Render } from './instrumentation/index';
 
 export const NO_OP = () => {

src/core/web/custom-element.ts

@@ -1,7 +1,6 @@
-import { Fiber } from 'react-reconciler';
-import { Internals, ReactScanInternals } from '../../index';
-
+import { type Internals, ReactScanInternals } from '../../index';
 import { throttle } from '../utils';
+import { didFiberRender } from '../../instrumentation/fiber';
 import { renderPropsAndState } from './view-state';
 import {
   currentLockIconRect,
@@ -10,7 +9,6 @@ import {
   updateCanvasSize,
 } from './overlay';
 import { getCompositeComponentFromElement, hasValidParent } from './utils';
-import { didFiberRender } from '../../instrumentation/fiber';
 
 export type States =
   | {
@@ -62,7 +60,7 @@ export const createInspectElementStateMachine = () => {
     if (!ctx) {
       return;
     }
-    updateCanvasSize(canvas!, ctx);
+    updateCanvasSize(canvas, ctx);
     window.addEventListener('resize', () => {
       updateCanvasSize(canvas!, ctx);
     }); // todo add cleanup/dispose logic for createInspectElementStateMachine
@@ -82,11 +80,11 @@ export const createInspectElementStateMachine = () => {
 
     ctx.restore();
   };
-  let unsubscribeFns: Partial<{ [_ in keyof States as Kinds]: () => void }> =
+  const unsubscribeFns: Partial<{ [_ in keyof States as Kinds]: () => void }> =
     {};
 
   const unsubscribeAll = () => {
-    Object.entries(unsubscribeFns).forEach(([unSubKey, unSub]) => {
+    Object.entries(unsubscribeFns).forEach(([_, unSub]) => {
       unSub();
     });
   };
@@ -148,11 +146,11 @@ export const createInspectElementStateMachine = () => {
               top: 0;
               width: 100vw;
               height: 100vh;
-              z-index: ${parseInt(canvas!.style.zIndex) - 1};
+              z-index: ${parseInt(canvas.style.zIndex) - 1};
               pointer-events: auto;
             `;
 
-            canvas!.parentNode!.insertBefore(eventCatcher, canvas);
+            canvas.parentNode!.insertBefore(eventCatcher, canvas);
             let currentHoveredElement: HTMLElement | null = null;
             const mouseMove = throttle((e: MouseEvent) => {
               if (ReactScanInternals.inspectState.kind !== 'inspecting') {
@@ -222,7 +220,9 @@ export const createInspectElementStateMachine = () => {
               }
             };
             window.addEventListener('keydown', keyDown);
-            let cleanup = () => {};
+            let cleanup = () => {
+              /**/
+            };
             if (inspectState.hoveredDomElement) {
               cleanup = trackElementPosition(
                 inspectState.hoveredDomElement,
@@ -274,14 +274,14 @@ export const createInspectElementStateMachine = () => {
             );
             const element = inspectState.focusedDomElement;
 
-            let { parentCompositeFiber } =
+            const { parentCompositeFiber } =
               getCompositeComponentFromElement(element);
             if (!parentCompositeFiber) {
               return;
             }
 
             const reportDataFiber =
-              store.reportDataByFiber.get(parentCompositeFiber) ||
+              store.reportDataByFiber.get(parentCompositeFiber) ??
               (parentCompositeFiber.alternate
                 ? store.reportDataByFiber.get(parentCompositeFiber.alternate)
                 : null);
@@ -388,7 +388,9 @@ export const createInspectElementStateMachine = () => {
     }, 16),
   );
 
-  return () => {};
+  return () => {
+    /**/
+  };
 };
 type CleanupFunction = () => void;
 type PositionCallback = (element: Element) => void;

src/core/web/inspect-element/inspect-state-machine.ts

@@ -1,4 +1,4 @@
-import { Fiber } from 'react-reconciler';
+import type { Fiber } from 'react-reconciler';
 import { ReactScanInternals } from '../..';
 import { getDisplayName } from '../../instrumentation/utils';
 import { getCompositeComponentFromElement } from './utils';
@@ -23,6 +23,7 @@ interface PerformanceStats {
 }
 
 let currentRect: Rect | null = null;
+// eslint-disable-next-line import/no-mutable-exports
 export let currentLockIconRect: LockIconRect | null = null;
 export const OVERLAY_DPR: number =
   typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
@@ -45,7 +46,7 @@ export const drawHoverOverlay = (
   }
 
   const reportDataFiber =
-    ReactScanInternals.reportDataByFiber.get(parentCompositeFiber) ||
+    ReactScanInternals.reportDataByFiber.get(parentCompositeFiber) ??
     (parentCompositeFiber.alternate
       ? ReactScanInternals.reportDataByFiber.get(parentCompositeFiber.alternate)
       : null);
@@ -161,7 +162,9 @@ export const drawStatsPill = (
 ) => {
   const pillHeight = 24;
   const pillPadding = 8;
-  const componentName = fiber ? getDisplayName(fiber) || 'Unknown' : 'Unknown';
+  const componentName = fiber
+    ? (getDisplayName(fiber) ?? 'Unknown')
+    : 'Unknown';
   const text = `${componentName} • x${stats.count} (${stats.time.toFixed(1)}ms)`;
 
   ctx.save();

src/core/web/inspect-element/overlay.ts

@@ -1,4 +1,4 @@
-import { Fiber, FiberRoot } from 'react-reconciler';
+import type { Fiber } from 'react-reconciler';
 import { ReactScanInternals } from '../../index';
 import {
   FunctionComponentTag,
@@ -11,7 +11,7 @@ import { getRect } from '../outline';
 
 export const getFiberFromElement = (element: HTMLElement): Fiber | null => {
   if ('__REACT_DEVTOOLS_GLOBAL_HOOK__' in window) {
-    const { renderers } = window.__REACT_DEVTOOLS_GLOBAL_HOOK__!;
+    const { renderers } = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!renderers) return null;
     for (const [_, renderer] of Array.from(renderers)) {
       try {
@@ -56,8 +56,8 @@ export const getFirstStateNode = (fiber: Fiber): HTMLElement | null => {
 
 export const getNearestFiberFromElement = (element: HTMLElement | null) => {
   if (!element) return null;
-  let target: HTMLElement | null = element;
-  let originalFiber = getFiberFromElement(target);
+  const target: HTMLElement | null = element;
+  const originalFiber = getFiberFromElement(target);
   if (!originalFiber) {
     return null;
   }
@@ -119,9 +119,8 @@ export const getStateFromFiber = (fiber: Fiber): any => {
   } else if (fiber.tag === ClassComponentTag) {
     // Class component, memoizedState is the component state
     return fiber.memoizedState || {};
-  } else {
-    return {};
   }
+  return {};
 };
 
 export const getChangedState = (fiber: Fiber): Set<string> => {
@@ -161,7 +160,7 @@ export const isCurrentTree = (fiber: Fiber) => {
     return false;
   }
 
-  const fiberRoot = rootFiber.stateNode as FiberRoot;
+  const fiberRoot = rootFiber.stateNode;
   const currentRootFiber = fiberRoot.current;
 
   return isFiberInTree(fiber, currentRootFiber);
@@ -246,7 +245,7 @@ export const hasValidParent = () => {
 
   let hasValidParent = false;
   if (focusedDomElement.parentElement) {
-    let currentFiber = getNearestFiberFromElement(focusedDomElement);
+    const currentFiber = getNearestFiberFromElement(focusedDomElement);
     let nextParent: typeof focusedDomElement.parentElement | null =
       focusedDomElement.parentElement;