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

package/package.json

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

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

@@ -1,13 +1,31 @@
 import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
-import { getShikiModule, getBracketsModule } from "./shikiLoader";
 import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
 
+/**
+ * Controls whether to use static imports (bundled) or dynamic imports (lazy loaded).
+ * Set via environment variable SHIKI_STATIC_IMPORT at build time.
+ * - "true": Loads from dxUtils/shikiStatic (shiki bundled with that module)
+ * - "false" or unset: Uses dynamic imports (smaller initial bundle, shiki loaded on first use)
+ * 
+ * Note: The consuming app's bundler must replace process.env.SHIKI_STATIC_IMPORT at build time
+ * and perform dead code elimination for true code splitting.
+ */
+const USE_STATIC_IMPORT = process.env.SHIKI_STATIC_IMPORT === "true";
+
 async function getShiki() {
-    return getShikiModule();
+    if (USE_STATIC_IMPORT) {
+        const loader = await import("dxUtils/shikiStatic");
+        return loader.shiki;
+    }
+    return await import("shiki");
 }
 
 async function getBrackets() {
-    return getBracketsModule();
+    if (USE_STATIC_IMPORT) {
+        const loader = await import("dxUtils/shikiStatic");
+        return { transformerColorizedBrackets: loader.transformerColorizedBrackets };
+    }
+    return await import("@shikijs/colorized-brackets");
 }
 
 interface ShikiSingleton {

package/src/modules/dxUtils/shikiStatic/shikiStatic.ts

@@ -0,0 +1,8 @@
+/**
+ * Static imports for shiki - this module bundles shiki with the main chunk.
+ * Import this module when you want shiki to be immediately available without lazy loading.
+ */
+import * as shiki from "shiki";
+import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+
+export { shiki, transformerColorizedBrackets };

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

@@ -1,25 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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 };
-}