From 5573923a76750ba20bb76362ae51a9733bc2cddd Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Fri, 7 Feb 2025 14:51:28 -0500
Subject: [PATCH] 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             |  2 +-
 packages/ui/package.json                     |  2 ++
 packages/ui/src/components/code/shiki.svelte | 18 ++++++++----
 pnpm-lock.yaml                               | 30 +++++++++++++++++++-
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/beta-build.yml b/.github/workflows/beta-build.yml
index c5113ca9..4617b820 100644
--- a/.github/workflows/beta-build.yml
+++ b/.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
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 190a1f81..e14c2bb4 100644
--- a/packages/ui/package.json
+++ b/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:*",
diff --git a/packages/ui/src/components/code/shiki.svelte b/packages/ui/src/components/code/shiki.svelte
index 2ce1b5c8..f337046e 100644
--- a/packages/ui/src/components/code/shiki.svelte
+++ b/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}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 97edc39c..d34b7233 100644
--- a/pnpm-lock.yaml
+++ b/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': {}