@salesforcedevs/dx-components 1.20.7 → 1.20.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.20.7",
+    "version": "1.20.8",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -47,5 +47,5 @@
         "node": "20.19.0",
         "yarn": "1.22.19"
     },
-    "gitHead": "fffbef4d7b536a321824457c6a987e53830a78f1"
+    "gitHead": "1484bf6ed3cddd470239e60eabef43f53a798774"
 }

package/src/modules/dxUtils/shiki/shiki.ts

@@ -1,13 +1,23 @@
-import * as shiki from "shiki";
-
-import type { BundledLanguage, BundledTheme } from "shiki";
-import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
 import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
 
+let shikiModulePromise: Promise<typeof import("shiki")> | null = null;
+let bracketsModulePromise: Promise<
+    typeof import("@shikijs/colorized-brackets")
+> | null = null;
+
+async function getShiki() {
+    return (shikiModulePromise ??= import("shiki"));
+}
+
+async function getBrackets() {
+    return (bracketsModulePromise ??= import("@shikijs/colorized-brackets"));
+}
+
 interface ShikiSingleton {
-    highlighter: shiki.HighlighterCore | null;
+    highlighter: HighlighterCore | null;
     initialized: boolean;
-    initPromise: Promise<shiki.HighlighterCore> | null;
+    initPromise: Promise<HighlighterCore> | null;
 }
 
 const shikiInstance: ShikiSingleton = {
@@ -50,8 +60,8 @@ const LANGUAGE_MAP: Record<string, BundledLanguage> = {
     sh: "bash"
 };
 
-// Core languages that should be loaded immediately for best performance
-const CORE_LANGUAGES = [
+// Core languages loaded eagerly (keep minimal; load others on demand)
+const CORE_LANGUAGES: BundledLanguage[] = [
     "apex",
     "javascript",
     "html",
@@ -91,8 +101,8 @@ const OPTIONAL_LANGUAGES: Record<string, any> = {
     agentscript: getCustomLanguageGrammars().agentscript
 };
 
-// Initialize Shiki highlighter with fine-grained modules for better performance
-async function initializeShiki(): Promise<shiki.HighlighterCore> {
+// Initialize Shiki highlighter (lazy-load module and keep initial set minimal)
+async function initializeShiki(): Promise<HighlighterCore> {
     if (shikiInstance.highlighter) {
         return shikiInstance.highlighter;
     }
@@ -101,6 +111,7 @@ async function initializeShiki(): Promise<shiki.HighlighterCore> {
         return shikiInstance.initPromise;
     }
 
+    const shiki = await getShiki();
     shikiInstance.initPromise = shiki.createHighlighter({
         themes: ["light-plus", "material-theme-darker"],
         langs: CORE_LANGUAGES
@@ -119,7 +130,7 @@ async function initializeShiki(): Promise<shiki.HighlighterCore> {
 
 // Async function to load additional languages when needed
 async function loadLanguageIfNeeded(
-    highlighter: shiki.HighlighterCore,
+    highlighter: HighlighterCore,
     language: string
 ): Promise<void> {
     const loadedLanguages = highlighter.getLoadedLanguages();
@@ -167,6 +178,8 @@ export async function highlightCode(
             mappedLanguage = "text" as BundledLanguage;
         }
 
+        const { transformerColorizedBrackets } = await getBrackets();
+
         return highlighter.codeToHtml(code, {
             lang: mappedLanguage,
             theme: THEME_MAP[theme],