@salesforcedevs/dx-components 1.18.6 → 1.18.8-layoutfix-alpha

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,210 @@
+import { createHighlighterCore, HighlighterCore } from "shiki/core";
+import type { BundledLanguage, BundledTheme } from "shiki";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import { transformerColorizedBrackets } from "@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 that should be loaded immediately for best performance
+const CORE_LANGUAGES = [
+    // @ts-ignore
+    () => import("@shikijs/langs/apex"),
+    // @ts-ignore
+    () => import("@shikijs/langs/javascript"),
+    // @ts-ignore
+    () => import("@shikijs/langs/html"),
+    // @ts-ignore
+    () => import("@shikijs/langs/css"),
+    // @ts-ignore
+    () => import("@shikijs/langs/json"),
+    // @ts-ignore
+    () => import("@shikijs/langs/sql"),
+    // @ts-ignore
+    () => import("@shikijs/langs/bash"),
+    // @ts-ignore
+    () => import("@shikijs/langs/xml"),
+    // @ts-ignore
+    () => import("@shikijs/langs/graphql"),
+    // @ts-ignore
+    () => import("@shikijs/langs/jsx"),
+    // @ts-ignore
+    () => import("./customLanguages/ampscript.tmLanguage.json")
+];
+
+// Non-critical languages that can be loaded asynchronously when needed
+const OPTIONAL_LANGUAGES: Record<string, () => Promise<any>> = {
+    // @ts-ignore
+    typescript: () => import("@shikijs/langs/typescript"),
+    // @ts-ignore
+    markdown: () => import("@shikijs/langs/markdown"),
+    // @ts-ignore
+    python: () => import("@shikijs/langs/python"),
+    // @ts-ignore
+    java: () => import("@shikijs/langs/java"),
+    // @ts-ignore
+    yaml: () => import("@shikijs/langs/yaml"),
+    // @ts-ignore
+    php: () => import("@shikijs/langs/php"),
+    // @ts-ignore
+    swift: () => import("@shikijs/langs/swift"),
+    // @ts-ignore
+    kotlin: () => import("@shikijs/langs/kotlin"),
+    // @ts-ignore
+    handlebars: () => import("@shikijs/langs/handlebars"),
+    // @ts-ignore
+    dataweave: () => import("./customLanguages/dataweave.tmLanguage.json"),
+    // @ts-ignore
+    afscript: () => import("./customLanguages/afscript.tmLanguage.json")
+};
+
+// Initialize Shiki highlighter with fine-grained modules for better performance
+async function initializeShiki(): Promise<HighlighterCore> {
+    if (shikiInstance.highlighter) {
+        return shikiInstance.highlighter;
+    }
+
+    if (shikiInstance.initPromise) {
+        return shikiInstance.initPromise;
+    }
+
+    shikiInstance.initPromise = createHighlighterCore({
+        themes: [
+            // @ts-ignore
+            import("@shikijs/themes/light-plus"),
+            // @ts-ignore
+            import("@shikijs/themes/material-theme-darker")
+        ],
+        langs: CORE_LANGUAGES,
+        engine: createOnigurumaEngine(import("shiki/wasm"))
+    });
+
+    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: 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 {
+                const languageModule = await languageLoader();
+                await highlighter.loadLanguage(
+                    languageModule.default || languageModule
+                );
+            } 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/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.

package/src/modules/dx/codeBlock/customLanguages.js

@@ -1,48 +0,0 @@
-export const ampscript = {
-    pattern: /%%=\s*([\s\S]*?)\s*=%%|%%\[([\s\S]*?)\]%%/,
-    greedy: true,
-    inside: {
-        delimiter: {
-            pattern: /%%=|=%%|%%\[|\]%%/,
-            alias: "operator"
-        },
-        comment: {
-            pattern: /(\/\/.*|\/\*[\s\S]*?\*\/)/,
-            greedy: true
-        },
-        string: {
-            pattern: /(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,
-            greedy: true,
-            inside: {
-                escape: /\\./
-            }
-        },
-        function: {
-            pattern: /\b\w+\b(?=\()/i,
-            greedy: true
-        },
-        boolean: /\b(true|false|null)\b/i,
-        number: /\b(0(x|X)[0-9a-fA-F]+|([0-9]+(\.[0-9]+)?))\b/,
-        keyword:
-            /\b(do|else|elseif|for|if(?:\s+not)?|endif|next|then|to|downto|var|set)\b/i,
-        operator: /==|!=|>|<|>=|<=|=/,
-        variable: {
-            pattern: /@\w+|\[\w+\]/,
-            greedy: true
-        },
-        constant:
-            /\b(xtmonth|xtmonthnumeric|xtday|xtdayofweek|xtyear|xtshortdate|xtlongdate)\b/i,
-        logical: /\b(and|or|not)\b/i
-    }
-};
-
-export const sqlDocsTemplate = {
-    comment: /--.*/,
-    variable: [
-        /<[^>\s]+>/,
-        { pattern: /(\s|\[|\[, ])\.\.\.(?=\]|\))/, lookbehind: true }
-    ],
-    keyword: /\b[A-Z_]+\b/,
-    string: /'[^']*'/,
-    punctuation: /[;[\]{}]/
-};

package/src/modules/dx/codeBlock/darkAndLightThemes.css

@@ -1,177 +0,0 @@
-/* 
-    A11y syntax highlighting comes from this npm package (release 1.2.0):
-    https://github.com/ericwbailey/a11y-syntax-highlighting/releases
-    The colors used are from the files prism/a11y-light.css and prism/a11y-dark.css with
-    some minor modifications to work with our existing classes.
-*/
-
-.dx-theme-dark {
-    --prism-a11y-border-radius: 0.3em;
-    --prism-a11y-font-family: "consolas", "monaco", "Andale Mono", "Ubuntu Mono",
-        monospace;
-    --prism-a11y-line-height: 1.5;
-    --prism-a11y-code-block-margin: 0.5em 0;
-    --prism-a11y-code-block-padding: 1em;
-    --prism-a11y-code-inline-padding: 0.1em;
-    --prism-a11y-width-border: 1px;
-    --prism-a11y-width-tab: 2;
-    --prism-a11y-color-background: hsl(0deg 0% 17% / 100%);
-    --prism-a11y-color-text-no-token: hsl(60deg 30% 96% / 100%);
-    --prism-a11y-color-text-comment: hsl(54deg 32% 75% / 100%);
-    --prism-a11y-color-text-blue: hsl(180deg 100% 44% / 100%);
-    --prism-a11y-color-text-green: hsl(80deg 75% 55% / 100%);
-    --prism-a11y-color-text-gray: hsl(60deg 30% 96% / 100%);
-    --prism-a11y-color-text-purple: hsl(291deg 30% 83% / 100%);
-    --prism-a11y-color-text-red: hsl(17deg 100% 74% / 100%);
-    --prism-a11y-color-text-yellow: hsl(51deg 100% 50% / 100%);
-    --prism-a11y-plugin-color-border: hsl(51deg 100% 50% / 55%);
-    --prism-a11y-plugin-color-background: hsl(51deg 100% 50% / 10%);
-}
-
-.dx-theme-light {
-    --prism-a11y-border-radius: 0.3em;
-    --prism-a11y-font-family: "consolas", "monaco", "Andale Mono", "Ubuntu Mono",
-        monospace;
-    --prism-a11y-line-height: 1.5;
-    --prism-a11y-code-block-margin: 0.5em 0;
-    --prism-a11y-code-block-padding: 1em;
-    --prism-a11y-code-inline-padding: 0.1em;
-    --prism-a11y-width-border: 1px;
-    --prism-a11y-width-tab: 2;
-    --prism-a11y-color-background: hsl(0deg 0% 100% / 100%);
-    --prism-a11y-color-text-no-token: hsl(0deg 0% 33% / 100%);
-    --prism-a11y-color-text-comment: hsl(16deg 100% 25% / 100%);
-    --prism-a11y-color-text-blue: hsl(195deg 100% 30% / 100%);
-    --prism-a11y-color-text-green: hsl(120deg 100% 25% / 100%);
-    --prism-a11y-color-text-gray: hsl(0deg 0% 41% / 100%);
-    --prism-a11y-color-text-purple: hsl(282deg 100% 41% / 100%);
-    --prism-a11y-color-text-red: hsl(2deg 80% 47% / 100%);
-    --prism-a11y-color-text-yellow: hsl(43deg 74% 30% / 100%);
-    --prism-a11y-plugin-color-border: hsl(43deg 74% 30% / 55%);
-    --prism-a11y-plugin-color-background: hsl(43deg 74% 30% / 10%);
-}
-
-.dx-theme-dark pre[class*="language-"] {
-    background: var(--prism-a11y-color-background);
-}
-
-.dx-theme-light pre[class*="language-"] {
-    background: var(--prism-a11y-color-background);
-}
-
-:where(code[class*="language-"], pre[class*="language-"]) {
-    color: var(--prism-a11y-color-text-no-token);
-    background: var(--prism-a11y-color-background);
-    font-family: var(--prism-a11y-font-family);
-    text-align: start;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: var(--prism-a11y-line-height);
-    tab-size: var(--prism-a11y-width-tab);
-    hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-    padding: var(--prism-a11y-code-block-padding);
-    margin: var(--prism-a11y-code-block-margin);
-    overflow: auto;
-    border-radius: var(--prism-a11y-border-radius);
-}
-
-:where(:not(pre) > code[class*="language-"], pre[class*="language-"]) {
-    background: var(--prism-a11y-color-background);
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-    padding: var(--prism-a11y-code-inline-padding);
-    border-radius: var(--prism-a11y-border-radius);
-    white-space: normal;
-}
-
-:where(.token.comment, .token.prolog, .token.doctype, .token.cdata) {
-    color: var(--prism-a11y-color-text-comment);
-}
-
-.token.punctuation {
-    color: var(--prism-a11y-color-text-gray);
-}
-
-:where(
-        .token.property,
-        .token.tag,
-        .token.constant,
-        .token.symbol,
-        .token.deleted
-    ) {
-    color: var(--prism-a11y-color-text-red);
-}
-
-:where(
-        .token.operator,
-        .token.entity,
-        .token.url,
-        .language-css .token.string,
-        .style .token.string,
-        .token.variable,
-        .token.keyword
-    ) {
-    color: var(--prism-a11y-color-text-blue);
-}
-
-:where(
-        .token.selector,
-        .token.attr-name,
-        .token.string,
-        .token.char,
-        .token.builtin,
-        .token.inserted
-    ) {
-    color: var(--prism-a11y-color-text-green);
-}
-
-:where(
-        .token.atrule,
-        .token.attr-value,
-        .token.function,
-        .token.regex,
-        .token.important
-    ) {
-    color: var(--prism-a11y-color-text-yellow);
-}
-
-:where(.token.boolean, .token.number, .token.keyword) {
-    color: var(--prism-a11y-color-text-purple);
-}
-
-:where(.token.important, .token.bold) {
-    font-weight: bold;
-}
-
-.token.italic {
-    font-style: italic;
-}
-
-.token.entity {
-    cursor: help;
-}
-
-.line-highlight {
-    background: var(--prism-a11y-plugin-color-background);
-    border-top: var(--prism-a11y-width-border) solid
-        var(--prism-a11y-plugin-color-border);
-    border-bottom: var(--prism-a11y-width-border) solid
-        var(--prism-a11y-plugin-color-border);
-}
-
-.line-numbers .line-numbers-rows {
-    border-right: var(--prism-a11y-width-border) solid
-        var(--prism-a11y-color-text-no-token);
-}
-
-.line-numbers-rows > span::before {
-    color: var(--prism-a11y-color-text-comment);
-}

package/src/modules/dxUtils/prismjs/prismjs.html

@@ -1,3 +0,0 @@
-<template>
-    <!-- TODO: We don't need this file and have to figure why it's required by the build process. 🤷🏼‍♂️ -->
-</template>