From 0afbec8a164faeb4781f8bf01761156ab2ae3b01 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Wed, 19 Feb 2025 12:45:45 +0800
Subject: [PATCH] perf: only bundle needed shiki langs and themes

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 client/components/OCodeBlock.vue |  3 +--
 client/composables/shiki.ts      | 36 +++++++++++++-------------------
 package.json                     |  2 +-
 3 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/client/components/OCodeBlock.vue b/client/components/OCodeBlock.vue
index 687bc718..e0686919 100644
--- a/client/components/OCodeBlock.vue
+++ b/client/components/OCodeBlock.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { BundledLanguage } from 'shiki'
 import { computed } from 'vue'
 import { renderCodeHighlight } from '../composables/shiki'
 
 const props = withDefaults(
   defineProps<{
     code: string
-    lang?: BundledLanguage
+    lang: 'javascript'
     lines?: boolean
     transformRendered?: (code: string) => string
   }>(),
diff --git a/client/composables/shiki.ts b/client/composables/shiki.ts
index 8fbb0c5a..b8cd7c99 100644
--- a/client/composables/shiki.ts
+++ b/client/composables/shiki.ts
@@ -1,37 +1,31 @@
-import type { Highlighter, BundledLanguage } from 'shiki'
-import { createHighlighter } from 'shiki'
-import { computed, ref, toValue } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
+import type { HighlighterCore } from 'shiki'
+import { createHighlighterCore } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import { computed, ref, toValue } from 'vue'
 import { devtools } from './rpc'
 
-export const shiki = ref<Highlighter>()
+export const shiki = ref<HighlighterCore>()
 
-export function loadShiki() {
-  // Only loading when needed
-  return createHighlighter({
+export async function loadShiki() {
+  shiki.value = await createHighlighterCore({
     themes: [
-      'vitesse-dark',
-      'vitesse-light',
+      import('@shikijs/themes/vitesse-light'),
+      import('@shikijs/themes/vitesse-dark'),
     ],
     langs: [
-      'css',
-      'javascript',
-      'typescript',
-      'html',
-      'vue',
-      'vue-html',
-      'bash',
-      'diff',
+      import('@shikijs/langs/javascript'),
     ],
-  }).then((i) => {
-    shiki.value = i
+    engine: createJavaScriptRegexEngine(),
   })
+
+  return shiki.value
 }
 
-export function renderCodeHighlight(code: MaybeRef<string>, lang: BundledLanguage) {
+export function renderCodeHighlight(code: MaybeRef<string>, lang: 'javascript') {
   return computed(() => {
     const colorMode = devtools.value?.colorMode || 'light'
-    return shiki.value!.codeToHtml(toValue(code), {
+    return shiki.value!.codeToHtml(toValue(code) || '', {
       lang,
       theme: colorMode === 'dark' ? 'vitesse-dark' : 'vitesse-light',
     }) || ''
diff --git a/package.json b/package.json
index 124b4077..7fd60da1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@nuxt/scripts",
   "type": "module",
   "version": "0.10.3",
-  "packageManager": "pnpm@10.4.0",
+  "packageManager": "pnpm@10.4.1",
   "description": "Load third-party scripts with better performance, privacy and DX in Nuxt Apps.",
   "author": {
     "website": "https://harlanzw.com",