at-builder 1.1.9 → 1.2.1

package/.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run build:prod:*)",
+      "Bash(node:*)",
+      "Bash(npx tsc:*)",
+      "Bash(find:*)"
+    ],
+    "deny": []
+  }
+}

package/CustomWrapperPlugin.js

@@ -0,0 +1,61 @@
+'use strict';
+
+/**
+ * A custom Webpack plugin to wrap bundled assets with a header and footer.
+ */
+class CustomWrapperPlugin {
+    /**
+     * Creates an instance of CustomWrapperPlugin.
+     * @param {object} options - The plugin options.
+     * @param {RegExp} options.test - A regular expression to match file paths that should be wrapped.
+     * @param {string|Function} [options.header=''] - The content to prepend to the file. Can be a string or a function that returns a string.
+     * @param {string|Function} [options.footer=''] - The content to append to the file. Can be a string or a function that returns a string.
+     */
+    constructor(options) {
+        this.options = options || {};
+    }
+
+    /**
+     * Applies the plugin to the Webpack compiler.
+     * @param {import('webpack').Compiler} compiler - The Webpack compiler instance.
+     */
+    apply(compiler) {
+        const pluginName = this.constructor.name;
+        const { webpack } = compiler;
+        const { Compilation } = webpack;
+
+        compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+            compilation.hooks.processAssets.tap(
+                {
+                    name: pluginName,
+                    stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
+                },
+                (assets) => {
+                    for (const pathname in assets) {
+                        if (this.options.test && this.options.test.test(pathname)) {
+                            const asset = compilation.getAsset(pathname);
+                            const source = asset.source.source();
+                            const args = { hash: compilation.hash };
+
+                            const wrappedSource =
+                                (typeof this.options.header === 'function'
+                                    ? this.options.header(source, args)
+                                    : this.options.header || '') +
+                                source +
+                                (typeof this.options.footer === 'function'
+                                    ? this.options.footer(source, args)
+                                    : this.options.footer || '');
+
+                            compilation.updateAsset(
+                                pathname,
+                                new webpack.sources.RawSource(wrappedSource)
+                            );
+                        }
+                    }
+                }
+            );
+        });
+    }
+}
+
+module.exports = CustomWrapperPlugin;

package/bin/constants/config.js

@@ -1,22 +1,25 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getENV = exports.setupEnv = exports.getHelpInfo = exports.getVersion = void 0;
-const path = require("path");
-const fs = require("fs");
-var clc = require("cli-color");
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const cli_color_1 = __importDefault(require("cli-color"));
 /**
  * Reads and returns the version from package.json
  * @returns {Promise<string>} The version of the package
  */
 const getVersion = async () => {
-    const packageJSONPath = path.resolve(__dirname, "../../package.json");
+    const packageJSONPath = path_1.default.resolve(__dirname, "../../package.json");
     try {
-        const content = await fs.promises.readFile(packageJSONPath, { encoding: "utf8" });
+        const content = await fs_1.default.promises.readFile(packageJSONPath, { encoding: "utf8" });
         const config = JSON.parse(content);
         return config.version;
     }
     catch (error) {
-        console.error(clc.red("Error reading package.json or parsing JSON"));
+        console.error(cli_color_1.default.red("Error reading package.json or parsing JSON"));
         process.exit(1); // Exit the process if package.json is not found or malformed
     }
 };
@@ -31,11 +34,17 @@ exports.getVersion = exports.getVersion;
  * @returns {string} The formatted text
  */
 const formatText = (text, color = "white", bold = false, underline = false) => {
-    let formattedText = clc[color](text);
+    let formattedText = text;
+    // Apply color
+    const colorFn = cli_color_1.default[color];
+    if (typeof colorFn === 'function') {
+        formattedText = colorFn(text);
+    }
+    // Apply formatting
     if (bold)
-        formattedText = clc.bold(formattedText);
+        formattedText = cli_color_1.default.bold(formattedText);
     if (underline)
-        formattedText = clc.underline(formattedText);
+        formattedText = cli_color_1.default.underline(formattedText);
     return formattedText;
 };
 /**
@@ -45,33 +54,64 @@ const formatText = (text, color = "white", bold = false, underline = false) => {
 const getHelpInfo = async () => {
     const version = await (0, exports.getVersion)();
     return `
-${formatText(`at-builder (version: ${version})`, 'green', false, true)}
+${formatText(`🎯 at-builder`, 'cyan', true)} ${formatText(`v${version}`, 'gray')}
 
-${formatText("A simple command to run Adobe Target builder.", 'white', true)}
+${formatText("Adobe Target Activity Development CLI", 'white', true)}
 
-Usage: \`atb\`
+A streamlined command-line tool for creating, building, and deploying Adobe Target 
+A/B testing activities with modern web technologies.
 
-Available Commands:
+${formatText("USAGE", 'yellow', true)}
+    ${formatText("atb", 'cyan')} ${formatText("<command> [options]", 'gray')}
 
-${formatText("new", 'blue', true, true)}  Creates a new activity
-${formatText("build", 'blue', true, true)}  Create build
-${formatText("build -p", 'blue', true, true)}  Create production build
+${formatText("COMMANDS", 'yellow', true)}
+    ${formatText("init", 'cyan', true)}           Initialize project with .env configuration and templates
+    ${formatText("new", 'cyan', true)}            Create a new Adobe Target activity with variations
+    ${formatText("build", 'cyan', true)}          Build activity for development
+    ${formatText("build --prod", 'cyan', true)}   Build for production deployment
+    ${formatText("dev", 'cyan', true)}            Start development server with file watching
+    ${formatText("dev --browser", 'cyan', true)}  Start development server and open in browser
+    
+${formatText("GLOBAL OPTIONS", 'yellow', true)}
+    ${formatText("-v, --verbose", 'green')}       Enable detailed logging
+    ${formatText("-V, --version", 'green')}       Display version information
+    ${formatText("-h, --help", 'green')}          Show help information
 
-Example:
+${formatText("EXAMPLES", 'yellow', true)}
+    ${formatText("# Initialize new project", 'gray')}
+    ${formatText("atb init", 'white')}
+    
+    ${formatText("# Create new activity", 'gray')}
+    ${formatText("atb new", 'white')}
+    
+    ${formatText("# Development build with hot reload", 'gray')}
+    ${formatText("atb build", 'white')}
+    
+    ${formatText("# Production build for Adobe Target deployment", 'gray')}
+    ${formatText("atb build --prod", 'white')}
+    
+    ${formatText("# Development server with browser", 'gray')}
+    ${formatText("atb dev --browser", 'white')}
 
-atb -c new  # Creates a new activity
-atb -c build  # Creates a build
-atb -p -c build  # Creates a build for production
+${formatText("WORKFLOW", 'yellow', true)}
+    ${formatText("1.", 'cyan')} Run ${formatText("atb init", 'white')} to set up project configuration
+    ${formatText("2.", 'cyan')} Run ${formatText("atb new", 'white')} to create activity templates  
+    ${formatText("3.", 'cyan')} Develop variations in ${formatText("/Activities/{name}/Variation-*/", 'gray')}
+    ${formatText("4.", 'cyan')} Run ${formatText("atb build", 'white')} for development testing
+    ${formatText("5.", 'cyan')} Run ${formatText("atb build --prod", 'white')} for Adobe Target deployment
 
