From e1621b47a24e9916de31418095197001a7e61ebf Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Tue, 18 Feb 2025 22:48:29 +0800
Subject: [PATCH 1/2] 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      | 22 ++++++++++++----------
 pnpm-lock.yaml                   | 13 +++++++++++--
 pnpm-workspace.yaml              |  2 +-
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/client/components/OCodeBlock.vue b/client/components/OCodeBlock.vue
index f715fd30..87dce655 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: 'json' | 'html'
     lines?: boolean
     transformRendered?: (code: string) => string
   }>(),
diff --git a/client/composables/shiki.ts b/client/composables/shiki.ts
index b9735028..dc71a98d 100644
--- a/client/composables/shiki.ts
+++ b/client/composables/shiki.ts
@@ -1,27 +1,29 @@
 import type { MaybeRef } from '@vueuse/core'
-import type { BundledLanguage, Highlighter } from 'shiki'
-import { createHighlighter } from 'shiki'
+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 async function loadShiki() {
-  // Only loading when needed
-  shiki.value = await createHighlighter({
+  shiki.value = await createHighlighterCore({
     themes: [
-      'vitesse-dark',
-      'vitesse-light',
+      import('@shikijs/themes/vitesse-light'),
+      import('@shikijs/themes/vitesse-dark'),
     ],
     langs: [
-      'html',
-      'json',
+      import('@shikijs/langs/html'),
+      import('@shikijs/langs/json'),
     ],
+    engine: createJavaScriptRegexEngine(),
   })
+
   return shiki.value
 }
 
-export function renderCodeHighlight(code: MaybeRef<string>, lang: BundledLanguage) {
+export function renderCodeHighlight(code: MaybeRef<string>, lang: 'json' | 'html') {
   return computed(() => {
     const colorMode = devtools.value?.colorMode || 'light'
     return shiki.value!.codeToHtml(toValue(code) || '', {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e93719a..30385889 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -245,6 +245,15 @@ importers:
         specifier: ^4.5.0
         version: 4.5.0(vue@3.5.13(typescript@5.6.3))
 
+  playground:
+    dependencies:
+      nuxt-og-image:
+        specifier: workspace:*
+        version: link:..
+      nuxt-og-image-devtools:
+        specifier: workspace:*
+        version: link:../client
+
 packages:
 
   '@alloc/quick-lru@5.2.0':
@@ -7423,7 +7432,7 @@ snapshots:
       eslint-plugin-regexp: 2.7.0(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-toml: 0.12.0(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-unicorn: 56.0.1(eslint@9.20.1(jiti@2.4.2))
-      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.24.1(@typescript-eslint/parser@6.21.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.6.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.6.3))(eslint@9.20.1(jiti@2.4.2))
+      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.24.1(@typescript-eslint/parser@8.24.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.6.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.6.3))(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-vue: 9.32.0(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-yml: 1.16.0(eslint@9.20.1(jiti@2.4.2))
       eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.13)(eslint@9.20.1(jiti@2.4.2))
@@ -11865,7 +11874,7 @@ snapshots:
       semver: 7.7.1
       strip-indent: 3.0.0
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.24.1(@typescript-eslint/parser@6.21.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.6.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.6.3))(eslint@9.20.1(jiti@2.4.2)):
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.24.1(@typescript-eslint/parser@8.24.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.6.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.6.3))(eslint@9.20.1(jiti@2.4.2)):
     dependencies:
       eslint: 9.20.1(jiti@2.4.2)
     optionalDependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index d1ee44ad..91228837 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,3 @@
 packages:
-  - .playground
+  - playground
   - client

From 2a57f7ed0d7ebcca00cbc46279d9c0c5a0aab258 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Tue, 18 Feb 2025 23:36:32 +0800
Subject: [PATCH 2/2] perf: use xml for svg highlighting

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

diff --git a/client/app.vue b/client/app.vue
index edeec732..1b1224ff 100644
--- a/client/app.vue
+++ b/client/app.vue
@@ -734,7 +734,7 @@ const currentPageFile = computed(() => {
                 SVG
               </h3>
             </template>
-            <OCodeBlock :code="debug?.svg.replaceAll('>', '>\n')" lang="html" />
+            <OCodeBlock :code="debug?.svg.replaceAll('>', '>\n')" lang="xml" />
           </OSectionBlock>
           <OSectionBlock>
             <template #text>
diff --git a/client/components/OCodeBlock.vue b/client/components/OCodeBlock.vue
index 87dce655..4285e8df 100644
--- a/client/components/OCodeBlock.vue
+++ b/client/components/OCodeBlock.vue
@@ -5,7 +5,7 @@ import { renderCodeHighlight } from '../composables/shiki'
 const props = withDefaults(
   defineProps<{
     code: string
-    lang: 'json' | 'html'
+    lang: 'json' | 'xml'
     lines?: boolean
     transformRendered?: (code: string) => string
   }>(),
diff --git a/client/composables/shiki.ts b/client/composables/shiki.ts
index dc71a98d..88596aff 100644
--- a/client/composables/shiki.ts
+++ b/client/composables/shiki.ts
@@ -14,7 +14,7 @@ export async function loadShiki() {
       import('@shikijs/themes/vitesse-dark'),
     ],
     langs: [
-      import('@shikijs/langs/html'),
+      import('@shikijs/langs/xml'),
       import('@shikijs/langs/json'),
     ],
     engine: createJavaScriptRegexEngine(),
@@ -23,7 +23,7 @@ export async function loadShiki() {
   return shiki.value
 }
 
-export function renderCodeHighlight(code: MaybeRef<string>, lang: 'json' | 'html') {
+export function renderCodeHighlight(code: MaybeRef<string>, lang: 'json' | 'xml') {
   return computed(() => {
     const colorMode = devtools.value?.colorMode || 'light'
     return shiki.value!.codeToHtml(toValue(code) || '', {