perf: reduce desktop frontend bundle from 10 to 2MB

Use shiki fine-grained bundle, avoid bundling all languages and themes

apps/desktop/vite.config.js

@@ -1,32 +1,35 @@
-import { defineConfig } from "vite";
-import { sveltekit } from "@sveltejs/kit/vite";
+import { sveltekit } from "@sveltejs/kit/vite"
+import { defineConfig } from "vite"
 
 // @ts-expect-error process is a nodejs global
-const host = process.env.TAURI_DEV_HOST;
+const host = process.env.TAURI_DEV_HOST
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  plugins: [sveltekit()],
+	plugins: [sveltekit()],
 
-  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
-  //
-  // 1. prevent vite from obscuring rust errors
-  clearScreen: false,
-  // 2. tauri expects a fixed port, fail if that port is not available
-  server: {
-    port: 1420,
-    strictPort: true,
-    host: host || false,
-    hmr: host
-      ? {
-          protocol: "ws",
-          host,
-          port: 1421,
-        }
-      : undefined,
-    watch: {
-      // 3. tell vite to ignore watching `src-tauri`
-      ignored: ["**/src-tauri/**"],
-    },
-  },
-}));
+	// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+	//
+	// 1. prevent vite from obscuring rust errors
+	clearScreen: false,
+	// 2. tauri expects a fixed port, fail if that port is not available
+	server: {
+		port: 1420,
+		strictPort: true,
+		host: host || false,
+		hmr: host
+			? {
+					protocol: "ws",
+					host,
+					port: 1421
+				}
+			: undefined,
+		watch: {
+			// 3. tell vite to ignore watching `src-tauri`
+			ignored: ["**/src-tauri/**"]
+		}
+	},
+	build: {
+		minify: true
+	}
+}))

packages/ui/src/components/code/shiki.svelte

@@ -1,6 +1,10 @@
+<!-- Don't Load All languages and themes, use fine-grained bundle-->
+<!-- https://shiki.style/guide/bundles#fine-grained-bundle -->
 <script lang="ts">
 	import { cn } from "@kksh/ui/utils"
-	import { codeToHtml } from "shiki"
+	import { mode } from "mode-watcher"
+	import { createHighlighterCore } from "shiki/core"
+	import { createOnigurumaEngine } from "shiki/engine/oniguruma"
 	import { onMount } from "svelte"
 
 	const {
@@ -8,12 +12,23 @@
 		lang,
 		theme,
 		class: className
-	}: { code: string; lang: string; theme?: string; class?: string } = $props()
+	}: {
+		code: string
+		lang: "json" | "typescript"
+		theme?: "vitesse-dark" | "vitesse-light"
+		class?: string
+	} = $props()
 	let html = $state("")
+
 	onMount(async () => {
-		html = await codeToHtml(code, {
-			lang: lang,
-			theme: theme ?? "vitesse-dark"
+		const highlighter = await createHighlighterCore({
+			themes: [import("shiki/themes/vitesse-dark.mjs"), import("shiki/themes/vitesse-light.mjs")],
+			langs: [import("shiki/langs/json.mjs"), import("shiki/langs/typescript.mjs")],
+			engine: createOnigurumaEngine(import("shiki/wasm"))
+		})
+		html = highlighter.codeToHtml(code, {
+			lang,
+			theme: theme ?? ($mode === "dark" ? "vitesse-dark" : "vitesse-light")
 		})
 	})
 </script>

packages/ui/src/components/custom/draggable-command-group.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <CommandPrimitive.Group
-	class={cn("text-foreground overflow-hidden p-1 select-none", className)}
+	class={cn("text-foreground select-none overflow-hidden p-1", className)}
 	bind:ref
 	{...restProps}
 >