-For more information on a specific command, run \`atb <command> --help\`
-    `;
+${formatText("SUPPORT", 'yellow', true)}
+    Repository: ${formatText("https://github.com/upesenga/at-builder", 'blue')}
+    Issues:     ${formatText("https://github.com/upesenga/at-builder/issues", 'blue')}
+    License:    ${formatText("MIT", 'green')}
+`;
 };
 exports.getHelpInfo = getHelpInfo;
 const setupEnv = async (basePath) => {
     // Path to the .env file
-    const envPath = path.join(basePath, '.env');
+    const envPath = path_1.default.join(basePath, '.env');
     // Check if the .env file exists
-    if (!fs.existsSync(envPath)) {
+    if (!fs_1.default.existsSync(envPath)) {
         // Define the content of the .env file
         const envContent = `
 ACTIVITY_FOLDER_NAME=""
@@ -83,7 +123,7 @@ NODE_ENV="development"
 VERBOSE=false
     `;
         // Write the content to the .env file
-        fs.writeFileSync(envPath, envContent.trim(), 'utf8');
+        fs_1.default.writeFileSync(envPath, envContent.trim(), 'utf8');
         console.log('.env file created successfully!');
     }
     else {
@@ -94,14 +134,14 @@ VERBOSE=false
 exports.setupEnv = setupEnv;
 const createWatchConfig = (basePath) => {
     // Path to the watch-config.json file
-    const watchConfigPath = path.join(basePath, 'watch-config.json');
+    const watchConfigPath = path_1.default.join(basePath, 'watch-config.json');
     // Default content for watch-config.json
     const watchConfigContent = {
         "VARIATION": "Variation-1"
     };
     // Check if the watch-config.json file already exists
-    if (!fs.existsSync(watchConfigPath)) {
-        fs.writeFileSync(watchConfigPath, JSON.stringify(watchConfigContent, null, 2), 'utf8');
+    if (!fs_1.default.existsSync(watchConfigPath)) {
+        fs_1.default.writeFileSync(watchConfigPath, JSON.stringify(watchConfigContent, null, 2), 'utf8');
         console.log('watch-config.json file created successfully!');
     }
     else {
@@ -114,14 +154,14 @@ const createWatchConfig = (basePath) => {
  * @returns {Promise<Object>} Object containing environment variables
  */
 const getENV = async (basePath) => {
-    const envPath = path.join(basePath, '.env');
+    const envPath = path_1.default.join(basePath, '.env');
     try {
         // Check if .env file exists
-        if (!fs.existsSync(envPath)) {
+        if (!fs_1.default.existsSync(envPath)) {
             throw new Error('.env file not found');
         }
         // Read the .env file
-        const envContent = await fs.promises.readFile(envPath, { encoding: 'utf8' });
+        const envContent = await fs_1.default.promises.readFile(envPath, { encoding: 'utf8' });
         // Parse the .env file content
         const envVars = {};
         envContent.split('\n').forEach(line => {
@@ -139,7 +179,7 @@ const getENV = async (basePath) => {
         return envVars;
     }
     catch (error) {
-        console.error(clc.red(`Error reading .env file: ${error.message}`));
+        console.error(cli_color_1.default.red(`Error reading .env file: ${error.message}`));
         throw error;
     }
 };

package/bin/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const child_process_1 = require("child_process");
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
-const inquirer_1 = __importDefault(require("inquirer"));
 const commander_1 = require("commander");
 const config_1 = require("./constants/config");
 const logger_1 = __importDefault(require("./services/logger"));
@@ -34,21 +33,51 @@ const productionEnv = {
     ...process.env,
     executionPath: process.cwd()
 };
-// Commander setup
+// Commander setup with proper subcommands
 const setupCommander = async () => {
     logger_1.default.info("setupCommander", "Setting up commander");
     const version = await (0, config_1.getVersion)();
-    logger_1.default.info("setupCommander", `Version: ${version}`);
     const program = new commander_1.Command();
     program
+        .name('atb')
+        .description('Adobe Target Activity Development CLI')
         .version(version, "-V, --version")
-        .usage("[OPTIONS]...")
-        .option("-c, --command <value>")
-        .option("-p, --prod")
-        .option("-v, --verbose", "Enable verbose logging")
-        .parse(process.argv);
+        .option("-v, --verbose", "Enable verbose logging");
+    // Add subcommands with proper actions
+    program
+        .command('init')
+        .description('Initialize project with .env configuration and templates')
+        .action(async (options, command) => {
+        const globalOpts = command.parent.opts();
+        await handleInit(globalOpts.verbose);
+    });
+    program
+        .command('new')
+        .description('Create a new Adobe Target activity with variations')
+        .action(async (options, command) => {
+        const globalOpts = command.parent.opts();
+        await handleNew(globalOpts.verbose);
+    });
+    program
+        .command('build')
+        .description('Build activity for development or production')
+        .option('--prod', 'Build for production deployment')
+        .action(async (options, command) => {
+        const globalOpts = command.parent.opts();
+        checkEnvFile();
+        await handleBuild(options.prod, globalOpts.verbose);
+    });
+    program
+        .command('dev')
+        .description('Start development server with file watching')
+        .option('--browser', 'Open in browser automatically')
+        .action(async (options, command) => {
+        const globalOpts = command.parent.opts();
+        checkEnvFile();
+        await handleDev(options.browser, globalOpts.verbose);
+    });
+    await program.parseAsync(process.argv);
     logger_1.default.info("setupCommander", "Commander setup complete");
-    return program.opts();
 };
 /**
  * Spawn a command using `npm` with the given command array and environment object.
@@ -69,120 +98,77 @@ const runCommand = (commandArr, env) => {
     });
 };
 /**
- * Handles the build process based on the given options.
- *
- * @param {boolean} prod - If true, runs the build with production environment.
- *                          If false, runs the build with development environment.
+ * Handles the init command
+ */
+const handleInit = async (verbose) => {
+    if (verbose)
+        logger_1.default.info("verbose", "Initializing new .env file");
+    runCommand(["init -y"], productionEnv);
+    runCommand(["install @babel/runtime", "-D"], productionEnv);
+    (0, config_1.setupEnv)(process.cwd());
+};
+/**
+ * Handles the new command
+ */
+const handleNew = async (verbose) => {
+    if (verbose)
+        logger_1.default.info("verbose", "Creating new activity");
+    runCommand(["run", "new-activity"], productionEnv);
+};
+/**
+ * Handles the build command
  */
-const handleBuild = async (prod) => {
-    logger_1.default.info("handleBuild", `Handling build with options: production=${prod}`);
+const handleBuild = async (prod, verbose) => {
+    if (verbose)
+        logger_1.default.info("verbose", `Building in ${prod ? 'production' : 'development'} mode`);
     if (prod) {
-        // Set production environment
         process.env['NODE_ENV'] = 'production';
         logger_1.default.info("handleBuild", "Running build with production environment");
-        // Run the build command
         runCommand(['run', 'build-prod'], productionEnv);
     }
     else {
         logger_1.default.info("handleBuild", "Running build with development environment");
-        // Prompt the user to ask if they want to open the build in a browser tab
-        const { openInBrowser } = await inquirer_1.default.prompt([
-            {
-                type: 'confirm',
-                name: 'openInBrowser',
-                message: 'Do you want to open your build in a browser tab?',
-                default: false,
-            },
-        ]);
-        logger_1.default.info("handleBuild", `User opted for opening in browser: ${openInBrowser}`);
-        const commandArr = ['run', 'dev'];
-        if (openInBrowser) {
-            // If the user wants to open the build in a browser, run the build with
-            // puppeteer
-            commandArr[1] = 'dev-puppeteer';
-        }
-        logger_1.default.info("handleBuild", `Running command: ${commandArr.join(', ')}`);
-        // Run the build command
-        runCommand(commandArr, productionEnv);
-        // TO_DO: verify
-        // process.exit(0);
+        runCommand(['run', 'dev'], productionEnv);
     }
 };
+/**
+ * Handles the dev command
+ */
+const handleDev = async (browser, verbose) => {
+    if (verbose)
+        logger_1.default.info("verbose", `Starting development server with browser=${browser}`);
+    const commandArr = ['run', browser ? 'dev-puppeteer' : 'dev'];
+    logger_1.default.info("handleDev", `Running command: ${commandArr.join(', ')}`);
+    runCommand(commandArr, productionEnv);
+};
 // Command execution logic
 /**
- * Handles the command execution based on the given options.
- *
- * @returns {Promise<void>}
+ * Main command execution entry point
  */
 const executeCommand = async () => {
     logger_1.default.info("executeCommand", "Entering executeCommand");
-    // Check if .env file is present
-    // Get the command options
-    const options = await setupCommander();
-    if (options.command !== 'init')
-        checkEnvFile();
-    logger_1.default.info("executeCommand", `Options: ${JSON.stringify(options)}`);
-    /**
-     * Logs a message if verbose mode is enabled
-     * @param {string} message - The message to log
-     */
-    const verboseLog = (message) => {
-        if (options.verbose) {
-            logger_1.default.info("verbose", message);
-        }
-    };
-    switch (options.command) {
-        case "init":
-            // Initialize new .env file
-            verboseLog("Initializing new .env file");
-            runCommand(["init -y"], productionEnv);
-            runCommand(["install @babel/runtime", "-D"], productionEnv);
-            (0, config_1.setupEnv)(process.cwd());
-            break;
-        case "new":
-            // Create new activity
-            verboseLog("Creating new activity");
-            runCommand(["run", "new-activity"], productionEnv);
-            break;
-        case "build":
-            // Build the application in production or development mode
-            verboseLog(`Building in ${options.prod ? 'production' : 'development'} mode`);
-            await handleBuild(options.prod);
-            break;
-        default:
-            // Print command help
-            printCommandHelp();
-            process.exit(0);
-            break;
-    }
+    await setupCommander();
     logger_1.default.info("executeCommand", "Exiting executeCommand");
 };
 // Print command help
 const printCommandHelp = async () => {
     const help = await (0, config_1.getHelpInfo)();
-    logger_1.default.info("printCommandHelp", help);
+    console.log(help);
     process.exit(0);
 };
 /**
  * Main program flow
- *
- * This function is the main entry point of the program. It attempts to execute
- * the command specified by the user. If the command fails, it logs the error
- * message and exits with code 1.
  */
 const main = async () => {
     try {
-        // Execute the command specified by the user
         await executeCommand();
     }
     catch (error) {
-        // Log the error message if the command fails
         logger_1.default.error("main", error.message);
-        // Exit with code 1 if the command fails
         process.exit(1);
     }
 };
-// Print help if no arguments
+// Print custom help if no arguments, otherwise let Commander.js handle everything
 if (process.argv.length <= 2) {
     printCommandHelp();
 }

package/lib/CustomWrapperPlugin.js

@@ -0,0 +1,61 @@
+'use strict';
+
+/**
+ * A custom Webpack plugin to wrap bundled assets with a header and footer.
+ */
+class CustomWrapperPlugin {
+    /**
+     * Creates an instance of CustomWrapperPlugin.
+     * @param {object} options - The plugin options.
+     * @param {RegExp} options.test - A regular expression to match file paths that should be wrapped.
+     * @param {string|Function} [options.header=''] - The content to prepend to the file. Can be a string or a function that returns a string.
+     * @param {string|Function} [options.footer=''] - The content to append to the file. Can be a string or a function that returns a string.
+     */
+    constructor(options) {
+        this.options = options || {};
+    }
+
+    /**
+     * Applies the plugin to the Webpack compiler.
+     * @param {import('webpack').Compiler} compiler - The Webpack compiler instance.
+     */
+    apply(compiler) {
+        const pluginName = this.constructor.name;
+        const { webpack } = compiler;
+        const { Compilation } = webpack;
+
+        compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+            compilation.hooks.processAssets.tap(
+                {
+                    name: pluginName,
+                    stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
+                },
+                (assets) => {
+                    for (const pathname in assets) {
+                        if (this.options.test && this.options.test.test(pathname)) {
+                            const asset = compilation.getAsset(pathname);
+                            const source = asset.source.source();
+                            const args = { hash: compilation.hash };
+
+                            const wrappedSource =
+                                (typeof this.options.header === 'function'
+                                    ? this.options.header(source, args)
+                                    : this.options.header || '') +
+                                source +
+                                (typeof this.options.footer === 'function'
+                                    ? this.options.footer(source, args)
+                                    : this.options.footer || '');
+
+                            compilation.updateAsset(
+                                pathname,
+                                new webpack.sources.RawSource(wrappedSource)
+                            );
+                        }
+                    }
+                }
+            );
+        });
+    }
+}
+
+module.exports = CustomWrapperPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "at-builder",
-    "version": "1.1.9",
+    "version": "1.2.1",
     "main": "bin/index.js",
     "bin": {
         "atb": "bin/index.js"
@@ -56,12 +56,14 @@
     },
     "description": "[![npm version](https://badge.fury.io/js/at-builder.svg)](https://www.npmjs.com/package/at-builder)   [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)",
     "directories": {
-        "lib": "lib"
+        "lib": "lib",
+        "test": "test"
     },
     "devDependencies": {
-        "@babel/runtime": "^7.26.7",
+        "@babel/runtime": "^7.28.3",
         "@eslint/js": "^9.20.0",
         "globals": "^15.15.0",
+        "kleur": "^4.1.5",
         "typescript-eslint": "^8.24.1"
     },
     "repository": {

package/puppeteer.js

@@ -1,9 +1,10 @@
-const path = require('path');
-const { executionPath } = process.env;
-require('dotenv').config({ path: path.join(executionPath, ".env") });
-const puppeteer = require('puppeteer');
-const fs = require('fs');
-const chokidar = require('chokidar');
+import dotenv from 'dotenv';
+import path from 'path';
+import puppeteer from 'puppeteer';
+import fs from 'fs';
+import chokidar from 'chokidar';
+import { executionPath } from process.env;
+dotenv.config({ path: path.join(executionPath, ".env") });
 //const watchConfig = "./../watch-config.json";
 
 let watchConfig = '';

package/src/constants/config.ts

@@ -1,6 +1,6 @@
-const path = require("path");
-const fs = require("fs");
-var clc = require("cli-color");
+import path from "path";
+import fs from "fs";
+import clc from "cli-color";
 
 /**
  * Reads and returns the version from package.json
@@ -28,10 +28,19 @@ exports.getVersion = getVersion;
  * @param {boolean} underline Whether to underline the text
  * @returns {string} The formatted text
  */
-const formatText = (text, color = "white", bold = false, underline = false) => {
-    let formattedText = clc[color](text);
+const formatText = (text: string, color: string = "white", bold: boolean = false, underline: boolean = false): string => {
+    let formattedText = text;
+    
+    // Apply color
+    const colorFn = clc[color as keyof typeof clc];
+    if (typeof colorFn === 'function') {
+        formattedText = colorFn(text);
+    }
+    
+    // Apply formatting
     if (bold) formattedText = clc.bold(formattedText);
     if (underline) formattedText = clc.underline(formattedText);
+    
     return formattedText;
 };
 
@@ -43,26 +52,57 @@ export const getHelpInfo = async () => {
     const version = await getVersion();
 
     return `
