More lint bug fixes (#13)

* Make sure eslint is running against ts and React files * install react-hooks eslint rule * fix remaining linting errors --------- Co-authored-by: Alex Prokop <[email protected]>
pixijs · Mar 16, 2023 · 80d4df9 · 80d4df9
1 parent 3e17656
commit 80d4df9
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 99 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -7,4 +7,7 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 indent_style = space
+indent_size = 4
+
+[{*.json,*.yml,*.md}]
 indent_size = 2
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,10 +1,15 @@
 module.exports = {
     root: true,
     extends: ['@pixi/eslint-config', 'plugin:react/recommended', 'plugin:react/jsx-runtime'],
+    plugins: ['react-hooks'],
     parserOptions: {
         project: ['tsconfig.eslint.json'],
         tsconfigRootDir: __dirname,
     },
+    globals: {
+        React: true,
+        JSX: true,
+    },
     settings: {
         jsdoc: {
             mode: 'typescript',
@@ -21,6 +26,8 @@ module.exports = {
     rules: {
         'no-empty-function': 0,
         'no-prototype-builtins': 0,
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'warn',
         'spaced-comment': [1, 'always', { markers: ['/'] }],
         '@typescript-eslint/triple-slash-reference': [1, { path: 'always' }],
         '@typescript-eslint/consistent-type-imports': [1, { disallowTypeAnnotations: false }],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,8 +7,8 @@
         "clear": "docusaurus clear",
         "deploy": "docusaurus deploy",
         "docusaurus": "docusaurus",
-        "lint": "eslint .",
-        "lint:fix": "eslint . --fix",
+        "lint": "eslint . --ext .js,.mjs,.jsx,.ts,.tsx",
+        "lint:fix": "eslint . --fix --ext .js,.mjs,.jsx,.ts,.tsx",
         "prettier:check": "prettier --check .",
         "prettify": "prettier --write .",
         "serve": "docusaurus serve",
@@ -74,6 +74,7 @@
         "eslint-config-standard-jsx": "^11.0.0",
         "eslint-config-standard-with-typescript": "^30.0.0",
         "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.0",
         "lint-staged": "^13.2.0",
         "prettier": "^2.8.4",

diff --git a/src/components/PixiPlayground/index.tsx b/src/components/PixiPlayground/index.tsx
@@ -27,7 +27,7 @@ function MonacoEditor(): JSX.Element
     {
         const resetEditorLayout = (): void =>
         {
-            if (editorRef.current != null) (editorRef.current as any).layout({});
+            if (editorRef.current !== null) (editorRef.current as any).layout({});
         };
 
         window.addEventListener('resize', resetEditorLayout);
@@ -81,20 +81,15 @@ function Playground(props: { mode: PlaygroundMode; onCodeChanged?: (code: string
     const { sandpack } = useSandpack();
     const [showOutput, setShowOutput] = useState(false);
 
+    // TODO: is this intentionally running on every render? Doesn't actually look like onCodeChanged is being used?
     useEffect(() =>
     {
-        if (props.onCodeChanged != null)
-        {
-            props.onCodeChanged(code);
+        props.onCodeChanged?.(code);
 
-            return () =>
-            {
-                if (props.onCodeChanged != null)
-                {
-                    props.onCodeChanged(undefined);
-                }
-            };
-        }
+        return () =>
+        {
+            props.onCodeChanged?.(undefined);
+        };
     });
 
     const handleToggle = (): void =>
@@ -107,7 +102,7 @@ function Playground(props: { mode: PlaygroundMode; onCodeChanged?: (code: string
             <MonacoEditor />
             <div className={styles.previewWrapper}>
                 <SandpackPreview showOpenInCodeSandbox={true} className={styles.sandpackPreview} />
-                {sandpack.bundlerState == null && <div className={styles.sandpackLoadingOverlay}></div>}
+                {sandpack.bundlerState === null && <div className={styles.sandpackLoadingOverlay}></div>}
             </div>
             <button onClick={handleToggle}>{showOutput ? 'Show Code' : 'Show Output'}</button>
         </SandpackLayout>
@@ -123,11 +118,12 @@ export default function PixiPlayground(props: {
     const mode = props.mode ?? 'example';
 
     // Hack to make the examples pages full width on wide screens
+    // eslint-disable-next-line consistent-return
     useEffect(() =>
     {
         const mainContainer = document.querySelector<HTMLDivElement>('main .container');
 
-        if (mode === 'example' && mainContainer != null)
+        if (mode === 'example' && mainContainer !== null)
         {
             mainContainer.style.maxWidth = '100%';
 
@@ -136,7 +132,7 @@ export default function PixiPlayground(props: {
                 mainContainer.style.maxWidth = '';
             };
         }
-    });
+    }, [mode]);
     const { siteConfig } = useDocusaurusContext();
     const { colorMode } = useColorMode();
 

diff --git a/src/components/Tutorial/index.tsx b/src/components/Tutorial/index.tsx
@@ -1,10 +1,71 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styles from './index.module.scss';
 import Link from '@docusaurus/Link';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import PixiPlayground from '../PixiPlayground';
 import type { TutorialStep } from '@site/src/data/tutorial/TutorialData';
 
+function BrowserTutorial({ data }: { data: TutorialStep[] })
+{
+    let step = Number(window.location.hash.replace('#', ''));
+
+    if (!step || step <= 0 || step > data.length) step = 1;
+
+    useEffect(() =>
+    {
+        window.location.hash = step.toString();
+    }, [step]);
+
+    const { Content, code, completedCode } = data[step - 1];
+    const [showSolution, setShowSolution] = useState(false);
+
+    const resetSolutionShowed = (): void =>
+    {
+        setShowSolution(false);
+    };
+    const handleSolutionToggle = (): void =>
+    {
+        setShowSolution(!showSolution);
+    };
+
+    return (
+        <>
+            <div className={styles.content}>
+                <div className={styles.card}>
+                    <div className={styles.navigator}>
+                        <div className={styles.interactionArea}></div>
+                        <span>{`${step} / ${data.length}`}</span>
+                        <ul className={styles.dropdown}>
+                            {data.map((datum, i) => (
+                                <Link key={i} onClick={resetSolutionShowed} to={`#${i + 1}`}>
+                                    <div className={`${i === step - 1 ? styles.selected : ''}`}>{`${i + 1}.  ${
+                                        datum.title
+                                    }`}</div>
+                                </Link>
+                            ))}
+                        </ul>
+                    </div>
+                    <Content />
+                    {completedCode && <button onClick={handleSolutionToggle}>{showSolution ? 'Reset' : 'Solution'}</button>}
+                    <div className={styles.footer}>
+                        {step > 1 && (
+                            <Link onClick={resetSolutionShowed} className={styles.prev} to={`#${step - 1}`}>
+                                {'<  Prev'}
+                            </Link>
+                        )}
+                        {step < data.length && (
+                            <Link onClick={resetSolutionShowed} className={styles.next} to={`#${step + 1}`}>
+                                {'Next  >'}
+                            </Link>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <PixiPlayground mode="tutorial" code={completedCode && showSolution ? completedCode : code} />
+        </>
+    );
+}
+
 export default function Tutorial({ data }: { data: TutorialStep[] }): JSX.Element
 {
     const [showEditor, setShowEditor] = useState(false);
@@ -18,83 +79,9 @@ export default function Tutorial({ data }: { data: TutorialStep[] }): JSX.Elemen
             <button onClick={handleEditorToggle} className={styles.editorToggle}>
                 {showEditor ? '<  To Instructions' : 'To Editor >'}
             </button>
-            {typeof window !== 'undefined' ? (
-                <BrowserOnly>
-                    {() =>
-                    {
-                        let step = Number(window.location.hash.replace('#', ''));
-
-                        if (!step || step <= 0 || step > data.length) step = 1;
-                        window.location.hash = step.toString();
-
-                        const { Content, code, completedCode } = data[step - 1];
-                        const [showSolution, setShowSolution] = useState(false);
-
-                        const resetSolutionShowed = (): void =>
-                        {
-                            setShowSolution(false);
-                        };
-                        const handleSolutionToggle = (): void =>
-                        {
-                            setShowSolution(!showSolution);
-                        };
-
-                        return (
-                            <>
-                                <div className={styles.content}>
-                                    <div className={styles.card}>
-                                        <div className={styles.navigator}>
-                                            <div className={styles.interactionArea}></div>
-                                            <span>{`${step} / ${data.length}`}</span>
-                                            <ul className={styles.dropdown}>
-                                                {data.map((data, i) => (
-                                                    <Link key={i} onClick={resetSolutionShowed} to={`#${i + 1}`}>
-                                                        <div className={`${i === step - 1 ? styles.selected : ''}`}>{`${
-                                                            i + 1
-                                                        }.  ${data.title}`}</div>
-                                                    </Link>
-                                                ))}
-                                            </ul>
-                                        </div>
-                                        <Content />
-                                        {completedCode && (
-                                            <button onClick={handleSolutionToggle}>
-                                                {showSolution ? 'Reset' : 'Solution'}
-                                            </button>
-                                        )}
-                                        <div className={styles.footer}>
-                                            {step > 1 && (
-                                                <Link
-                                                    onClick={resetSolutionShowed}
-                                                    className={styles.prev}
-                                                    to={`#${step - 1}`}
-                                                >
-                                                    {'<  Prev'}
-                                                </Link>
-                                            )}
-                                            {step < data.length && (
-                                                <Link
-                                                    onClick={resetSolutionShowed}
-                                                    className={styles.next}
-                                                    to={`#${step + 1}`}
-                                                >
-                                                    {'Next  >'}
-                                                </Link>
-                                            )}
-                                        </div>
-                                    </div>
-                                </div>
-                                <PixiPlayground
-                                    mode="tutorial"
-                                    code={completedCode && showSolution ? completedCode : code}
-                                />
-                            </>
-                        );
-                    }}
-                </BrowserOnly>
-            ) : (
-                <h1 className={styles.loader}>LOADING...</h1>
-            )}
+            <BrowserOnly fallback={<h1 className={styles.loader}>LOADING...</h1>}>
+                {() => <BrowserTutorial data={data} />}
+            </BrowserOnly>
         </div>
     );
 }
diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx
@@ -3,7 +3,6 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import PixiPlayground from '../components/PixiPlayground';
 import styles from './playground.module.css';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 const defaultCode = `const app = new PIXI.Application<HTMLCanvasElement>({ background: '#1099bb', resizeTo: window });
 document.body.appendChild(app.view);
@@ -44,6 +43,7 @@ function clearPayload(): void
     history.replaceState(null, '', location.pathname + location.search);
 }
 
+// eslint-disable-next-line consistent-return
 function readPayload(): Payload | undefined
 {
     if (location.hash !== '')
@@ -69,10 +69,9 @@ export default function PlaygroundPage(): JSX.Element
                     const payload = readPayload();
                     const code = payload?.code ?? defaultCode;
 
-                    console.log(useDocusaurusContext());
                     function onCodeChanged(code?: string): void
                     {
-                        if (code != null)
+                        if (code !== undefined)
                         {
                             writePayload({ code });
                         }

diff --git a/src/pages/versions.tsx b/src/pages/versions.tsx
@@ -110,7 +110,7 @@ export default function Version(): JSX.Element
                     </table>
                 </div>
 
-                {preReleaseVersion != null && (
+                {preReleaseVersion && (
                     <div className="margin-bottom--lg">
                         <Heading as="h3" id="latest">
                             <Translate id="versionsPage.next.title">Prerelease version</Translate>