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

package/package.json

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

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -406,6 +406,7 @@ export default class CodeBlock extends LightningElement {
             ) || this.allLanguages[0];
         this.selectedLanguageLabel = this.selectedLanguage.label;
         this.selectedLanguageId = this.selectedLanguage.id;
+
         this.formatCodeBlock();
     }
 

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

@@ -35,7 +35,9 @@ export const createHighlighter = jest.fn().mockImplementation(() => {
                 "text",
                 "handlebars"
             ]),
-        loadLanguage: jest.fn().mockResolvedValue(undefined)
+        getLoadedThemes: jest.fn().mockReturnValue(["light-plus", "material-theme-darker"]),
+        loadLanguage: jest.fn().mockResolvedValue(undefined),
+        loadTheme: jest.fn().mockResolvedValue(undefined)
     });
 });
 
@@ -92,7 +94,9 @@ export const createHighlighterCore = jest.fn().mockImplementation(() => {
                 "text",
                 "handlebars"
             ]),
-        loadLanguage: jest.fn().mockResolvedValue(undefined)
+        getLoadedThemes: jest.fn().mockReturnValue(["light-plus", "material-theme-darker"]),
+        loadLanguage: jest.fn().mockResolvedValue(undefined),
+        loadTheme: jest.fn().mockResolvedValue(undefined)
     });
 });
 
@@ -107,5 +111,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/__mocks__/shikiLang.ts

@@ -0,0 +1,6 @@
+// Mock default export for individual shiki language grammar files (shiki/langs/*)
+export default {
+    name: "mock-lang",
+    scopeName: "source.mock",
+    patterns: []
+};

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

@@ -0,0 +1,5 @@
+// Mock default export for individual shiki theme files (shiki/themes/*)
+export default {
+    name: "mock-theme",
+    type: "light" as const
+};

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>>
+>();
+
+export 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,10 @@ export function createShikiState(): ShikiState {
 
 export async function initializeHighlighter(
     shikiState: ShikiState,
-    shikiModule: ShikiModule
+    shikiModule: ShikiModule,
+    engine: any,
+    langs?: any[],
+    themes?: any[]
 ): Promise<HighlighterCore> {
     if (shikiState.highlighter) {
         return shikiState.highlighter;
@@ -171,9 +210,10 @@ export async function initializeHighlighter(
     }
 
     shikiState.initPromise = (async () => {
-        const highlighter = await shikiModule.createHighlighter({
-            themes: ["light-plus", "material-theme-darker"],
-            langs: CORE_LANGUAGES
+        const highlighter = await shikiModule.createHighlighterCore({
+            themes: themes ?? [THEME_MAP.light],
+            langs: 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,6 +1,34 @@
-import type { HighlighterCore } from "shiki";
-import * as shikiModule from "shiki";
+import type { HighlighterCore } from "shiki/core";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+
+// Individual language grammars — the bundler only processes these ~19 files
+// instead of shiki's bundle-full.mjs which contains all 638 language factories.
+import apex from "shiki/langs/apex.mjs";
+import javascript from "shiki/langs/javascript.mjs";
+import html from "shiki/langs/html.mjs";
+import css from "shiki/langs/css.mjs";
+import json from "shiki/langs/json.mjs";
+import sql from "shiki/langs/sql.mjs";
+import bash from "shiki/langs/bash.mjs";
+import xml from "shiki/langs/xml.mjs";
+import graphql from "shiki/langs/graphql.mjs";
+import jsx from "shiki/langs/jsx.mjs";
+import typescript from "shiki/langs/typescript.mjs";
+import markdown from "shiki/langs/markdown.mjs";
+import python from "shiki/langs/python.mjs";
+import java from "shiki/langs/java.mjs";
+import yaml from "shiki/langs/yaml.mjs";
+import php from "shiki/langs/php.mjs";
+import swift from "shiki/langs/swift.mjs";
+import kotlin from "shiki/langs/kotlin.mjs";
+import handlebars from "shiki/langs/handlebars.mjs";
+
+// Individual themes — avoids loading all bundled themes.
+import lightPlusTheme from "shiki/themes/light-plus.mjs";
+import darkTheme from "shiki/themes/material-theme-darker.mjs";
+
 import {
     createShikiState,
     initializeHighlighter,
@@ -8,30 +36,41 @@ import {
     escapeHtml as coreEscapeHtml,
     ShikiState
 } from "dxUtils/shikiCore";
+import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
 
 /**
- * Static loading version of Shiki.
- * Uses static imports - shiki is bundled with this module.
- * Use this for SSG compatibility and it is very specific to SSG generated components using LWR.
+ * Static loading version of Shiki for SSG.
+ * Imports from shiki/core + individual language/theme files so the bundler
+ * only processes what is actually used, instead of shiki's bundle-full.mjs
+ * (638 language factories).
  */
 
+// All languages loaded upfront — custom grammars are grammar objects already.
+const ALL_LANGUAGES = [
+    apex, javascript, html, css, json, sql, bash, xml, graphql, jsx,
+    typescript, markdown, python, java, yaml, php, swift, kotlin, handlebars,
+    getCustomLanguageGrammars().ampscript,
+    getCustomLanguageGrammars().dataweave,
+    getCustomLanguageGrammars().agentscript
+];
+
+// Both themes loaded upfront so theme switching has no cold-start cost.
+const ALL_THEMES = [lightPlusTheme, darkTheme];
+
 const shikiState: ShikiState = createShikiState();
 
 async function initializeShiki(): Promise<HighlighterCore> {
-    return initializeHighlighter(shikiState, shikiModule);
-}
-
-/**
- * Pre-warms the Shiki highlighter. Call once at SSG startup (before pages
- * render) so code blocks don't pay the cold-start cost on first render.
- */
-export async function preloadShiki(): Promise<void> {
-    await initializeShiki();
+    return initializeHighlighter(
+        shikiState,
+        { createHighlighterCore },
+        createJavaScriptRegexEngine(),
+        ALL_LANGUAGES,
+        ALL_THEMES
+    );
 }
 
-// Eagerly kick off initialization at module import time.
-// In SSG, this module is imported during LWR startup — by the time
-// the first code block renders, the highlighter will already be ready.
+// Eagerly kick off initialization at module import time so Shiki is ready
+// before the first code block renders.
 initializeShiki().catch((err) => {
     console.error("Shiki pre-warming failed:", err);
 });