-${formatText(`at-builder (version: ${version})`, 'green', false, true)}
-
-${formatText("A simple command to run Adobe Target builder.", 'white', true)}
-
-Usage: \`atb\`
-
-Available Commands:
-
-${formatText("new", 'blue', true, true)}  Creates a new activity
-${formatText("build", 'blue', true, true)}  Create build
-${formatText("build -p", 'blue', true, true)}  Create production build
-
-Example:
-
-atb -c new  # Creates a new activity
-atb -c build  # Creates a build
-atb -p -c build  # Creates a build for production
-
-For more information on a specific command, run \`atb <command> --help\`
-    `;
+${formatText(`🎯 at-builder`, 'cyan', true)} ${formatText(`v${version}`, 'gray')}
+
+${formatText("Adobe Target Activity Development CLI", 'white', true)}
+
+A streamlined command-line tool for creating, building, and deploying Adobe Target 
+A/B testing activities with modern web technologies.
+
+${formatText("USAGE", 'yellow', true)}
+    ${formatText("atb", 'cyan')} ${formatText("<command> [options]", 'gray')}
+
+${formatText("COMMANDS", 'yellow', true)}
+    ${formatText("init", 'cyan', true)}           Initialize project with .env configuration and templates
+    ${formatText("new", 'cyan', true)}            Create a new Adobe Target activity with variations
+    ${formatText("build", 'cyan', true)}          Build activity for development
+    ${formatText("build --prod", 'cyan', true)}   Build for production deployment
+    ${formatText("dev", 'cyan', true)}            Start development server with file watching
+    ${formatText("dev --browser", 'cyan', true)}  Start development server and open in browser
+    
+${formatText("GLOBAL OPTIONS", 'yellow', true)}
+    ${formatText("-v, --verbose", 'green')}       Enable detailed logging
+    ${formatText("-V, --version", 'green')}       Display version information
+    ${formatText("-h, --help", 'green')}          Show help information
+
+${formatText("EXAMPLES", 'yellow', true)}
+    ${formatText("# Initialize new project", 'gray')}
+    ${formatText("atb init", 'white')}
+    
+    ${formatText("# Create new activity", 'gray')}
+    ${formatText("atb new", 'white')}
+    
+    ${formatText("# Development build with hot reload", 'gray')}
+    ${formatText("atb build", 'white')}
+    
+    ${formatText("# Production build for Adobe Target deployment", 'gray')}
+    ${formatText("atb build --prod", 'white')}
+    
+    ${formatText("# Development server with browser", 'gray')}
+    ${formatText("atb dev --browser", 'white')}
+
+${formatText("WORKFLOW", 'yellow', true)}
+    ${formatText("1.", 'cyan')} Run ${formatText("atb init", 'white')} to set up project configuration
+    ${formatText("2.", 'cyan')} Run ${formatText("atb new", 'white')} to create activity templates  
+    ${formatText("3.", 'cyan')} Develop variations in ${formatText("/Activities/{name}/Variation-*/", 'gray')}
+    ${formatText("4.", 'cyan')} Run ${formatText("atb build", 'white')} for development testing
+    ${formatText("5.", 'cyan')} Run ${formatText("atb build --prod", 'white')} for Adobe Target deployment
+
+${formatText("SUPPORT", 'yellow', true)}
+    Repository: ${formatText("https://github.com/upesenga/at-builder", 'blue')}
+    Issues:     ${formatText("https://github.com/upesenga/at-builder/issues", 'blue')}
+    License:    ${formatText("MIT", 'green')}
+`;
 };
 
 

package/src/index.ts

@@ -2,7 +2,6 @@
 import { spawn } from "child_process";
 import path from "path";
 import fs from "fs";
-import inquirer  from 'inquirer';
 import { Command } from 'commander';
 import { getVersion, getHelpInfo, setupEnv } from "./constants/config";
 import logger from "./services/logger";
@@ -30,22 +29,58 @@ const productionEnv = {
     executionPath: process.cwd()
 };
 
-// Commander setup
+// Commander setup with proper subcommands
 const setupCommander = async () => {
     logger.info("setupCommander", "Setting up commander");
     const version = await getVersion();
-    logger.info("setupCommander", `Version: ${version}`);
     const program = new Command();
+    
     program
+        .name('atb')
+        .description('Adobe Target Activity Development CLI')
         .version(version, "-V, --version")
-        .usage("[OPTIONS]...")
-        .option("-c, --command <value>")
-        .option("-p, --prod")
-        .option("-v, --verbose", "Enable verbose logging")
-        .parse(process.argv);
+        .option("-v, --verbose", "Enable verbose logging");
+
+    // Add subcommands with proper actions
+    program
+        .command('init')
+        .description('Initialize project with .env configuration and templates')
+        .action(async (options, command) => {
+            const globalOpts = command.parent.opts();
+            await handleInit(globalOpts.verbose);
+        });
+
+    program
+        .command('new')
+        .description('Create a new Adobe Target activity with variations')
+        .action(async (options, command) => {
+            const globalOpts = command.parent.opts();
+            await handleNew(globalOpts.verbose);
+        });
+
+    program
+        .command('build')
+        .description('Build activity for development or production')
+        .option('--prod', 'Build for production deployment')
+        .action(async (options, command) => {
+            const globalOpts = command.parent.opts();
+            checkEnvFile();
+            await handleBuild(options.prod, globalOpts.verbose);
+        });
 
+    program
+        .command('dev')
+        .description('Start development server with file watching')
+        .option('--browser', 'Open in browser automatically')
+        .action(async (options, command) => {
+            const globalOpts = command.parent.opts();
+            checkEnvFile();
+            await handleDev(options.browser, globalOpts.verbose);
+        });
+
+    await program.parseAsync(process.argv);
+    
     logger.info("setupCommander", "Commander setup complete");
-    return program.opts();
 };
 
 
@@ -71,130 +106,81 @@ const runCommand = (commandArr: string[], env: NodeJS.ProcessEnv): void => {
 };
 
 /**
- * Handles the build process based on the given options.
- *
- * @param {boolean} prod - If true, runs the build with production environment.
- *                          If false, runs the build with development environment.
+ * Handles the init command
+ */
+const handleInit = async (verbose: boolean): Promise<void> => {
+    if (verbose) logger.info("verbose", "Initializing new .env file");
+    runCommand(["init -y"], productionEnv);
+    runCommand(["install @babel/runtime","-D"], productionEnv);
+    setupEnv(process.cwd());
+};
+
+/**
+ * Handles the new command
+ */
+const handleNew = async (verbose: boolean): Promise<void> => {
+    if (verbose) logger.info("verbose", "Creating new activity");
+    runCommand(["run", "new-activity"], productionEnv);
+};
+
+/**
+ * Handles the build command
  */
-const handleBuild = async (prod: boolean): Promise<void> => {
-    logger.info("handleBuild", `Handling build with options: production=${prod}`);
+const handleBuild = async (prod: boolean, verbose: boolean): Promise<void> => {
+    if (verbose) logger.info("verbose", `Building in ${prod ? 'production' : 'development'} mode`);
+    
     if (prod) {
-        // Set production environment
         process.env['NODE_ENV'] = 'production';
         logger.info("handleBuild", "Running build with production environment");
-        // Run the build command
         runCommand(['run', 'build-prod'], productionEnv);
     } else {
         logger.info("handleBuild", "Running build with development environment");
-        // Prompt the user to ask if they want to open the build in a browser tab
-        const { openInBrowser } = await inquirer.prompt([
-            {
-                type: 'confirm',
-                name: 'openInBrowser',
-                message: 'Do you want to open your build in a browser tab?',
-                default: false,
-            },
-        ]);
-
-        logger.info("handleBuild", `User opted for opening in browser: ${openInBrowser}`);
-        const commandArr = ['run', 'dev'];
-        if (openInBrowser) {
-            // If the user wants to open the build in a browser, run the build with
-            // puppeteer
-            commandArr[1] = 'dev-puppeteer';
-        }
-
-        logger.info("handleBuild", `Running command: ${commandArr.join(', ')}`);
-        // Run the build command
-        runCommand(commandArr, productionEnv);
-        // TO_DO: verify
-        // process.exit(0);
+        runCommand(['run', 'dev'], productionEnv);
     }
 };
 
+/**
+ * Handles the dev command
+ */
+const handleDev = async (browser: boolean, verbose: boolean): Promise<void> => {
+    if (verbose) logger.info("verbose", `Starting development server with browser=${browser}`);
+    
+    const commandArr = ['run', browser ? 'dev-puppeteer' : 'dev'];
+    logger.info("handleDev", `Running command: ${commandArr.join(', ')}`);
+    
+    runCommand(commandArr, productionEnv);
+};
+
 // Command execution logic
 /**
- * Handles the command execution based on the given options.
- *
- * @returns {Promise<void>}
+ * Main command execution entry point
  */
 const executeCommand = async () => {
     logger.info("executeCommand", "Entering executeCommand");
-    // Check if .env file is present
-    // Get the command options
-    const options = await setupCommander();
-    
-    if (options.command !== 'init')
-        checkEnvFile();
-    
-    logger.info("executeCommand", `Options: ${JSON.stringify(options)}`);
-    /**
-     * Logs a message if verbose mode is enabled
-     * @param {string} message - The message to log
-     */
-    const verboseLog = (message: string) => {
-        if (options.verbose) {
-            logger.info("verbose", message);
-        }
-    };
-
-    switch (options.command) {
-        case "init":
-            // Initialize new .env file
-            verboseLog("Initializing new .env file");
-            runCommand(["init -y"], productionEnv);
-            runCommand(["install @babel/runtime","-D"], productionEnv);
-            setupEnv(process.cwd());
-            break;
-
-        case "new":
-            // Create new activity
-            verboseLog("Creating new activity");
-            runCommand(["run", "new-activity"], productionEnv);
-            break;
-
-        case "build":
-            // Build the application in production or development mode
-            verboseLog(`Building in ${options.prod ? 'production' : 'development'} mode`);
-            await handleBuild(options.prod);
-            break;
-
-        default:
-            // Print command help
-            printCommandHelp();
-            process.exit(0);
-            break;
-    }
+    await setupCommander();
     logger.info("executeCommand", "Exiting executeCommand");
 };
 
 // Print command help
 const printCommandHelp = async () => {
     const help = await getHelpInfo();
-    logger.info("printCommandHelp", help);
+    console.log(help);
     process.exit(0);
 };
 
 /**
  * Main program flow
- *
- * This function is the main entry point of the program. It attempts to execute
- * the command specified by the user. If the command fails, it logs the error
- * message and exits with code 1.
  */
 const main = async () => {
     try {
-        // Execute the command specified by the user
         await executeCommand();
     } catch (error) {
-        // Log the error message if the command fails
         logger.error("main", error.message);
-        // Exit with code 1 if the command fails
         process.exit(1);
     }
 };
 
-// Print help if no arguments
+// Print custom help if no arguments, otherwise let Commander.js handle everything
 if (process.argv.length <= 2) {
     printCommandHelp();
 } else {

package/webpack.config.js

@@ -1,42 +1,26 @@
-const { executionPath: PWD } = process.env;
 const path = require('path');
-require('dotenv').config({ path: path.join(PWD, ".env") });
 const fs = require('fs');
-const WrapperPlugin = require('wrapper-webpack-plugin');
-const TerserPlugin = require("terser-webpack-plugin");
+const dotenv = require('dotenv');
+const { Compilation } = require('webpack');
+const WrapperPlugin = require('./lib/CustomWrapperPlugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const postcssPresetEnv = require('postcss-preset-env');
-const AdobeTargetBuildGeneratorPlugin = require('./lib/at-build-generator');
-// const commander = require("commander");
+const AdobeTargetBuildGeneratorPlugin = require('./lib/at-build-generator.cjs');
 
-console.log(process.env.ACTIVITY_FOLDER_NAME)
+const PWD = process.env.executionPath || process.cwd();
+dotenv.config({ path: path.join(PWD, ".env") });
 
 /**
  * Load from env files
  */
 const PRODUCTION = "production";
 
-let environment = "development";
-
 /**
  * Set current running environment
  */
-if (process.env.NODE_ENV === PRODUCTION) {
-    console.log("\x1b[36m%s\x1b[0m", "------ Running Production Build ------")
-    environment = PRODUCTION;
-} else {
-    console.log("\x1b[36m%s\x1b[0m", "------ Running Development Build ------")
-}
-
-// /**
-//  * commander
-//  */
-// commander
-//     .version("1.0.0", "-v, --version")
-//     .option("-p, --path <value>", "Overwriting value.", process.cwd())
-//     .parse(process.argv);
+let environment = process.env.NODE_ENV === PRODUCTION ? PRODUCTION : "development";
 
-// const options = commander.opts();
 
 /**
  * Update folder name here if wanted to skip while transpilation
@@ -74,7 +58,7 @@ var traversePath = function (dir) {
             if (!fileName.startsWith("V")) {
                 return;
             }
-            console.log(++count + ")", "\x1b[36m", fileName, "\x1b[0m");
+            // console.log(++count + ")", "\x1b[36m", fileName, "\x1b[0m", `\n  Build path: ${file}/dist/build.js`);
             var res = traversePath(file);
             // Process only if have child nodes
             if (res && res.length)
@@ -88,11 +72,9 @@ var traversePath = function (dir) {
     return results;
 }
 
-console.log("\x1b[33m%s\x1b[0m", `${process.env.ACTIVITY_FOLDER_NAME}`);
+// console.log("\x1b[33m%s\x1b[0m", `${process.env.ACTIVITY_FOLDER_NAME}`);
 
-const filepath = PWD;
-
-var files = traversePath(path.join(filepath, 'Activities', process.env.ACTIVITY_FOLDER_NAME).toString());
+var files = traversePath(path.join(PWD, 'Activities', process.env.ACTIVITY_FOLDER_NAME).toString());
 
 //Create entry object which is needed for webpack config
 var entries = {};
@@ -100,17 +82,14 @@ files.forEach((file) => {
     var foldername = file.split("/").pop();
     let distFolderPath = file.replace("/" + foldername, "/dist");
 
-    console.log("distfolder", distFolderPath)
     if (fs.existsSync(distFolderPath) && environment == PRODUCTION) {
-        fs.rmdirSync(distFolderPath, { recursive: true });
-        // fs.rm(distFolderPath, console.log);
+        fs.rmSync(distFolderPath, { recursive: true, force: true });
     }
     var newPath = `${distFolderPath}/build`;
     // Replace path with absolute path before making a key of the entries object
-    entries[newPath.replace(PWD, "")] = file;
+    entries[newPath.replace(PWD, "").replace(/^\//, '')] = file;
 });
 
-console.log("++++ENTRIES++++", entries);
 
 const isProdMode = environment == PRODUCTION;
 
@@ -120,18 +99,15 @@ const plugins = [
         outputReport: true,
         fix: true
     }),
-
     new WrapperPlugin({
         test: /\.js$/,
         header: function (_, args) {
             //Handle target issue for reloading the styles.
-
-            const preFix = process.env.TRACK ? process.env.TRACK : 'TargetBuild';
-            let _uniqueTestId = `${preFix}_${args.hash}`;
+            let _uniqueTestId = `TargetBuild_${args.hash}`;
             args._uniqueTestId = _uniqueTestId;
             return `(function(){
                 if(!window.${_uniqueTestId}){
-                    //# sourceURL=${_uniqueTestId}.js    
+                    //# sourceURL=${_uniqueTestId}.js
                 `;
         },
         footer: function (_, args) {
@@ -140,17 +116,80 @@ const plugins = [
             }
         })();`
         },
-        afterOptimization: true,
+        stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
     })
 ];
 
