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

.deployment/cd.sh

@@ -3,8 +3,14 @@
 echo 🔧 Install Rust
 curl https://sh.rustup.rs -sSf | sh -s -- -y
 export PATH=$PATH:/opt/buildhome/.cargo/bin
+echo rustc version:
+rustc --version
 
 echo 🚧 Install Node dependencies
+echo node version:
+node --version
+echo npm version:
+npm --version
 cd frontend
 npm install
 

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
     - name: 🔧 Set up Node
       uses: actions/setup-node@v1
       with:
-        node-version: '14.x'
+        node-version: '16.x'
 
     - name: 🚧 Install Node dependencies
       run: cd frontend && npm install

.nvmrc

@@ -0,0 +1 @@
+16

frontend/.eslintrc.js

@@ -63,11 +63,14 @@ module.exports = {
 		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
 		"no-param-reassign": ["error", { props: false }],
 		"no-bitwise": "off",
+		"no-shadow": "off",
+		"no-use-before-define": "off",
 
 		// TypeScript plugin config
 		"@typescript-eslint/camelcase": "off",
 		"@typescript-eslint/no-use-before-define": "off",
 		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+		"@typescript-eslint/no-loss-of-precision": "off", // TODO: Remove this line after upgrading to eslint 7.1 or greater
 
 		// Import plugin config (used to intelligently validate module import statements)
 		"import/prefer-default-export": "off",
@@ -81,5 +84,8 @@ module.exports = {
 				printWidth: 200,
 			},
 		],
+
+		// Vue plugin config (used to validate Vue single-file components)
+		"vue/multi-word-component-names": "off",
 	},
 };

frontend/package.json

@@ -6,8 +6,8 @@
 	"scripts": {
 		"serve": "vue-cli-service serve || (npm install && vue-cli-service serve)",
 		"build": "vue-cli-service build || (npm install && vue-cli-service build)",
-		"lint": "vue-cli-service lint || (npm install && vue-cli-service lint)",
+		"lint": "vue-cli-service lint || echo There were lint errors. If the linter execution fails, try running `npm install` first.",
-		"lint-no-fix": "vue-cli-service lint --no-fix || (echo 'There were lint errors. Please run `npm run lint` to fix auto-them. If the linter execution fails, try running `npm install` first.' && false)"
+		"lint-no-fix": "vue-cli-service lint --no-fix || echo There were lint errors. Please run `npm run lint` to fix auto-them. If the linter execution fails, try running `npm install` first."
 	},
 	"repository": {
 		"type": "git",
@@ -17,29 +17,29 @@
 	"license": "Apache-2.0",
 	"homepage": "https://www.graphite.design",
 	"dependencies": {
-		"vue": "^3.2.20"
+		"vue": "^3.2.23"
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^2.33.0",
+		"@typescript-eslint/eslint-plugin": "^5.4.0",
-		"@typescript-eslint/parser": "^2.33.0",
+		"@typescript-eslint/parser": "^5.4.0",
 		"@vue/cli-plugin-eslint": "^4.5.15",
 		"@vue/cli-plugin-typescript": "^4.5.15",
 		"@vue/cli-service": "^4.5.15",
 		"@vue/compiler-sfc": "^3.2.20",
-		"@vue/eslint-config-airbnb": "^5.0.2",
+		"@vue/eslint-config-airbnb": "^5.3.0",
-		"@vue/eslint-config-typescript": "^5.0.2",
+		"@vue/eslint-config-typescript": "^9.1.0",
 		"@wasm-tool/wasm-pack-plugin": "^1.6.0",
 		"eslint": "^6.8.0",
-		"eslint-config-prettier": "^8.3.0",
+		"eslint-config-prettier": "^6.15.0",
 		"eslint-plugin-import": "^2.25.2",
 		"eslint-plugin-prettier-vue": "^3.1.0",
-		"eslint-plugin-vue": "^7.20.0",
+		"eslint-plugin-vue": "^8.1.1",
 		"license-checker-webpack-plugin": "^0.2.1",
 		"prettier": "^2.4.1",
 		"sass": "^1.43.4",
-		"sass-loader": "^8.0.2",
+		"sass-loader": "^10.0.0",
-		"typescript": "^4.4.4",
+		"typescript": "^4.5.2",
-		"vue-loader": "^16.8.2",
+		"vue-loader": "^16.8.3",
 		"vue-template-compiler": "^2.6.14",
 		"wasm-pack": "^0.10.1"
 	}

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 {};
 }

frontend/vue.config.js

@@ -39,7 +39,7 @@ module.exports = {
 	// https://cli.vuejs.org/guide/webpack.html
 	chainWebpack: (config) => {
 		// WASM Pack Plugin integrates compiled Rust code (.wasm) and generated wasm-bindgen code (.js) with the webpack bundle
-		// Use this JS to import the bundled Rust entry points: const wasm = import("@/../wasm/pkg");
+		// Use this JS to import the bundled Rust entry points: const wasm = import("@/../wasm/pkg").then(panicProxy);
 		// Then call WASM functions with: (await wasm).function_name()
 		// https://github.com/wasm-tool/wasm-pack-plugin
 		config