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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.31.9-alpha7",
+    "version": "1.31.9-alpha9",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -43,5 +43,8 @@
         "eventsourcemock": "2.0.0",
         "luxon": "3.4.4",
         "msw": "^2.12.4"
+    },
+    "volta": {
+        "node": "20.20.2"
     }
 }

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)
     });
 });
 

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/shikiCore/shikiCore.ts

@@ -100,7 +100,7 @@ const themeLoadPromises = new WeakMap<
     Map<string, Promise<void>>
 >();
 
-async function loadThemeIfNeeded(
+export async function loadThemeIfNeeded(
     highlighter: HighlighterCore,
     themeName: BundledTheme
 ): Promise<void> {
@@ -197,7 +197,9 @@ export function createShikiState(): ShikiState {
 export async function initializeHighlighter(
     shikiState: ShikiState,
     shikiModule: ShikiModule,
-    engine: any
+    engine: any,
+    langs?: any[],
+    themes?: any[]
 ): Promise<HighlighterCore> {
     if (shikiState.highlighter) {
         return shikiState.highlighter;
@@ -208,11 +210,9 @@ export async function initializeHighlighter(
     }
 
     shikiState.initPromise = (async () => {
-        // 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,
+            themes: themes ?? [THEME_MAP.light],
+            langs: langs ?? CORE_LANGUAGES,
             engine
         });
         shikiState.highlighter = highlighter;

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

@@ -1,6 +1,34 @@
-import type { HighlighterCore } from "shiki";
-import { createHighlighterCore, createJavaScriptRegexEngine } 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, { createHighlighterCore }, createJavaScriptRegexEngine());
-}
-
-/**
- * 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);
 });