Fixing lint

app/eslint.config.ts

@@ -0,0 +1,72 @@
+import type { Linter } from 'eslint';
+import react from 'eslint-plugin-react';
+import globals from 'globals';
+import eslintJS from '@eslint/js';
+import eslintTS from 'typescript-eslint';
+
+const config: Linter.Config[] = [
+	...eslintTS.configs.recommended as Linter.Config[],
+	{
+		...eslintJS.configs.recommended,
+		files: ['**/*.{ts,mts,tsx}'],
+		ignores: ['*.js'],
+		plugins: {
+			react
+		},
+		settings: {
+			react: {
+				...react.configs.recommended.settings,
+				version: 'detect'
+			}
+		},
+		languageOptions: {
+			parserOptions: {
+				ecmaFeatures: {
+					jsx: true
+				}
+			},
+			globals: {
+				...globals.browser,
+			}
+		},
+		rules: {
+			...react.configs.recommended.rules,
+			'no-restricted-globals': ['error'],
+			'no-console': ['error', {
+				allow: ['warn', 'error']
+			}],
+			'@typescript-eslint/no-explicit-any': 'warn',
+			'@typescript-eslint/no-unused-vars': 'off',
+			'@typescript-eslint/no-unused-expressions': 'off',
+			'@typescript-eslint/no-empty-object-type': 'off',
+			'react/prop-types': 'off',
+			'react/no-unescaped-entities': 'off',
+			'no-script-url': 'error',
+			'no-eval': 'error',
+			'quotes': [
+				'error',
+				'single',
+				{ allowTemplateLiterals: true }
+			],
+			'jsx-quotes': [
+				'error',
+				'prefer-double',
+			],
+			'@typescript-eslint/prefer-ts-expect-error': 'error',
+			'object-curly-spacing': [
+				'error',
+				'always'
+			],
+			'array-bracket-spacing': [
+				'error',
+				'never'
+			],
+			'eqeqeq': [
+				'error',
+				'smart',
+			],
+			'no-multi-spaces': 'error'
+		}
+	}
+];
+export default config;

app/package.json

@@ -11,12 +11,14 @@
     "test": "TZ=NZ jest",
     "typecheck": "tsc --noEmit --p ./tsconfig.json",
     "typecheck:watch": "tsc --noEmit --watch -p ./tsconfig.json",
