From 1e74ccb4f8380bb85dd7c9d97de5f5be16b83f39 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Thu, 25 Aug 2022 19:00:23 -0700
Subject: [PATCH] Enable some TS consistency lints

---
 frontend/.eslintrc.js                         |  6 +++-
 frontend/src/App.vue                          |  1 +
 frontend/src/components/panels/Document.vue   | 14 ++++++---
 .../components/widgets/buttons/TextButton.ts  | 18 ------------
 .../components/widgets/buttons/TextButton.vue | 18 ++++++++++++
 frontend/src/io-managers/panic.ts             |  3 +-
 frontend/src/io-managers/persistence.ts       |  2 +-
 frontend/src/state-providers/dialog.ts        |  3 +-
 frontend/src/state-providers/fonts.ts         |  4 +--
 frontend/src/wasm-communication/messages.ts   | 29 +++++++++++++++----
 .../wasm-communication/subscription-router.ts | 10 +++----
 11 files changed, 66 insertions(+), 42 deletions(-)
 delete mode 100644 frontend/src/components/widgets/buttons/TextButton.ts

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 84503665..0b935c1c 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -73,8 +73,12 @@ module.exports = {
 		"@typescript-eslint/camelcase": "off",
 		"@typescript-eslint/no-use-before-define": "off",
 		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", ignoreRestSiblings: true }],
-		"@typescript-eslint/explicit-function-return-type": ["error"],
+		"@typescript-eslint/explicit-function-return-type": "error",
 		"@typescript-eslint/consistent-type-imports": "error",
+		"@typescript-eslint/consistent-type-definitions": ["error", "type"],
+		"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "as", objectLiteralTypeAssertions: "never" }],
+		"@typescript-eslint/consistent-indexed-object-style": ["error", "record"],
+		"@typescript-eslint/consistent-generic-constructors": ["error", "constructor"],
 
 		// Import plugin config (used to intelligently validate module import statements)
 		"import/prefer-default-export": "off",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 311ee730..5e529350 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -248,6 +248,7 @@ const managerDestructors: {
 // Vue injects don't play well with TypeScript (all injects will show up as `any`) but we can define these types as a solution
 declare module "@vue/runtime-core" {
 	// Systems `provide`d by the root App to be `inject`ed into descendant components and used for reactive bindings
+	// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 	interface ComponentCustomProperties {
 		// Graphite WASM editor instance
 		editor: Editor;
diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index 908544f8..970f200a 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -404,6 +404,12 @@ export default defineComponent({
 		window.dispatchEvent(new Event("resize"));
 	},
 	data() {
+		const scrollbarPos: XY = { x: 0.5, y: 0.5 };
+		const scrollbarSize: XY = { x: 0.5, y: 0.5 };
+		const scrollbarMultiplier: XY = { x: 0, y: 0 };
+
+		const rulerOrigin: XY = { x: 0, y: 0 };
+
 		return {
 			// Interactive text editing
 			textInput: undefined as undefined | HTMLDivElement,
@@ -414,12 +420,12 @@ export default defineComponent({
 			canvasCursor: "default" as MouseCursorIcon,
 
 			// Scrollbars
-			scrollbarPos: { x: 0.5, y: 0.5 } as XY,
-			scrollbarSize: { x: 0.5, y: 0.5 } as XY,
-			scrollbarMultiplier: { x: 0, y: 0 } as XY,
+			scrollbarPos,
+			scrollbarSize,
+			scrollbarMultiplier,
 
 			// Rulers
-			rulerOrigin: { x: 0, y: 0 } as XY,
+			rulerOrigin,
 			rulerSpacing: 100 as number,
 			rulerInterval: 100 as number,
 
diff --git a/frontend/src/components/widgets/buttons/TextButton.ts b/frontend/src/components/widgets/buttons/TextButton.ts
deleted file mode 100644
index 22b33540..00000000
--- a/frontend/src/components/widgets/buttons/TextButton.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// TODO: Try and get rid of the need for this file
-
-export interface TextButtonWidget {
-	tooltip?: string;
-	message?: string | object;
-	callback?: () => void;
-	props: {
-		kind: "TextButton";
-		label: string;
-		icon?: string;
-		emphasized?: boolean;
-		minWidth?: number;
-		disabled?: boolean;
-
-		// Callbacks
-		// `action` is used via `IconButtonWidget.callback`
-	};
-}
diff --git a/frontend/src/components/widgets/buttons/TextButton.vue b/frontend/src/components/widgets/buttons/TextButton.vue
index b686ec8a..a0814e7f 100644
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/frontend/src/components/widgets/buttons/TextButton.vue
@@ -62,6 +62,7 @@
 }
 </style>
 
+
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
@@ -70,6 +71,23 @@ import { type IconName } from "@/utility-functions/icons";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
+export type TextButtonWidget = {
+	tooltip?: string;
+	message?: string | object;
+	callback?: () => void;
+	props: {
+		kind: "TextButton";
+		label: string;
+		icon?: string;
+		emphasized?: boolean;
+		minWidth?: number;
+		disabled?: boolean;
+
+		// Callbacks
+		// `action` is used via `IconButtonWidget.callback`
+	};
+};
+
 export default defineComponent({
 	props: {
 		label: { type: String as PropType<string>, required: true },
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/io-managers/panic.ts
index 956a9821..51381b50 100644
--- a/frontend/src/io-managers/panic.ts
+++ b/frontend/src/io-managers/panic.ts
@@ -1,10 +1,9 @@
-import { type TextButtonWidget } from "@/components/widgets/buttons/TextButton";
 import { type DialogState } from "@/state-providers/dialog";
 import { type IconName } from "@/utility-functions/icons";
 import { browserVersion, operatingSystem } from "@/utility-functions/platform";
 import { stripIndents } from "@/utility-functions/strip-indents";
 import { type Editor } from "@/wasm-communication/editor";
-import { type WidgetLayout, Widget, DisplayDialogPanic } from "@/wasm-communication/messages";
+import { type TextButtonWidget, type WidgetLayout, Widget, DisplayDialogPanic } from "@/wasm-communication/messages";
 
 export function createPanicManager(editor: Editor, dialogState: DialogState): void {
 	// Code panic dialog and console error
diff --git a/frontend/src/io-managers/persistence.ts b/frontend/src/io-managers/persistence.ts
index 34bb09cf..8d6bcf38 100644
--- a/frontend/src/io-managers/persistence.ts
+++ b/frontend/src/io-managers/persistence.ts
@@ -40,7 +40,7 @@ export async function createPersistenceManager(editor: Editor, portfolio: Portfo
 	});
 
 	// Open the IndexedDB database connection and save it to this variable, which is a promise that resolves once the connection is open
-	const databaseConnection: Promise<IDBDatabase> = new Promise((resolve) => {
+	const databaseConnection = new Promise<IDBDatabase>((resolve) => {
 		const dbOpenRequest = indexedDB.open(GRAPHITE_INDEXED_DB_NAME, GRAPHITE_INDEXED_DB_VERSION);
 
 		dbOpenRequest.onupgradeneeded = (): void => {
diff --git a/frontend/src/state-providers/dialog.ts b/frontend/src/state-providers/dialog.ts
index 2aff09eb..22c5add3 100644
--- a/frontend/src/state-providers/dialog.ts
+++ b/frontend/src/state-providers/dialog.ts
@@ -1,9 +1,8 @@
 import { reactive, readonly } from "vue";
 
-import { type TextButtonWidget } from "@/components/widgets/buttons/TextButton";
 import { type IconName } from "@/utility-functions/icons";
 import { type Editor } from "@/wasm-communication/editor";
-import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, type WidgetLayout } from "@/wasm-communication/messages";
+import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails } from "@/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: Editor) {
diff --git a/frontend/src/state-providers/fonts.ts b/frontend/src/state-providers/fonts.ts
index 0ae2b4a1..90265466 100644
--- a/frontend/src/state-providers/fonts.ts
+++ b/frontend/src/state-providers/fonts.ts
@@ -57,11 +57,11 @@ export function createFontsState(editor: Editor) {
 		}
 	});
 
-	const fontList: Promise<{ family: string; variants: string[]; files: Map<string, string> }[]> = new Promise((resolve) => {
+	const fontList = new Promise<{ family: string; variants: string[]; files: Map<string, string> }[]>((resolve) => {
 		fetch(fontListAPI)
 			.then((response) => response.json())
 			.then((fontListResponse) => {
-				const fontListData = fontListResponse.items as { family: string; variants: string[]; files: { [name: string]: string } }[];
+				const fontListData = fontListResponse.items as { family: string; variants: string[]; files: Record<string, string> }[];
 				const result = fontListData.map((font) => {
 					const { family } = font;
 					const variants = font.variants.map(formatFontStyleName);
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
index 5cd695b9..a890eca1 100644
--- a/frontend/src/wasm-communication/messages.ts
+++ b/frontend/src/wasm-communication/messages.ts
@@ -241,10 +241,10 @@ export class UpdateDocumentLayerTreeStructure extends JsMessage {
 	}
 }
 
-interface DataBuffer {
+type DataBuffer = {
 	pointer: bigint;
 	length: bigint;
-}
+};
 
 export function newUpdateDocumentLayerTreeStructure(input: { dataBuffer: DataBuffer }, wasm: WasmRawInstance): UpdateDocumentLayerTreeStructure {
 	const pointerNum = Number(input.dataBuffer.pointer);
@@ -519,7 +519,7 @@ export class PopoverButton extends WidgetProps {
 	text!: string;
 }
 
-export interface RadioEntryData {
+export type RadioEntryData = {
 	value?: string;
 	label?: string;
 	icon?: IconName;
@@ -527,7 +527,7 @@ export interface RadioEntryData {
 
 	// Callbacks
 	action?: () => void;
-}
+};
 export type RadioEntries = RadioEntryData[];
 
 export class RadioInput extends WidgetProps {
@@ -573,6 +573,23 @@ export class TextButton extends WidgetProps {
 	disabled!: boolean;
 }
 
+export type TextButtonWidget = {
+	tooltip?: string;
+	message?: string | object;
+	callback?: () => void;
+	props: {
+		kind: "TextButton";
+		label: string;
+		icon?: string;
+		emphasized?: boolean;
+		minWidth?: number;
+		disabled?: boolean;
+
+		// Callbacks
+		// `action` is used via `IconButtonWidget.callback`
+	};
+};
+
 export class TextInput extends WidgetProps {
 	value!: string;
 
@@ -645,10 +662,10 @@ function hoistWidgetHolders(widgetHolders: any[]): Widget[] {
 
 // WIDGET LAYOUT
 
-export interface WidgetLayout {
+export type WidgetLayout = {
 	layoutTarget: unknown;
 	layout: LayoutGroup[];
-}
+};
 
 export function defaultWidgetLayout(): WidgetLayout {
 	return {
diff --git a/frontend/src/wasm-communication/subscription-router.ts b/frontend/src/wasm-communication/subscription-router.ts
index d995716b..483bb9d5 100644
--- a/frontend/src/wasm-communication/subscription-router.ts
+++ b/frontend/src/wasm-communication/subscription-router.ts
@@ -4,12 +4,10 @@ import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communicat
 import { type JsMessageType, messageMakers, type JsMessage } from "@/wasm-communication/messages";
 
 type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
-type JsMessageCallbackMap = {
-	// Don't know a better way of typing this since it can be any subclass of JsMessage
-	// The functions interacting with this map are strongly typed though around JsMessage
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	[message: string]: JsMessageCallback<any> | undefined;
-};
+// Don't know a better way of typing this since it can be any subclass of JsMessage
+// The functions interacting with this map are strongly typed though around JsMessage
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type JsMessageCallbackMap = Record<string, JsMessageCallback<any> | undefined>;
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createSubscriptionRouter() {