+
+// Build Summary Plugin
+plugins.push({
+    apply: (compiler) => {
+        compiler.hooks.done.tap('BuildSummaryPlugin', async (stats) => {
+            let kleur;
+            try {
+                const kleurModule = await import('kleur');
+                kleur = kleurModule.default;
+            } catch (e) {
+                // Fallback if kleur is not available
+                kleur = {
+                    cyan: (text) => `\x1b[36m${text}\x1b[0m`,
+                    gray: (text) => `\x1b[90m${text}\x1b[0m`,
+                    bold: (text) => `\x1b[1m${text}\x1b[0m`,
+                    yellow: (text) => `\x1b[33m${text}\x1b[0m`,
+                    green: (text) => `\x1b[32m${text}\x1b[0m`,
+                    blue: (text) => `\x1b[34m${text}\x1b[0m`,
+                    magenta: (text) => `\x1b[35m${text}\x1b[0m`
+                };
+                kleur.gray.underline = (text) => `\x1b[90m\x1b[4m${text}\x1b[0m`;
+            }
+            const project = process.env.ACTIVITY_FOLDER_NAME || 'Project';
+            const info = stats.toJson({ all: false, assets: true, modules: true, version: true, timings: true });
+
+            const buildModules = Object.entries(entries).map(([out, src], idx) => {
+                const parts = out.split(path.sep);
+                let name = parts[parts.length - 3] || `Module-${idx + 1}`;
+                name = name.replace(/dist|build/gi, '').replace(/[-_]/g, '').trim() || `Module-${idx + 1}`;
+                return { idx: idx + 1, name, path: out };
+            });
+
+            const duration = (stats.endTime - stats.startTime) / 1000;
+            const mode = environment === PRODUCTION ? 'Production' : 'Development';
+
+            console.log(kleur.cyan(`\n📦 ${mode} Build Summary`));
+            console.log(kleur.gray('├── ') + kleur.bold('Activity: ') + kleur.yellow(project));
+            console.log(kleur.gray('├── ') + kleur.bold('Modules: '));
+
+            buildModules.forEach((m, i) => {
+                const assetPath = m.path.replace(/^\/+/, '');
+                const assetName = assetPath + '.js';
+                const asset = info.assets.find(a => a.name === assetName);
+                const sizeKB = asset ? (asset.size / 1024).toFixed(2) : '0.00';
+                const absPath = path.resolve(PWD, assetPath.replace(/\/build$/, ""), environment === PRODUCTION ? 'at-build.html' : 'build.js');
+                const atBuildLink = makeClickableLink(absPath, 1, 1);
+
+                const prefix = (i === buildModules.length - 1) ? '└──' : '├──';
+                console.log(kleur.gray(`│   ${prefix} `) + kleur.green(`${m.name} (${sizeKB} KB)`));
+                if (environment === PRODUCTION) {
+                    console.log(`🔗 ${kleur.blue(`${m.name} Production Build`)} 🔗`);
+                    console.log(`${kleur.gray().underline(atBuildLink)}`);
+                }
+            });
+            console.log(kleur.gray('│ '));
+            console.log(kleur.gray('├── ') + kleur.bold('Assets:   ') + kleur.magenta(info.assets.length));
+            console.log(kleur.gray('├── ') + kleur.bold('Modules:  ') + kleur.magenta(info.modules.length));
+            console.log(kleur.gray('├── ') + kleur.bold('Webpack:  ') + kleur.magenta(info.version));
+            console.log(kleur.gray('├── ') + kleur.bold('Duration: ') + kleur.magenta(duration.toFixed(2) + 's'));
+        });
+    }
+});
+
 if (isProdMode) {
     plugins.push(new AdobeTargetBuildGeneratorPlugin({
         test: /\.js$/,
         fileName: "at-build",
         fileType: "html",
         header: function (source, outputPath) {
-            return `<script targetExp="${process.env.ACTIVITY_FOLDER_NAME}" variation="${(outputPath.split(path.sep)).slice(-3, -1)[0]}" type="application/javascript">`;
+            return `<script targetExp="${process.env.ACTIVITY_FOLDER_NAME}" variation="${(outputPath.split(path.sep)).slice(-3, -1)[1]}" type="application/javascript">`;
         },
         footer: function () {
             return `</script>`;
@@ -160,7 +199,9 @@ if (isProdMode) {
 
 // Webpack config object with dynamic entry points
 module.exports = {
-    ...(environment !== PRODUCTION && { devtool: 'inline-source-map' }),
+    devtool: false,
+    // devtool: 'source-map', // generate source-map in build directory
+    //...(environment !== PRODUCTION && { devtool: 'inline-source-map' }),
     mode: environment,
     entry: {
         ...entries
@@ -222,10 +263,14 @@ module.exports = {
                     {
                         loader: 'style-loader',
                         options: {
-                            injectType: 'singletonStyleTag',
+                            injectType: 'singletonStyleTag', // styleTag | singletonStyleTag | lazyStyleTag | lazySingletonStyleTag | linkTag
                             attributes: {
-                                id: "ddo-styles" //TO_DO this should load from env or watch config
+                                id: process.env.STYLE_ID || "ddo-styles"
                             }
+                            // sourceMap: environment !== PRODUCTION
+                            // insert: "body" | (element) => {}
+                            // insert:(element) => {}
+                            // esModule: false, default is true - ES modules is beneficial, like in the case of module concatenation and tree shaking.
                         }
                     },
                     {
@@ -251,6 +296,9 @@ module.exports = {
                     },
                     {
                         loader: "sass-loader",
+                        options: {
+                            api: 'modern'
+                        }
                     }
                 ]
 
@@ -271,7 +319,7 @@ module.exports = {
                             comments: /# sourceURL=/i
                         },
                         compress: {
-                            drop_console: isProdMode,
+                            drop_console: environment === PRODUCTION,
                         }
                     },
                     extractComments: false
@@ -280,10 +328,10 @@ module.exports = {
         ]
     },
     plugins: plugins,
-    stats: 'minimal',
-    performance: {
-        maxAssetSize: 1024000,
-        maxEntrypointSize: 1024000,
-        hints: "warning"
-    }
-};
+    stats: 'minimal'
+};
+
+function makeClickableLink(fp, line = 1, col = 1) {
+    const uri = `${fp}:${line}:${col}`;
+    return `${uri}`;
+}