fix(editor): avoid bundling unused Shiki languages

apps/desktop/src/components/editor/SqlPreviewPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, computed, watch, onMounted, nextTick } from "vue";
 import { useI18n } from "vue-i18n";
 import { AlignLeft, Copy, ChevronDown, Undo2, Redo2 } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
@@ -8,7 +8,7 @@ import { useTheme } from "@/composables/useTheme";
 import { useToast } from "@/composables/useToast";
 import { copyToClipboard } from "@/lib/common/clipboard";
 import { formatSqlText, type SqlFormatDialect } from "@/lib/sql/sqlFormatter";
-import type { Highlighter } from "shiki";
+import { createShikiSqlHighlighter, type SqlHighlighter } from "@/lib/sql/sqlHighlighter";
 
 const props = defineProps<{
   sql: string;
@@ -34,7 +34,7 @@ const formatting = ref(false);
 const highlightedHtml = ref("");
 const highlighterReady = ref(false);
 
-let highlighter: Highlighter | null = null;
+let highlighter: SqlHighlighter | null = null;
 
 const displaySql = computed(() => {
   if (isFormatted.value && formattedSql.value) {
@@ -48,10 +48,9 @@ const hasSql = computed(() => props.sql.trim().length > 0);
 async function initHighlighter() {
   if (highlighter) return;
   try {
-    const { createHighlighter } = await import("shiki");
-    highlighter = await createHighlighter({
-      themes: ["dark-plus", "min-light"],
-      langs: ["sql"],
+    highlighter = await createShikiSqlHighlighter({
+      appearance: () => (isDark.value ? "dark" : "light"),
+      themePreset: "preview",
     });
     highlighterReady.value = true;
     await highlightSql();
@@ -63,12 +62,7 @@ async function initHighlighter() {
 async function highlightSql() {
   if (!highlighter || !displaySql.value) return;
   try {
-    const theme = isDark.value ? "dark-plus" : "min-light";
-    highlightedHtml.value = highlighter.codeToHtml(displaySql.value, {
-      lang: "sql",
-      theme,
-      structure: "inline",
-    });
+    highlightedHtml.value = highlighter(displaySql.value);
   } catch {
     // fallback to plain text
     highlightedHtml.value = "";
@@ -134,12 +128,6 @@ onMounted(() => {
     void initHighlighter();
   });
 });
-
-onBeforeUnmount(() => {
-  highlighter?.dispose();
-  highlighter = null;
-  highlighterReady.value = false;
-});
 </script>
 
 <template>