React linters (#117)

* React hook linter

* React linting

* Simplify config

.eslintrc.json

@@ -1,6 +1,8 @@
 {
     "parser": "@typescript-eslint/parser",
-    "plugins": ["@typescript-eslint/eslint-plugin"],
+    "plugins": [
+        "@typescript-eslint/eslint-plugin"
+    ],
     "rules": {
         "indent": [
             "error",
@@ -69,7 +71,9 @@
                 ]
             }
         ],
-        "@typescript-eslint/require-await": ["error"]
+        "@typescript-eslint/require-await": ["error"],
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "error"
     },
     "env": {
         "builtin": true,
@@ -80,7 +84,11 @@
         "sourceType": "module",
         "project": "./tsconfig.json"
     },
-    "extends": "eslint:recommended",
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended"
+    ],
     "overrides": [
         {
             "files": [
@@ -140,7 +148,8 @@
     "ignorePatterns": ["coverage/**/*"],
     "settings": {
         "react": {
-          "pragma": "h"
+          "pragma": "h",
+          "version": "16"
         }
     }
 }

js/components/Apple2.tsx

@@ -59,7 +59,7 @@ export const Apple2 = (props: Apple2Props) => {
                 apple2.run();
             }).catch(error => console.error(error));
         }
-    }, []);
+    }, [props]);
 
     return (
         <div className={cs('outer', { apple2e: e})}>

js/components/AudioControl.tsx

@@ -32,13 +32,13 @@ export const AudioControl = ({ apple2 }: AudioControlProps) => {
             setAudio(audio);
             setAudioEnabled(audio.isEnabled());
         }
-    }, [apple2]);
+    }, [apple2, options]);
 
     const doToggleSound = useCallback(() => {
         const on = !audio?.isEnabled();
         options.setOption(SOUND_ENABLED_OPTION, on);
         setAudioEnabled(on);
-    }, [audio]);
+    }, [audio, options]);
 
     return (
         <ControlButton

js/components/ControlButton.tsx

@@ -20,6 +20,6 @@ export interface ControlButtonProps {
  */
 export const ControlButton = ({ icon, title, onClick, ...props }: ControlButtonProps) => (
     <button onClick={onClick} title={title} {...props} >
-        <i class={`fas fa-${icon}`}></i>
+        <i className={`fas fa-${icon}`}></i>
     </button>
 );

js/components/ControlStrip.tsx

@@ -47,7 +47,7 @@ export const ControlStrip = ({ apple2, e }: ControlStripProps) => {
             const screen = new Screen(vm);
             options.addOptions(screen);
         }
-    }, [apple2]);
+    }, [apple2, e, options]);
 
     const doReset = useCallback(() =>
         apple2?.reset()
@@ -70,7 +70,7 @@ export const ControlStrip = ({ apple2, e }: ControlStripProps) => {
             SCREEN_FULL_PAGE,
             !options.getOption(SCREEN_FULL_PAGE)
         )
-    , []);
+    , [options]);
 
     useHotKey('F2', doToggleFullPage);
     useHotKey('F4', doShowOptions);

js/components/DiskII.tsx

@@ -56,7 +56,7 @@ export const DiskII = ({ disk2, number, on, name, side }: DiskIIProps) => {
                     );
             }
         }
-    }, [disk2]);
+    }, [disk2, number]);
 
     const doClose = useCallback(() => {
         setModalOpen(false);
@@ -74,7 +74,7 @@ export const DiskII = ({ disk2, number, on, name, side }: DiskIIProps) => {
                 className={cs('disk-light', { on })}
             />
             <button title="Load Disk">
-                <i class="fas fa-folder-open" onClick={onOpenModal} />
+                <i className="fas fa-folder-open" onClick={onOpenModal} />
             </button>
             <div
                 id={`disk-label${number}`}

js/components/Drives.tsx

@@ -54,7 +54,7 @@ export const Drives = ({ io, sectors }: DrivesProps) => {
             io.setSlot(6, disk2);
             setDisk2(disk2);
         }
-    }, [io]);
+    }, [io, sectors]);
 
     return (
         <>

js/components/FileChooser.tsx

@@ -55,7 +55,7 @@ const InputFileChooser = ({
                 onChange(newFiles);
             }
         }
-    }, []);
+    }, [onChange]);
 
     const extraProps = useMemo<ExtraProps>(() => {
         // Accept all of the given MIME types and extensions. An argument
@@ -131,14 +131,14 @@ const FilePickerChooser = ({
         } finally {
             setBusy(false);
         }
-    }, []);
+    }, [accept, busy, onChange]);
 
     useEffect(() => {
         setSelectedFilename(
             fileHandlesRef.current?.length
                 ? fileHandlesRef.current[0].name
                 : 'No file selected');
-    }, [fileHandlesRef.current]);
+    }, []);
 
     return (
         <>
@@ -184,7 +184,7 @@ export const FileChooser = ({
             });
         }
         onChange(handles);
-    }, []);
+    }, [onChange]);
 
     const onChangeForPicker = useCallback((fileHandles: FileSystemFileHandle[]) => {
         const handles: FileSystemFileHandleLike[] = [];
@@ -198,7 +198,7 @@ export const FileChooser = ({
             });
         }
         onChange(handles);
-    }, []);
+    }, [onChange]);
 
     return control === 'picker'
         ? (

js/components/FileModal.tsx

@@ -50,7 +50,7 @@ export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) =>
     const [handles, setHandles] = useState<FileSystemFileHandleLike[]>();
     const [filename, setFilename] = useState<string>();
 
