@genexus/mercury 0.20.0 → 0.21.2

package/dist/cli/bundle.js

@@ -1,20 +1,188 @@
 #!/usr/bin/env node
-import { ensureDirectoryExistsAndItsClear, walkSync, copyDirectories } from "./internal/file-management.js";
-import { BASE_BUNDLES_OUT_DIR, SCSS_BUNDLES_INPUT_DIR, SCSS_BUNDLES_OUT_DIR } from "./internal/constants.js";
-import { createBundleMappingsFile, transpileCssBundleWithPlaceholder } from "./internal/transpile-bundle-and-create-mappings.js";
+import fs from "node:fs/promises";
+import path from "node:path";
+import os from "node:os";
+import { fileURLToPath } from "node:url";
+import { Worker, isMainThread, parentPort } from "worker_threads";
+import { ensureDirectoryExistsAndItsClear, getFilesInDir, refreshAngularBrowser
+// copyDirectories
+ } from "./internal/file-management.js";
+import { BASE_BUNDLES_OUT_DIR, CSS_BUNDLES_OUT_DIR, SCSS_BUNDLES_INPUT_DIR
+// SCSS_BUNDLES_OUT_DIR
+ } from "./internal/constants.js";
+import { transpileCssBundleWithPlaceholder } from "./internal/transpile-bundle-and-create-mappings.js";
 import { measureTime } from "./internal/utils.js";
