ci(eslint): create workflow file for eslint

.eslintrc.cjs

@@ -1,12 +1,11 @@
 /* eslint-env node */
-module.exports =
-{
+module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
     'eslint:recommended',
+    'standard-with-typescript',
     'plugin:@typescript-eslint/recommended',
-    'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:react-hooks/recommended',
     'plugin:react/recommended',
     'prettier',
@@ -48,5 +47,5 @@ module.exports =
       },
     ],
   },
-}
+};
 

.github/workflows/eslint.yml

@@ -0,0 +1,60 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: ['main']
+  schedule:
+    - cron: '16 20 * * 0'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install ESLint formatter
+        run: |
+          npm install @microsoft/[email protected]
+
+      - name: Run ESLint
+        run: npx eslint src
+          --report-unused-disable-directives
+          --max-warnings 0
+          --config .eslintrc.cjs
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true

src/App.tsx

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { useEffect, useState } from 'react';
 import NavBar from './components/NavBar';
 import styled, { ThemeProvider } from 'styled-components';
@@ -6,15 +7,15 @@ import './App.css';
 import Home from './pages';
 import AboutPage from './pages/about';
 import { SimulationParams } from './components/Simulation';
-import { IncomingMessage } from './workers/modelWorkerMessage';
+import { type IncomingMessage } from './workers/modelWorkerMessage';
 
 const Main = styled.main`
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
-  background: ${(props) => (props.theme.light ? '#ffffff' : '#707070')};
+  background: ${(props) => ((props.theme.light as boolean) ? '#ffffff' : '#707070')};
   z-index: 0;
 `;
 
@@ -25,7 +26,7 @@ const NavBarContainer = styled.div`
   font-family: 'Titillium Web', sans-serif;
 `;
 
-function App() {
+function App(): React.ReactElement {
   // save the current page in state
   // 0 = home(index,simulation) 1 = about
   const [page, setPage] = useState(0);
@@ -35,7 +36,6 @@ function App() {
 
   const [lightTheme, setlightTheme] = useState<boolean>(false);
   // TODO: implement auto theme ui switch
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [curThemeMode, setCurThemeMode] = useState<string>('auto'); // 'dark' or 'light' or 'auto'
 
   useEffect(() => {
@@ -62,9 +62,10 @@ function App() {
       },
     );
     setSimWorker(worker);
-    worker.postMessage({
+    const message: IncomingMessage = {
       func: 'init',
-    } as IncomingMessage);
+    };
+    worker.postMessage(message);
   }, []);
 
   let mainPageComponent;

src/components/NavBar.tsx

@@ -13,8 +13,8 @@ const Header = styled.header`
   display: flex;
   align-items: center;
   height: 5rem;
-  background-color: ${(props) => (props.theme.light ? '#004b87' : '#142c3f')};
-  color: ${(props) => (props.theme.light ? '#f5f5f5' : '#9faee5')};
+  background-color: ${(props) => (props.theme.light as boolean ? '#004b87' : '#142c3f')};
+  color: ${(props) => (props.theme.light as boolean ? '#f5f5f5' : '#9faee5')};
 `;
 
 const LogoAnchor = styled.a`
@@ -132,10 +132,10 @@ export default function NavBar(props: NavBarProps): React.ReactElement {
       </HamburgerBar>
 
       <ButtonGroup>
-        <NavButton type="primary" onClick={() => setPage(0)}>
+        <NavButton type="primary" onClick={() => { setPage(0); }}>
           Simulations
         </NavButton>
-        <NavButton type="primary" onClick={() => setPage(1)}>
+        <NavButton type="primary" onClick={() => { setPage(1); }}>
           About
         </NavButton>
         <ThemeButton
@@ -155,10 +155,10 @@ export default function NavBar(props: NavBarProps): React.ReactElement {
       </ButtonGroup>
       {isShowExtend ? (
         <ExtendContainer>
-          <NavButton type="primary" onClick={() => setPage(0)}>
+          <NavButton type="primary" onClick={() => { setPage(0); }}>
             Simulations
           </NavButton>
-          <NavButton type="primary" onClick={() => setPage(1)}>
+          <NavButton type="primary" onClick={() => { setPage(1); }}>
             About
           </NavButton>
           <ThemeButton

src/components/ParameterComponents/ChoiceParameter.tsx

@@ -30,7 +30,7 @@ export default function ChoiceParameter(props: {
 }): React.ReactElement {
 
   const [value, setValue] = useState(props.values[0])
-  if (props.initValue) {
+  if (props.initValue != null) {
     setValue(props.initValue)
   }
   // split values into rows of 3

src/components/Simulation.tsx

@@ -1,14 +1,14 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import * as t from 'three';
 import {
   useFrame,
   type ThreeElements,
   type ThreeEvent,
 } from '@react-three/fiber';
-import React, { useEffect, useMemo, useRef } from 'react';
+import type React from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import vertexShader from '../shaders/vert.glsl';
 import fragmentShader from '../shaders/frag.glsl';
-import { OutgoingMessage } from '../workers/modelWorkerMessage';
+import { type OutgoingMessage } from '../workers/modelWorkerMessage';
 
 // WebGPU imports
 import { default as WebGPU } from 'three/addons/capabilities/WebGPU.js';
@@ -65,7 +65,7 @@ function DiffusionPlane(
   // INITIALISATION
 
   // WebGPU capability test
-  if (WebGPU.isAvailable() === true) {
+  if (WebGPU.isAvailable()) {
     const webgpuRenderer = new WebGPURenderer({ antialias: true });
     console.log('browser supports webgpu rendering');
     console.log('webgpu renderer context', webgpuRenderer);
@@ -116,7 +116,7 @@ function DiffusionPlane(
   // create a worker and assign it the model computations
   const { worker } = props;
   useEffect(() => {
-    void (() => {
+    (() => {
       worker.onmessage = (e) => {
         const data = e.data as OutgoingMessage;
 
@@ -141,7 +141,6 @@ function DiffusionPlane(
     })();
 
     // SUBSCRIPTIONS
-
     // update the density uniforms every time
     // output is received
     function output(data: Float32Array): void {

src/pages/about.tsx

@@ -8,7 +8,7 @@ const Content = styled.div`
   margin-top: 4%;
   margin-bottom: 8%;
   font-family: 'Roboto', sans-serif;
-  color: ${(props) => (props.theme.light ? '#333333' : '#c9c9c9' )};
+  color: ${(props) => (props.theme.light as boolean ? '#333333' : '#c9c9c9' )};
   a:link {
     text-decoration: none;
   }

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import ParBar from '../components/ParametersBar';
 import ControlBar from '../components/ControlBar';
-import { DiffusionPlane, SimulationParams } from '../components/Simulation';
+import { DiffusionPlane, type SimulationParams } from '../components/Simulation';
 import { Canvas } from '@react-three/fiber';
 import styled from 'styled-components';