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/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;