React linters (#117)

* React hook linter * React linting * Simplify config
2022-05-29 13:48:51 -07:00 · 2022-05-29 13:48:51 -07:00 · e525e12c3c
parent 52a1c65fe4
commit e525e12c3c
19 changed files with 1160 additions and 98 deletions
--- a/.eslintrc.json
+++ b/.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"
        }
    }
 }
--- a/js/components/Apple2.tsx
+++ b/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})}>
--- a/js/components/AudioControl.tsx
+++ b/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
--- a/js/components/ControlButton.tsx
+++ b/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>
 );
--- a/js/components/ControlStrip.tsx
+++ b/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);
--- a/js/components/DiskII.tsx
+++ b/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}`}
--- a/js/components/Drives.tsx
+++ b/js/components/Drives.tsx
@ -54,7 +54,7 @@ export const Drives = ({ io, sectors }: DrivesProps) => {
            io.setSlot(6, disk2);
            setDisk2(disk2);
        }
-    }, [io]);
+    }, [io, sectors]);

    return (
        <>
--- a/js/components/FileChooser.tsx
+++ b/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'
        ? (
--- a/js/components/FileModal.tsx
+++ b/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>
--- a/js/components/Header.tsx
+++ b/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>
--- a/js/components/Inset.tsx
+++ b/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>
--- a/js/components/Keyboard.tsx
+++ b/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>
    );
--- a/js/components/Modal.tsx
+++ b/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>
--- a/js/components/Mouse.tsx
+++ b/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;
 };
--- a/js/components/Screen.tsx
+++ b/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>
--- a/js/components/Slinky.tsx
+++ b/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;
 };
--- a/js/components/ThunderClock.tsx
+++ b/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;
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",