@genexus/mercury 0.20.0 → 0.21.2

package/dist/cli/internal/transpile-bundle-and-create-mappings.js

@@ -1,86 +1,57 @@
-import fs from "node:fs";
+import fs from "node:fs/promises";
 import path from "node:path";
 import * as sass from "sass";
-import { BASE_BUNDLE_WITH_BACK_SLASH, BASE_GLOBANT_CSS_FILE, BASE_GLOBANT_FILE, BASE_GLOBANT_JS_FILE, BASE_GLOBANT_SCSS_FILE, BASE_SCSS_FILE, BUNDLE_MAPPING_ENTRIES, BUNDLE_MAPPING_FILE, CSS_BUNDLES_OUT_DIR, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, JS_BUNDLES_OUT_DIR, SCSS_BUNDLES_OUT_DIR } from "./constants.js";
-import { getBundleNameWithoutSpecialChars, replacePlaceholdersInBundle } from "./utils.js";
-import { printBundleWasTranspiled } from "./print-utils.js";
+import { BASE_BUNDLE, BASE_GLOBANT_BUNDLE, BASE_GLOBANT_CSS_FILE, CSS_BUNDLES_OUT_DIR, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, SCSS_BUNDLES_INPUT_DIR, SCSS_BUNDLES_OUT_DIR } from "./constants.js";
+import { replacePlaceholdersInBundle, sanitizeBundleName } from "./utils.js";
 const transpileBundle = (filePath, globant) => sass.compile(filePath, {
     loadPaths: [globant ? "src/config/globant" : "src/config/default"],
     style: "compressed"
 }).css;
