Switch to Node.js 16 LTS, upgrade TypeScript, ESLint, and other dependencies (#395)

* Upgrade TypeScript, ESLint, and other dependencies

This also cleans up various other files where newer ESLint rules complained

* Set CI and CD to use Node.js version 16

* Small tweak

* Fix CD version printing

* Add nvm version for Cloudflare Pages

frontend/src/App.vue

@@ -72,6 +72,7 @@ body,
 	user-select: none;
 }
 
+html,
 body,
 input,
 textarea,

frontend/src/components/panels/Document.vue

@@ -172,7 +172,7 @@
 			flex-direction: column;
 
 			.working-colors .swap-and-reset {
-				font-size: 0;
+				display: flex;
 			}
 		}
 

frontend/src/components/widgets/buttons/IconButton.vue

@@ -15,10 +15,9 @@
 	border: none;
 	border-radius: 2px;
 	background: none;
-	vertical-align: top;
 	fill: var(--color-e-nearwhite);
 
-	// The `where` pseduo-class does not contribtue to specificity
+	// The `where` pseudo-class does not contribtue to specificity
 	& + :where(.icon-button) {
 		margin-left: 0;
 	}

frontend/src/components/widgets/buttons/PopoverButton.vue

@@ -26,7 +26,6 @@
 		outline: none;
 		border: none;
 		border-radius: 2px;
-		vertical-align: top;
 		background: var(--color-1-nearblack);
 		fill: var(--color-e-nearwhite);
 

frontend/src/components/widgets/floating-menus/MenuList.vue

@@ -153,7 +153,7 @@ interface MenuListEntryData {
 	checkbox?: boolean;
 	shortcut?: Array<string>;
 	shortcutRequiresLock?: boolean;
-	action?: Function;
+	action?: () => void;
 	children?: SectionsOfMenuListEntries;
 }
 
@@ -168,7 +168,7 @@ const MenuList = defineComponent({
 		direction: { type: String as PropType<MenuDirection>, default: MenuDirection.Bottom },
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
 		activeEntry: { type: Object as PropType<MenuListEntry>, required: false },
-		defaultAction: { type: Function as PropType<Function | undefined>, required: false },
+		defaultAction: { type: Function as PropType<() => void | undefined>, required: false },
 		minWidth: { type: Number, default: 0 },
 		drawIcon: { type: Boolean, default: false },
 		scrollable: { type: Boolean, default: false },

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -53,7 +53,6 @@
 	.icon-label,
 	.text-label {
 		display: inline-block;
-		vertical-align: top;
 	}
 
 	.text-label {
@@ -73,7 +72,7 @@ export interface RadioEntryData {
 	label?: string;
 	icon?: string;
 	tooltip?: string;
-	action?: Function;
+	action?: () => void;
 }
 
 export type RadioEntries = Array<RadioEntryData>;

frontend/src/components/widgets/inputs/ShelfItemInput.vue

@@ -24,7 +24,6 @@
 	svg {
 		width: 24px;
 		height: 24px;
-		vertical-align: top;
 	}
 }
 </style>

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -76,10 +76,6 @@
 		.dim {
 			fill: var(--color-7-middlegray);
 		}
-
-		svg {
-			vertical-align: top;
-		}
 	}
 
 	.hint-text {

frontend/src/components/widgets/rulers/CanvasRuler.vue

@@ -97,7 +97,7 @@ export default defineComponent({
 
 			return dPathAttribute;
 		},
-		svgTexts(): {} {
+		svgTexts(): { transform: string; text: number }[] {
 			const isVertical = this.direction === RulerDirection.Vertical;
 
 			const offsetStart = mod(this.origin, this.majorMarkSpacing);

frontend/src/components/widgets/widgets.ts

@@ -7,7 +7,7 @@ export interface TextButtonWidget {
 	kind: "TextButton";
 	tooltip?: string;
 	message?: string | object;
-	callback?: Function;
+	callback?: () => void;
 	props: TextButtonProps;
 }
 
@@ -25,7 +25,7 @@ export interface IconButtonWidget {
 	kind: "IconButton";
 	tooltip?: string;
 	message?: string | object;
-	callback?: Function;
+	callback?: () => void;
 	props: IconButtonProps;
 }
 
@@ -40,7 +40,7 @@ export interface IconButtonProps {
 export interface PopoverButtonWidget {
 	kind: "PopoverButton";
 	tooltip?: string;
-	callback?: Function;
+	callback?: () => void;
 	// popover: WidgetLayout;
 	popover: { title: string; text: string }; // TODO: Replace this with a `WidgetLayout` like above for arbitrary layouts
 	props: PopoverButtonProps;

frontend/src/utilities/panic-proxy.ts

@@ -17,7 +17,7 @@ export function panicProxy<T extends object>(module: T): T {
 			return function (...args: any) {
 				let result;
 				try {
-					// @ts-expect-error
+					// @ts-expect-error TypeScript does not know what `this` is, since it should be able to be anything
 					result = targetValue.apply(this, args);
 				} catch (err: any) {
 					// Suppress `unreachable` WebAssembly.RuntimeError exceptions

frontend/src/utilities/response-handler.ts

@@ -98,16 +98,25 @@ function parseResponse(responseType: string, data: any): Response {
 }
 
 export type Response =
+	| DocumentChanged
+	| DisplayFolderTreeStructure
 	| SetActiveTool
+	| SetActiveDocument
+	| UpdateOpenDocumentsList
 	| UpdateCanvas
 	| UpdateScrollbars
 	| UpdateRulers
 	| UpdateLayer
-	| DocumentChanged
-	| DisplayFolderTreeStructure
-	| UpdateWorkingColors
 	| SetCanvasZoom
-	| SetCanvasRotation;
+	| SetCanvasRotation
+	| ExportDocument
+	| SaveDocument
+	| OpenDocumentBrowse
+	| UpdateWorkingColors
+	| DisplayError
+	| DisplayPanic
+	| DisplayConfirmationToCloseDocument
+	| DisplayConfirmationToCloseAllDocuments;
 
 export interface UpdateOpenDocumentsList {
 	open_documents: Array<string>;
@@ -191,7 +200,9 @@ function newDisplayConfirmationToCloseDocument(input: any): DisplayConfirmationT
 	};
 }
 
-function newDisplayConfirmationToCloseAllDocuments(_input: any): {} {
+export type DisplayConfirmationToCloseAllDocuments = Record<string, never>;
+
+function newDisplayConfirmationToCloseAllDocuments(_input: any): DisplayConfirmationToCloseAllDocuments {
 	return {};
 }
 
@@ -252,12 +263,12 @@ function newSaveDocument(input: any): SaveDocument {
 	};
 }
 
-export type OpenDocumentBrowse = {};
+export type OpenDocumentBrowse = Record<string, never>;
 function newOpenDocumentBrowse(_: any): OpenDocumentBrowse {
 	return {};
 }
 
-export type DocumentChanged = {};
+export type DocumentChanged = Record<string, never>;
 function newDocumentChanged(_: any): DocumentChanged {
 	return {};
 }