@salesforcedevs/dx-components 1.18.8 → 1.19.3-layoutfix-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.18.8",
+    "version": "1.19.3-layoutfix-alpha1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,6 +45,5 @@
     },
     "volta": {
         "node": "20.19.0"
-    },
-    "gitHead": "e9d51d7dab7f574cbbc850c7201d3296ffd7f321"
+    }
 }

package/src/modules/dx/mainContentHeader/mainContentHeader.css

@@ -95,7 +95,7 @@ img.mobile.center-img {
     position: absolute;
     left: 0;
     bottom: 0;
-    width: 418px;
+    width: 419px;
     height: 515px;
 }
 

package/src/modules/dx/toc/toc.css

@@ -3,7 +3,7 @@
 
 .toc {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: row;
     max-width: 240px;
     min-width: 80px;
     word-break: break-word;

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

@@ -1,11 +1,13 @@
-import { createHighlighterCore, HighlighterCore } from "shiki/core";
+import * as shiki from "shiki";
+
 import type { BundledLanguage, BundledTheme } from "shiki";
-import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
+
 interface ShikiSingleton {
-    highlighter: HighlighterCore | null;
+    highlighter: shiki.HighlighterCore | null;
     initialized: boolean;
-    initPromise: Promise<HighlighterCore> | null;
+    initPromise: Promise<shiki.HighlighterCore> | null;
 }
 
 const shikiInstance: ShikiSingleton = {
@@ -50,58 +52,47 @@ const LANGUAGE_MAP: Record<string, BundledLanguage> = {
 
 // 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")
+    "apex",
+    "javascript",
+    "html",
+    "css",
+    "json",
+    "sql",
+    "bash",
+    "xml",
+    "graphql",
+    "jsx",
+    getCustomLanguageGrammars().ampscript
 ];
 
 // Non-critical languages that can be loaded asynchronously when needed
-const OPTIONAL_LANGUAGES: Record<string, () => Promise<any>> = {
+const OPTIONAL_LANGUAGES: Record<string, any> = {
     // @ts-ignore
-    typescript: () => import("@shikijs/langs/typescript"),
+    typescript: "typescript",
     // @ts-ignore
-    markdown: () => import("@shikijs/langs/markdown"),
+    markdown: "markdown",
     // @ts-ignore
-    python: () => import("@shikijs/langs/python"),
+    python: "python",
     // @ts-ignore
-    java: () => import("@shikijs/langs/java"),
+    java: "java",
     // @ts-ignore
-    yaml: () => import("@shikijs/langs/yaml"),
+    yaml: "yaml",
     // @ts-ignore
-    php: () => import("@shikijs/langs/php"),
+    php: "php",
     // @ts-ignore
-    swift: () => import("@shikijs/langs/swift"),
+    swift: "swift",
     // @ts-ignore
-    kotlin: () => import("@shikijs/langs/kotlin"),
+    kotlin: "kotlin",
     // @ts-ignore
-    handlebars: () => import("@shikijs/langs/handlebars"),
+    handlebars: "handlebars",
     // @ts-ignore
-    dataweave: () => import("./customLanguages/dataweave.tmLanguage.json"),
+    dataweave: getCustomLanguageGrammars().dataweave,
     // @ts-ignore
-    afscript: () => import("./customLanguages/afscript.tmLanguage.json")
+    afscript: getCustomLanguageGrammars().afscript
 };
 
 // Initialize Shiki highlighter with fine-grained modules for better performance
-async function initializeShiki(): Promise<HighlighterCore> {
+async function initializeShiki(): Promise<shiki.HighlighterCore> {
     if (shikiInstance.highlighter) {
         return shikiInstance.highlighter;
     }
@@ -110,15 +101,9 @@ async function initializeShiki(): Promise<HighlighterCore> {
         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"))
+    shikiInstance.initPromise = shiki.createHighlighter({
+        themes: ["light-plus", "material-theme-darker"],
+        langs: CORE_LANGUAGES
     });
 
     try {
@@ -134,7 +119,7 @@ async function initializeShiki(): Promise<HighlighterCore> {
 
 // Async function to load additional languages when needed
 async function loadLanguageIfNeeded(
-    highlighter: HighlighterCore,
+    highlighter: shiki.HighlighterCore,
     language: string
 ): Promise<void> {
     const loadedLanguages = highlighter.getLoadedLanguages();
@@ -145,10 +130,7 @@ async function loadLanguageIfNeeded(
 
         if (languageLoader) {
             try {
-                const languageModule = await languageLoader();
-                await highlighter.loadLanguage(
-                    languageModule.default || languageModule
-                );
+                await highlighter.loadLanguage(languageLoader);
             } catch (error) {
                 console.warn(
                     `Failed to load optional language ${language}:`,

package/src/modules/dxUtils/shikiGrammars/shikiGrammars.html

@@ -0,0 +1,3 @@
+<template>
+    <!-- This is a utility module for importing custom language grammars for Shiki -->
+</template>