@salesforcedevs/dx-components 1.18.5 → 1.18.6-dynamic-pg-border2

package/src/modules/dxUtils/shiki/shiki.html

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

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

@@ -0,0 +1,192 @@
+import * as shiki from "shiki";
+
+import type { BundledLanguage, BundledTheme } from "shiki";
+import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
+
+interface ShikiSingleton {
+    highlighter: shiki.HighlighterCore | null;
+    initialized: boolean;
+    initPromise: Promise<shiki.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 that should be loaded immediately for best performance
+const CORE_LANGUAGES = [
+    "apex",
+    "javascript",
+    "html",
+    "css",
+    "json",
+    "sql",
+    "bash",
+    "xml",
+    "graphql",
+    "jsx",
+    getCustomLanguageGrammars().ampscript
+];
+
+// 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
+    afscript: getCustomLanguageGrammars().afscript
+};
+
+// Initialize Shiki highlighter with fine-grained modules for better performance
+async function initializeShiki(): Promise<shiki.HighlighterCore> {
+    if (shikiInstance.highlighter) {
+        return shikiInstance.highlighter;
+    }
+
+    if (shikiInstance.initPromise) {
+        return shikiInstance.initPromise;
+    }
+
+    shikiInstance.initPromise = shiki.createHighlighter({
+        themes: ["light-plus", "material-theme-darker"],
+        langs: CORE_LANGUAGES
+    });
+
+    try {
+        shikiInstance.highlighter = await shikiInstance.initPromise;
+        shikiInstance.initialized = true;
+        return shikiInstance.highlighter;
+    } 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: shiki.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
+                );
+            }
+        }
+    }
+}
+
+// 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,
+    theme: "light" | "dark" = "light"
+): 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;
+        }
+
+        return highlighter.codeToHtml(code, {
+            lang: mappedLanguage,
+            theme: THEME_MAP[theme],
+            transformers: [transformerColorizedBrackets()],
+            colorReplacements:
+                THEME_MAP_COLOR_REPLACEMENTS[theme].colorReplacements
+        });
+    } 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>`;
+    }
+}
+
+// Utility function to escape HTML
+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;
+}

package/src/modules/dxUtils/shikiGrammars/shikiGrammars.html

@@ -0,0 +1,3 @@
+<template>
+    <!-- This is a utility module for importing custom language grammars for Shiki -->
+</template>