From 689f58c7a8e4ff3bcdefa1539dc281d126827e7b Mon Sep 17 00:00:00 2001
From: Mads Hansen Lund <mhl@dasma.dk>
Date: Mon, 19 Feb 2024 21:15:13 +0100
Subject: [PATCH] Add missing TypeScript types and general cleanup

---
 .eslintignore                              |  13 +++
 .eslintrc.cjs                              |  31 ++++++
 .gitignore                                 |   4 -
 .prettierignore                            |   4 +
 .prettierrc                                |   8 ++
 README.md                                  |  15 +--
 package-lock.json                          |   8 +-
 package.json                               |   4 +-
 src/index.test.ts                          |   7 --
 src/lib/CaretHandler.ts                    |  11 +-
 src/lib/DasmaAutocomplete.svelte           |  32 ++++--
 src/lib/DasmaQl.svelte                     | 114 +++++++++++----------
 {static => src/lib}/dasma-autocomplete.css |   0
 {static => src/lib}/dasma-highlighter.css  |   0
 src/routes/+page.svelte                    |  12 ++-
 15 files changed, 163 insertions(+), 100 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc.cjs
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc
 delete mode 100644 src/index.test.ts
 rename {static => src/lib}/dasma-autocomplete.css (100%)
 rename {static => src/lib}/dasma-highlighter.css (100%)

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..3897265
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..0b75758
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.Config } */
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};
diff --git a/.gitignore b/.gitignore
index 8174873..8ef7c07 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,5 @@
 ### Svelte ###
 .svelte-kit/
-.eslintignore
-.prettierignore
-.prettierrc
-.eslintrc.cjs
 
 ### Node.js and npm ###
 node_modules/
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..cc41cea
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..9573023
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
diff --git a/README.md b/README.md
index 8a570bb..821328a 100644
--- a/README.md
+++ b/README.md
@@ -15,12 +15,15 @@ Parameters
 - **fields**: An array of valid fields for autocompletion suggestions.
 - **callbackSearch**: A callback function to search for parameters based on the provided field and search query.
 
-```javascript
-<script>
-    const callbackSearch = (field, search) => {
-        // Dummy data retrieval and search logic
-        const values = dummyData[field.toLowerCase()];
-        return levenshtein.levenshteinSearchSort(values, search).slice(0, 10);
+```svelte
+<script lang="ts">
+
+    const callbackSearch = (field: string, search: string): (string | { label: string })[] => {
+        // Placeholder for search functionality
+        // Replace with actual search logic
+    
+        // Return dummy search result for example
+        return [label: '"some result"'];
     };
 </script>
 
