@salesforcedevs/dx-components 1.31.9-alpha5 → 1.31.9-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.31.9-alpha5",
+    "version": "1.31.9-alpha7",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -107,5 +107,10 @@ export const createOnigurumaEngine = jest.fn().mockImplementation(() => {
     return Promise.resolve({});
 });
 
+// Mock for shiki/engine/javascript
+export const createJavaScriptRegexEngine = jest.fn().mockImplementation(() => {
+    return {};
+});
+
 // Mock for shiki/wasm - just return a promise that resolves to a buffer
 export default Promise.resolve(new ArrayBuffer(0));

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

@@ -10,16 +10,22 @@ import {
 /**
  * Dynamic loading version of Shiki.
  * Uses dynamic import() for code splitting - shiki is lazy loaded on first use.
- * Note: May not work with SSG. Use dxUtils/shikiStatic for SSG compatibility.
+ * Uses createJavaScriptRegexEngine (no WASM) so it works in LWR at runtime.
  */
 
-let shikiModulePromise: Promise<typeof import("shiki")> | null = null;
+let shikiModulePromise: Promise<{
+    createHighlighterCore: any;
+    createJavaScriptRegexEngine: any;
+}> | null = null;
 let bracketsModulePromise: Promise<
     typeof import("@shikijs/colorized-brackets")
 > | null = null;
 
 async function getShiki() {
-    return (shikiModulePromise ??= import("shiki"));
+    return (shikiModulePromise ??= import("shiki").then((m) => ({
+        createHighlighterCore: m.createHighlighterCore,
+        createJavaScriptRegexEngine: m.createJavaScriptRegexEngine
+    })));
 }
 
 async function getBrackets() {
@@ -29,8 +35,8 @@ async function getBrackets() {
 const shikiState: ShikiState = createShikiState();
 
 async function initializeShiki(): Promise<HighlighterCore> {
-    const shikiModule = await getShiki();
-    return initializeHighlighter(shikiState, shikiModule);
+    const { createHighlighterCore, createJavaScriptRegexEngine } = await getShiki();
+    return initializeHighlighter(shikiState, { createHighlighterCore }, createJavaScriptRegexEngine());
 }
 
 export async function highlightCode(

package/src/modules/dxUtils/shikiCore/shikiCore.ts

@@ -2,9 +2,10 @@ import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
 import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
 
 export interface ShikiModule {
-    createHighlighter: (options: {
-        themes: string[];
-        langs: BundledLanguage[];
+    createHighlighterCore: (options: {
+        themes: any[];
+        langs: any[];
+        engine: any;
     }) => Promise<HighlighterCore>;
 }
 
@@ -94,6 +95,41 @@ const languageLoadPromises = new WeakMap<
     Map<string, Promise<void>>
 >();
 
+const themeLoadPromises = new WeakMap<
+    HighlighterCore,
+    Map<string, Promise<void>>
+>();
+
+async function loadThemeIfNeeded(
+    highlighter: HighlighterCore,
+    themeName: BundledTheme
+): Promise<void> {
+    if ((highlighter.getLoadedThemes() as string[]).includes(themeName)) {
+        return;
+    }
+
+    if (!themeLoadPromises.has(highlighter)) {
+        themeLoadPromises.set(highlighter, new Map());
+    }
+    const promiseMap = themeLoadPromises.get(highlighter)!;
+
+    if (promiseMap.has(themeName)) {
+        return promiseMap.get(themeName);
+    }
+
+    const loadPromise = (async () => {
+        try {
+            await highlighter.loadTheme(themeName);
+        } catch (error) {
+            promiseMap.delete(themeName);
+            console.warn(`Failed to load theme ${themeName}:`, error);
+        }
+    })();
+
+    promiseMap.set(themeName, loadPromise);
+    return loadPromise;
+}
+
 export async function loadLanguageIfNeeded(
     highlighter: HighlighterCore,
     language: string
@@ -160,7 +196,8 @@ export function createShikiState(): ShikiState {
 
 export async function initializeHighlighter(
     shikiState: ShikiState,
-    shikiModule: ShikiModule
+    shikiModule: ShikiModule,
+    engine: any
 ): Promise<HighlighterCore> {
     if (shikiState.highlighter) {
         return shikiState.highlighter;
@@ -171,9 +208,12 @@ export async function initializeHighlighter(
     }
 
     shikiState.initPromise = (async () => {
-        const highlighter = await shikiModule.createHighlighter({
-            themes: ["light-plus", "material-theme-darker"],
-            langs: CORE_LANGUAGES
+        // Only load the default light theme upfront; dark theme is lazy-loaded
+        // on first dark-mode request via loadThemeIfNeeded().
+        const highlighter = await shikiModule.createHighlighterCore({
+            themes: [THEME_MAP.light],
+            langs: CORE_LANGUAGES,
+            engine
         });
         shikiState.highlighter = highlighter;
         shikiState.initialized = true;
@@ -198,7 +238,11 @@ export async function highlightCodeWithShiki(
 ): Promise<string> {
     let mappedLanguage = getMappedLanguage(language);
 
-    await loadLanguageIfNeeded(highlighter, mappedLanguage);
+    const themeName = THEME_MAP[theme];
+    await Promise.all([
+        loadLanguageIfNeeded(highlighter, mappedLanguage),
+        loadThemeIfNeeded(highlighter, themeName)
+    ]);
 
     const loadedLanguages = highlighter.getLoadedLanguages();
     if (!loadedLanguages.includes(mappedLanguage)) {
@@ -207,7 +251,7 @@ export async function highlightCodeWithShiki(
 
     return highlighter.codeToHtml(code, {
         lang: mappedLanguage,
-        theme: THEME_MAP[theme],
+        theme: themeName,
         transformers: [transformerColorizedBrackets()],
         colorReplacements: THEME_MAP_COLOR_REPLACEMENTS[theme].colorReplacements
     });

package/src/modules/dxUtils/shikiGrammars/shikiGrammars.ts

@@ -1,4 +1,4 @@
-const dataweaveGrammar = {
+function createDataweaveGrammar() { return {
     name: "dataweave",
     scopeName: "source.data-weave",
     fileTypes: ["dwl"],
@@ -1121,7 +1121,7 @@ const dataweaveGrammar = {
             ]
         }
     }
-};
+}; }
 
 const ampscriptGrammar = {
     version: "2.0",
@@ -1300,7 +1300,7 @@ const ampscriptGrammar = {
     }
 };
 
-const agentscriptGrammar = {
+function createAgentscriptGrammar() { return {
     name: "agentscript",
     scopeName: "source.agentscript",
     fileTypes: ["agent"],
@@ -2479,12 +2479,12 @@ const agentscriptGrammar = {
             ]
         }
     }
-};
+}; }
 
 export function getCustomLanguageGrammars() {
     return {
-        dataweave: dataweaveGrammar,
+        dataweave: createDataweaveGrammar,
         ampscript: ampscriptGrammar,
-        agentscript: agentscriptGrammar
+        agentscript: createAgentscriptGrammar
     };
 }

package/src/modules/dxUtils/shikiStatic/shikiStatic.ts

@@ -1,5 +1,5 @@
 import type { HighlighterCore } from "shiki";
-import * as shikiModule from "shiki";
+import { createHighlighterCore, createJavaScriptRegexEngine } from "shiki";
 import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
 import {
     createShikiState,
@@ -18,7 +18,7 @@ import {
 const shikiState: ShikiState = createShikiState();
 
 async function initializeShiki(): Promise<HighlighterCore> {
-    return initializeHighlighter(shikiState, shikiModule);
+    return initializeHighlighter(shikiState, { createHighlighterCore }, createJavaScriptRegexEngine());
 }
 
 /**