@salesforcedevs/dx-components 1.30.1-node22-1 → 1.30.1

package/lwc.config.json

@@ -140,6 +140,9 @@
         "dxUtils/recentSearches",
         "dxUtils/regexps",
         "dxUtils/withTypedRefs",
-        "dxUtils/wordpress"
+        "dxUtils/wordpress",
+        "dxUtils/shiki",
+        "dxUtils/shikiStatic",
+        "dxUtils/shikiCore"
     ]
 }

package/package.json

@@ -1,14 +1,10 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.30.1-node22-1",
+    "version": "1.30.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": ">=22.0.0"
-    },
-    "volta": {
-        "node": "22.22.0",
-        "yarn": "1.22.22"
+        "node": "20.x"
     },
     "publishConfig": {
         "access": "public"
@@ -48,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "7874e944643e2f47606634d9d62ca585cefde113"
+    "gitHead": "7ea089ea32ead00fcc2c873a279464b17aee3428"
 }

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

@@ -34,7 +34,8 @@ export const createHighlighter = jest.fn().mockImplementation(() => {
                 "apex",
                 "text",
                 "handlebars"
-            ])
+            ]),
+        loadLanguage: jest.fn().mockResolvedValue(undefined)
     });
 });
 

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

@@ -21,3 +21,9 @@ export default mockLanguage;
 // Also export as named export for themes
 export const theme = mockTheme;
 export const lang = mockLanguage;
+
+// Mock for @shikijs/colorized-brackets
+export const transformerColorizedBrackets = () => ({
+    name: "colorized-brackets",
+    preprocess: (code: string) => code
+});

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

@@ -1,5 +1,17 @@
-import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
-import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
+import type { HighlighterCore } from "shiki";
+import {
+    createShikiState,
+    initializeHighlighter,
+    highlightCodeWithShiki,
+    escapeHtml as coreEscapeHtml,
+    ShikiState
+} from "dxUtils/shikiCore";
+
+/**
+ * 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.
+ */
 
 let shikiModulePromise: Promise<typeof import("shiki")> | null = null;
 let bracketsModulePromise: Promise<
@@ -14,156 +26,13 @@ async function getBrackets() {
     return (bracketsModulePromise ??= import("@shikijs/colorized-brackets"));
 }
 
-interface ShikiSingleton {
-    highlighter: HighlighterCore | null;
-    initialized: boolean;
-    initPromise: Promise<HighlighterCore> | null;
-}
-
-const shikiInstance: ShikiSingleton = {
-    highlighter: null,
-    initialized: false,
-    initPromise: null
-};
-
-// Theme mapping for light/dark modes
-const THEME_MAP: Record<string, BundledTheme> = {
-    light: "light-plus",
-    dark: "material-theme-darker"
-};
-
-const THEME_MAP_COLOR_REPLACEMENTS: Record<
-    string,
-    { colorReplacements: Record<string, string> }
-> = {
-    light: {
-        colorReplacements: {}
-    },
-    dark: {
-        colorReplacements: {
-            "#545454": "#8A8A8A" // Replace comment color for WCAG 2.1 compliance
-        }
-    }
-};
-
-// Language mapping for custom languages to supported ones
-const LANGUAGE_MAP: Record<string, BundledLanguage> = {
-    ssjs: "javascript", // Server-Side JavaScript
-    gtl: "handlebars", // Guide Template Language similar to Handlebars
-    lwc: "jsx",
-    sql_docs_template: "sql", // Custom SQL variant
-    visualforce: "html", // Visualforce uses HTML-like syntax
-    js: "javascript",
-    ts: "typescript",
-    yml: "yaml",
-    md: "markdown",
-    sh: "bash"
-};
-
-// Core languages loaded eagerly (keep minimal; load others on demand)
-const CORE_LANGUAGES: BundledLanguage[] = [
-    "apex",
-    "javascript",
-    "html",
-    "css",
-    "json",
-    "sql",
-    "bash",
-    "xml",
-    "graphql",
-    "jsx",
-    getCustomLanguageGrammars().ampscript
-];
+const shikiState: ShikiState = createShikiState();
 