diff --git a/package-lock.json b/package-lock.json
index 7e62cc5..ae47f48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
 			"version": "0.1.0",
 			"license": "GPL-3.0-or-later",
 			"dependencies": {
-				"dasmaql": "^0.1.14"
+				"dasmaql": "^0.2.1"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
@@ -1616,9 +1616,9 @@
 			}
 		},
 		"node_modules/dasmaql": {
-			"version": "0.1.14",
-			"resolved": "https://registry.npmjs.org/dasmaql/-/dasmaql-0.1.14.tgz",
-			"integrity": "sha512-R5YB+KNcKCJSmfToJKJgWdYvMr7v821VXO1lxXaWZSmucrM/4kb0bEsikBvv+SEDJ3tp76lqnGRz1iQ93CNQIg=="
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/dasmaql/-/dasmaql-0.2.1.tgz",
+			"integrity": "sha512-jyHmu2WdEwv3Uz1RuJrnJmBp+eyannfcs9OzGM1ssH+uvfuAhJETDiYEr5Ja3yawVsKEUX0EUUhjidrsggXLhA=="
 		},
 		"node_modules/debug": {
 			"version": "4.3.4",
diff --git a/package.json b/package.json
index d5cf946..6757ff0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "dasmaql-svelte",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "A Svelte component providing an example of how DasmaQL can be utilized. DasmaQL is a lightweight query language used for data retrieval.",
 	"scripts": {
 		"dev": "vite dev",
@@ -29,7 +29,7 @@
 		"svelte": "^4.0.0"
 	},
 	"dependencies": {
-		"dasmaql": "^0.1.14"
+		"dasmaql": "^0.2.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
diff --git a/src/index.test.ts b/src/index.test.ts
deleted file mode 100644
index e07cbbd..0000000
--- a/src/index.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});
diff --git a/src/lib/CaretHandler.ts b/src/lib/CaretHandler.ts
index 49a1f57..0e81b05 100644
--- a/src/lib/CaretHandler.ts
+++ b/src/lib/CaretHandler.ts
@@ -1,5 +1,6 @@
 export class CaretHandler {
-	static getCaretCharacterOffsetWithin(element: HTMLElement): number {
+	static getCaretCharacterOffsetWithin(element: Node | null): number | undefined {
+		if (!element) return undefined;
 		let caretOffset = 0;
 		const selection = window.getSelection();
 
@@ -20,14 +21,12 @@ export class CaretHandler {
 		let currentNode: Node | null = null;
 		let previousNode: Node | null = null;
 
-		for (let i = 0; i < element.childNodes.length; i++) {
+		for (const childNode of element.childNodes) {
 			previousNode = currentNode;
-			currentNode = element.childNodes[i];
-
+			currentNode = childNode;
 			while (currentNode && currentNode.childNodes.length > 0) {
 				currentNode = currentNode.childNodes[0];
 			}
-
 			if (previousNode != null) {
 				offset -= previousNode.textContent?.length || 0;
 			}
@@ -52,7 +51,7 @@ export class CaretHandler {
 		const range = window.getSelection()?.getRangeAt(0);
 		const rect = range?.getClientRects()[0];
 		const caretHeight = range?.getClientRects()[0]?.height || 0;
-		const yOffset = caretHeight ? caretHeight : 0;
+		const yOffset = caretHeight || 0;
 
 		return rect ? { x: rect.left + 2, y: rect.top + yOffset } : { x: 0, y: 0 };
 	}
diff --git a/src/lib/DasmaAutocomplete.svelte b/src/lib/DasmaAutocomplete.svelte
index 3d90300..f7837d4 100644
--- a/src/lib/DasmaAutocomplete.svelte
+++ b/src/lib/DasmaAutocomplete.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
-	export let suggestions = [];
+	import type { MouseEventHandler } from 'svelte/elements';
+
+	export let suggestions: string[] = [];
 	export let position = { x: 0, y: 0 };
 	export let visible = false;
 
 	export let selectedSuggestion: string | { key: string; label: string } = '';
 	export let selectedIndex = -1;
 
-	let menuElement;
+	let menuElement: HTMLElement;
 
-	export const handleMouseClick = (event) => {
-		const selectedIndex = Array.from(menuElement.children).indexOf(event.target);
+	export const handleMouseClick: MouseEventHandler<HTMLLIElement> = (event) => {
+		if (!event.target) return;
+		const selectedIndex = Array.from(menuElement.children).indexOf(<Element>event.target);
 		if (selectedIndex !== -1 && selectedIndex < suggestions.length) {
 			selectedSuggestion = getKey(suggestions[selectedIndex]);
 		}
 	};
-	export const handleKeyEvent = (event) => {
+	export const handleKeyEvent = (event: KeyboardEvent) => {
 		if (event.key === 'ArrowDown') {
 			event.preventDefault();
 			selectedIndex = Math.min(selectedIndex + 1, suggestions.length - 1);
@@ -28,33 +31,40 @@
 		}
 	};
 
-	function getLabel(suggestion) {
+	const getLabel = (suggestion: { label: string } | string) => {
 		if (typeof suggestion === 'object' && suggestion.label) {
 			return suggestion.label;
 		} else if (typeof suggestion === 'string') {
 			return suggestion;
 		}
 		return '';
-	}
+	};
 
-	function getKey(suggestion) {
+	const getKey = (suggestion: { key: string } | string) => {
 		if (typeof suggestion === 'object' && suggestion.key) {
 			return suggestion.key;
 		} else if (typeof suggestion === 'string') {
 			return suggestion;
 		}
 		return '';
-	}
+	};
 </script>
 
 {#if visible}
 	<ul
+		role="menu"
 		style="left: {position.x}px; top: {position.y}px;"
 		bind:this={menuElement}
 		class="dasma-autocomplete"
 	>
 		{#each suggestions as suggestion, index}
-			<li role="listitem" class:selected={index === selectedIndex} on:click={handleMouseClick}>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<li
+				role="menuitem"
+				tabindex={index}
+				class:selected={index === selectedIndex}
+				on:click={handleMouseClick}
+			>
 				{getLabel(suggestion)}
 			</li>
 		{/each}
@@ -62,5 +72,5 @@
 {/if}
 
 <style lang="css">
-	@import 'static/dasma-autocomplete.css';
+	@import 'dasma-autocomplete.css';
 </style>
diff --git a/src/lib/DasmaQl.svelte b/src/lib/DasmaQl.svelte
index 72c8eba..e98538b 100644
--- a/src/lib/DasmaQl.svelte
+++ b/src/lib/DasmaQl.svelte
@@ -1,24 +1,27 @@
 <script lang="ts">
-	import { debouncer } from '$lib/Debouncer.ts';
-	import { dasmaQlHighlighter, dasmaQlAutocomplete } from 'dasmaql';
+	import { debouncer } from '$lib/Debouncer';
 	import { CaretHandler } from '$lib/CaretHandler';
 	import { onMount } from 'svelte';
 	import DasmaAutocomplete from '$lib/DasmaAutocomplete.svelte';
+	import type { FormEventHandler, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+	import { dasmaQlAutocomplete, dasmaQlHighlighter } from 'dasmaql';
 
-	export let fields = [];
-	export let callbackSearch = () => {};
+	export let fields: string[] = [];
+	export let callbackSearch: (field: string, search: string) => (string | { label: string })[] = () => {
+		return [];
+	};
 
-	let autocomplete;
-	let highlighter;
+	let autocomplete: dasmaQlAutocomplete;
+	let highlighter: dasmaQlHighlighter;
 
 	const debounceHighlighter = debouncer(200);
 	const debounceAutocomplete = debouncer(400);
 
 	let lastQl: string = '';
 	let selectedSuggestion: string | { key: string; label: string } = '';
-	let outputContainer;
+	let outputContainer: HTMLElement;
 
-	let autocompleteKeyEvent = {};
+	let autocompleteKeyEvent: (event: KeyboardEvent) => void = () => {};
 	let autocompletePotion = { x: 0, y: 0 };
 
 	let showSuggestions = false;
@@ -27,7 +30,7 @@
 	let currentPosition = 0;
 	let selectedIndex = -1;
 
-	function handleInputChange(event: InputEvent): void {
+	const handleInputChange: FormEventHandler<HTMLDivElement> = (event) => {
 		const input = getInputTextContent(event);
 		if (input !== lastQl) {
 			const outputContainer = event.target as HTMLElement;
@@ -38,40 +41,38 @@
 		}
 
 		lastQl = input;
-	}
+	};
 
-	function getSelectedSuggestionLabel() {
+	const getSelectedSuggestionLabel = () => {
 		if (typeof selectedSuggestion === 'object' && selectedSuggestion.label) {
 			return selectedSuggestion.label;
 		} else if (typeof selectedSuggestion === 'string') {
 			return selectedSuggestion;
 		}
 		return '';
-	}
-	function getSelectedSuggestionKey() {
+	};
+	const getSelectedSuggestionKey = () => {
 		if (typeof selectedSuggestion === 'object' && selectedSuggestion.key) {
 			return selectedSuggestion.key;
 		} else if (typeof selectedSuggestion === 'string') {
 			return selectedSuggestion;
 		}
 		return '';
-	}
+	};
 
-	function handleSelectionChange(event) {
-		if (event.type === 'click') {
-			if (showSuggestions && selectedSuggestion) {
-				showSuggestions = false;
-				const selectedSuggestion = getSelectedSuggestionLabel();
-				const newPosition =
-					currentPosition +
-					selectedSuggestion.length -
-					autocomplete.getInput(currentPosition).length;
-
-				const newQlString = autocomplete.insertSuggestion(currentPosition, selectedSuggestion);
-				updateOutputContainer(newQlString, newPosition);
-			}
-			return;
+	const handleSelectionChangeFromMouse: MouseEventHandler<HTMLDivElement> = () => {
+		if (showSuggestions && selectedSuggestion) {
+			showSuggestions = false;
+			const selectedSuggestion = getSelectedSuggestionLabel();
+			const newPosition =
+				currentPosition + selectedSuggestion.length - autocomplete.getInput(currentPosition).length;
+
+			const newQlString = autocomplete.insertSuggestion(currentPosition, selectedSuggestion);
+			updateOutputContainer(newQlString, newPosition);
 		}
+	};
+
+	const handleSelectionChangeFromKey: KeyboardEventHandler<HTMLDivElement> = (event) => {
 		switch (event?.key) {
 			case 'ArrowUp':
 			case 'ArrowDown':
@@ -82,7 +83,7 @@
 				handleEnterKey(event);
 				break;
 			default:
-				currentPosition = getCaretPosition(event.target);
+				currentPosition = getCaretPosition(event.target as Node) || 0;
 				autocompletePotion = CaretHandler.getCaretCoordinates();
 				showSuggestions = false;
 				debounceAutocomplete.debounce(() => {
@@ -93,45 +94,46 @@
 					}
 				});
 		}
-	}
+	};
 
-	function handleEnterKey(event) {
+	const handleEnterKey: KeyboardEventHandler<HTMLDivElement> = (event) => {
 		const selectedSuggestion = getSelectedSuggestionKey();
 		showSuggestions = false;
 		autocomplete.refresh(getInputTextContent(event));
-
-		console.log(getInputTextContent(event), autocomplete.getInput(currentPosition));
-
-		console.log(currentPosition, autocomplete.getInput(currentPosition));
 		const newPosition =
 			currentPosition + selectedSuggestion.length - autocomplete.getInput(currentPosition).length;
 		const newQlString = autocomplete.insertSuggestion(currentPosition, selectedSuggestion);
 
 		updateOutputContainer(newQlString, newPosition);
-	}
+	};
 
-	function getInputTextContent(event) {
+	const getInputTextContent: FormEventHandler<HTMLDivElement> = (event) => {
 		return `${(event?.target as HTMLElement)?.textContent || ''}`;
-	}
+	};
 
-	function getCaretPosition(target) {
+	function getCaretPosition(target: Node | null) {
 		return CaretHandler.getCaretCharacterOffsetWithin(target);
 	}
 
-	function updateSuggestionsVisibility() {
+	const updateSuggestionsVisibility = () => {
 		if (suggestions?.length > 0) {
 			showSuggestions = true;
 			selectedIndex = -1;
 		}
-	}
+	};
 
-	function updateOutputContainer(newQlString, position) {
+	const updateOutputContainer = (newQlString: string, position: number | undefined) => {
+		if (position === undefined) return;
 		outputContainer.innerHTML = highlighter.highlight(newQlString);
 		CaretHandler.setCaretPosition(outputContainer, position);
-	}
+	};
 
 	onMount(() => {
-		outputContainer.addEventListener('selectionchange', (event) => handleSelectionChange(event));
+		outputContainer.addEventListener('selectionchange', (event) =>
+			handleSelectionChangeFromKey(
+				event as KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }
+			)
+		);
 
 		highlighter = dasmaQlHighlighter({
 			fields: fields
@@ -143,30 +145,30 @@
 	});
 </script>
 
-<div on:click={handleSelectionChange}>
+<div on:click={handleSelectionChangeFromMouse} on:keypress={() => {}} role="button" tabindex={0}>
 	<div
-		role="textbox"
-		tabindex="0"
+		autocomplete="off"
+		bind:this={outputContainer}
+		class="dasma-input"
 		contenteditable="true"
 		id="output-container"
-		class="dasma-input"
-		bind:this={outputContainer}
 		on:input={handleInputChange}
 		on:keydown={autocompleteKeyEvent}
-		on:keyup={handleSelectionChange}
-		autocomplete="off"
+		on:keyup={handleSelectionChangeFromKey}
+		role="textbox"
 		spellcheck="false"
-	></div>
+		tabindex="0"
+	/>
 	<DasmaAutocomplete
-		{suggestions}
-		visible={showSuggestions}
 		bind:handleKeyEvent={autocompleteKeyEvent}
+		bind:selectedIndex
 		bind:selectedSuggestion
 		position={autocompletePotion}
-		bind:selectedIndex
+		{suggestions}
+		visible={showSuggestions}
 	/>
 </div>
 
 <style lang="css">
-	@import 'static/dasma-highlighter.css';
+	@import 'dasma-highlighter.css';
 </style>
diff --git a/static/dasma-autocomplete.css b/src/lib/dasma-autocomplete.css
similarity index 100%
rename from static/dasma-autocomplete.css
rename to src/lib/dasma-autocomplete.css
diff --git a/static/dasma-highlighter.css b/src/lib/dasma-highlighter.css
similarity index 100%
rename from static/dasma-highlighter.css
rename to src/lib/dasma-highlighter.css
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 68244be..9762d04 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { DasmaQl } from '$lib';
-	import levenshtein from 'dasmaql/src/modules/levenshteinDistance';
+	import { levenshteinSearchSort } from 'dasmaql/src/modules/levenshteinDistance';
 
-	const dummyData = {
+	interface DummyData {
+		[key: string]: { key: string; label: string }[];
+	}
+
+	const dummyData: DummyData = {
 		current_task: [
 			{
 				key: 'currentTask()',
@@ -138,10 +142,10 @@
 
 	const fields = Object.keys(dummyData);
 
-	const callbackSearch = (field, search) => {
+	const callbackSearch = (field: string, search: string): (string | { label: string })[] => {
 		const values = dummyData[field.toLowerCase()];
 
-		return levenshtein.levenshteinSearchSort(values, search).slice(0, 10);
+		return levenshteinSearchSort(values, search).slice(0, 10);
 	};
 </script>