Add missing TypeScript types and general cleanup

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dasmaql-svelte",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"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.2.1"
+		"dasmaql": "^0.2.17"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",

src/lib/DasmaAutocomplete.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { MouseEventHandler } from 'svelte/elements';
+	import { onMount } from 'svelte';
 
 	export let suggestions: string[] = [];
 	export let position = { x: 0, y: 0 };
@@ -15,6 +16,8 @@
 		const selectedIndex = Array.from(menuElement.children).indexOf(<Element>event.target);
 		if (selectedIndex !== -1 && selectedIndex < suggestions.length) {
 			selectedSuggestion = getKey(suggestions[selectedIndex]);
+		} else {
+			visible = false;
 		}
 	};
 	export const handleKeyEvent = (event: KeyboardEvent) => {
@@ -49,6 +52,22 @@
 		}
 		return '';
 	};
+
+	onMount(() => {
+		document.addEventListener('click', (event: MouseEvent) => {
+			const targetElement = event.target;
+
+			if (
+				targetElement instanceof HTMLElement &&
+				!targetElement.classList.contains('dasma-suggestion')
+			) {
+				selectedIndex = -1;
+				suggestions = [];
+				selectedSuggestion = '';
+				visible = false;
+			}
+		});
+	});
 </script>
 
 {#if visible}
@@ -65,6 +84,7 @@
 				tabindex={index}
 				class:selected={index === selectedIndex}
 				on:click={handleMouseClick}
+				class="dasma-suggestion"
 			>
 				{getLabel(suggestion)}
 			</li>

src/lib/DasmaQl.svelte

@@ -4,7 +4,12 @@
 	import { onMount } from 'svelte';
 	import DasmaAutocomplete from '$lib/DasmaAutocomplete.svelte';
 	import type { FormEventHandler, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
-	import { dasmaQlAutocomplete, dasmaQlHighlighter } from 'dasmaql';
+	import {
+		dasmaQlAutocomplete,
+		type QlAutocomplete
+	} from 'dasmaql/src/modules/dasmaQlAutocomplete';
+	import { dasmaQlHighlighter, type QlHighlighter } from 'dasmaql/src/modules/dasmaQlHighlighter';
+	import { dasmaQlSyntax, type QlSyntax, type QlModel } from 'dasmaql/src/modules/dasmaQlSyntax';
 
 	export let fields: string[] = [];
 	export let callbackSearch: (
@@ -14,8 +19,9 @@
 		return [];
 	};
 
-	let autocomplete: dasmaQlAutocomplete;
-	let highlighter: dasmaQlHighlighter;
+	let autocomplete: QlAutocomplete;
+	let highlighter: QlHighlighter;
+	let syntaxModel: QlSyntax;
 
 	const debounceHighlighter = debouncer(200);
 	const debounceAutocomplete = debouncer(400);
@@ -33,6 +39,16 @@
 	let currentPosition = 0;
 	let selectedIndex = -1;
 
+	export const generateModel: () => QlModel = () => {
+		const input = outputContainer.innerText.trim();
+		const model: QlModel = syntaxModel.parse(input);
+
+		if (model.validation?.error?.location.start) {
+			CaretHandler.setCaretPosition(outputContainer, model.validation.error.location.start.offset);
+		}
+		return model;
+	};
+
 	const handleInputChange: FormEventHandler<HTMLDivElement> = (event) => {
 		const input = getInputTextContent(event);
 		if (input !== lastQl) {
@@ -149,6 +165,9 @@
 			fields: fields,
 			callbackSearchParameter: callbackSearch
 		});
+		syntaxModel = dasmaQlSyntax({
+			fields: fields
+		});
 	});
 </script>
 

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { DasmaQl } from '$lib';
 	import { levenshteinSearchSort } from 'dasmaql/src/modules/levenshteinDistance';
+	import { type QlModel } from 'dasmaql/src/modules/dasmaQlSyntax';
 
 	interface DummyData {
 		[key: string]: { key: string; label: string }[];
@@ -140,13 +141,111 @@
 		]
 	};
 
+	function syntaxHighlight(jsonObject: QlModel) {
+		try {
+			return JSON.stringify(jsonObject, null, 2)
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;')
+				.replace(
+					/("(\\u[a-zA-Z0-9]{4}|\\[^\\]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
+					(match) => {
+						let cls = 'json-number';
+						if (/^"/.test(match)) {
+							if (/:$/.test(match)) {
+								cls = 'json-key';
+							} else {
+								cls = 'json-string';
+							}
+						} else if (/true|false/.test(match)) {
+							cls = 'json-boolean';
+						} else if (/null/.test(match)) {
+							cls = 'json-null';
+						}
+						return '<span class="' + cls + '">' + match + '</span>';
+					}
+				);
+		} catch (error) {
+			console.error('Invalid JSON:', error);
+			return '';
+		}
+	}
+
 	const fields = Object.keys(dummyData);
 
+	let qlModel: QlModel;
+	let generateModel: () => QlModel;
+
 	const callbackSearch = (field: string, search: string): (string | { label: string })[] => {
 		const values = dummyData[field.toLowerCase()];
 
 		return levenshteinSearchSort(values, search).slice(0, 10);
 	};
+
+	let outputModel = () => {
+		qlModel = generateModel();
+	};
 </script>
 
-<DasmaQl {fields} {callbackSearch} />
+<DasmaQl {fields} {callbackSearch} bind:generateModel />
+<button on:click={outputModel}>Try me out!</button>
+<br />
+<div class="json-output">
+	<pre>
+        {@html qlModel ? syntaxHighlight(qlModel) : ''}
+    </pre>
+</div>
+
+<style>
+	button {
+		background-color: #4caf50;
+		color: white;
+
+		padding: 20px 40px;
+		border: none;
+		cursor: pointer;
+		border-radius: 10px;
+		font-size: 20px;
+		display: block;
+		margin: 20px auto;
+	}
+
+	button:hover {
+		background-color: #45a049;
+	}
+
+	.json-output {
+		overflow: auto;
+		font-family: monospace;
+
+		width: calc(100% - 40px);
+		padding: 12px;
+		margin: 12px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		resize: vertical;
+		font-size: 14px;
+		height: calc(100vh - 250px);
+		background-color: #f8f8f8;
+	}
+
+	:global(.json-string) {
+		color: green;
+	}
+
+	:global(.json-number) {
+		color: blue;
+	}
+
+	:global(.json-boolean) {
+		color: orange;
+	}
+
+	:global(.json-null) {
+		color: grey;
+	}
+
+	:global(.json-key) {
+		color: brown;
+	}
+</style>

tsconfig.json

@@ -3,6 +3,7 @@
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
+		"allowSyntheticDefaultImports": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,