perf(desktop): reduce bundle size by ~8.5MB from shiki (#97)

* perf(desktop): reduce bundle size by ~8.5MB from shiki

Use fine grained shiki bundle

* ci: update GitHub Actions workflow build step description

.github/workflows/beta-build.yml

@@ -206,7 +206,7 @@ jobs:
       - name: Build Packages
         run: pnpm build
 
-      - name: Build the app (Windows)
+      - name: Build the App
         working-directory: apps/desktop
         env:
           CI: false

packages/ui/package.json

@@ -67,6 +67,8 @@
 	},
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.2",
+		"@shikijs/langs": "^2.3.2",
+		"@shikijs/themes": "^2.3.2",
 		"@inlang/paraglide-sveltekit": "^0.15.5",
 		"@internationalized/date": "^3.7.0",
 		"@kksh/supabase": "workspace:*",

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

@@ -2,9 +2,10 @@
 <!-- https://shiki.style/guide/bundles#fine-grained-bundle -->
 <script lang="ts">
 	import { cn } from "@kksh/ui/utils"
-	import { getSingletonHighlighter } from "shiki"
 	import { ShikiMagicMove } from "shiki-magic-move/svelte"
 	import "shiki-magic-move/dist/style.css"
+	import { createHighlighterCore } from "shiki/core"
+	import { createOnigurumaEngine } from "shiki/engine/oniguruma"
 
 	const {
 		code,
@@ -20,12 +21,17 @@
 		class?: string
 	} = $props()
 
-	const highlighter2 = getSingletonHighlighter({
-		themes: ["vitesse-dark", "vitesse-light"],
-		langs: ["typescript", "bash", "powershell", "json"]
+	const highlighter2 = createHighlighterCore({
+		themes: [import("@shikijs/themes/vitesse-dark"), import("@shikijs/themes/vitesse-light")],
+		langs: [
+			import("@shikijs/langs/json"),
+			import("@shikijs/langs/typescript"),
+			import("@shikijs/langs/bash"),
+			import("@shikijs/langs/powershell")
+		],
+		// `shiki/wasm` contains the wasm binary inlined as base64 string.
+		engine: createOnigurumaEngine(import("shiki/wasm"))
 	})
-
-	let code2 = $state(`const hello = 'world'`)
 </script>
 
 {#await highlighter2 then highlighter}