@salesforcedevs/dx-components 1.29.0-ssgalpha1 → 1.29.0-ssgalpha2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.29.0-ssgalpha1",
+    "version": "1.29.0-ssgalpha2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -1,19 +1,14 @@
 import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
+import * as shiki from "shiki";
+import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
 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/dist/index.mjs"));
+    return shiki;
 }
 
 async function getBrackets() {
-    return (bracketsModulePromise ??= import(
-        "@shikijs/colorized-brackets/dist/index.mjs"
-    ));
+    return { transformerColorizedBrackets };
 }
 
 interface ShikiSingleton {
@@ -103,7 +98,7 @@ const OPTIONAL_LANGUAGES: Record<string, any> = {
     agentscript: getCustomLanguageGrammars().agentscript
 };
 
-// Initialize Shiki highlighter (lazy-load module and keep initial set minimal)
+// Initialize Shiki highlighter
 async function initializeShiki(): Promise<HighlighterCore> {
     if (shikiInstance.highlighter) {
         return shikiInstance.highlighter;
@@ -115,8 +110,8 @@ async function initializeShiki(): Promise<HighlighterCore> {
 
     // Assign promise IMMEDIATELY before any async work to prevent race conditions
     shikiInstance.initPromise = (async () => {
-        const shiki = await getShiki();
-        const highlighter = await shiki.createHighlighter({
+        const shikiModule = await getShiki();
+        const highlighter = await shikiModule.createHighlighter({
             themes: ["light-plus", "material-theme-darker"],
             langs: CORE_LANGUAGES
         });
@@ -184,12 +179,12 @@ export async function highlightCode(
             mappedLanguage = "text" as BundledLanguage;
         }
 
-        const { transformerColorizedBrackets } = await getBrackets();
+        const { transformerColorizedBrackets: transformer } = await getBrackets();
 
         return highlighter.codeToHtml(code, {
             lang: mappedLanguage,
             theme: THEME_MAP[theme],
-            transformers: [transformerColorizedBrackets()],
+            transformers: [transformer()],
             colorReplacements:
                 THEME_MAP_COLOR_REPLACEMENTS[theme].colorReplacements
         });