@salesforcedevs/dx-components 1.20.7 → 1.20.8-fine-shiki

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.20.7",
+    "version": "1.20.8-fine-shiki",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,6 +46,5 @@
     "volta": {
         "node": "20.19.0",
         "yarn": "1.22.19"
-    },
-    "gitHead": "fffbef4d7b536a321824457c6a987e53830a78f1"
+    }
 }

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

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
 import { track as gtmTrack } from "dxUtils/analytics";
-import { highlightCode } from "dxUtils/shiki";
+import { highlightCode, escapeHtml } from "dxUtils/shiki";
 
 /*
     Custom language support is handled by the Shiki wrapper module
@@ -118,10 +118,34 @@ export default class CodeBlock extends LightningElement {
         this.initializeTheme();
     }
 
+    // Show plain text immediately, no waiting for highlighting
+    private renderPlainCode(
+        cleanCodeBlock: string,
+        templateEl: HTMLTemplateElement,
+        divEl: HTMLElement | null
+    ) {
+        if (divEl) {
+            // Theme-specific colors to match Shiki's output
+            const bgColor = this.theme === DARK ? "#212121" : "#FFFFFF";
+            const textColor = this.theme === DARK ? "#EEFFFF" : "#000000";
+
+            // eslint-disable-next-line
+            templateEl.innerHTML = `<pre class='shiki' style='background-color: ${bgColor}; color: ${textColor};'><code>${escapeHtml(
+                cleanCodeBlock
+            )}</code></pre>`;
+            // eslint-disable-next-line
+            divEl.innerHTML = "";
+            divEl.append(templateEl.content);
+        }
+    }
+
     async formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
 
+        // Render plain code immediately
+        this.renderPlainCode(this.codeBlock, templateEl, divEl);
+
         // Decode HTML entities if the code is already encoded
         let cleanCodeBlock = this.codeBlock;
         if (this.isEncoded) {

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

@@ -1,13 +1,39 @@
-import * as shiki from "shiki";
-
-import type { BundledLanguage, BundledTheme } from "shiki";
-import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+import type { BundledLanguage, HighlighterCore } from "shiki";
 import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
 
+// Fine-grained bundle promises for lazy loading
+let shikiCorePromise: Promise<typeof import("shiki/core")> | null = null;
+let shikiEnginePromise: Promise<
+    typeof import("shiki/engine/oniguruma")
+> | null = null;
+let shikiWasmPromise: Promise<typeof import("shiki/wasm")> | null = null;
+let bracketsModulePromise: Promise<
+    typeof import("@shikijs/colorized-brackets")
+> | null = null;
+
+// Lazy load core Shiki functions
+async function getShikiCore() {
+    return (shikiCorePromise ??= import("shiki/core"));
+}
+
+// Lazy load Oniguruma engine
+async function getShikiEngine() {
+    return (shikiEnginePromise ??= import("shiki/engine/oniguruma"));
+}
+
+// Lazy load WASM module
+async function getShikiWasm() {
+    return (shikiWasmPromise ??= import("shiki/wasm"));
+}
+
+async function getBrackets() {
+    return (bracketsModulePromise ??= import("@shikijs/colorized-brackets"));
+}
+
 interface ShikiSingleton {
-    highlighter: shiki.HighlighterCore | null;
+    highlighter: HighlighterCore | null;
     initialized: boolean;
-    initPromise: Promise<shiki.HighlighterCore> | null;
+    initPromise: Promise<HighlighterCore> | null;
 }
 
 const shikiInstance: ShikiSingleton = {
@@ -17,10 +43,22 @@ const shikiInstance: ShikiSingleton = {
 };
 
 // Theme mapping for light/dark modes
-const THEME_MAP: Record<string, BundledTheme> = {
+const THEME_MAP = {
     light: "light-plus",
     dark: "material-theme-darker"
-};
+} as const;
+
+// Lazy load themes
+async function getTheme(themeName: string) {
+    if (themeName === "light-plus") {
+        return import("@shikijs/themes/light-plus").then((m) => m.default);
+    } else if (themeName === "material-theme-darker") {
+        return import("@shikijs/themes/material-theme-darker").then(
+            (m) => m.default
+        );
+    }
+    throw new Error(`Unknown theme: ${themeName}`);
+}
 
 const THEME_MAP_COLOR_REPLACEMENTS: Record<
     string,
@@ -50,8 +88,8 @@ const LANGUAGE_MAP: Record<string, BundledLanguage> = {
     sh: "bash"
 };
 
-// Core languages that should be loaded immediately for best performance
-const CORE_LANGUAGES = [
+// Core languages loaded eagerly (keep minimal; load others on demand)
+const CORE_LANGUAGES: BundledLanguage[] = [
     "apex",
     "javascript",
     "html",
@@ -61,10 +99,79 @@ const CORE_LANGUAGES = [
     "bash",
     "xml",
     "graphql",
-    "jsx",
-    getCustomLanguageGrammars().ampscript
+    "jsx"
 ];
 
+// Custom language names
+const CUSTOM_LANGUAGE_NAMES = ["ampscript", "dataweave", "agentscript"];
+
+// Lazy load language grammars from fine-grained bundles
+// Using static imports to satisfy LWC's strict mode requirements
+async function getLanguageGrammar(lang: BundledLanguage | string) {
+    const customGrammars = getCustomLanguageGrammars();
+
+    // Check if it's a custom grammar first
+    if (lang === "ampscript") {
+        return customGrammars.ampscript;
+    }
+    if (lang === "dataweave") {
+        return customGrammars.dataweave;
+    }
+    if (lang === "agentscript") {
+        return customGrammars.agentscript;
+    }
+
+    // Static imports from @shikijs/langs (LWC strict mode requirement)
+    try {
+        switch (lang) {
+            case "apex":
+                return (await import("@shikijs/langs/apex")).default;
+            case "javascript":
+                return (await import("@shikijs/langs/javascript")).default;
+            case "html":
+                return (await import("@shikijs/langs/html")).default;
+            case "css":
+                return (await import("@shikijs/langs/css")).default;
+            case "json":
+                return (await import("@shikijs/langs/json")).default;
+            case "sql":
+                return (await import("@shikijs/langs/sql")).default;
+            case "bash":
+                return (await import("@shikijs/langs/bash")).default;
+            case "xml":
+                return (await import("@shikijs/langs/xml")).default;
+            case "graphql":
+                return (await import("@shikijs/langs/graphql")).default;
+            case "jsx":
+                return (await import("@shikijs/langs/jsx")).default;
+            case "typescript":
+                return (await import("@shikijs/langs/typescript")).default;
+            case "markdown":
+                return (await import("@shikijs/langs/markdown")).default;
+            case "python":
+                return (await import("@shikijs/langs/python")).default;
+            case "java":
+                return (await import("@shikijs/langs/java")).default;
+            case "yaml":
+                return (await import("@shikijs/langs/yaml")).default;
+            case "php":
+                return (await import("@shikijs/langs/php")).default;
+            case "swift":
+                return (await import("@shikijs/langs/swift")).default;
+            case "kotlin":
+                return (await import("@shikijs/langs/kotlin")).default;
+            case "handlebars":
+                return (await import("@shikijs/langs/handlebars")).default;
+            default:
+                console.warn(`Language grammar not available for: ${lang}`);
+                return null;
+        }
+    } catch (error) {
+        console.warn(`Failed to load language grammar for ${lang}:`, error);
+        return null;
+    }
+}
+
 // Non-critical languages that can be loaded asynchronously when needed
 const OPTIONAL_LANGUAGES: Record<string, any> = {
     // @ts-ignore
@@ -91,8 +198,8 @@ const OPTIONAL_LANGUAGES: Record<string, any> = {
     agentscript: getCustomLanguageGrammars().agentscript
 };
 
-// Initialize Shiki highlighter with fine-grained modules for better performance
-async function initializeShiki(): Promise<shiki.HighlighterCore> {
+// Initialize Shiki highlighter (lazy-load module and keep initial set minimal)
+async function initializeShiki(): Promise<HighlighterCore> {
     if (shikiInstance.highlighter) {
         return shikiInstance.highlighter;
     }
@@ -101,10 +208,39 @@ async function initializeShiki(): Promise<shiki.HighlighterCore> {
         return shikiInstance.initPromise;
     }
 
-    shikiInstance.initPromise = shiki.createHighlighter({
-        themes: ["light-plus", "material-theme-darker"],
-        langs: CORE_LANGUAGES
-    });
+    shikiInstance.initPromise = (async () => {
+        // Load core modules with fine-grained bundles
+        const [shikiCore, engine, wasm] = await Promise.all([
+            getShikiCore(),
+            getShikiEngine(),
+            getShikiWasm()
+        ]);
+
+        // Load themes
+        const [lightTheme, darkTheme] = await Promise.all([
+            getTheme("light-plus"),
+            getTheme("material-theme-darker")
+        ]);
+
+        // Load core language grammars (bundled + custom)
+        const allCoreLanguages = [...CORE_LANGUAGES, ...CUSTOM_LANGUAGE_NAMES];
+        const coreLanguageGrammars = await Promise.all(
+            allCoreLanguages.map((lang) => getLanguageGrammar(lang))
+        );
+        // Filter out null values with type guard
+        const validLanguageGrammars = coreLanguageGrammars.filter(
+            (grammar): grammar is NonNullable<typeof grammar> =>
+                grammar !== null
+        );
+
+        // Create highlighter with fine-grained bundles
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return shikiCore.createHighlighterCore({
+            themes: [lightTheme, darkTheme],
+            langs: validLanguageGrammars as any,
+            engine: engine.createOnigurumaEngine(wasm.default)
+        });
+    })();
 
     try {
         shikiInstance.highlighter = await shikiInstance.initPromise;
@@ -119,18 +255,25 @@ async function initializeShiki(): Promise<shiki.HighlighterCore> {
 
 // Async function to load additional languages when needed
 async function loadLanguageIfNeeded(
-    highlighter: shiki.HighlighterCore,
+    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];
+        const languageKey = OPTIONAL_LANGUAGES[language];
 
-        if (languageLoader) {
+        if (languageKey) {
             try {
-                await highlighter.loadLanguage(languageLoader);
+                // Load the language grammar using fine-grained bundles
+                const langGrammar = await getLanguageGrammar(
+                    typeof languageKey === "string" ? languageKey : language
+                );
+                if (langGrammar) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    await highlighter.loadLanguage(langGrammar as any);
+                }
             } catch (error) {
                 console.warn(
                     `Failed to load optional language ${language}:`,
@@ -167,6 +310,8 @@ export async function highlightCode(
             mappedLanguage = "text" as BundledLanguage;
         }
 
+        const { transformerColorizedBrackets } = await getBrackets();
+
         return highlighter.codeToHtml(code, {
             lang: mappedLanguage,
             theme: THEME_MAP[theme],
@@ -184,7 +329,7 @@ export async function highlightCode(
 }
 
 // Utility function to escape HTML
-function escapeHtml(text: string): string {
+export function escapeHtml(text: string): string {
     const div = document.createElement("div");
     div.textContent = text;
     // eslint-disable-next-line @lwc/lwc/no-inner-html

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.