moved tinykeys to onMount dynamic import

Author: rohitpotato

src/lib/components/CommandPalette.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { paletteStore } from '../store/PaletteStore';
 	import { onDestroy, onMount, afterUpdate } from 'svelte';
-	import tinyKeys, { parseKeybinding } from 'tinykeys';
+	// import tinyKeys, { parseKeybinding } from 'tinykeys';
 	import Portal from './Portal.svelte';
 	import ResultPanel from './ResultPanel.svelte';
 	import KeyboardButton from './KeyboardButton.svelte';
@@ -27,6 +27,7 @@
 
 	const storeMethods = createStoreMethods();
 	const actionMap = createActionMap(commands);
+	let formattedEscKey = ''
 	const { togglePalette, closePalette: closeCommandPalette } = storeMethods;
 
 	const updateStore = () => {
@@ -106,11 +107,14 @@
 		}
 	};
 
-	onMount(() => {
+	onMount(async () => {
+		const tinyKeys =   await import('tinykeys')
+		const {default: tiny, parseKeybinding} = tinyKeys
+		formattedEscKey = parseKeybinding('Esc').flat().join('');
 		const shortcuts = createShortcuts({
 			actions: commands
 		});
-		unsubscribeKbdListener = tinyKeys(window, {
+		unsubscribeKbdListener = tiny(window, {
 			...shortcuts,
 			'$mod+k': togglePalette,
 			Escape: closePalette,
@@ -158,7 +162,7 @@
 		wrapperElement?.removeEventListener?.('click', handleOutsideClick);
 	});
 
-	const formattedEscKey = parseKeybinding('Esc').flat().join('');
+	 
 </script>
 
 <Portal target="body">

src/lib/components/Result.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { paletteStore } from '../store/PaletteStore';
-	import { afterUpdate } from 'svelte';
+	import { afterUpdate, onMount } from 'svelte';
 	import { runAction } from '../utils';
 	import KeyboardButton from './KeyboardButton.svelte';
-	import * as tinykeys from 'tinykeys';
 	import type { action } from '$lib/types';
 
 	export let action: action;
@@ -31,10 +30,16 @@
 		});
 	};
 
-	if (action.shortcut) {
-		const parsedShortcut = tinykeys.parseKeybinding(action.shortcut);
+	onMount(async () => {
+		const tinyKeys = await import('tinykeys');
+		const {parseKeybinding} = tinyKeys
+		if (action.shortcut) {
+		const parsedShortcut = parseKeybinding(action.shortcut);
 		formattedShortcut = parsedShortcut.flat().filter((s) => s.length > 0);
 	}
+	})
+
+
 
 	const onMouseEnter = () => {
 		isActive = true;