-const CSS_CREATED_DIRS = new Set();
-const JS_CREATED_DIRS = new Set();
-const BUNDLES = [];
-const addBaseGlobantFile = (fileMetadata, cssOutDir, jsOutDir) => {
+let BUNDLES = [];
+const transpileGlobantCssFile = async (fileMetadata, cssOutDir) => {
     const { filePath } = fileMetadata;
     BUNDLES.push({
         fileDir: fileMetadata.dir
             .replace(SCSS_BUNDLES_OUT_DIR, "")
-            .replace("\\", "/"),
-        bundleNameWithBackSlash: filePath
-            .replace(SCSS_BUNDLES_OUT_DIR, "")
-            .replace(BASE_SCSS_FILE, BASE_GLOBANT_FILE)
+            .replace("\\", "/")
     });
     const transpiledBundle = transpileBundle(filePath, true);
     // Store the CSS file with its default values
-    fs.writeFileSync(path.join(cssOutDir, BASE_GLOBANT_CSS_FILE), replacePlaceholdersInBundle(transpiledBundle, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH));
-    // Store the CSS file in a JS file with placeholders for the values
-    fs.writeFileSync(path.join(jsOutDir, BASE_GLOBANT_JS_FILE), `export const bundle = \`${transpiledBundle}\`;`);
-    printBundleWasTranspiled(filePath.replace(BASE_SCSS_FILE, BASE_GLOBANT_SCSS_FILE));
+    await fs.writeFile(path.join(cssOutDir, BASE_GLOBANT_CSS_FILE), replacePlaceholdersInBundle(transpiledBundle, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH));
 };
-export const transpileCssBundleWithPlaceholder = (fileMetadata) => {
-    const { fileName, filePath } = fileMetadata;
-    const cssOutDir = fileMetadata.dir.replace(SCSS_BUNDLES_OUT_DIR, CSS_BUNDLES_OUT_DIR);
-    const jsOutDir = fileMetadata.dir.replace(SCSS_BUNDLES_OUT_DIR, JS_BUNDLES_OUT_DIR);
+export const transpileCssBundleWithPlaceholder = async (fileMetadata, args) => {
+    const { fileName } = fileMetadata;
+    let actualFilePath = fileMetadata.filePath;
+    const hasGlobantVariant = args?.globant ?? false;
+    const cssOutDir = fileMetadata.dir.replace(SCSS_BUNDLES_INPUT_DIR, CSS_BUNDLES_OUT_DIR);
     const fileNameCssExt = fileName.replace(".scss", ".css");
-    const fileNameJsExt = fileName.replace(".scss", ".js");
-    const bundleNameWithBackSlash = filePath
-        .replace(SCSS_BUNDLES_OUT_DIR, "")
-        .replace(".scss", "");
+    const bundleName = sanitizeBundleName(actualFilePath.replace(SCSS_BUNDLES_INPUT_DIR, "").replace(".scss", ""));
+    // There is no need to generate the base-globant.css file, since the base.css
+    // file already contains this file
+    if (hasGlobantVariant) {
+        if (bundleName === BASE_GLOBANT_BUNDLE) {
+            return;
+        }
+        // Replace the content of the base bundle with the Globant variant
+        if (bundleName === BASE_BUNDLE) {
+            actualFilePath = actualFilePath.replace(BASE_BUNDLE, BASE_GLOBANT_BUNDLE);
+        }
+    }
+    // The Globant variant is not forced, so we are creating both bundles, the
+    // base/base and base/base-globant bundles
+    else if (bundleName === BASE_BUNDLE) {
+        transpileGlobantCssFile({
+            dir: fileMetadata.dir,
+            fileName: fileName.replace(BASE_BUNDLE, BASE_GLOBANT_BUNDLE),
+            filePath: actualFilePath
+        }, cssOutDir);
+    }
     BUNDLES.push({
         fileDir: fileMetadata.dir
-            .replace(SCSS_BUNDLES_OUT_DIR, "")
-            .replace("\\", "/"),
-        bundleNameWithBackSlash
+            .replace(SCSS_BUNDLES_INPUT_DIR, "")
+            .replace("\\", "/")
     });
-    // Create the file directory if it does not exists
-    if (!CSS_CREATED_DIRS.has(cssOutDir)) {
-        fs.mkdirSync(cssOutDir, { recursive: true });
-        fs.mkdirSync(jsOutDir, { recursive: true });
-        CSS_CREATED_DIRS.add(cssOutDir);
-        JS_CREATED_DIRS.add(jsOutDir);
-    }
-    const transpiledBundle = transpileBundle(filePath, false);
+    const transpiledBundle = transpileBundle(actualFilePath, hasGlobantVariant);
     // Store the CSS file with its default values
-    fs.writeFileSync(path.join(cssOutDir, fileNameCssExt), replacePlaceholdersInBundle(transpiledBundle, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH));
-    // Store the CSS file in a JS file with placeholders for the values
-    fs.writeFileSync(path.join(jsOutDir, fileNameJsExt), `export const bundle = \`${transpiledBundle}\`;`);
-    printBundleWasTranspiled(filePath);
-    if (bundleNameWithBackSlash.replaceAll("/", "\\") ===
-        BASE_BUNDLE_WITH_BACK_SLASH) {
-        addBaseGlobantFile(fileMetadata, cssOutDir, jsOutDir);
-    }
-};
-const createBundleEntryInMappingFile = (bundleName, fileDir, transpiledBundleRef) => `  {
-    ${BUNDLE_MAPPING_ENTRIES.BUNDLE_NAME}: "${bundleName}",
-    ${BUNDLE_MAPPING_ENTRIES.FILE_DIR}: "${fileDir}",
-    ${BUNDLE_MAPPING_ENTRIES.TRANSPILED_BUNDLE}: ${transpiledBundleRef}
-  }`;
-export const createBundleMappingsFile = () => {
-    let bundleAssociationImports = "";
-    let bundleMappingObjectEntries = "";
-    BUNDLES.forEach(bundleMetadata => {
-        const bundleName = bundleMetadata.bundleNameWithBackSlash
-            .replaceAll("\\", "/")
-            .substring(1);
-        const transpiledBundleRef = getBundleNameWithoutSpecialChars(bundleName);
-        const bundleEntry = createBundleEntryInMappingFile(bundleName, bundleMetadata.fileDir, transpiledBundleRef);
-        bundleAssociationImports += `import { bundle as ${transpiledBundleRef} } from "./${bundleName}.js";\n`;
-        // Concat entries in the object
-        bundleMappingObjectEntries +=
-            bundleMappingObjectEntries === "" ? bundleEntry : ",\n" + bundleEntry;
-    });
-    bundleMappingObjectEntries = `\nexport const bundleMappings = [\n${bundleMappingObjectEntries}\n];`;
-    // Create the JS file that contains all mappings for the bundle
-    fs.writeFileSync(path.join(JS_BUNDLES_OUT_DIR, BUNDLE_MAPPING_FILE), bundleAssociationImports + bundleMappingObjectEntries);
+    await fs.writeFile(path.join(cssOutDir, fileNameCssExt), replacePlaceholdersInBundle(transpiledBundle, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH));
 };

package/dist/cli/internal/types.d.ts

@@ -1,6 +1,5 @@
 export type BundleMetadata = {
     fileDir: string;
-    bundleNameWithBackSlash: string;
 };
 export type BundleAssociationMetadata = {
     bundleName: string;

package/dist/cli/internal/utils.d.ts

@@ -1,11 +1,14 @@
+import type { FileMetadata } from "./types";
 export declare const getFileSize: (fileContent: string) => string;
 export declare const getHash: (fileContent: string) => string;
-export declare const getBundleNameWithHash: <B extends string, H extends string>(bundleName: B, hash: H) => `${B}-${H}`;
+export declare const getFileNameWithHash: <B extends string, H extends string>(bundleName: B, hash: H) => `${B}-${H}`;
 export declare const replacePlaceholdersInBundle: (transpiledBundle: string, fontFaceValue: string, iconsValue: string) => string;
-/**
- * @example
- * "base/icons" --> "baseIcons"
- * "utils/form--full" --> "utilsFormFull"
- */
-export declare const getBundleNameWithoutSpecialChars: (bundleName: string) => string;
-export declare const measureTime: (callback: () => void) => void;
+export declare const measureTime: (callback: (() => void) | (() => Promise<void>)) => Promise<void>;
+export declare const sanitizeBundleName: (bundleName: string) => string;
+export declare const getBundleFolder: (fileMetadata: FileMetadata) => string;
+export declare const getBundleFolderAndFileBaseDir: (fileMetadata: FileMetadata, outDir: string) => {
+    bundleFolder: string;
+    fileBaseDirToWrite: string;
+};
+export declare const getFileNameWithoutExt: (fileMetadata: FileMetadata) => string;
+export declare const getBundleName: (fileMetadata: FileMetadata) => string;

package/dist/cli/internal/utils.js

@@ -1,42 +1,47 @@
 import crypto from "node:crypto";
 import { styleText } from "node:util";
-import { FONT_FACE_PATH_PLACEHOLDER, ICONS_PATH_PLACEHOLDER, KB, SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX } from "./constants.js";
+import { CSS_BUNDLES_OUT_DIR, FONT_FACE_PATH_PLACEHOLDER, HASH_LENGTH, ICONS_PATH_PLACEHOLDER, KB
+// SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX
+ } from "./constants.js";
+import path from "node:path";
 export const getFileSize = (fileContent) => {
     const fileLength = fileContent.length;
     if (fileLength < KB) {
-        return fileLength + "B";
+        return fileLength + " bytes";
     }
     const fileLengthInKB = fileLength / KB;
     if (fileLengthInKB < KB) {
-        return fileLengthInKB + "KB";
+        return fileLengthInKB.toFixed(2) + " kB";
     }
     const fileLengthInMB = fileLengthInKB / KB;
     if (fileLengthInMB < KB) {
-        return fileLengthInMB.toFixed(3) + "MB";
+        return fileLengthInMB.toFixed(2) + " MB";
     }
     const fileLengthInGB = fileLengthInMB / KB;
-    return fileLengthInGB.toFixed(3) + "GB";
+    return fileLengthInGB.toFixed(2) + " GB";
 };
-export const getHash = (fileContent) => crypto.createHash("md5").update(fileContent).digest("hex").substring(16);
-export const getBundleNameWithHash = (bundleName, hash) => `${bundleName}-${hash}`;
+export const getHash = (fileContent) => crypto
+    .createHash("md5")
+    .update(fileContent)
+    .digest("hex")
+    .substring(HASH_LENGTH);
+export const getFileNameWithHash = (bundleName, hash) => `${bundleName}-${hash}`;
 export const replacePlaceholdersInBundle = (transpiledBundle, fontFaceValue, iconsValue) => transpiledBundle
     .replaceAll(ICONS_PATH_PLACEHOLDER, iconsValue)
     .replaceAll(FONT_FACE_PATH_PLACEHOLDER, fontFaceValue);
-/**
- * @example
- * "base/icons" --> "baseIcons"
- * "utils/form--full" --> "utilsFormFull"
- */
-export const getBundleNameWithoutSpecialChars = (bundleName) => {
-    const bundleNameNoSpecialChars = bundleName
-        .split(SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX)
-        .map(subPath => subPath.charAt(0).toUpperCase() + subPath.slice(1))
-        .join("");
-    return (bundleNameNoSpecialChars.charAt(0).toLowerCase() +
-        bundleNameNoSpecialChars.slice(1));
-};
-export const measureTime = (callback) => {
+export const measureTime = async (callback) => {
     console.time(styleText("green", "Done in"));
-    callback();
+    await callback();
     console.timeEnd(styleText("green", "Done in"));
 };
+export const sanitizeBundleName = (bundleName) => bundleName.replaceAll("\\", "/").replace(/^\//, "");
+export const getBundleFolder = (fileMetadata) => fileMetadata.dir.split(CSS_BUNDLES_OUT_DIR)[1];
+export const getBundleFolderAndFileBaseDir = (fileMetadata, outDir) => {
+    const bundleFolder = getBundleFolder(fileMetadata);
+    return {
+        bundleFolder,
+        fileBaseDirToWrite: path.join(outDir, bundleFolder)
+    };
+};
+export const getFileNameWithoutExt = (fileMetadata) => fileMetadata.fileName.replace(/.css$/, "");
+export const getBundleName = (fileMetadata) => sanitizeBundleName(`${getBundleFolder(fileMetadata)}/${getFileNameWithoutExt(fileMetadata)}`);

package/dist/cli/internal/validate-args.js

@@ -1,5 +1,6 @@
 import { DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, DEFAULT_OUT_DIR_PATH, SEPARATE_BY_COMMA_REGEX } from "./constants.js";
 import { printArgumentDoesNotExistsError, printDuplicatedArgumentError, printInvalidArgumentError, printMissingFontPathArgumentWarning, printMissingIconsPathArgumentWarning, printMissingOutDirPathArgumentWarning } from "./print-utils.js";
+import { sanitizeBundleName } from "./utils.js";
 const ARGUMENT_VALUE_AND_NAME_SEPARATOR_REGEX = /\s*=\s*/g;
 const ERROR_IN_CHECK = false;
 const SUCCESS_CHECK = true;
@@ -40,6 +41,9 @@ const checkArgument = (argument) => {
     }
     const argNameWithValue = argument.split(ARGUMENT_VALUE_AND_NAME_SEPARATOR_REGEX);
     if (argNameWithValue.length !== 2) {
+        if (argNameWithValue[0] === "--watch") {
+            return SUCCESS_CHECK;
+        }
         printInvalidArgumentError(argument);
         return ERROR_IN_CHECK;
     }
@@ -109,8 +113,10 @@ export const getArguments = () => {
     if (anyWarning) {
         console.log("");
     }
+    // Sanitize bundle names to avoid issues with "/" and "\" in paths
+    const sanitizedAvoidHash = new Set(avoidHash.map(bundleName => sanitizeBundleName(bundleName)));
     return {
-        avoidHash: new Set(avoidHash),
+        avoidHash: new Set(sanitizedAvoidHash),
         globant: hasGlobant,
         fontFacePath,
         iconsPath,

package/dist/cli/internal/watch-fs.d.ts

@@ -0,0 +1,3 @@
+export declare const printRebuilding: (firstBuild: boolean) => void;
+export declare const stopRebuildingStdout: () => void;
+export declare const watchFileSystemChanges: (callbackToCompile: () => Promise<void>) => void;

package/dist/cli/internal/watch-fs.js

@@ -0,0 +1,92 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { styleText } from "node:util";
+import readline from "readline";
+/**
+ * This debounce value is useful to batch multiples updates attempt into a
+ * single compilation. In some cases, multiples files can be changed at one, so
+ * if we don't debounce the next compilation, we would trigger to compilations.
+ *
+ * This case can also happen when performing ESLint on auto-save.
+ */
+const DEBOUNCE = 100; // 100ms
+const progressDictionary = {
+    0: "-",
+    1: "\\",
+    2: "|",
+    3: "/"
+};
+let lastRebuildInterval;
+let updateCounter = 0;
+const readLineInterface = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+export const printRebuilding = (firstBuild) => {
+    // Hide the cursor to improve the CLI design
+    readLineInterface.write("\u001B[?25l");
+    // First write
+    process.stdout.write(`${styleText("yellow", progressDictionary[(updateCounter % 4)])} ${firstBuild ? "Building bundles..." : "Changes detected. Rebuilding..."}`);
+    // Update the left symbol each 100ms
+    lastRebuildInterval = setInterval(() => {
+        process.stdout.cursorTo(1);
+        process.stdout.clearLine(-1);
+        process.stdout.cursorTo(0);
+        process.stdout.write(`${styleText("yellow", progressDictionary[(updateCounter % 4)])}`);
+        updateCounter++;
+    }, 100);
+};
+export const stopRebuildingStdout = () => {
+    clearInterval(lastRebuildInterval);
+    process.stdout.clearLine(0);
+    console.log("");
+    updateCounter = 0;
+    // Show again the cursor
+    readLineInterface.write("\u001B[?25h");
+};
+export const watchFileSystemChanges = (callbackToCompile) => {
+    // This is a WA to have __filename and __dirname in ES modules
+    const __filename = fileURLToPath(import.meta.url);
+    const SRC_PATH = path.join(__filename, "../../../../src");
+    const BASE_PATH = path.join(SRC_PATH, "base");
+    const BUNDLES_PATH = path.join(SRC_PATH, "bundles");
+    const COMPONENTS_PATH = path.join(SRC_PATH, "components");
+    const MERCURY_SCSS_PATH = path.join(SRC_PATH, "mercury.scss");
+    let compileStatus = "idle";
+    const performCompilationIfNecessary = () => {
+        // The current compilation is waiting to be started, so there is no need to
+        // queue another one after the current has finished
+        if (compileStatus === "debouncing-compiling") {
+            return;
+        }
+        // There is no compilation in process. Queue one.
+        if (compileStatus === "idle") {
+            compileStatus = "debouncing-compiling";
+        }
+        // There is a compilation in progress. We can set a flag to queue a
+        // compilation after the current one has finished
+        else {
+            if (compileStatus === "compiling") {
+                compileStatus = "queued-after-compile";
+            }
+            return;
+        }
+        setTimeout(() => {
+            compileStatus = "compiling";
+            console.time(styleText("green", "Rebuild done in"));
+            callbackToCompile().then(() => {
+                console.timeEnd(styleText("green", "Rebuild done in"));
+                const hasToRecompile = compileStatus === "queued-after-compile";
+                compileStatus = "idle";
+                if (hasToRecompile) {
+                    performCompilationIfNecessary();
+                }
+            });
+        }, DEBOUNCE);
+    };
+    fs.watch(BASE_PATH, { recursive: true }, performCompilationIfNecessary);
+    fs.watch(BUNDLES_PATH, { recursive: true }, performCompilationIfNecessary);
+    fs.watch(COMPONENTS_PATH, { recursive: true }, performCompilationIfNecessary);
+    fs.watch(MERCURY_SCSS_PATH, { recursive: true }, performCompilationIfNecessary);
+};

package/dist/cli/mercury.js

@@ -3,12 +3,12 @@ import { createBundlesWithCustomPaths } from "./internal/create-bundles-with-cus
 import { ensureDirectoryExistsAndItsClear } from "./internal/file-management.js";
 import { getArguments } from "./internal/validate-args.js";
 import { measureTime } from "./internal/utils.js";
-measureTime(() => {
+measureTime(async () => {
     // Improve process visualization
     console.log("");
     const args = getArguments();
     if (args) {
         ensureDirectoryExistsAndItsClear(args.outDirPath);
-        createBundlesWithCustomPaths(args);
+        await createBundlesWithCustomPaths(args);
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.20.0",
+  "version": "0.21.2",
   "description": "Mercury Design System is a robust and scalable solution designed to improve product development.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -47,35 +47,41 @@
   },
   "scripts": {
     "build": "yarn build.js && yarn icons-svg && yarn icons-sass && yarn build.scss && yarn copy-tasks && yarn showcase.scss",
-    "build.js": "tsc && esbuild dist/*.js --allow-overwrite --minify --outdir=dist && esbuild dist/assets/*.js --allow-overwrite --minify --outdir=dist/assets",
+    "build.js": "tsc && esbuild dist/*.js --allow-overwrite --minify --outdir=dist --log-level=silent && esbuild dist/assets/*.js --allow-overwrite --minify --outdir=dist/assets --log-level=silent",
     "build-no-svg": "yarn build.js && yarn build.scss && yarn copy-tasks",
     "build.scss": "yarn build.scss.base && yarn build.scss.bundles",
-    "build.scss.watch": "yarn build.scss && yarn build.scss.mercury",
-    "build.scss.base": "scss-bundle -e ./src/mercury.scss -o dist/mercury.scss",
+    "build.scss.base": "scss-bundle -e ./src/icons/_generated/categories.scss -o src/icons/_generated/categories-bundled.scss --logLevel=silent",
     "build.scss.bundles": "node dist/cli/bundle.js",
-    "build.scss.mercury": "node dist/cli/mercury.js -i=/assets/icons/ -f=/assets/fonts/ --outDir=../showcase/.mercury/ --avoid-hash=base/base",
+    "build.scss.watch": "tsc && yarn build.scss.base && yarn copy-tasks && yarn build.scss.bundles --watch -i=/assets/icons/ -f=/assets/fonts/ --outDir=../showcase/.mercury/ --avoid-hash=base/base",
     "start": "vite --port 5200 --open showcase/button.html",
-    "validate.ci": "yarn build-no-svg",
+    "validate.ci": "yarn build-no-svg && yarn test",
     "icons-svg": "ssg-svg --srcDir=src/icons/svg-source --outDir=src/assets/icons/_generated/ --configFilePath=src/icons/svg-source/.config/color-states.json --showcaseDir=showcase/icons/ --showcaseBaseHref=../assets/icons/ --logDir=./log --objectFilePath=src/assets/MERCURY_ASSETS.ts --defaultColorType=on-surface",
+    "process-icons": "ssg --configPath=./src/config/icons.js",
     "icons-sass": "ssg-sass --srcDir=src/assets/icons/ --outDir=src/icons/_generated/ --configFilePath=src/icons/svg-source/.config/color-states.json --vendorPrefix=",
     "watch.scss": "chokidar src/**/*.scss ../common/**/*.scss -c \"npm run build.scss\"",
     "watch.scss.mac": "chokidar 'src/**/*.scss' '../common/**/*.scss' -c \"npm run build.scss\"",
-    "copy-all.css": "fse copy dist/bundles/css/all.css showcase/all.css",
     "copy-tasks": "node copy-tasks.js",
-    "showcase.scss": "sass showcase/scss/showcase-sass.scss showcase/css/showcase-sass.css"
+    "showcase.scss": "sass showcase/scss/showcase-sass.scss showcase/css/showcase-sass.css",
+    "coverage": "yarn playwright install && vitest watch run --coverage",
+    "test": "yarn playwright install && vitest",
+    "test.watch": "yarn playwright install && vitest watch"
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@atao60/fse-cli": "^0.1.9",
     "@genexus/chameleon-controls-library": "~6.5.0",
     "@genexus/svg-sass-generator": "1.1.24",
+    "@vitest/browser": "~3.1.1",
+    "@vitest/coverage-v8": "~3.1.1",
+    "@vitest/ui": "~3.1.1",
     "@types/node": "~22.10.5",
     "chokidar": "^3.6.0",
     "chokidar-cli": "^3.0.0",
-    "esbuild": "0.24.0",
-    "sass": "~1.72.0",
+    "esbuild": "0.25.0",
+    "playwright": "~1.51.1",
+    "sass": "~1.86.3",
     "scss-bundle": "~3.1.2",
     "typescript": "~5.5.3",
-    "vite": "~5.4.12"
+    "vite": "~6.2.5",
+    "vitest": "~3.1.1"
   }
 }