-measureTime(() => {
-    // Improve process visualization
-    console.log("");
-    // Clear bundle directories
-    ensureDirectoryExistsAndItsClear(BASE_BUNDLES_OUT_DIR);
-    // Copy the src/bundles/scss content to the dist/bundles/scss and create the
-    // bundles
-    copyDirectories(SCSS_BUNDLES_INPUT_DIR, SCSS_BUNDLES_OUT_DIR);
-    // Transpile scss bundles into .css and .js files
-    for (const fileMetadata of walkSync(SCSS_BUNDLES_OUT_DIR)) {
-        transpileCssBundleWithPlaceholder(fileMetadata);
+import { printBundleWasTranspiled } from "./internal/print-utils.js";
+import { printRebuilding, stopRebuildingStdout, watchFileSystemChanges } from "./internal/watch-fs.js";
+import { getArguments } from "./internal/validate-args.js";
+import { createBundlesWithCustomPaths } from "./internal/create-bundles-with-custom-paths.js";
+const MESSAGE_TYPE = {
+    SUCCESS: "Success",
+    ERROR: "Error"
+};
+if (isMainThread) {
+    const [, , ...args] = process.argv;
+    const watchMode = args.find(arg => arg === "--watch");
+    let cliArgs;
+    // Check if the bundles processing is running in watch mode
+    if (watchMode) {
+        cliArgs = getArguments();
+        if (!cliArgs) {
+            process.exit();
+        }
     }
-    // Import all .js files into a single file (defined in `BUNDLE_MAPPING_FILE` var)
-    createBundleMappingsFile();
-});
+    // This is a WA to have __filename and __dirname in ES modules
+    const __filename = fileURLToPath(import.meta.url);
+    const THREADS = Math.min(8, os.cpus().length / 2);
+    const workers = [];
+    /**
+     * Files to transpile
+     */
+    let allFilesToProcess = [];
+    let firstBuild = true;
+    // - - - - - - - - - - - - Sets to implement cache - - - - - - - - - - - -
+    const BUNDLES_TO_AVOID_REBUILD = [
+        "all",
+        "base/icons",
+        "resets/box-sizing",
+        "utils/form--full"
+    ];
+    const CSS_FILES_TO_AVOID_REMOVE = new Set(BUNDLES_TO_AVOID_REBUILD.map(bundleName => path.join(CSS_BUNDLES_OUT_DIR, bundleName + ".css")));
+    const SCSS_FILES_TO_AVOID_TRANSPILE = new Set(BUNDLES_TO_AVOID_REBUILD.map(bundleName => path.join(SCSS_BUNDLES_INPUT_DIR, bundleName + ".scss")));
+    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    const createWorkers = () => {
+        for (let index = 0; index < THREADS; index++) {
+            const worker = new Worker(__filename);
+            workers.push(worker);
+        }
+    };
+    const ensureAllDirectoryExists = (filesToProcess) => {
+        const CSS_CREATED_DIRS = new Set();
+        return filesToProcess.map(async (fileMetadata) => {
+            const cssOutDir = fileMetadata.dir.replace(SCSS_BUNDLES_INPUT_DIR, CSS_BUNDLES_OUT_DIR);
+            // Create the file directory if it does not exists
+            if (CSS_CREATED_DIRS.has(cssOutDir)) {
+                return Promise.resolve();
+            }
+            else {
+                CSS_CREATED_DIRS.add(cssOutDir);
+                return fs.mkdir(cssOutDir, { recursive: true });
+            }
+        });
+    };
+    const compileBundles = async (options) => {
+        let completedProcessingIndex = 0;
+        // First build where the directory has to be discovered
+        if (firstBuild) {
+            allFilesToProcess = await getFilesInDir(SCSS_BUNDLES_INPUT_DIR);
+            createWorkers();
+        }
+        const ACTUAL_FILES_TO_PROCESS = structuredClone(allFilesToProcess).filter(fileMetadata => !options ||
+            !options.scssFilesToAvoidTranspile.has(fileMetadata.filePath));
+        const TOTAL_FILES = ACTUAL_FILES_TO_PROCESS.length;
+        // Clear bundle directories
+        await ensureDirectoryExistsAndItsClear(BASE_BUNDLES_OUT_DIR, options?.cssFilesToAvoidRemove);
+        // Ensure all directories exists before transpiling any bundle
+        await Promise.all(ensureAllDirectoryExists(ACTUAL_FILES_TO_PROCESS));
+        let workersProcessingMetadata = 0;
+        let thereWasAnError = false;
+        const sendFileMetadataToWorker = (worker, fileMetadata) => {
+            worker.postMessage({ fileMetadata, cliArgs }); // Send the data to process the file
+            workersProcessingMetadata++;
+        };
+        const updateFileProcessingStatus = () => {
+            completedProcessingIndex++;
+            workersProcessingMetadata--;
+        };
+        return new Promise((resolve, reject) => workers.forEach(worker => {
+            let fileMetadata = ACTUAL_FILES_TO_PROCESS.pop();
+            sendFileMetadataToWorker(worker, fileMetadata);
+            // When the worker completes the processing, increase the index and
+            // check if there is work remaining to process in the thread
+            worker.on("message", message => {
+                updateFileProcessingStatus();
+                if (message === MESSAGE_TYPE.ERROR) {
+                    thereWasAnError = true;
+                }
+                // Stop all workers when there is an error
+                if (thereWasAnError) {
+                    worker.removeAllListeners("message");
+                    if (workersProcessingMetadata === 0) {
+                        reject();
+                    }
+                    return;
+                }
+                if (!watchMode) {
+                    printBundleWasTranspiled(fileMetadata.filePath);
+                }
+                // All metadatas were processed. Resolve the Promise
+                if (completedProcessingIndex === TOTAL_FILES) {
+                    worker.removeAllListeners("message");
+                    resolve(ACTUAL_FILES_TO_PROCESS);
+                }
+                // There is more metadata to be processed, add a new processing in
+                // the thread
+                else if (ACTUAL_FILES_TO_PROCESS.length > 0) {
+                    fileMetadata = ACTUAL_FILES_TO_PROCESS.pop();
+                    sendFileMetadataToWorker(worker, fileMetadata);
+                }
+                // Waiting for the last compilation to end. There is nothing to do,
+                // so we need to remove the listeners to ensure the following
+                // processing uses the workers in a "fresh" state
+                else {
+                    worker.removeAllListeners("message");
+                }
+            });
+        }));
+    };
+    const compileAndCreateBundles = async () => {
+        printRebuilding(firstBuild);
+        try {
+            // Compile all CSSs into the standard output (dist/bundles/css)
+            await compileBundles(firstBuild
+                ? undefined
+                : {
+                    cssFilesToAvoidRemove: CSS_FILES_TO_AVOID_REMOVE,
+                    scssFilesToAvoidTranspile: SCSS_FILES_TO_AVOID_TRANSPILE
+                });
+            // Clear the CLI dir output target
+            await ensureDirectoryExistsAndItsClear(cliArgs.outDirPath);
+            // Remove "Rebuilding..." message, since the next function will print
+            // some output in the console
+            stopRebuildingStdout();
+            // Copy the files from the standard output (dist/bundles/css) to the CLI
+            // output by applying the transformations for the icons and custom fonts
+            // paths.
+            //
+            // Last true value meaning: Don't hash the bundles in watch mode to avoid
+            // issues with Angular that caches the bundle mapping file, causing to
+            // not update the hashes for the fetches
+            await createBundlesWithCustomPaths(cliArgs, true);
+            refreshAngularBrowser();
+            firstBuild = false;
+        }
+        catch (err) {
+            stopRebuildingStdout();
+            if (err) {
+                console.log(err);
+            }
+        }
+    };
+    if (watchMode) {
+        measureTime(compileAndCreateBundles).finally(() => watchFileSystemChanges(compileAndCreateBundles));
+    }
+    // There is no need to wait for any changes, since the watch mode is not enabled
+    else {
+        await measureTime(compileBundles);
+        process.exit();
+    }
+}
+// Worker thread code
+else {
+    parentPort.on("message", (data) => transpileCssBundleWithPlaceholder(data.fileMetadata, data.cliArgs)
+        .then(() => parentPort.postMessage(MESSAGE_TYPE.SUCCESS))
+        .catch(err => {
+        console.error(err);
+        parentPort.postMessage(MESSAGE_TYPE.ERROR);
+    }));
+}

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

@@ -3,17 +3,11 @@ export declare const SCSS_BUNDLES_INPUT_DIR: string;
 export declare const BASE_BUNDLES_OUT_DIR: string;
 export declare const SCSS_BUNDLES_OUT_DIR: string;
 export declare const CSS_BUNDLES_OUT_DIR: string;
-export declare const JS_BUNDLES_OUT_DIR: string;
 export declare const BASE_BUNDLE = "base/base";
-export declare const BASE_BUNDLE_WITH_BACK_SLASH = "\\base\\base";
 export declare const BASE_GLOBANT_BUNDLE = "base/base-globant";
-export declare const BUNDLE_MAPPING_FILE = "bundle-mappings.js";
 export declare const BUNDLE_MAPPING_TO_HASH_FILE = "bundle-to-hash-mappings.ts";
-export declare const BASE_SCSS_FILE = "base.scss";
-export declare const BASE_GLOBANT_FILE = "base-globant";
+export declare const BASE_CSS_FILE = "base.css";
 export declare const BASE_GLOBANT_CSS_FILE = "base-globant.css";
-export declare const BASE_GLOBANT_JS_FILE = "base-globant.js";
-export declare const BASE_GLOBANT_SCSS_FILE = "base-globant.scss";
 export declare const ICONS_PATH_PLACEHOLDER = "{{ICONS_PATH}}";
 export declare const FONT_FACE_PATH_PLACEHOLDER = "{{FONT_FACE_PATH}}";
 export declare const DEFAULT_FONT_FACE_PATH = "./assets/fonts/";
@@ -21,8 +15,5 @@ export declare const DEFAULT_ICONS_PATH = "./assets/icons/";
 export declare const DEFAULT_OUT_DIR_PATH = "./.mercury";
 export declare const SEPARATE_BY_COMMA_REGEX: RegExp;
 export declare const SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX: RegExp;
-export declare const BUNDLE_MAPPING_ENTRIES: {
-    readonly BUNDLE_NAME: "bundleName";
-    readonly FILE_DIR: "fileDir";
-    readonly TRANSPILED_BUNDLE: "transpiledBundle";
-};
+export declare const HASH_LENGTH = 16;
+export declare const HASH_AND_LETTER_LENGTH: number;

package/dist/cli/internal/constants.js

@@ -1,21 +1,16 @@
 import path from "node:path";
+// import type { BundleAssociationMetadata } from "./types";
 export const KB = 1000;
 export const SCSS_BUNDLES_INPUT_DIR = path.join("src", "bundles", "scss");
 export const BASE_BUNDLES_OUT_DIR = path.join("dist", "bundles");
 export const SCSS_BUNDLES_OUT_DIR = path.join(BASE_BUNDLES_OUT_DIR, "scss");
 export const CSS_BUNDLES_OUT_DIR = path.join(BASE_BUNDLES_OUT_DIR, "css");
-export const JS_BUNDLES_OUT_DIR = path.join(BASE_BUNDLES_OUT_DIR, "js");
 export const BASE_BUNDLE = "base/base";
-export const BASE_BUNDLE_WITH_BACK_SLASH = "\\base\\base";
 export const BASE_GLOBANT_BUNDLE = "base/base-globant";
 // Files
-export const BUNDLE_MAPPING_FILE = "bundle-mappings.js";
 export const BUNDLE_MAPPING_TO_HASH_FILE = "bundle-to-hash-mappings.ts";
-export const BASE_SCSS_FILE = "base.scss";
-export const BASE_GLOBANT_FILE = "base-globant";
+export const BASE_CSS_FILE = "base.css";
 export const BASE_GLOBANT_CSS_FILE = "base-globant.css";
-export const BASE_GLOBANT_JS_FILE = "base-globant.js";
-export const BASE_GLOBANT_SCSS_FILE = "base-globant.scss";
 // Placeholders
 export const ICONS_PATH_PLACEHOLDER = "{{ICONS_PATH}}";
 export const FONT_FACE_PATH_PLACEHOLDER = "{{FONT_FACE_PATH}}";
@@ -25,9 +20,5 @@ export const DEFAULT_ICONS_PATH = "./assets/icons/";
 export const DEFAULT_OUT_DIR_PATH = "./.mercury";
 export const SEPARATE_BY_COMMA_REGEX = /\s*,\s*/g;
 export const SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX = /[\/-]/g;
-// Bundle mapping entries
-export const BUNDLE_MAPPING_ENTRIES = {
-    BUNDLE_NAME: "bundleName",
-    FILE_DIR: "fileDir",
-    TRANSPILED_BUNDLE: "transpiledBundle"
-};
+export const HASH_LENGTH = 16;
+export const HASH_AND_LETTER_LENGTH = HASH_LENGTH + 1;

package/dist/cli/internal/create-bundles-with-custom-paths.d.ts

@@ -1,2 +1,10 @@
-import type { CLIArguments } from "./types";
-export declare const createBundlesWithCustomPaths: (args: CLIArguments) => void;
+import type { CLIArguments, FileMetadata } from "./types";
+export declare const createBundleWithCustomPath: (args: CLIArguments, options: {
+    bundleFolder: string;
+    fileBaseDirToWrite: string;
+}, fileMetadata: FileMetadata, avoidAllHashes: boolean, actualFilePath: string) => {
+    bundleName: string;
+    bundleNameWithHash: string;
+    fileSize: string;
+};
+export declare const createBundlesWithCustomPaths: (args: CLIArguments, avoidAllHashes?: boolean) => Promise<void>;

package/dist/cli/internal/create-bundles-with-custom-paths.js

@@ -1,67 +1,114 @@
 import fs from "node:fs";
 import path from "node:path";
-// @ts-expect-error: This file does exists after the bundle transpilation process
-import { bundleMappings } from "../../bundles/js/bundle-mappings.js";
-import { BASE_BUNDLE, BASE_GLOBANT_BUNDLE, BUNDLE_MAPPING_TO_HASH_FILE } from "./constants.js";
-import { getBundleNameWithHash, getHash, replacePlaceholdersInBundle } from "./utils.js";
-import { printBundleToHashMappingsWasCreated, printBundleWasCreated } from "./print-utils.js";
-const findLargestPath = () => {
-    let largestBundleLength = 0;
-    bundleMappings.forEach(entry => {
-        largestBundleLength = Math.max(largestBundleLength, entry.bundleName.length);
+import { fileURLToPath } from "node:url";
+import { BASE_BUNDLE, BASE_CSS_FILE, BASE_GLOBANT_BUNDLE, BASE_GLOBANT_CSS_FILE, BUNDLE_MAPPING_TO_HASH_FILE, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, HASH_AND_LETTER_LENGTH } from "./constants.js";
+import { getFilesInDir } from "./file-management.js";
+import { getBundleFolderAndFileBaseDir, getBundleName, getFileNameWithHash, getFileNameWithoutExt, getFileSize, getHash, sanitizeBundleName } from "./utils.js";
+import { printBundleWasCreated, printBundleWasCreatedTableHeader } from "./print-utils.js";
+export const createBundleWithCustomPath = (args, options, fileMetadata, avoidAllHashes, actualFilePath) => {
+    const { avoidHash, fontFacePath, iconsPath } = args;
+    const { bundleFolder, fileBaseDirToWrite } = options;
+    const fileNameWithoutExt = getFileNameWithoutExt(fileMetadata);
+    const bundleName = getBundleName(fileMetadata);
+    // Copy CSS bundle
+    let css = fs.readFileSync(actualFilePath ?? fileMetadata.filePath, {
+        encoding: "utf8"
     });
-    return largestBundleLength;
+    if (fontFacePath !== DEFAULT_FONT_FACE_PATH) {
+        css = css.replaceAll(DEFAULT_FONT_FACE_PATH, fontFacePath);
+    }
+    if (iconsPath !== DEFAULT_ICONS_PATH) {
+        css = css.replaceAll(DEFAULT_ICONS_PATH, iconsPath);
+    }
+    const fileNameWithHash = avoidAllHashes || avoidHash.has(bundleName)
+        ? fileNameWithoutExt
+        : getFileNameWithHash(fileNameWithoutExt, getHash(css));
+    const fileNameToWriteCss = `${fileNameWithHash}.css`;
+    const filePathWithHash = path.join(fileBaseDirToWrite, fileNameToWriteCss);
+    // Create the CSS bundle with hash
+    fs.writeFileSync(filePathWithHash, css);
+    return {
+        bundleName,
+        bundleNameWithHash: sanitizeBundleName(`${bundleFolder}/${fileNameWithHash}`),
+        fileSize: getFileSize(css)
+    };
 };
-const getActualBundleName = (bundleName) => bundleName === BASE_BUNDLE || bundleName === BASE_GLOBANT_BUNDLE
-    ? BASE_BUNDLE
-    : bundleName;
-const shouldSkipBundleCreation = (bundleName, globant) => (bundleName === BASE_BUNDLE && globant) ||
-    (bundleName === BASE_GLOBANT_BUNDLE && !globant);
-export const createBundlesWithCustomPaths = (args) => {
-    const { avoidHash, fontFacePath, iconsPath, globant } = args;
+export const createBundlesWithCustomPaths = async (args, avoidAllHashes = false) => {
+    const hasGlobantVariant = args.globant;
     const outDir = path.join(args.outDirPath);
     const CREATED_DIRS = new Set();
-    const largestBundleLength = findLargestPath();
-    let bundleMappingToHashObjectEntries = "";
-    bundleMappings.forEach(entry => {
-        const { bundleName, fileDir, transpiledBundle } = entry;
-        if (shouldSkipBundleCreation(bundleName, globant)) {
-            return;
+    // This is a WA to have __filename and __dirname in ES modules
+    const __filename = fileURLToPath(import.meta.url);
+    // Directory name where the script is located (<path from root to node_modules/@genexus/mercury>/dist/cli/)
+    const __dirname = path.dirname(__filename);
+    const cssOutput = path.join(__dirname, "../../bundles/css");
+    /**
+     * Files to transpile
+     */
+    const allFilesToCopy = await getFilesInDir(cssOutput);
+    let largestBundleLength = BUNDLE_MAPPING_TO_HASH_FILE.length;
+    let largestFileSizeLength = 0;
+    allFilesToCopy.forEach(fileMetadata => {
+        const options = getBundleFolderAndFileBaseDir(fileMetadata, outDir);
+        largestBundleLength = Math.max(largestBundleLength, options.bundleFolder.length + fileMetadata.fileName.length);
+    });
+    if (!avoidAllHashes) {
+        largestBundleLength += HASH_AND_LETTER_LENGTH;
+    }
+    const copiedFiles = [];
+    allFilesToCopy.forEach(fileMetadata => {
+        const bundleName = getBundleName(fileMetadata);
+        const options = getBundleFolderAndFileBaseDir(fileMetadata, outDir);
+        const { fileBaseDirToWrite } = options;
+        let actualFilePath = fileMetadata.filePath;
+        if (!CREATED_DIRS.has(fileBaseDirToWrite)) {
+            CREATED_DIRS.add(fileBaseDirToWrite);
+            fs.mkdirSync(path.join(fileBaseDirToWrite), { recursive: true });
         }
-        const actualBundleName = getActualBundleName(bundleName);
-        const compiledBundleWithoutPlaceholders = replacePlaceholdersInBundle(transpiledBundle, fontFacePath, iconsPath);
-        const hash = getHash(compiledBundleWithoutPlaceholders);
-        if (fileDir && !CREATED_DIRS.has(fileDir)) {
-            fs.mkdirSync(path.join(outDir, fileDir), { recursive: true });
-            CREATED_DIRS.add(fileDir);
+        // There is no need to copy 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_CSS_FILE, BASE_GLOBANT_CSS_FILE);
+            }
         }
-        const bundleNameWithHash = avoidHash.has(actualBundleName)
-            ? actualBundleName
-            : getBundleNameWithHash(actualBundleName, hash);
-        const filePathToCreateBundle = path.join(outDir, `${bundleNameWithHash}.css`);
-        fs.writeFileSync(filePathToCreateBundle, compiledBundleWithoutPlaceholders);
-        printBundleWasCreated({
-            outDir,
-            bundleName: actualBundleName,
-            compiledBundleWithoutPlaceholders,
-            filePathToCreateBundle,
-            // WA to improve style
-            largestBundleLength: largestBundleLength + (avoidHash.has(actualBundleName) ? 17 : 0)
-        });
-        // Store the bundle mapping.
-        // For example: "components/button" --> "components/button-9f82641938b85445"
-        const bundleToHashEntry = `  "${actualBundleName}": "${bundleNameWithHash}"`;
-        // Concat entries in the object
-        bundleMappingToHashObjectEntries +=
-            bundleMappingToHashObjectEntries === ""
-                ? bundleToHashEntry
-                : ",\n" + bundleToHashEntry;
+        copiedFiles.push(createBundleWithCustomPath(args, options, fileMetadata, avoidAllHashes, actualFilePath));
     });
-    bundleMappingToHashObjectEntries = `export const bundleToHashMappings = {\n${bundleMappingToHashObjectEntries}\n} as const;\n`;
+    copiedFiles.sort((a, b) => (a.bundleName <= b.bundleName ? -1 : 0));
+    const bundleMappingFileContent = `export const bundleToHashMappings = {\n${copiedFiles.map(entry => `  "${entry.bundleName}": "${entry.bundleNameWithHash}"`).join(",\n")}\n} as const;\n`;
+    const bundleMappingFileSize = getFileSize(bundleMappingFileContent);
     const bundleMappingFilePath = path.join(outDir, BUNDLE_MAPPING_TO_HASH_FILE);
-    fs.writeFileSync(bundleMappingFilePath, bundleMappingToHashObjectEntries);
-    printBundleToHashMappingsWasCreated({
-        outDir,
-        filePath: bundleMappingFilePath
+    // Compute the largest fileName length
+    largestFileSizeLength = copiedFiles.reduce((acc, copiedFile) => Math.max(acc, copiedFile.fileSize.length), bundleMappingFileSize.length);
+    printBundleWasCreatedTableHeader({
+        largestBundleLength: avoidAllHashes
+            ? largestBundleLength
+            : largestBundleLength + 1,
+        outDir
+    });
+    // Print bundle created message
+    for (let index = 0; index < copiedFiles.length; index++) {
+        const entry = copiedFiles[index];
+        printBundleWasCreated({
+            bundleNameWithHash: `${entry.bundleNameWithHash}.css`,
+            fileSize: entry.fileSize,
+            largestBundleLength,
+            largestFileSizeLength,
+            outDir
+        });
+    }
+    fs.writeFileSync(bundleMappingFilePath, bundleMappingFileContent);
+    // Separate the TS file
+    console.log("");
+    printBundleWasCreated({
+        bundleNameWithHash: BUNDLE_MAPPING_TO_HASH_FILE,
+        fileSize: getFileSize(bundleMappingFileContent),
+        largestBundleLength,
+        largestFileSizeLength,
+        outDir
     });
 };

package/dist/cli/internal/file-management.d.ts

@@ -1,4 +1,5 @@
 import type { FileMetadata } from "./types";
-export declare const ensureDirectoryExistsAndItsClear: (dirPath: string) => void;
-export declare function walkSync(dir: string): Generator<FileMetadata>;
+export declare const ensureDirectoryExistsAndItsClear: (dirPath: string, filesToNotRemove?: Set<string>) => Promise<void>;
+export declare const getFilesInDir: (dir: string) => Promise<FileMetadata[]>;
 export declare const copyDirectories: (srcDir: string, outDir: string) => void;
+export declare const refreshAngularBrowser: () => void;

package/dist/cli/internal/file-management.js

@@ -1,20 +1,53 @@
 import fs from "node:fs";
 import path from "node:path";
-export const ensureDirectoryExistsAndItsClear = (dirPath) => {
-    if (fs.existsSync(dirPath)) {
+import { readdir, rm } from "node:fs/promises";
+export const ensureDirectoryExistsAndItsClear = async (dirPath, filesToNotRemove) => {
+    // First build
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+        return;
+    }
+    // Incremental rebuild keeps some file without any changes, so we must skip
+    // the file deletion
+    if (filesToNotRemove) {
+        const filesInDir = await getFilesInDir(dirPath);
+        await Promise.all(filesInDir.map(file => filesToNotRemove.has(file.filePath)
+            ? Promise.resolve()
+            : rm(file.filePath)));
+    }
+    // Incremental rebuild did not include any file to exclude its removal
+    else {
         fs.rmSync(dirPath, { recursive: true });
+        fs.mkdirSync(dirPath, { recursive: true });
     }
-    fs.mkdirSync(dirPath, { recursive: true });
 };
-export function* walkSync(dir) {
-    const files = fs.readdirSync(dir, { withFileTypes: true });
-    for (const file of files) {
-        if (file.isDirectory()) {
-            yield* walkSync(path.join(dir, file.name));
-        }
-        else {
-            yield { dir, fileName: file.name, filePath: path.join(dir, file.name) };
+export const getFilesInDir = async (dir) => {
+    const filesAndDirs = await readdir(dir, {
+        withFileTypes: true,
+        recursive: true
+    });
+    const files = [];
+    for (let index = 0; index < filesAndDirs.length; index++) {
+        const file = filesAndDirs[index];
+        if (file.isFile()) {
+            files.push({
+                dir: file.parentPath,
+                fileName: file.name,
+                filePath: path.join(file.parentPath, file.name)
+            });
         }
     }
-}
+    return files;
+};
 export const copyDirectories = (srcDir, outDir) => fs.cpSync(srcDir, outDir, { recursive: true });
+export const refreshAngularBrowser = () => {
+    const ANGULAR_FILE_TO_TRIGGER_RELOAD = path.join(process.cwd(), "../showcase/src/index.html");
+    const FILE_CONTENT = fs.readFileSync(ANGULAR_FILE_TO_TRIGGER_RELOAD, {
+        encoding: "utf8"
+    });
+    // Trigger a dummy write in the index.html
+    fs.writeFileSync(ANGULAR_FILE_TO_TRIGGER_RELOAD, FILE_CONTENT + "\n");
+    // Rollback that write to not provoke any changes, but do it after the
+    // debounce of the Angular CLI has completed the queued HMR
+    setTimeout(() => fs.writeFileSync(ANGULAR_FILE_TO_TRIGGER_RELOAD, FILE_CONTENT), 300);
+};

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

@@ -1,13 +1,13 @@
-export declare const printBundleWasCreated: (args: {
+export declare const printBundleWasCreatedTableHeader: (args: {
     outDir: string;
-    bundleName: string;
     largestBundleLength: number;
-    filePathToCreateBundle: string;
-    compiledBundleWithoutPlaceholders: string;
 }) => void;
-export declare const printBundleToHashMappingsWasCreated: (args: {
+export declare const printBundleWasCreated: (args: {
     outDir: string;
-    filePath: string;
+    bundleNameWithHash: string;
+    largestBundleLength: number;
+    largestFileSizeLength: number;
+    fileSize: string;
 }) => void;
 export declare const printBundleWasTranspiled: (filePath: string) => void;
 export declare const printArgumentDoesNotExistsError: (arg: string) => void;

package/dist/cli/internal/print-utils.js

@@ -1,18 +1,20 @@
 import { styleText } from "node:util";
-import { getFileSize } from "./utils.js";
-import { DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, DEFAULT_OUT_DIR_PATH, SCSS_BUNDLES_OUT_DIR } from "./constants.js";
-export const printBundleWasCreated = (args) => console.log(styleText("greenBright", "  Created: ") +
-    styleText("white", args.outDir) +
-    styleText("whiteBright", args.filePathToCreateBundle.replace(args.outDir, "")) +
-    styleText("cyan", " ".repeat(1 + args.largestBundleLength - args.bundleName.length) +
-        getFileSize(args.compiledBundleWithoutPlaceholders)));
-export const printBundleToHashMappingsWasCreated = (args) => console.log("\n" +
-    styleText("greenBright", "  Created: ") +
-    styleText("white", args.outDir) +
-    styleText("whiteBright", args.filePath.replace(args.outDir, "")));
+import { DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, DEFAULT_OUT_DIR_PATH, SCSS_BUNDLES_INPUT_DIR, SCSS_BUNDLES_OUT_DIR } from "./constants.js";
+import path from "node:path";
+const separator = () => styleText(["gray"], " | ");
+export const printBundleWasCreatedTableHeader = (args) => console.log(styleText(["white", "bold"], "Files") +
+    " ".repeat(args.largestBundleLength + args.outDir.length - "Files".length) +
+    separator() +
+    styleText(["white", "bold"], "Raw size"));
+export const printBundleWasCreated = (args) => console.log(styleText("white", args.outDir) +
+    styleText("greenBright", path.join(args.outDir, args.bundleNameWithHash).replace(args.outDir, "")) +
+    " ".repeat(Math.max(args.largestBundleLength - args.bundleNameWithHash.length, 0)) +
+    separator() +
+    " ".repeat(Math.max(args.largestFileSizeLength - args.fileSize.length, 0)) +
+    styleText("cyanBright", args.fileSize));
 export const printBundleWasTranspiled = (filePath) => console.log(styleText("greenBright", "  Transpiled: ") +
     styleText("white", SCSS_BUNDLES_OUT_DIR) +
-    styleText("whiteBright", filePath.replace(SCSS_BUNDLES_OUT_DIR, "")));
+    styleText("whiteBright", filePath.replace(SCSS_BUNDLES_INPUT_DIR, "")));
 export const printArgumentDoesNotExistsError = (arg) => console.log(styleText("red", "  error ") +
     styleText("gray", "Argument does not exists: ") +
     `'${arg}'`);

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

@@ -1,3 +1,2 @@
-import { FileMetadata } from "./types.js";
-export declare const transpileCssBundleWithPlaceholder: (fileMetadata: FileMetadata) => void;
-export declare const createBundleMappingsFile: () => void;
+import type { CLIArguments, FileMetadata } from "./types";
+export declare const transpileCssBundleWithPlaceholder: (fileMetadata: FileMetadata, args?: CLIArguments) => Promise<void>;