-    const doCancel = useCallback(() => onClose(true), []);
+    const doCancel = useCallback(() => onClose(true), [onClose]);
 
     const doOpen = useCallback(async () => {
         const hashParts = getHashParts();
@@ -109,12 +109,12 @@ export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) =>
                 <div id="load-modal">
                     <select multiple onChange={doSelectCategory}>
                         {categoryNames.map((name) => (
-                            <option>{name}</option>
+                            <option key={name}>{name}</option>
                         ))}
                     </select>
                     <select multiple onChange={doSelectFilename}>
                         {disks.map((disk) => (
-                            <option value={disk.filename}>
+                            <option key={disk.filename} value={disk.filename}>
                                 {disk.name}
                                 {disk.disk ? ` - ${disk.disk}` : ''}
                             </option>

js/components/Header.tsx

@@ -1,5 +1,7 @@
 import { h } from 'preact';
 
+const README = 'https://github.com/whscullin/apple2js#readme';
+
 /**
  * Header component properties.
  */
@@ -15,7 +17,7 @@ export interface HeaderProps {
 export const Header = ({ e }: HeaderProps) => {
     return (
         <div id="header">
-            <a href="https://github.com/whscullin/apple2js#readme" target="_blank">
+            <a href={README} rel="noreferrer" target="_blank">
                 <img src="img/badge.png" id="badge" />
             </a>
             <div id="subtitle">An Apple {e ? '//e' : ']['} Emulator in JavaScript</div>

js/components/Inset.tsx

@@ -1,11 +1,11 @@
-import { h, FunctionalComponent } from 'preact';
+import { h, ComponentChildren } from 'preact';
 
 /**
  * Convenience component for a nice beveled border.
  *
  * @returns Inset component
  */
-export const Inset: FunctionalComponent = ({ children }) => (
+export const Inset = ({ children }: { children: ComponentChildren }) => (
     <div className="inset">
         {children}
     </div>

js/components/Keyboard.tsx

@@ -209,7 +209,7 @@ export const Keyboard = ({ apple2, e }: KeyboardProps) => {
         />;
 
     const rows = keys.map((row, idx) =>
-        <div className={`row row${idx}`}>
+        <div key={idx} className={`row row${idx}`}>
             {row.map(bindKey)}
         </div>
     );

js/components/Modal.tsx

@@ -1,4 +1,4 @@
-import { h, FunctionalComponent } from 'preact';
+import { h, ComponentChildren } from 'preact';
 import { useCallback } from 'preact/hooks';
 import { useHotKey } from './hooks/useHotKey';
 
@@ -67,7 +67,7 @@ const modalFooterStyle = {
  *
  * @returns ModalOverlay component
  */
-export const ModalOverlay: FunctionalComponent = ({ children }) => {
+export const ModalOverlay = ({ children }: { children: ComponentChildren }) => {
     return (
         <div style={modalOverlayStyle}>
             {children}
@@ -80,7 +80,7 @@ export const ModalOverlay: FunctionalComponent = ({ children }) => {
  *
  * @returns ModalContent component
  */
-export const ModalContent: FunctionalComponent = ({ children }) => {
+export const ModalContent = ({ children }: { children: ComponentChildren }) => {
     return (
         <div style={modalContentStyle}>
             {children}
@@ -93,7 +93,7 @@ export const ModalContent: FunctionalComponent = ({ children }) => {
  *
  * @returns ModalFooter component
  */
-export const ModalFooter: FunctionalComponent = ({ children }) => {
+export const ModalFooter = ({ children }: { children: ComponentChildren }) => {
     return (
         <div style={modalFooterStyle}>
             {children}
@@ -160,6 +160,7 @@ export interface ModalProps {
     onClose?: (closeBox?: boolean) => void;
     isOpen: boolean;
     title: string;
+    children: ComponentChildren;
 }
 
 /**
@@ -172,12 +173,12 @@ export interface ModalProps {
  * @param onClose Close callback
  * @returns Modal component
  */
-export const Modal: FunctionalComponent<ModalProps> = ({
+export const Modal = ({
     isOpen,
     children,
     title,
     ...props
-}) => {
+}: ModalProps) => {
     return (
         isOpen ? (
             <ModalOverlay>

js/components/Mouse.tsx

@@ -31,7 +31,7 @@ export const Mouse = ({ cpu, screen, io, slot }: MouseProps) => {
             const mouse = new MouseCard(cpu, mouseUI);
             io.setSlot(slot, mouse);
         }
-    }, [cpu, io]);
+    }, [cpu, io, screen, slot]);
 
     return null;
 };

js/components/Screen.tsx

@@ -17,7 +17,7 @@ export interface ScreenProps {
 export const Screen = ({ screen }: ScreenProps) => {
     return (
         <div id="display">
-            <div class="overscan">
+            <div className="overscan">
                 <canvas id="screen" width="592" height="416" ref={screen} />
             </div>
         </div>

js/components/Slinky.tsx

@@ -24,7 +24,7 @@ export const Slinky = ({ io, slot }: SlinkyProps) => {
             const slinky = new RAMFactor(1024 * 1024);
             io.setSlot(slot, slinky);
         }
-    }, [io]);
+    }, [io, slot]);
 
     return null;
 };

js/components/ThunderClock.tsx

@@ -22,7 +22,7 @@ export const ThunderClock = ({ io, slot }: ThunderClockProps) => {
             const clock = new ThunderClockCard();
             io.setSlot(slot, clock);
         }
-    }, [io]);
+    }, [io, slot]);
 
     return null;
 };

package.json

@@ -40,7 +40,9 @@
     "ajv": "^6.12.0",
     "babel-jest": "^27.2.4",
     "canvas": "^2.8.0",
-    "eslint": "^8.15.0",
+    "eslint": "^8.16.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "file-loader": "^6.0.0",
     "jest": "^27.2.4",
     "jest-image-snapshot": "^4.5.1",