-// Non-critical languages that can be loaded asynchronously when needed
-const OPTIONAL_LANGUAGES: Record<string, any> = {
-    // @ts-ignore
-    typescript: "typescript",
-    // @ts-ignore
-    markdown: "markdown",
-    // @ts-ignore
-    python: "python",
-    // @ts-ignore
-    java: "java",
-    // @ts-ignore
-    yaml: "yaml",
-    // @ts-ignore
-    php: "php",
-    // @ts-ignore
-    swift: "swift",
-    // @ts-ignore
-    kotlin: "kotlin",
-    // @ts-ignore
-    handlebars: "handlebars",
-    // @ts-ignore
-    dataweave: getCustomLanguageGrammars().dataweave,
-    // @ts-ignore
-    agentscript: getCustomLanguageGrammars().agentscript
-};
-
-// Initialize Shiki highlighter (lazy-load module and keep initial set minimal)
 async function initializeShiki(): Promise<HighlighterCore> {
-    if (shikiInstance.highlighter) {
-        return shikiInstance.highlighter;
-    }
-
-    if (shikiInstance.initPromise) {
-        return shikiInstance.initPromise;
-    }
-
-    // Assign promise IMMEDIATELY before any async work to prevent race conditions
-    shikiInstance.initPromise = (async () => {
-        const shiki = await getShiki();
-        const highlighter = await shiki.createHighlighter({
-            themes: ["light-plus", "material-theme-darker"],
-            langs: CORE_LANGUAGES
-        });
-        shikiInstance.highlighter = highlighter;
-        shikiInstance.initialized = true;
-        return highlighter;
-    })();
-
-    try {
-        return await shikiInstance.initPromise;
-    } catch (error) {
-        console.error("Failed to initialize Shiki:", error);
-        shikiInstance.initPromise = null;
-        throw error;
-    }
-}
-
-// Async function to load additional languages when needed
-async function loadLanguageIfNeeded(
-    highlighter: HighlighterCore,
-    language: string
-): Promise<void> {
-    const loadedLanguages = highlighter.getLoadedLanguages();
-
-    if (!loadedLanguages.includes(language as BundledLanguage)) {
-        // Check if it's an optional language that needs to be loaded
-        const languageLoader = OPTIONAL_LANGUAGES[language];
-
-        if (languageLoader) {
-            try {
-                await highlighter.loadLanguage(languageLoader);
-            } catch (error) {
-                console.warn(
-                    `Failed to load optional language ${language}:`,
-                    error
-                );
-            }
-        }
-    }
+    const shikiModule = await getShiki();
+    return initializeHighlighter(shikiState, shikiModule);
 }
 
