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}

pnpm-lock.yaml

@@ -1189,6 +1189,12 @@ importers:
       '@kksh/supabase':
         specifier: workspace:*
         version: link:../supabase
+      '@shikijs/langs':
+        specifier: ^2.3.2
+        version: 2.3.2
+      '@shikijs/themes':
+        specifier: ^2.3.2
+        version: 2.3.2
       '@std/semver':
         specifier: npm:@jsr/std__semver@^1.0.3
         version: '@jsr/std__semver@1.0.3'
@@ -4497,15 +4503,24 @@ packages:
   '@shikijs/langs@1.27.2':
     resolution: {integrity: sha512-MSrknKL0DbeXvhtSigMLIzjPOOQfvK7fsbcRv2NUUB0EvuTTomY8/U+lAkczYrXY2+dygKOapJKk8ScFYbtoNw==}
 
+  '@shikijs/langs@2.3.2':
+    resolution: {integrity: sha512-UqI6bSxFzhexIJficZLKeB1L2Sc3xoNiAV0yHpfbg5meck93du+EKQtsGbBv66Ki53XZPhnR/kYkOr85elIuFw==}
+
   '@shikijs/themes@1.27.2':
     resolution: {integrity: sha512-Yw/uV7EijjWavIIZLoWneTAohcbBqEKj6XMX1bfMqO3llqTKsyXukPp1evf8qPqzUHY7ibauqEaQchhfi857mg==}
 
+  '@shikijs/themes@2.3.2':
+    resolution: {integrity: sha512-QAh7D/hhfYKHibkG2tti8vxNt3ekAH5EqkXJeJbTh7FGvTCWEI7BHqNCtMdjFvZ0vav5nvUgdvA7/HI7pfsB4w==}
+
   '@shikijs/types@1.26.1':
     resolution: {integrity: sha512-d4B00TKKAMaHuFYgRf3L0gwtvqpW4hVdVwKcZYbBfAAQXspgkbWqnFfuFl3MDH6gLbsubOcr+prcnsqah3ny7Q==}
 
   '@shikijs/types@1.27.2':
     resolution: {integrity: sha512-DM9OWUyjmdYdnKDpaGB/GEn9XkToyK1tqxuqbmc5PV+5K8WjjwfygL3+cIvbkSw2v1ySwHDgqATq/+98pJ4Kyg==}
 
+  '@shikijs/types@2.3.2':
+    resolution: {integrity: sha512-CBaMY+a3pepyC4SETi7+bSzO0f6hxEQJUUuS4uD7zppzjmrN4ZRtBqxaT+wOan26CR9eeJ5iBhc4qvWEwn7Eeg==}
+
   '@shikijs/vscode-textmate@10.0.1':
     resolution: {integrity: sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==}
 
@@ -13139,7 +13154,7 @@ snapshots:
   '@gerrit0/mini-shiki@1.24.4':
     dependencies:
       '@shikijs/engine-oniguruma': 1.26.1
-      '@shikijs/types': 1.26.1
+      '@shikijs/types': 1.27.2
       '@shikijs/vscode-textmate': 9.3.1
 
   '@grpc/grpc-js@1.12.2':
@@ -15780,10 +15795,18 @@ snapshots:
     dependencies:
       '@shikijs/types': 1.27.2
 
+  '@shikijs/langs@2.3.2':
+    dependencies:
+      '@shikijs/types': 2.3.2
+
   '@shikijs/themes@1.27.2':
     dependencies:
       '@shikijs/types': 1.27.2
 
+  '@shikijs/themes@2.3.2':
+    dependencies:
+      '@shikijs/types': 2.3.2
+
   '@shikijs/types@1.26.1':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.1
@@ -15794,6 +15817,11 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.1
       '@types/hast': 3.0.4
 
+  '@shikijs/types@2.3.2':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.1
+      '@types/hast': 3.0.4
+
   '@shikijs/vscode-textmate@10.0.1': {}
 
   '@shikijs/vscode-textmate@9.3.1': {}