MicroPad · NickGeek · Oct 31, 2024 · Aug 10, 2024 · Aug 13, 2024 · Aug 13, 2024
diff --git a/app/bun.lockb b/app/bun.lockb
diff --git a/app/eslint.config.ts b/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;
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "micropad",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "private": true,
   "scripts": {
     "preinstall": "python3 ../libs/build-libs.py && ./get_precache_files.py > src/extraPrecacheFiles.ts",
@@ -11,24 +11,27 @@
     "test": "TZ=NZ jest",
     "typecheck": "tsc --noEmit --p ./tsconfig.json",
     "typecheck:watch": "tsc --noEmit --watch -p ./tsconfig.json",
-    "lint": "eslint src/"
+    "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.5.1",
+    "@monaco-editor/react": "^4.6.0",
     "@nick_webster/photon": "^0.3.1",
-    "@redux-devtools/extension": "^3.2.5",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@sentry/integrations": "^7.63.0",
-    "@sentry/react": "^7.63.0",
-    "@sentry/tracing": "^7.63.0",
-    "browserslist-useragent-regexp": "^4.1.0",
+    "@redux-devtools/extension": "^3.3.0",
+    "@reduxjs/toolkit": "^1.9.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",
-    "fend-wasm-web": "^1.2.0",
+    "fend-wasm-web": "^1.5.1",
     "json-stringify-safe": "^5.0.1",
     "jszip": "^3.10.1",
     "localforage": "^1.10.0",
@@ -37,31 +40,31 @@
     "monaco-editor": "~0.37.1",
     "mousetrap": "^1.6.5",
     "opus-recorder": "^4.1.4",
-    "pdfobject": "^2.2.12",
-    "re-resizable": "^6.9.11",
+    "pdfobject": "^2.3.0",
+    "re-resizable": "^6.9.17",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-draggable": "^4.4.5",
+    "react-draggable": "^4.4.6",
     "react-materialize": "^3.10.0",
-    "react-redux": "^8.1.2",
-    "react-select": "^5.7.4",
+    "react-redux": "^8.1.3",
+    "react-select": "^5.8.0",
     "react-treeview": "~0.4.7",
     "redux": "^4.2.1",
     "redux-observable": "^2.0.0",
     "rxjs": "^7.8.1",
     "save-as": "^0.1.8",
-    "semver": "^7.5.4",
+    "semver": "^7.6.3",
     "showdown": "^1.9.1",
     "typescript": "~5.0.4",
     "typescript-fsa": "^3.0.0",
     "upad-parse": "^7.5.2",
     "vex-dialog": "^1.1.0",
     "vex-js": "^4.1.0",
-    "workbox-core": "^6.6.0",
-    "workbox-expiration": "^6.6.0",
-    "workbox-precaching": "^6.6.0",
-    "workbox-routing": "^6.6.0",
-    "workbox-strategies": "^6.6.0"
+    "workbox-core": "^6.6.1",
+    "workbox-expiration": "^6.6.1",
+    "workbox-precaching": "^6.6.1",
+    "workbox-routing": "^6.6.1",
+    "workbox-strategies": "^6.6.1"
   },
   "eslintConfig": {
     "extends": [
@@ -138,38 +141,30 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/plugin-syntax-flow": "^7.22.5",
-    "@babel/plugin-transform-react-jsx": "^7.22.5",
-    "@sentry/esbuild-plugin": "^2.6.2",
-    "@types/deep-freeze": "^0.1.2",
-    "@types/html-minifier": "^4.0.2",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-syntax-flow": "^7.24.7",
+    "@babel/plugin-transform-react-jsx": "^7.25.2",
+    "@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",
-    "@types/json-stringify-safe": "^5.0.0",
-    "@types/mousetrap": "^1.6.11",
-    "@types/node": "^18.17.5",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
-    "@types/semver": "^7.5.0",
+    "@types/json-stringify-safe": "^5.0.3",
+    "@types/mousetrap": "^1.6.15",
+    "@types/node": "^18.19.44",
+    "@types/react": "^17.0.80",
+    "@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.21.10",
+    "browserslist": "^4.23.3",
     "esbuild": "~0.16.17",
     "esbuild-plugin-browserslist": "~0.6.0",
     "esbuild-plugin-manifest": "~0.5.0",
-    "eslint": "^8.47.0",
-    "@eslint/eslintrc": "^2.1.2",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jest": "^26.9.0",
-    "eslint-plugin-jest-playwright": "~0.9.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react": "^7.35.0",
     "expect-playwright": "^0.8.0",
     "html-minifier": "^4.0.0",
     "jest": "^27.5.1",
@@ -179,16 +174,22 @@
     "jest-junit": "^13.2.0",
     "jest-playwright-preset": "^1.7.2",
     "jest-runner": "^27.5.1",
-    "playwright": "^1.37.0",
+    "jiti": "^1.21.6",
+    "playwright": "^1.46.0",
     "servor": "^4.0.2",
     "ts-jest": "^27.1.5",
-    "workbox-build": "^6.6.0"
+    "typescript-eslint": "^8.1.0",
+    "workbox-build": "^6.6.1"
   },
   "resolutions": {
     "@types/react": "^17",
     "react": "^17",
     "redux": "^4",
-    "rxjs": "^7.5.7"
+    "rxjs": "^7.5.7",
+    "internal-slot": "^1.0.5"
   },
-  "packageManager": "yarn@3.5.0"
+  "packageManager": "yarn@1.22.22",
+  "trustedDependencies": [
+    "@sentry/cli"
+  ]
 }
diff --git a/app/src/app/actions.ts b/app/src/app/actions.ts
@@ -33,18 +33,18 @@
 export type ActionNames = keyof ActionFactories;

 export type MicroPadActions = {
 	[ActionName in ActionNames]: ActionFactories[ActionName] extends ActionCreator<any>
 		? ReturnType<ActionFactories[ActionName]>
 		: ActionFactories[ActionName] extends AsyncActionCreators<any, any, any>
 			? { started: ReturnType<ActionFactories[ActionName]['started']>, done: ReturnType<ActionFactories[ActionName]['done']>, failed: ReturnType<ActionFactories[ActionName]['failed']> }
 			: never;
 };

 type ActionFactories = typeof actions;
 type ActionTypes = {
 	[ActionName in ActionNames]: ActionFactories[ActionName] extends ActionCreator<any>
 		? ReturnType<ActionFactories[ActionName]>
 		: ActionFactories[ActionName] extends AsyncActionCreators<any, any, any>
 			? (ReturnType<ActionFactories[ActionName]['started']> | ReturnType<ActionFactories[ActionName]['done']> | ReturnType<ActionFactories[ActionName]['failed']>)
 			: never;
 };
@@ -52,24 +52,24 @@
 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'),

diff --git a/app/src/app/components/NavItem.tsx b/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;
diff --git a/app/src/app/components/explorer/NotepadExplorerComponent.tsx b/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';

diff --git a/app/src/app/components/explorer/app-settings/AppSettingsComponent.tsx b/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>

diff --git a/app/src/app/components/header/notepad-dropdown/NotepadDropdownComponent.tsx b/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;
diff --git a/app/src/app/components/header/upload-notepads/UploadNotepadsComponent.tsx b/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')

diff --git a/app/src/app/components/note-element-modal/NoteElementModalComponent.tsx b/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

diff --git a/app/src/app/components/note-viewer/NoteViewerComponent.tsx b/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'

diff --git a/app/src/app/components/note-viewer/elements/FileElementComponent.tsx b/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);

diff --git a/app/src/app/components/note-viewer/elements/ImageElementComponent.tsx b/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);