-// Get the mapped language or fallback to the original
-function getMappedLanguage(language: string): BundledLanguage {
-    const mapped =
-        LANGUAGE_MAP[language.toLowerCase()] || language.toLowerCase();
-    return mapped as BundledLanguage;
-}
-
-// Highlight code with Shiki
 export async function highlightCode(
     code: string,
     language: string,
@@ -171,39 +40,20 @@ export async function highlightCode(
 ): Promise<string> {
     try {
         const highlighter = await initializeShiki();
-        let mappedLanguage = getMappedLanguage(language);
-
-        // Try to load the language asynchronously if it's not already loaded
-        await loadLanguageIfNeeded(highlighter, mappedLanguage);
-
-        // Check if the language is supported after potential async loading
-        const loadedLanguages = highlighter.getLoadedLanguages();
-        if (!loadedLanguages.includes(mappedLanguage)) {
-            mappedLanguage = "text" as BundledLanguage;
-        }
-
         const { transformerColorizedBrackets } = await getBrackets();
-
-        return highlighter.codeToHtml(code, {
-            lang: mappedLanguage,
-            theme: THEME_MAP[theme],
-            transformers: [transformerColorizedBrackets()],
-            colorReplacements:
-                THEME_MAP_COLOR_REPLACEMENTS[theme].colorReplacements
-        });
+        return highlightCodeWithShiki(
+            code,
+            language,
+            theme,
+            highlighter,
+            transformerColorizedBrackets
+        );
     } catch (error) {
         console.error("Failed to highlight code with Shiki:", error);
-        // Fallback to plain text on error
-        return `<pre class="shiki ${theme}"><code>${escapeHtml(
-            code
-        )}</code></pre>`;
+        return `<pre class="shiki ${theme}"><code>${escapeHtml(code)}</code></pre>`;
     }
 }
 
-// Utility function to escape HTML
 export function escapeHtml(text: string): string {
-    const div = document.createElement("div");
-    div.textContent = text;
-    // eslint-disable-next-line @lwc/lwc/no-inner-html
-    return div.innerHTML;
+    return coreEscapeHtml(text);
 }

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

@@ -0,0 +1,188 @@
+import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
+import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
+
+export interface ShikiModule {
+    createHighlighter: (options: {
+        themes: string[];
+        langs: BundledLanguage[];
+    }) => Promise<HighlighterCore>;
+}
+
+export interface BracketsModule {
+    transformerColorizedBrackets: () => any;
+}
+
+export interface ShikiState {
+    highlighter: HighlighterCore | null;
+    initialized: boolean;
+    initPromise: Promise<HighlighterCore> | null;
+}
+
+export const THEME_MAP: Record<string, BundledTheme> = {
+    light: "light-plus",
+    dark: "material-theme-darker"
+};
+
+export const THEME_MAP_COLOR_REPLACEMENTS: Record<
+    string,
+    { colorReplacements: Record<string, string> }
+> = {
+    light: {
+        colorReplacements: {}
+    },
+    dark: {
+        colorReplacements: {
+            "#545454": "#8A8A8A"
+        }
+    }
+};
+
+export const LANGUAGE_MAP: Record<string, BundledLanguage> = {
+    ssjs: "javascript",
+    gtl: "handlebars",
+    lwc: "jsx",
+    sql_docs_template: "sql",
+    visualforce: "html",
+    js: "javascript",
+    ts: "typescript",
+    yml: "yaml",
+    md: "markdown",
+    sh: "bash"
+};
+
+export const CORE_LANGUAGES: BundledLanguage[] = [
+    "apex",
+    "javascript",
+    "html",
+    "css",
+    "json",
+    "sql",
+    "bash",
+    "xml",
+    "graphql",
+    "jsx",
+    getCustomLanguageGrammars().ampscript
+];
+
+export const OPTIONAL_LANGUAGES: Record<string, any> = {
+    // @ts-ignore
+    typescript: "typescript",
+    // @ts-ignore
+    markdown: "markdown",
+    // @ts-ignore
+    python: "python",
+    // @ts-ignore
+    java: "java",
+    // @ts-ignore
+    yaml: "yaml",
+    // @ts-ignore
+    php: "php",
+    // @ts-ignore
+    swift: "swift",
+    // @ts-ignore
+    kotlin: "kotlin",
+    // @ts-ignore
+    handlebars: "handlebars",
+    // @ts-ignore
+    dataweave: getCustomLanguageGrammars().dataweave,
+    // @ts-ignore
+    agentscript: getCustomLanguageGrammars().agentscript
+};
+
+export async function loadLanguageIfNeeded(
+    highlighter: HighlighterCore,
+    language: string
+): Promise<void> {
+    const loadedLanguages = highlighter.getLoadedLanguages();
+
+    if (!loadedLanguages.includes(language as BundledLanguage)) {
+        const languageLoader = OPTIONAL_LANGUAGES[language];
+
+        if (languageLoader) {
+            try {
+                await highlighter.loadLanguage(languageLoader);
+            } catch (error) {
+                console.warn(
+                    `Failed to load optional language ${language}:`,
+                    error
+                );
+            }
+        }
+    }
+}
+
+export function getMappedLanguage(language: string): BundledLanguage {
+    const mapped =
+        LANGUAGE_MAP[language.toLowerCase()] || language.toLowerCase();
+    return mapped as BundledLanguage;
+}
+
+export function escapeHtml(text: string): string {
+    const div = document.createElement("div");
+    div.textContent = text;
+    // eslint-disable-next-line @lwc/lwc/no-inner-html
+    return div.innerHTML;
+}
+
+export function createShikiState(): ShikiState {
+    return {
+        highlighter: null,
+        initialized: false,
+        initPromise: null
+    };
+}
+
+export async function initializeHighlighter(
+    shikiState: ShikiState,
+    shikiModule: ShikiModule
+): Promise<HighlighterCore> {
+    if (shikiState.highlighter) {
+        return shikiState.highlighter;
+    }
+
+    if (shikiState.initPromise) {
+        return shikiState.initPromise;
+    }
+
+    shikiState.initPromise = (async () => {
+        const highlighter = await shikiModule.createHighlighter({
+            themes: ["light-plus", "material-theme-darker"],
+            langs: CORE_LANGUAGES
+        });
+        shikiState.highlighter = highlighter;
+        shikiState.initialized = true;
+        return highlighter;
+    })();
+
+    try {
+        return await shikiState.initPromise;
+    } catch (error) {
+        console.error("Failed to initialize Shiki:", error);
+        shikiState.initPromise = null;
+        throw error;
+    }
+}
+
+export async function highlightCodeWithShiki(
+    code: string,
+    language: string,
+    theme: "light" | "dark",
+    highlighter: HighlighterCore,
+    transformerColorizedBrackets: () => any
+): Promise<string> {
+    let mappedLanguage = getMappedLanguage(language);
+
+    await loadLanguageIfNeeded(highlighter, mappedLanguage);
+
+    const loadedLanguages = highlighter.getLoadedLanguages();
+    if (!loadedLanguages.includes(mappedLanguage)) {
+        mappedLanguage = "text" as BundledLanguage;
+    }
+
+    return highlighter.codeToHtml(code, {
+        lang: mappedLanguage,
+        theme: THEME_MAP[theme],
+        transformers: [transformerColorizedBrackets()],
+        colorReplacements: THEME_MAP_COLOR_REPLACEMENTS[theme].colorReplacements
+    });
+}

package/src/modules/dxUtils/shikiStatic/shikiStatic.html

@@ -0,0 +1,3 @@
+<template>
+    <!-- This is a utility module for Shiki syntax highlighting (static imports) -->
+</template>

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

@@ -0,0 +1,46 @@
+import type { HighlighterCore } from "shiki";
+import * as shikiModule from "shiki";
+import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+import {
+    createShikiState,
+    initializeHighlighter,
+    highlightCodeWithShiki,
+    escapeHtml as coreEscapeHtml,
+    ShikiState
+} from "dxUtils/shikiCore";
+
+/**
+ * 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.
+ */
+
+const shikiState: ShikiState = createShikiState();
+
+async function initializeShiki(): Promise<HighlighterCore> {
+    return initializeHighlighter(shikiState, shikiModule);
+}
+
+export async function highlightCode(
+    code: string,
+    language: string,
+    theme: "light" | "dark" = "light"
+): Promise<string> {
+    try {
+        const highlighter = await initializeShiki();
+        return highlightCodeWithShiki(
+            code,
+            language,
+            theme,
+            highlighter,
+            transformerColorizedBrackets
+        );
+    } catch (error) {
+        console.error("Failed to highlight code with Shiki:", error);
+        return `<pre class="shiki ${theme}"><code>${escapeHtml(code)}</code></pre>`;
+    }
+}
+
+export function escapeHtml(text: string): string {
+    return coreEscapeHtml(text);
+}