Make lint pass

eslint.config.js

@@ -1,11 +1,11 @@
+import prettier from 'eslint-config-prettier';
 import js from '@eslint/js';
-import ts from 'typescript-eslint';
 import svelte from 'eslint-plugin-svelte';
-import prettier from 'eslint-config-prettier';
 import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteParser from 'svelte-eslint-parser';
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
-export default [
+export default ts.config(
 	js.configs.recommended,
 	...ts.configs.recommended,
 	...svelte.configs['flat/recommended'],
@@ -22,12 +22,16 @@ export default [
 	{
 		files: ['**/*.svelte'],
 		languageOptions: {
+			parser: svelteParser,
 			parserOptions: {
-				parser: ts.parser
+				parser: ts.parser,
+				svelteFeatures: {
+					experimentalGenerics: true
+				}
 			}
 		}
 	},
 	{
 		ignores: ['build/', '.svelte-kit/', 'dist/', 'docs/', 'selenite-commons-rs']
 	}
-];
+);

package.json

@@ -80,6 +80,7 @@
 		"prettier-plugin-svelte": "^3.2.8",
 		"publint": "^0.2.12",
 		"svelte-check": "^4.0.8",
+		"svelte-eslint-parser": "^0.43.0",
 		"svelte-persisted-store": "0.12.0",
 		"tailwindcss": "^3.4.15",
 		"tslib": "^2.8.1",

src/lib/actions/focusTrap.ts

@@ -90,7 +90,8 @@ export function focusTrap(node: HTMLElement, enabled: boolean) {
 	return {
 		update(newArgs: boolean) {
 			enabled = newArgs;
-			newArgs ? onScanElements(false) : onCleanUp();
+			if (newArgs) onScanElements(false);
+			else onCleanUp();
 		},
 		destroy() {
 			onCleanUp();

src/lib/actions/index.ts

@@ -39,7 +39,7 @@ export const handleFocusLeave: Action<HTMLElement, (isKeyboard: boolean) => void
 	}
 	handleFocusLeaveRefCount++;
 	handleFocusLeaveCallbacks.push(callback);
-	function handleFocusIn(e: Event) {}
+	function handleFocusIn() {}
 
 	function handleFocusOut() {
 		requestAnimationFrame(() => {

src/lib/actions/inputs.ts

@@ -1,4 +1,4 @@
-import type { Action, ActionReturn } from 'svelte/action';
+import type { Action } from 'svelte/action';
 import baseAutosize from 'autosize';
 import { tick } from 'svelte';
 

src/lib/actions/keyboard.ts

@@ -23,11 +23,11 @@ export const keyboardNavigation: Action<HTMLElement> = (node) => {
 			candidate.focus();
 		}
 	}
-	function handleFocusIn(e: Event) {
+	function handleFocusIn() {
 		console.debug('Add keydown listener');
 		node.addEventListener('keydown', handleKeydown);
 	}
-	function handleFocusOut(e: Event) {
+	function handleFocusOut() {
 		console.debug('Remove keydown listener');
 		node.removeEventListener('keydown', handleKeydown);
 	}

src/lib/actions/resizable.ts

@@ -1,6 +1,6 @@
 import { Vector2D } from '$lib/datastructure';
 import { PointerDownWatcher, posFromClient } from '$lib/utils';
-import type { Action, ActionReturn } from 'svelte/action';
+import type { ActionReturn } from 'svelte/action';
 
 const resizeHandleMap = new Map<
 	HTMLElement,
@@ -70,12 +70,12 @@ export function resizable<N extends HTMLElement = HTMLElement>(
 	node: N,
 	params: ResizeHandleParams<N> = {}
 ): ActionReturn<ResizeHandleParams<N>> {
-	function onpointerenter(e: PointerEvent) {
+	function onpointerenter() {
 		document.addEventListener('pointermove', onpointermove, { passive: true });
 		removePointermoveCleanup?.();
 	}
 	let removePointermoveCleanup: (() => void) | undefined;
-	function onpointerleave(e: PointerEvent) {
+	function onpointerleave() {
 		// Wait for pointer up to stop resizing
 		removePointermoveCleanup = PointerDownWatcher.instance.subscribe((down) => {
 			if (!down) {

src/lib/actions/scroll.ts

@@ -66,7 +66,7 @@ export const horizontalScroll: Action<HTMLElement, { duration?: number } | undef
 
 	node.addEventListener('wheel', handleWheel, { passive: false });
 
-	node.addEventListener('scroll', (e) => {
+	node.addEventListener('scroll', () => {
 		if (!isActionScroll) {
 			scroll.set(node.scrollLeft);
 		}

src/lib/actions/shortcut.ts

@@ -6,7 +6,7 @@
  */
 
 import { isArray } from 'lodash-es';
-import type { Action, ActionReturn } from 'svelte/action';
+import type { ActionReturn } from 'svelte/action';
 
 /**
  * Basic definition of a keyboard shortcut based on key and modifier keys.

src/lib/components/Button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLButtonAttributes {}
+	type Props = HTMLButtonAttributes;
 
 	let { children, ...props }: Props = $props();
 </script>

src/lib/components/OptimizedDiv.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {}
+	type Props = HTMLAttributes<HTMLDivElement>;
 
 	let { children, ...props }: Props = $props();
 </script>

src/lib/components/PathGenerator.svelte

@@ -149,7 +149,7 @@
 					bind:value={createdPart}
 					bind:this={creationInput}
 					class="input input-bordered"
-					oninput={(e) => {
+					oninput={() => {
 						focusedOption = '';
 					}}
 					placeholder={(focusedOptionIndex === -1

src/lib/components/menu/ContextMenu.svelte

@@ -19,6 +19,7 @@
 
 	// Update position when menu is visible
 	$effect(() => {
+		/* eslint-disable @typescript-eslint/no-unused-expressions */
 		if (!menu.visible) return;
 		menu.pos.x;
 		menu.pos.y;
@@ -33,6 +34,7 @@
 	import { shortcut } from '$lib/actions';
 	let searchInput = $state<HTMLInputElement>();
 	let menuCmpnt = $state<Menu>();
+
 	$effect(() => {
 		menu.filteredItems;
 		if (menu.expanded) {
@@ -99,7 +101,7 @@
 			use:shortcut={{
 				ignoreElements: [],
 				key: 'Escape',
-				action(n, e) {
+				action() {
 					menu.visible = false;
 				}
 			}}

src/lib/components/modal/ModalComponent.svelte

@@ -72,7 +72,7 @@
 			{/if}
 		</div>
 		<form method="dialog" class="backdrop">
-			<button></button>
+			<button aria-label="backdrop"></button>
 		</form>
 	</dialog>
 {/if}

src/lib/components/modal/modal.svelte.ts

@@ -21,32 +21,32 @@ export type BaseModalSettings = {
 	buttons?: ModalButtonSettings[];
 	response?: (r: unknown) => void;
 };
-
-export type ComponentModalSettings<Props extends Record<string, any> = {}> = {
-	component: Component<Props & { modal: ComponentModalSettings }, { getResponse?: () => unknown }>;
-	props: Props;
+type Props = Record<string, unknown>;
+export type ComponentModalSettings<P extends Props = Props> = {
+	component: Component<P & { modal: ComponentModalSettings }, { getResponse?: () => unknown }>;
+	props: P;
 } & BaseModalSettings;
 
-export type SnippetModalSettings<Props extends Record<string, any> = {}> = {
-	snippet: Snippet<[Props]>;
-	props: Props;
+export type SnippetModalSettings<P extends Props = Props> = {
+	snippet: Snippet<[P]>;
+	props: P;
 } & BaseModalSettings;
 
 export type PromptModalSettings = { prompt: string; initial?: string } & BaseModalSettings;
 
-export type ModalSettings<Props extends Record<string, any> = {}> =
+export type ModalSettings<P extends Props = Props> =
 	| PromptModalSettings
-	| ComponentModalSettings<Props>
-	| SnippetModalSettings<Props>;
+	| ComponentModalSettings<P>
+	| SnippetModalSettings<P>;
 
-export function isComponentModalSettings<Props extends Record<string, any>>(
-	modal: ModalSettings<Props>
-): modal is ComponentModalSettings<Props> {
+export function isComponentModalSettings<P extends Props>(
+	modal: ModalSettings<P>
+): modal is ComponentModalSettings<P> {
 	return 'component' in modal;
 }
-export function isSnippetModalSettings<Props extends Record<string, any>>(
-	modal: ModalSettings<Props>
-): modal is SnippetModalSettings<Props> {
+export function isSnippetModalSettings<P extends Props>(
+	modal: ModalSettings<P>
+): modal is SnippetModalSettings<P> {
 	return 'snippet' in modal;
 }
 
@@ -150,7 +150,7 @@ export class Modal {
 
 	private constructor() {}
 
-	show<Props extends Record<string, any>>(params: ModalSettings<Props>) {
+	show<P extends Props>(params: ModalSettings<P>) {
 		console.debug('Show modal', params);
 		if ('prompt' in params) {
 			params.buttons = params.buttons || ['cancel', 'promptConfirm'];

src/lib/components/tree/Tree.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T">
 	import Fa from 'svelte-fa';
 	import { isForest, type Tree } from './tree';
-	import type { TreeComponent } from '.';
+	import TreeComponent from './Tree.svelte';
 	import type { Snippet } from 'svelte';
 	import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
 
@@ -73,8 +73,8 @@
 				</button>
 			</div>
 			{#if childExpanded[i] !== undefined}
-				<svelte:self
-					bind:this={childTrees[i] as TreeComponent<T>}
+				<TreeComponent
+					bind:this={childTrees[i]}
 					class="col-start-2"
 					tree={elmnt.forest}
 					bind:expanded={childExpanded[i]}

src/lib/datastructure.ts

@@ -7,6 +7,7 @@ export type Vector2D = {
 	y: number;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Vector2D {
 	export const Zero = () =>
 		({

src/lib/utils/eventModifier.test.ts

@@ -22,9 +22,9 @@ describe('eventModifier', () => {
 				nativeStopPropagationCalled = true;
 			};
 
-			let e = new Event('test');
+			const e = new Event('test');
 			expect(nativeStopPropagationCalled);
-			e = stopPropagation(e);
+			stopPropagation(e);
 			expect(nativeStopPropagationCalled).toBe(true);
 			Event.prototype.stopPropagation = nativeStopPropagation;
 		});

src/lib/utils/html.svelte.ts

@@ -17,7 +17,7 @@ export class WindowState {
 		_isWindowStateSetup = true;
 		_windowState.width = window.innerWidth;
 		_windowState.height = window.innerHeight;
-		window.addEventListener('resize', (e) => {
+		window.addEventListener('resize', () => {
 			_windowState.width = window.innerWidth;
 			_windowState.height = window.innerHeight;
 		});
@@ -74,6 +74,7 @@ export class Rect {
 /**
  * Utils to compute intersection, union and area of bouding rectangles.
  */
+// eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Rect {
 	/**
 	 * Returns the intersection of multiple bouding rectangles.
@@ -299,7 +300,7 @@ export class PointerDownWatcher {
 		this.#subscribers.forEach((s) => s(true));
 	}
 
-	protected onpointerup(e: PointerEvent) {
+	protected onpointerup() {
 		this.isPointerDown = false;
 		this.pos = undefined;
 		this.#subscribers.forEach((s) => s(false));

src/lib/utils/layout.ts

@@ -150,7 +150,7 @@ export function getJustifyBetweenOffsets(
 			whitespace += Math.max(minGap, Math.abs(b.x - a.x - a.w));
 		}
 		const gap = whitespace / (sortedRects.length - 1);
-		for (const [k, { i, r }] of sortedRects.entries()) {
+		for (const [, { i, r }] of sortedRects.entries()) {
 			res[i] = {
 				x: min + offset - r.x,
 				y: 0
@@ -211,7 +211,7 @@ export function getAlignBetweenOffsets(
 			whitespace += Math.max(minGap, Math.abs(b.y - a.y - a.h));
 		}
 		const gap = whitespace / (sortedRects.length - 1);
-		for (const [k, { i, r }] of sortedRects.entries()) {
+		for (const [, { i, r }] of sortedRects.entries()) {
 			res[i] = {
 				x: 0,
 				y: min + offset - r.y

src/lib/utils/string.ts

@@ -7,7 +7,7 @@
 
 // polyfill for set intersection
 import 'core-js/actual/set/intersection';
-import { escapeRegExp, upperCase, upperFirst } from 'lodash-es';
+import { escapeRegExp, upperFirst } from 'lodash-es';
 
 // Can't export pluralize functions directly
 // because pluralize is common js
@@ -28,7 +28,6 @@ export function isAlphaNumChar(str: string) {
 	return /^[a-z0-9]$/i.test(str);
 }
 
-const identity = (str: string) => str;
 export const words = capitalizeWords;
 
 // split on capital letters that are followed by non capital letters or

src/lib/utils/xml.ts

@@ -22,7 +22,7 @@ export function parseXMLArray(xml: string): unknown[] | undefined {
 					return `"${t}"`;
 				})
 		);
-	} catch (e) {
+	} catch {
 		return undefined;
 	}
 }
@@ -87,7 +87,7 @@ export function buildXml({
 					break;
 				case '#text':
 					break;
-				default:
+				default: {
 					tag = key;
 					const children = props as ParsedXmlNodes;
 					childXml = buildXml({
@@ -98,6 +98,7 @@ export function buildXml({
 						endWithNewLine: false
 					});
 					break;
+				}
 			}
 		}
 		const preppedAttrs =
@@ -164,7 +165,7 @@ export function findPossibleMergePositions({
 		}
 
 		return wu(xml.entries())
-			.filter(([i, xmlNode]) => getElementFromParsedXml(xmlNode) === elementPath[0])
+			.filter(([, xmlNode]) => getElementFromParsedXml(xmlNode) === elementPath[0])
 			.map(([i, xmlNode]) =>
 				rec(
 					elementPath.slice(1),