@salesforcedevs/dx-components 1.30.0 → 1.30.1-node22-2

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,10 +1,14 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.30.0",
+    "version": "1.30.1-node22-2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": "20.x"
+        "node": ">=22.0.0"
+    },
+    "volta": {
+        "node": "22.22.0",
+        "yarn": "1.22.22"
     },
     "publishConfig": {
         "access": "public"
@@ -44,5 +48,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "4027270163b2eb9610b911a09bfa31f536061fe4"
+    "gitHead": "db460ac1fb9b1f752d0c129dfe19012c8a085867"
 }

package/src/modules/dx/emptyState/emptyState.html

@@ -3,7 +3,7 @@
         <img class={imageClassName} src={imageAssetPath} alt={imageAlt} />
         <img
             class="image-alt-small"
-            src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
+            src="https://developer.salesforce.com/ns-assets/images/binary-cloud-circle-small.svg"
             alt="Cloud with binary code floating above"
             lwc:if={altVariant}
         />

package/src/modules/dx/emptyState/emptyState.ts

@@ -60,10 +60,10 @@ export default class EmptyState extends LightningElement {
 
     get imageAssetPath() {
         return this.variant === "base"
-            ? `https://a.sfdcstatic.com/developer-website/prod/images/docs-empty-state${
+            ? `https://developer.salesforce.com/ns-assets/images/docs-empty-state${
                   this.size === "small" ? "-small" : ""
               }.svg`
-            : `https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle${
+            : `https://developer.salesforce.com/ns-assets/images/binary-cloud-circle${
                   this.size === "small" ? "-small" : ""
               }.svg`;
     }

package/src/modules/dx/error/error.css

@@ -8,9 +8,9 @@
 
 .error_container {
     background-color: #3a49da;
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/bottom-right.svg"),
-        url("https://a.sfdcstatic.com/developer-website/prod/images/lower-left.svg"),
-        url("https://a.sfdcstatic.com/developer-website/prod/images/top-right.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/bottom-right.svg"),
+        url("https://developer.salesforce.com/ns-assets/images/lower-left.svg"),
+        url("https://developer.salesforce.com/ns-assets/images/top-right.svg");
     background-position: right bottom, left 90%, right top;
     background-repeat: no-repeat;
     padding: var(--dx-g-spacing-3xl) calc(var(--dx-g-spacing-3xl) + 20px) 130px

package/src/modules/dx/errorFallback/errorFallback.html

@@ -1,7 +1,7 @@
 <template>
     <div class="error-container">
         <img
-            src="https://a.sfdcstatic.com/developer-website/prod/images/error-fallback.svg"
+            src="https://developer.salesforce.com/ns-assets/images/error-fallback.svg"
             alt="error fallback image"
             class="error-image"
         />

package/src/modules/dx/feature/feature.css

@@ -3,7 +3,7 @@
 
 :host {
     --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgb(0 20 45 / 40%);
-    --dx-c-feature-description-left-img-src: url("https://a.sfdcstatic.com/developer-website/prod/images/feature-backdrop1.svg");
+    --dx-c-feature-description-left-img-src: url("https://developer.salesforce.com/ns-assets/images/feature-backdrop1.svg");
     --dx-c-feature-description-max-width: 31.75rem;
     --dx-c-feature-img-margin-left: auto;
     --dx-c-feature-img-container-padding: 4rem;
@@ -83,7 +83,7 @@ section {
 
 .description-right .image {
     margin-right: auto;
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/feature-backdrop2.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/feature-backdrop2.svg");
 }
 
 .image-display-container {

package/src/modules/dx/feature/feature.html

@@ -21,7 +21,7 @@
         <div if:true={isDisplay} class="image-display-container">
             <img
                 class="image-display"
-                src="https://a.sfdcstatic.com/developer-website/prod/images/featured-demo-art-blank.svg"
+                src="https://developer.salesforce.com/ns-assets/images/featured-demo-art-blank.svg"
                 alt={header}
             />
             <div class="image-container">

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -221,8 +221,8 @@
 
 .custom-bg-trial::after {
     content: "";
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/trial-left.svg"),
-        url("https://a.sfdcstatic.com/developer-website/prod/images/trial-right.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/trial-left.svg"),
+        url("https://developer.salesforce.com/ns-assets/images/trial-right.svg");
     background-position: var(--dx-g-page-padding-horizontal) 50px,
         right 15px top;
     background-repeat: no-repeat;
@@ -235,7 +235,7 @@
 
 @media screen and (max-width: 1024px) {
     .custom-bg-trial::after {
-        background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/trial-left.svg");
+        background-image: url("https://developer.salesforce.com/ns-assets/images/trial-left.svg");
         background-position: 48px 30px;
         background-size: contain;
     }
@@ -243,7 +243,7 @@
 
 .custom-bg-big-moon::after {
     content: "";
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/big-moon.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/big-moon.svg");
     background-position: top right;
     background-repeat: no-repeat;
     position: absolute;
@@ -258,7 +258,7 @@
     justify-content: center;
     align-items: center;
     position: absolute;
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/blue-circle.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/blue-circle.svg");
     top: 110px;
     right: 230px;
     left: unset;

package/src/modules/dx/featuredContentHeader/svgs.ts

@@ -6,10 +6,10 @@ const treesMobile =
 
 // These codey-* ones are a bit of a hack for now: we were only given a PNG and limited time, so we're wrapping the PNG in an SVG.
 const codeyDesktop =
-    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/prod/images/podcast-bear.png" />';
+    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://developer.salesforce.com/ns-assets/images/podcast-bear.png" />';
 
 const codeyMobile =
-    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/prod/images/podcast-bear.png" />';
+    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://developer.salesforce.com/ns-assets/images/podcast-bear.png" />';
 
 const moonDesktop =
     '<svg width="1221" height="507" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482"/><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482Z" stroke="#90D0FE" stroke-width="2"/><path d="M476.154 420.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM99.154 150.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM1210.142 97.587l-1.518 4.1a1.063 1.063 0 0 1-.631.633l-4.102 1.518c-.933.346-.933 1.664 0 2.009l4.102 1.517c.293.109.523.34.63.633l1.519 4.102c.346.93 1.664.93 2.009 0l1.517-4.102c.109-.293.34-.524.633-.633l4.102-1.517c.932-.345.932-1.663 0-2.01l-4.102-1.517a1.068 1.068 0 0 1-.633-.632l-1.517-4.101c-.345-.933-1.663-.933-2.01 0ZM8.142 490.372l-1.518 4.1a1.067 1.067 0 0 1-.632.633l-4.1 1.518c-.934.345-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.1c.345.933 1.664.933 2.01 0l1.516-4.1c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.664 0-2.01l-4.1-1.517a1.071 1.071 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM127.142 115.587l-1.518 4.1a1.064 1.064 0 0 1-.632.633l-4.1 1.518c-.934.346-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.102c.345.93 1.664.93 2.01 0l1.516-4.102c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.663 0-2.01l-4.1-1.517a1.068 1.068 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM909.009 306.108c-5.999-11.612-9.387-24.793-9.387-38.765 0-11.403 2.257-22.279 6.348-32.206M1067.92 255.215c.568 3.96.862 8.01.862 12.129 0 46.713-37.867 84.58-84.58 84.58-28.474 0-53.664-14.071-68.99-35.64M911.555 224.004c14.768-24.701 41.776-41.24 72.647-41.24 38.302 0 70.658 25.459 81.068 60.378M1055.511 147.787l-3.452 9.329a2.439 2.439 0 0 1-1.44 1.44l-9.329 3.452c-2.121.784-2.121 3.784 0 4.569l9.329 3.452a2.436 2.436 0 0 1 1.44 1.44l3.452 9.329c.785 2.12 3.785 2.12 4.569 0l3.452-9.33a2.441 2.441 0 0 1 1.44-1.44l9.329-3.451c2.121-.785 2.121-3.785 0-4.57l-9.329-3.451a2.444 2.444 0 0 1-1.44-1.44l-3.452-9.33c-.784-2.12-3.784-2.12-4.569 0ZM919.251 376.385c0 5.69-4.614 10.304-10.306 10.304-5.69 0-10.305-4.613-10.305-10.305 0-5.692 4.614-10.306 10.305-10.306 5.692 0 10.306 4.615 10.306 10.307Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M984.116 224.502a5.027 5.027 0 1 1-10.054 0 5.027 5.027 0 0 1 10.054 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1046.716 254.771h29.772M1087.929 254.771h7.089M902.279 225.33h23.242M870.108 225.33h10.053"/><path d="M893.055 225.33a2.01 2.01 0 1 1-4.021 0 2.01 2.01 0 0 1 4.02 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M893.425 315.627h31.409"/><path d="M936.898 315.627a2.011 2.011 0 1 1-4.023 0 2.011 2.011 0 0 1 4.023 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1013.52 292.398v-16.036M1021.537 284.382l-16.051.002"/></g></svg>';

package/src/modules/dx/footer/footer.css

@@ -113,7 +113,7 @@ footer.signup-variant-no-signup {
     height: 112px;
     width: 110px;
     margin-right: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-trees.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/footer-graphic-trees.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -121,7 +121,7 @@ footer.signup-variant-no-signup {
     height: 96px;
     width: 220px;
     margin-right: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-mountains-2.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/footer-graphic-mountains-2.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -132,7 +132,7 @@ footer.signup-variant-no-signup {
     bottom: 0;
     height: 56px;
     width: 100px;
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-mountains-small-2.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/footer-graphic-mountains-small-2.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -140,7 +140,7 @@ footer.signup-variant-no-signup {
     height: 66px;
     width: 52px;
     margin-left: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-trees-small.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/images/footer-graphic-trees-small.svg");
     filter: var(--dx-g-svg-filter);
 }
 

package/src/modules/dx/footer/footer.html

@@ -56,7 +56,7 @@
             >
                 <a class="logo" href="/">
                     <img
-                        src="https://a.sfdcstatic.com/developer-website/prod/images/salesforce-logo-corporate.svg"
+                        src="https://developer.salesforce.com/ns-assets/images/salesforce-logo-corporate.svg"
                         alt="Salesforce logo"
                     />
                 </a>

package/src/modules/dx/footer/footer.ts

@@ -288,7 +288,7 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
                     link.href = "#";
                     link.onclick = this.openOneTrustInfoDisplay;
                 } else if (item.title === "Your Privacy Choices") {
-                    link.img = "https://a.sfdcstatic.com/developer-website/prod/images/privacyoptions.svg";
+                    link.img = "https://developer.salesforce.com/ns-assets/images/privacyoptions.svg";
                 }
 
                 return link;

package/src/modules/dx/input/input.ts

@@ -195,7 +195,7 @@ export default class Input extends LightningElement {
     }
 
     private get shortcutImgSrc() {
-        return `https://a.sfdcstatic.com/developer-website/prod/images/${this.commandKey}.svg`;
+        return `https://developer.salesforce.com/ns-assets/images/${this.commandKey}.svg`;
     }
 
     private get shortcutImgAlt() {

package/src/modules/dx/logo/logo.ts

@@ -3,7 +3,7 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string =
-        "https://a.sfdcstatic.com/developer-website/prod/images/salesforce-cloud.svg";
+        "https://developer.salesforce.com/ns-assets/images/salesforce-cloud.svg";
     @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dx/searchResults/resultsTemplate.js

@@ -9,7 +9,7 @@ export default html`
     <div class="coveo-show-if-no-results">
         <div class="no-results">
             <img
-                src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
+                src="https://developer.salesforce.com/ns-assets/images/binary-cloud-circle-small.svg"
                 alt="purple cloud with floating binary numbers above"
             />
             <div class="no-results-info">

package/src/modules/dx/searchResults/searchResults.css

@@ -311,7 +311,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .dx-search-header {
     padding: var(--dx-g-spacing-xl);
-    background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-trees.svg")
+    background: url("https://developer.salesforce.com/ns-assets/images/binary-cloud-trees.svg")
             no-repeat 100% 0,
         linear-gradient(
             77deg,
@@ -352,7 +352,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (min-width: 928px) and (max-width: 1024px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-trees.svg")
+        background: url("https://developer.salesforce.com/ns-assets/images/binary-cloud-trees.svg")
                 no-repeat 200% 0,
             linear-gradient(
                 77deg,
@@ -380,7 +380,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (min-width: 768px) and (max-width: 928px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-trees.svg")
+        background: url("https://developer.salesforce.com/ns-assets/images/binary-trees.svg")
                 no-repeat 90% 50%,
             linear-gradient(
                 77deg,
@@ -392,7 +392,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (max-width: 768px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary.svg")
+        background: url("https://developer.salesforce.com/ns-assets/images/binary.svg")
                 no-repeat 90% 50%,
             linear-gradient(
                 77deg,

package/src/modules/dx/sectionBanner/sectionBanner.html

@@ -3,7 +3,7 @@
         <img
             if:false={hideTopGraphic}
             class="graphic"
-            src="https://a.sfdcstatic.com/developer-website/prod/images/dx-section-banner-graphic-1.svg"
+            src="https://developer.salesforce.com/ns-assets/images/dx-section-banner-graphic-1.svg"
             alt=""
         />
         <div class="content">

package/src/modules/dx/sidebar/sidebar.html

@@ -69,7 +69,7 @@
             <img
                 lwc:if={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
-                src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
+                src="https://developer.salesforce.com/ns-assets/images/sidebar-loading.svg"
                 alt="loading"
             />
             <template

package/src/modules/dx/treeItem/treeItem.html

@@ -16,7 +16,7 @@
     <img
         if:true={showChildrenLoading}
         class="tree-children-loading"
-        src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-item-loading.svg"
+        src="https://developer.salesforce.com/ns-assets/images/sidebar-item-loading.svg"
         alt="childrenLoading"
     />
     <template if:true={showChildren} tabindex="0">

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