-    "lint": "echo \"DISABLED UNTIL I CAN FIX THE DEP ERROR\""
+    "lint": "eslint --flag unstable_ts_config src/",
+    "lint:fix": "eslint --flag unstable_ts_config --fix src/"
   },
   "engines": {
     "node": ">=17.1.0"
   },
   "dependencies": {
+    "@eslint/js": "^9.9.0",
     "@fontsource/abeezee": "^4.5.10",
     "@monaco-editor/react": "^4.6.0",
     "@nick_webster/photon": "^0.3.1",
@@ -25,6 +27,7 @@
     "@sentry/integrations": "^7.114.0",
     "@sentry/react": "^7.118.0",
     "@sentry/tracing": "^7.114.0",
+    "@types/eslint": "^9.6.0",
     "browserslist-useragent-regexp": "^4.1.3",
     "date-fns": "^2.30.0",
     "deep-freeze": "~0.0.1",
@@ -141,9 +144,10 @@
     "@babel/core": "^7.25.2",
     "@babel/plugin-syntax-flow": "^7.24.7",
     "@babel/plugin-transform-react-jsx": "^7.25.2",
-    "@eslint/eslintrc": "^2.1.4",
+    "@eslint/eslintrc": "^3.1.0",
     "@sentry/esbuild-plugin": "^2.22.0",
     "@types/deep-freeze": "^0.1.5",
+    "@types/eslint__js": "^8.42.3",
     "@types/html-minifier": "^4.0.5",
     "@types/jest": "^27.5.2",
     "@types/jest-image-snapshot": "^4.3.2",
@@ -154,22 +158,13 @@
     "@types/react-dom": "^17.0.25",
     "@types/semver": "^7.5.8",
     "@types/showdown": "^1.9.4",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
     "babel-eslint": "^10.1.0",
     "browserslist": "^4.23.3",
     "esbuild": "~0.16.17",
     "esbuild-plugin-browserslist": "~0.6.0",
     "esbuild-plugin-manifest": "~0.5.0",
-    "eslint": "^8.57.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^26.9.0",
-    "eslint-plugin-jest-playwright": "~0.9.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint": "^9.9.0",
     "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
     "expect-playwright": "^0.8.0",
     "html-minifier": "^4.0.0",
     "jest": "^27.5.1",
@@ -179,9 +174,11 @@
     "jest-junit": "^13.2.0",
     "jest-playwright-preset": "^1.7.2",
     "jest-runner": "^27.5.1",
+    "jiti": "^1.21.6",
     "playwright": "^1.46.0",
     "servor": "^4.0.2",
     "ts-jest": "^27.1.5",
+    "typescript-eslint": "^8.1.0",
     "workbox-build": "^6.6.1"
   },
   "resolutions": {

app/src/app/actions.ts

@@ -52,24 +52,24 @@ type ActionTypes = {
 const actionCreator = actionCreatorFactory();
 
 export const actions = {
-	parseNpx: actionCreator.async<string, FlatNotepad, any>('PARSE_NPX'),
-	saveNotepad: actionCreator.async<Notepad, void, any>('SAVE_NOTEPAD'),
-	getNotepadList: actionCreator.async<void, string[], any>('GET_NOTEPAD_LIST'),
-	downloadNotepad: actionCreator.async<string, string, any>('DOWNLOAD_NOTEPAD'),
-	openNotepadFromStorage: actionCreator.async<string, void, any>('OPEN_NOTEPAD_FROM_STORAGE'),
-	renameNotepad: actionCreator.async<string, string, any>('RENAME_NOTEPAD'),
-	checkNoteAssets: actionCreator.async<[string, NoteElement[]], FlatNotepad, any>('CHECK_NOTE_ASSETS'),
-	loadNote: actionCreator.async<string, object, any>('LOAD_NOTE'),
-	expandAllExplorer: actionCreator.async<void, string[], any>('EXPAND_ALL_EXPLORER'),
+	parseNpx: actionCreator.async<string, FlatNotepad, unknown>('PARSE_NPX'),
+	saveNotepad: actionCreator.async<Notepad, void, void>('SAVE_NOTEPAD'),
+	getNotepadList: actionCreator.async<void, string[], void>('GET_NOTEPAD_LIST'),
+	downloadNotepad: actionCreator.async<string, string, void>('DOWNLOAD_NOTEPAD'),
+	openNotepadFromStorage: actionCreator.async<string, void, unknown>('OPEN_NOTEPAD_FROM_STORAGE'),
+	renameNotepad: actionCreator.async<string, string, void>('RENAME_NOTEPAD'),
+	checkNoteAssets: actionCreator.async<[string, NoteElement[]], FlatNotepad, void>('CHECK_NOTE_ASSETS'),
+	loadNote: actionCreator.async<string, object, Error>('LOAD_NOTE'),
+	expandAllExplorer: actionCreator.async<void, string[], void>('EXPAND_ALL_EXPLORER'),
 	print: actionCreator.async<void, NoteElement, void>('PRINT'),
-	syncLogin: actionCreator.async<SyncLoginRequest, SyncUser, any>('SYNC_LOGIN'),
-	getSyncedNotepadList: actionCreator.async<SyncUser, CombinedNotepadSyncList, any>('SYNC_GET_NOTEPAD_LIST'),
-	syncDownload: actionCreator.async<string, Notepad, any>('SYNC_DOWNLOAD'),
+	syncLogin: actionCreator.async<SyncLoginRequest, SyncUser, void>('SYNC_LOGIN'),
+	getSyncedNotepadList: actionCreator.async<SyncUser, CombinedNotepadSyncList, void>('SYNC_GET_NOTEPAD_LIST'),
+	syncDownload: actionCreator.async<string, Notepad, void>('SYNC_DOWNLOAD'),
 	syncUpload: actionCreator.async<SyncAction, void, any>('SYNC_UPLOAD'),
-	deleteFromSync: actionCreator.async<string, void, any>('SYNC_DELETE'),
-	addToSync: actionCreator.async<AddToSyncAction, string, any>('SYNC_CREATE'),
+	deleteFromSync: actionCreator.async<string, void, void>('SYNC_DELETE'),
+	addToSync: actionCreator.async<AddToSyncAction, string, void>('SYNC_CREATE'),
 	quickNote: actionCreator.async<void, string, void>('QUICK_NOTE'),
-	indexNotepads: actionCreator.async<void, SearchIndices, any>('INDEX_NOTEPADS'),
+	indexNotepads: actionCreator.async<void, SearchIndices, void>('INDEX_NOTEPADS'),
 	exportAll: actionCreator.async<void, Blob, Error>('EXPORT_ALL_NOTEPADS'),
 	exportToMarkdown: actionCreator.async<void, Blob, Error>('EXPORT_ALL_NOTEPADS_TO_MD'),
 	clearOldData: actionCreator.async<{ silent: boolean }, void, Error>('CLEAR_OLD_DATA'),

app/src/app/components/NavItem.tsx

@@ -14,5 +14,6 @@ const NavItem2 = React.memo((props: NavItemProps) => {
 	// @ts-expect-error Adding an extra property that's not on the type (onTouchEnd). The real JS uses it.
 	return <NavItem {...props} onClick={IS_IOS ? undefined : props.onClick} onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={IS_IOS ? onTouchEnd : undefined} />;
 });
+NavItem2.displayName = 'NavItem2';
 
 export default NavItem2;

app/src/app/components/explorer/NotepadExplorerComponent.tsx

@@ -14,9 +14,9 @@ import AppSettingsComponent from './app-settings/AppSettingsContainer';
 
 // @ts-expect-error TS2307
 import NewSectionVideo from '../../assets/instructions/new-section.mp4';
-// @ts-expect-error
+// @ts-expect-error TS2307
 import OpenNoteVideo from '../../assets/instructions/open-note.mp4';
-// @ts-expect-error
+// @ts-expect-error TS2307
 import OpenNotepadVideo from '../../assets/instructions/open-notepad.mp4';
 import { notepadExplorerConnector } from './NotepadExplorerContainer';
 import { ConnectedProps } from 'react-redux';

app/src/app/components/explorer/app-settings/AppSettingsComponent.tsx

@@ -11,7 +11,7 @@ const AppSettingsComponent = (props: ConnectedProps<typeof appSettingsContainer>
 
 		<ul className="app-settings-component__action-list">
 			<li><QuickSwitchButton /></li>
-			<li><Button2 flat onClick={() => props.feelingLucky()}>I'm feeling lucky</Button2></li>
+			<li><Button2 flat onClick={() => props.feelingLucky()}>I&apos;m feeling lucky</Button2></li>
 			{props.cryptoStatus.hasEncryptedNotebooks && <li><Button2 flat onClick={() => props.clearOldData()}>Clear old/unused data</Button2></li>}
 			{props.cryptoStatus.hasSavedPasswords && <li><Button2 flat onClick={() => props.forgetSavedPasswords()}>Forget saved passwords</Button2></li>}
 		</ul>

app/src/app/components/header/notepad-dropdown/NotepadDropdownComponent.tsx

@@ -25,7 +25,7 @@ const NotepadDropdownComponent = React.memo((props: Props) => {
 	const { notepadTitles, syncState, downloadNotepad } = props;
 
 	const openNotepad = (event) => {
-		let title = event.currentTarget.textContent;
+		const title = event.currentTarget.textContent;
 		props.openNotepadFromStorage(title);
 	};
 
@@ -34,8 +34,8 @@ const NotepadDropdownComponent = React.memo((props: Props) => {
 		if (!title) return;
 
 		let notepad = new FlatNotepad(title);
-		let section = FlatNotepad.makeFlatSection('Unorganised Notes');
-		let note = new Note('Untitled Note').clone({ parent: section.internalRef });
+		const section = FlatNotepad.makeFlatSection('Unorganised Notes');
+		const note = new Note('Untitled Note').clone({ parent: section.internalRef });
 		notepad = notepad.addSection(section).addNote(note);
 
 		if (title) props.newNotepad!(notepad);
@@ -78,5 +78,6 @@ const NotepadDropdownComponent = React.memo((props: Props) => {
 		</Dropdown>
 	);
 });
+NotepadDropdownComponent.displayName = 'NotepadDropdownComponent';
 
 export default NotepadDropdownComponent;

app/src/app/components/header/upload-notepads/UploadNotepadsComponent.tsx

@@ -45,7 +45,7 @@ export default class UploadNotepadsComponent extends React.Component<IUploadNote
 						const zip = new JSZip();
 						zip.loadAsync(arrayBuffer)
 							.then(() => {
-								for (let name in zip.files) {
+								for (const name in zip.files) {
 									if (name.split('.').pop()!.toLowerCase() !== 'npx') continue;
 
 									zip.file(name)!.async('text')

app/src/app/components/note-element-modal/NoteElementModalComponent.tsx

@@ -61,15 +61,15 @@ async function renderNote({ npx, findNote }: Props): Promise<RenderedNote> {
 				regex: /(===[^]+?===|''[^]+?''|;;[^]+?;;|\$\$[^]+?\$\$|\$[^]+?\$)/gi,
 				replace: function(s: string, match: string) {
 					matches.push('&lt;Maths won\'t display in this view. See the help notepad.&gt;<br />' + match);
-					let n = matches.length - 1;
+					const n = matches.length - 1;
 					return '%ph' + n + 'ph%';
 				}
 			},
 			{
 				type: 'output',
 				filter: function(text: string) {
 					for (let i = 0; i < matches.length; ++i) {
-						let pat = '%ph' + i + 'ph%';
+						const pat = '%ph' + i + 'ph%';
 						text = text.replace(new RegExp(pat, 'gi'), matches[i]);
 					}
 					// reset array

app/src/app/components/note-viewer/NoteViewerComponent.tsx

@@ -91,7 +91,7 @@ export default class NoteViewerComponent extends React.Component<INoteViewerComp
 		const containerStyles = {
 			minWidth: '100%',
 			minHeight: '100%',
-			position: 'relative' as 'relative',
+			position: 'relative' as const,
 			transform: `scale(${zoom})`,
 			transformOrigin: '0 0',
 			WebkitTransformOrigin: '0 0'

app/src/app/components/note-viewer/elements/FileElementComponent.tsx

@@ -62,7 +62,7 @@ export default class FileElementComponent extends React.Component<IFileElementCo
 	private openEditor = event => {
 		const { element, edit } = this.props;
 
-		let path = event.path || (event.composedPath && event.composedPath()) || [event.target];
+		const path = event.path || (event.composedPath && event.composedPath()) || [event.target];
 		if (path[0].tagName.toLowerCase() === 'button') return;
 
 		edit(element.args.id);

app/src/app/components/note-viewer/elements/ImageElementComponent.tsx

@@ -85,7 +85,7 @@ export default class ImageElementComponent extends React.Component<INoteElementC
 	private openEditor = event => {
 		const { element, edit } = this.props;
 
-		let path = event.path || (event.composedPath && event.composedPath()) || [event.target];
+		const path = event.path || (event.composedPath && event.composedPath()) || [event.target];
 		if (path[0].tagName.toLowerCase() === 'button') return;
 
 		edit(element.args.id);

app/src/app/components/note-viewer/elements/NoteElementComponent.tsx

@@ -46,7 +46,7 @@ export default class NoteElementComponent extends React.Component<INoteElementCo
 		const isEditing = element.args.id === elementEditing;
 
 		const containerStyles = {
-			zIndex: (isEditing) ? 5000 : 'auto' as 'auto'
+			zIndex: (isEditing) ? 5000 : 'auto' as const
 		};
 
 		const backgroundColour = theme.background === '#000000' ? ThemeValues.Midnight.background : theme.background;

app/src/app/components/note-viewer/elements/PdfElementComponent.tsx

@@ -123,7 +123,7 @@ export default class PdfElementComponent extends React.Component<INoteElementCom
 	private openEditor = event => {
 		const { element, edit } = this.props;
 
-		let path = event.path || (event.composedPath && event.composedPath()) || [event.target];
+		const path = event.path || (event.composedPath && event.composedPath()) || [event.target];
 		if (path[0].tagName.toLowerCase() === 'button') return;
 
 		edit(element.args.id);

app/src/app/components/note-viewer/elements/drawing/DrawingElementComponent.tsx

@@ -1,5 +1,5 @@
 import './DrawingElementComponent.css';
-import React from 'react';
+import React, { Ref, RefCallback } from 'react';
 import { INoteElementComponentProps } from '../NoteElementComponent';
 import { trim } from './trim-canvas';
 import { Resizable } from 're-resizable';
@@ -82,8 +82,8 @@ export default class DrawingElementComponent extends React.Component<Props> {
 						}}
 						>
 						<DrawingCanvas
-							// @ts-expect-error
-							ref={(e: DrawingCanvas | undefined) => this.canvasElement = e?.inner ?? null}
+							// @ts-expect-error TypeScript gets confused with all the different ways to do a Ref in react.
+							ref={((e: DrawingCanvas | undefined) => this.canvasElement = e?.inner ?? null)}
 							key={`drawing-canvas-${this.props.element.args.id}`}
 							className="drawing-element__view"
 							width="500"
@@ -161,7 +161,7 @@ export default class DrawingElementComponent extends React.Component<Props> {
 			const isNewEditor = this.props.elementEditing !== prevProps?.elementEditing;
 			if (isNewEditor) {
 				// Restore saved image to canvas
-				let img: HTMLImageElement = new Image();
+				const img: HTMLImageElement = new Image();
 				img.onload = () => {
 					const canvasElement = this.canvasElement;
 					if (!canvasElement) return;

app/src/app/components/note-viewer/elements/drawing/trim-canvas.ts

@@ -1,18 +1,26 @@
 // MIT http://rem.mit-license.org
 
+type Bound = {
+	top: number | null,
+	left: number | null,
+	right: number | null,
+	bottom: number | null,
+}
+
 export function trim(c) {
-	let ctx = c.getContext('2d'),
-		copy = document.createElement('canvas').getContext('2d')!,
-		pixels = ctx.getImageData(0, 0, c.width, c.height),
-		l = pixels.data.length,
-		i,
-		bound = {
-			top: null,
-			left: null,
-			right: null,
-			bottom: null
-		},
-		x, y;
+	const ctx = c.getContext('2d');
+	const copy = document.createElement('canvas').getContext('2d')!;
+	const pixels = ctx.getImageData(0, 0, c.width, c.height);
+	const l = pixels.data.length;
+	const bound: Bound = {
+		top: null,
+		left: null,
+		right: null,
+		bottom: null
+	};
+	let i: number;
+	let x: number;
+	let y: number;
 
 	for (i = 0; i < l; i += 4) {
 		if (pixels.data[i + 3] !== 0) {

app/src/app/components/note-viewer/elements/markdown/MarkdownElementComponent.tsx

@@ -1,5 +1,4 @@
-// @ts-expect-error
-// eslint-disable-next-line import/no-webpack-loader-syntax
+// @ts-expect-error TS2307
 import helpNpx from '../../../../assets/Help.npx';
 
 import './MarkdownElementComponent.css';
@@ -43,7 +42,7 @@ type Props = ConnectedProps<typeof markdownElementConnector> & IMarkdownElementC
 
 const converter = configureShowdown();
 
-// eslint-disable-next-line no-restricted-globals
+ 
 self.MonacoEnvironment = {
 	getWorkerUrl: (moduleId, label) => build.defs.MONACO_WORKER_PATH
 }