@genexus/mercury 0.20.0 → 0.21.0

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.0",
   "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,40 @@
   },
   "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",
     "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"
   }
 }