@salesforcedevs/dx-components 1.29.0-ssgalpha1 → 1.29.0-ssgalpha3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.29.0-ssgalpha1",
+    "version": "1.29.0-ssgalpha3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -1,19 +1,13 @@
 import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
+import { getShikiModule, getBracketsModule } from "./shikiLoader";
 import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
 
-let shikiModulePromise: Promise<typeof import("shiki")> | null = null;
-let bracketsModulePromise: Promise<
-    typeof import("@shikijs/colorized-brackets")
-> | null = null;
-
 async function getShiki() {
-    return (shikiModulePromise ??= import("shiki/dist/index.mjs"));
+    return getShikiModule();
 }
 
 async function getBrackets() {
-    return (bracketsModulePromise ??= import(
-        "@shikijs/colorized-brackets/dist/index.mjs"
-    ));
+    return getBracketsModule();
 }
 
 interface ShikiSingleton {
@@ -103,7 +97,7 @@ const OPTIONAL_LANGUAGES: Record<string, any> = {
     agentscript: getCustomLanguageGrammars().agentscript
 };
 
-// Initialize Shiki highlighter (lazy-load module and keep initial set minimal)
+// Initialize Shiki highlighter
 async function initializeShiki(): Promise<HighlighterCore> {
     if (shikiInstance.highlighter) {
         return shikiInstance.highlighter;
@@ -115,8 +109,8 @@ async function initializeShiki(): Promise<HighlighterCore> {
 
     // Assign promise IMMEDIATELY before any async work to prevent race conditions
     shikiInstance.initPromise = (async () => {
-        const shiki = await getShiki();
-        const highlighter = await shiki.createHighlighter({
+        const shikiModule = await getShiki();
+        const highlighter = await shikiModule.createHighlighter({
             themes: ["light-plus", "material-theme-darker"],
             langs: CORE_LANGUAGES
         });
@@ -184,12 +178,12 @@ export async function highlightCode(
             mappedLanguage = "text" as BundledLanguage;
         }
 
-        const { transformerColorizedBrackets } = await getBrackets();
+        const { transformerColorizedBrackets: transformer } = await getBrackets();
 
         return highlighter.codeToHtml(code, {
             lang: mappedLanguage,
             theme: THEME_MAP[theme],
-            transformers: [transformerColorizedBrackets()],
+            transformers: [transformer()],
             colorReplacements:
                 THEME_MAP_COLOR_REPLACEMENTS[theme].colorReplacements
         });

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

@@ -0,0 +1,25 @@
+import type { ShikiModule, BracketsModule } from "./shikiLoaderStatic";
+
+export type { ShikiModule, BracketsModule };
+
+const USE_STATIC_IMPORT = process.env.SHIKI_STATIC_IMPORT === "false";
+
+export async function getShikiModule(): Promise<ShikiModule> {
+    if (USE_STATIC_IMPORT) {
+        const loader = await import("./shikiLoaderStatic");
+        return loader.getShikiModule();
+    } else {
+        const loader = await import("./shikiLoaderDynamic");
+        return loader.getShikiModule();
+    }
+}
+
+export async function getBracketsModule(): Promise<BracketsModule> {
+    if (USE_STATIC_IMPORT) {
+        const loader = await import("./shikiLoaderStatic");
+        return loader.getBracketsModule();
+    } else {
+        const loader = await import("./shikiLoaderDynamic");
+        return loader.getBracketsModule();
+    }
+}

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

@@ -0,0 +1,13 @@
+import type { ShikiModule, BracketsModule } from "./shikiLoaderStatic";
+
+export type { ShikiModule, BracketsModule };
+
+export async function getShikiModule(): Promise<ShikiModule> {
+    const shiki = await import("shiki");
+    return shiki as unknown as ShikiModule;
+}
+
+export async function getBracketsModule(): Promise<BracketsModule> {
+    const brackets = await import("@shikijs/colorized-brackets");
+    return brackets as BracketsModule;
+}

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

@@ -0,0 +1,19 @@
+import type { HighlighterCore } from "shiki";
+import * as shiki from "shiki";
+import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+
+export interface ShikiModule {
+    createHighlighter: typeof shiki.createHighlighter;
+}
+
+export interface BracketsModule {
+    transformerColorizedBrackets: typeof transformerColorizedBrackets;
+}
+
+export async function getShikiModule(): Promise<ShikiModule> {
+    return shiki;
+}
+
+export async function getBracketsModule(): Promise<BracketsModule> {
+    return { transformerColorizedBrackets };
+}