Clean up web code errors and make CI enforce them

frontend/.eslintrc.cjs

@@ -40,7 +40,7 @@ module.exports = {
 		},
 		{
 			extends: ["plugin:@typescript-eslint/disable-type-checked"],
-			files: [".eslintrc.cjs"],
+			files: ["./*.js", "./*.cjs"],
 		},
 	],
 	rules: {

frontend/package-installer.js

@@ -30,7 +30,7 @@ if (isInstallNeeded()) {
 
 		// eslint-disable-next-line no-console
 		console.log("Finished installing npm packages.");
-	} catch (error) {
+	} catch (_) {
 		// eslint-disable-next-line no-console
 		console.error("Failed to install npm packages. Please run `npm install` from the `/frontend` directory.");
 		process.exit(1);

frontend/package.json

@@ -15,8 +15,8 @@
 		"build-profiling": "npm run wasm:build-profiling && vite build",
 		"build": "npm run wasm:build-production && vite build",
 		"---------- UTILITIES ----------": "",
-		"lint": "eslint .",
-		"lint-fix": "eslint . --fix",
+		"lint": "eslint . && tsc --noEmit",
+		"lint-fix": "eslint . --fix && tsc --noEmit",
 		"---------- INTERNAL ----------": "",
 		"setup": "node package-installer.js",
 		"wasm:build-dev": "wasm-pack build ./wasm --dev --target=web",
@@ -30,7 +30,6 @@
 		"@tauri-apps/api": "^1.6.0",
 		"class-transformer": "^0.5.1",
 		"idb-keyval": "^6.2.1",
-		"paper": "^0.12.18",
 		"reflect-metadata": "^0.2.2"
 	},
 	"devDependencies": {

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -203,7 +203,7 @@
 
 	function setColorRGB(channel: keyof RGB, strength: number | undefined) {
 		// Do nothing if the given value is undefined
-		if (strength === undefined) undefined;
+		if (strength === undefined) return undefined;
 		// Set the specified channel to the given value
 		else if (channel === "r") setColor(new Color(strength / 255, newColor.green, newColor.blue, newColor.alpha));
 		else if (channel === "g") setColor(new Color(newColor.red, strength / 255, newColor.blue, newColor.alpha));
@@ -212,7 +212,7 @@
 
 	function setColorHSV(channel: keyof HSV, strength: number | undefined) {
 		// Do nothing if the given value is undefined
-		if (strength === undefined) undefined;
+		if (strength === undefined) return undefined;
 		// Set the specified channel to the given value
 		else if (channel === "h") hue = strength / 360;
 		else if (channel === "s") saturation = strength / 100;

frontend/src/components/floating-menus/MenuList.svelte

@@ -219,7 +219,7 @@
 
 		childReference.open = true;
 		// The reason we bother taking `highlightdEntry` as an argument is because, when this function is called, it can ensure `highlightedEntry` is not undefined.
-		// But here we still have to set `highlighted` to itself so Svelte knows to reactively update it after we set its `.ref.open` property.
+		// But here we still have to set `highlighted` to itself so Svelte knows to reactively update it after we set its `childReference.open` property.
 		highlighted = highlighted;
 
 		// Highlight first item
@@ -452,11 +452,11 @@
 
 					{#if entry.children}
 						<MenuList
-							on:naturalWidth={() => {
+							on:naturalWidth={({ detail }) => {
 								// We do a manual dispatch here instead of just `on:naturalWidth` as a workaround for the <script> tag
 								// at the top of this file displaying a "'render' implicitly has return type 'any' because..." error.
 								// See explanation at <https://github.com/sveltejs/language-tools/issues/452#issuecomment-723148184>.
-								dispatch("naturalWidth");
+								dispatch("naturalWidth", detail);
 							}}
 							open={getChildReference(entry)?.open || false}
 							direction="TopRight"

frontend/src/components/views/Graph.svelte

@@ -178,10 +178,10 @@
 			const { nodeOutput, nodeInput } = resolveWire(wire);
 			if (!nodeOutput || !nodeInput) return [];
 
-			const wireStartNode = $nodeGraph.nodes.get((wire.wireStart as Node).nodeId);
+			const wireStartNode = wire.wireStart.nodeId !== undefined ? $nodeGraph.nodes.get(wire.wireStart.nodeId) : undefined;
 			const wireStart = wireStartNode?.isLayer || false;
 
-			const wireEndNode = $nodeGraph.nodes.get((wire.wireEnd as Node).nodeId);
+			const wireEndNode = wire.wireEnd.nodeId !== undefined ? $nodeGraph.nodes.get(wire.wireEnd.nodeId) : undefined;
 			const wireEnd = (wireEndNode?.isLayer && Number(wire.wireEnd.index) === 0) || false;
 
 			return [createWirePath(nodeOutput, nodeInput, wireStart, wireEnd, wire.dashed)];

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -42,11 +42,8 @@
 		(e.target as HTMLElement | undefined)?.focus();
 
 		// Open the menu list floating menu
-		if (self) {
-			self.open = true;
-		} else {
-			throw new Error("The menu bar floating menu has no associated ref");
-		}
+		if (self) self.open = true;
+		else throw new Error("The menu bar floating menu has no reference to `self`");
 	}
 </script>
 

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -48,7 +48,7 @@
 			activeEntrySkipWatcher = false;
 		} else if (activeEntry !== DASH_ENTRY) {
 			// We need to set to the initial value first to track a right history step, as if we hover in initial selection.
-			dispatch("hoverInEntry", initialSelectedIndex);
+			if (initialSelectedIndex !== undefined) dispatch("hoverInEntry", initialSelectedIndex);
 			dispatch("selectedIndex", entries.flat().indexOf(activeEntry));
 		}
 	}
@@ -58,7 +58,7 @@
 	}
 
 	function dispatchHoverOutEntry() {
-		dispatch("hoverOutEntry", initialSelectedIndex);
+		if (initialSelectedIndex !== undefined) dispatch("hoverOutEntry", initialSelectedIndex);
 	}
 
 	function makeActiveEntry(): MenuListEntry {

frontend/src/components/widgets/inputs/ScrollbarInput.svelte

@@ -14,7 +14,7 @@
 
 	const pointerPosition = (direction: ScrollbarDirection, e: PointerEvent): number => (direction === "Vertical" ? e.clientY : e.clientX);
 
-	const dispatch = createEventDispatcher<{ handlePosition: number; pressTrack: number; pointerup }>();
+	const dispatch = createEventDispatcher<{ handlePosition: number; pressTrack: number; pointerup: undefined }>();
 
 	export let direction: ScrollbarDirection = "Vertical";
 	export let handlePosition = 0.5;

frontend/src/components/window/title-bar/TitleBar.svelte

@@ -59,10 +59,9 @@
 
 				// New fields in `MenuListEntry`
 				shortcutRequiresLock: entry.shortcut ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
-				value: undefined,
+				value: "",
 				disabled: entry.disabled ?? undefined,
 				font: undefined,
-				ref: undefined,
 			});
 
 			entries = updateMenuBarLayout.layout.map(menuBarEntryToMenuListEntry);

frontend/src/wasm-communication/messages.ts

@@ -12,31 +12,12 @@ export class JsMessage {
 }
 
 const TupleToVec2 = Transform(({ value }: { value: [number, number] | undefined }) => (value === undefined ? undefined : { x: value[0], y: value[1] }));
-const ImportsToVec2Array = Transform(({ obj }) => {
-	const imports: { outputMetadata: FrontendGraphOutput; position: XY }[] = [];
-	obj.imports.forEach(([outputMetadata, x, y]: [FrontendGraphOutput, number, number]) => {
-		outputMetadata.connectedTo = outputMetadata.connectedTo.map((connector: any) => {
-			if (connector.export !== undefined) return { index: connector.export.index };
-			return { nodeId: connector.node.nodeId, index: connector.node.inputIndex };
-		});
-		imports.push({ outputMetadata, position: { x, y } });
-	});
-	return imports;
-});
-const ExportsToVec2Array = Transform(({ obj }) => {
-	const exports: { inputMetadata: FrontendGraphInput; position: XY }[] = [];
-	obj.exports.forEach(([inputMetadata, x, y]: [FrontendGraphInput, number, number]) => {
-		if (inputMetadata.connectedTo !== undefined) {
-			if (inputMetadata.connectedTo?.import !== undefined) {
-				inputMetadata.connectedTo = { index: inputMetadata.connectedTo?.import.index };
-			} else {
-				inputMetadata.connectedTo = { nodeId: inputMetadata.connectedTo?.node.nodeId, index: inputMetadata.connectedTo?.node.outputIndex };
-			}
-		}
-		exports.push({ inputMetadata, position: { x, y } });
-	});
-	return exports;
-});
+const ImportsToVec2Array = Transform(({ obj: { imports } }: { obj: { imports: [FrontendGraphOutput, number, number][] } }) =>
+	imports.map(([outputMetadata, x, y]) => ({ outputMetadata, position: { x, y } })),
+);
+const ExportsToVec2Array = Transform(({ obj: { exports } }: { obj: { exports: [FrontendGraphInput, number, number][] } }) =>
+	exports.map(([inputMetadata, x, y]) => ({ inputMetadata, position: { x, y } })),
+);
 
 // const BigIntTupleToVec2 = Transform(({ value }: { value: [bigint, bigint] | undefined }) => (value === undefined ? undefined : { x: Number(value[0]), y: Number(value[1]) }));
 
@@ -187,22 +168,11 @@ export type ContextMenuInformation = {
 export type FrontendGraphDataType = "General" | "Raster" | "VectorData" | "Number" | "Graphic" | "Artboard";
 
 export class Node {
-	readonly nodeId!: bigint;
 	readonly index!: bigint;
+	// Omitted if this Node is an Import or Export to/from the node network
+	readonly nodeId?: bigint;
 }
 
-export class Export {
-	readonly index!: bigint;
-}
-
-export class Import {
-	readonly index!: bigint;
-}
-
-export type OutputConnector = Node | Import;
-
-export type InputConnector = Node | Export;
-
 const CreateOutputConnectorOptional = Transform(({ obj }) => {
 	if (obj.connectedTo == undefined) {
 		return undefined;
@@ -228,11 +198,11 @@ export class FrontendGraphInput {
 	readonly resolvedType!: string | undefined;
 
 	@CreateOutputConnectorOptional
-	connectedTo!: OutputConnector | undefined;
+	connectedTo!: Node | undefined;
 }
 
 const CreateInputConnectorArray = Transform(({ obj }) => {
-	const newInputConnectors: InputConnector[] = [];
+	const newInputConnectors: Node[] = [];
 	obj.connectedTo.forEach((connector: any) => {
 		if (connector.export !== undefined) {
 			newInputConnectors.push({ index: connector.export });
@@ -257,7 +227,7 @@ export class FrontendGraphOutput {
 	readonly resolvedType!: string | undefined;
 
 	@CreateInputConnectorArray
-	readonly connectedTo!: InputConnector[];
+	connectedTo!: Node[];
 }
 
 export class FrontendNode {
@@ -329,10 +299,10 @@ const CreateInputConnector = Transform(({ obj }) => {
 
 export class FrontendNodeWire {
 	@CreateOutputConnector
-	readonly wireStart!: OutputConnector;
+	readonly wireStart!: Node;
 
 	@CreateInputConnector
-	readonly wireEnd!: InputConnector;
+	readonly wireEnd!: Node;
 
 	readonly dashed!: boolean;
 }

website/other/bezier-rs-demos/.eslintrc.cjs

@@ -12,12 +12,6 @@ module.exports = {
 		ecmaVersion: "latest",
 		project: "./tsconfig.json",
 	},
-	overrides: [
-		{
-			extends: ["plugin:@typescript-eslint/disable-type-checked"],
-			files: [".eslintrc.cjs"],
-		},
-	],
 	ignorePatterns: [
 		// Ignore generated directories
 		"node_modules/",
@@ -28,6 +22,12 @@ module.exports = {
 		"!.*.js",
 		"!.*.ts",
 	],
+	overrides: [
+		{
+			extends: ["plugin:@typescript-eslint/disable-type-checked"],
+			files: ["./*.js", "./*.cjs"],
+		},
+	],
 	rules: {
 		// Standard ESLint config (for ordinary JS syntax linting)
 		indent: "off",

website/other/bezier-rs-demos/package-installer.js

@@ -30,7 +30,7 @@ if (isInstallNeeded()) {
 
 		// eslint-disable-next-line no-console
 		console.log("Finished installing npm packages.");
-	} catch (error) {
+	} catch (_) {
 		// eslint-disable-next-line no-console
 		console.error("Failed to install npm packages. Please run `npm install` from the `/frontend` directory.");
 		process.exit(1);

website/other/bezier-rs-demos/package.json

@@ -13,8 +13,8 @@
 		"build-profiling": "npm run wasm:build-profiling && vite build",
 		"build": "npm run wasm:build-production && vite build",
 		"---------- UTILITIES ----------": "",
-		"lint": "eslint .",
-		"lint-fix": "eslint . --fix",
+		"lint": "eslint . && tsc --noEmit",
+		"lint-fix": "eslint . --fix && tsc --noEmit",
 		"---------- INTERNAL ----------": "",
 		"setup": "node package-installer.js",
 		"wasm:build-dev": "wasm-pack build ./wasm --dev --target=web",

website/other/bezier-rs-demos/tsconfig.json

@@ -12,27 +12,12 @@
 		"sourceMap": true,
 		"baseUrl": ".",
 		"paths": {
-			"@/*": [
-				"src/*"
-			]
+			"@/*": ["src/*"]
 		},
-		"lib": [
-			"esnext",
-			"dom",
-			"dom.iterable",
-			"scripthost"
-		]
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
 	},
-	"include": [
-		"src/**/*.ts",
-		"src/**/*.d.ts",
-		"*.ts",
-		"*.js",
-		"*.cjs"
-	],
-	"exclude": [
-		"node_modules"
-	],
+	"include": ["src/**/*.ts", "src/**/*.d.ts", "*.ts", "*.js", "*.cjs"],
+	"exclude": ["node_modules"],
 	"ts-node": {
 		"compilerOptions": {
 			"module": "commonjs",

website/templates/base.html

@@ -101,6 +101,7 @@
 		<footer>
 			<hr />
 			<nav class="balance-text require-polyfill">
+				<a href="https://github.com/GraphiteEditor/Graphite" class="link not-uppercase">GitHub</a>
 				<a href="/license" class="link not-uppercase">License</a>
 				<a href="/logo" class="link not-uppercase">Logo</a>
 				<a href="/press" class="link not-uppercase">Press</a>