at-builder 1.2.0 → 1.2.2

package/.claude/settings.local.json

@@ -1,7 +1,10 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npm run build:prod:*)"
+      "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

@@ -34,7 +34,13 @@ exports.getVersion = exports.getVersion;
  * @returns {string} The formatted text
  */
 const formatText = (text, color = "white", bold = false, underline = false) => {
-    let formattedText = cli_color_1.default[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 = cli_color_1.default.bold(formattedText);
     if (underline)
@@ -48,26 +54,57 @@ 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) => {

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,89 @@ 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");
+    // Run npm init in the current working directory (where user ran atb init)
+    (0, child_process_1.spawn)("npm", ["init", "-y"], {
+        cwd: process.cwd(),
+        env: process.env,
+        shell: true,
+        stdio: "inherit",
+    });
+    // Install @babel/runtime as dev dependency in the current directory
+    (0, child_process_1.spawn)("npm", ["install", "@babel/runtime", "-D"], {
+        cwd: process.cwd(),
+        env: process.env,
+        shell: true,
+        stdio: "inherit",
+    });
+    (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/at-build-generator.cjs

@@ -39,9 +39,8 @@ class AdobeTargetBuildGeneratorPlugin {
         function wrapFileContent(content, outputPath) {
             const headerContent = (typeof header === 'function') ? header(content, outputPath) : header;
             const footerContent = (typeof footer === 'function') ? footer(content, outputPath) : footer;
-            return `${headerContent}
-            ${content}
-            ${footerContent}`;
+            return `
+${headerContent}${content}${footerContent}`;
         }
 
         function generateTargetReadyBuild({ source, targetPath }) {

package/package.json

@@ -1,14 +1,13 @@
 {
     "name": "at-builder",
-    "version": "1.2.0",
+    "version": "1.2.2",
     "main": "bin/index.js",
     "bin": {
         "atb": "bin/index.js"
     },
-    "type": "module",
     "scripts": {
         "build": "tsc -w",
-        "build:prod": "cross-env NODE_ENV=production webpack",
+        "build-prod": "cross-env NODE_ENV=production webpack",
         "dev": "webpack -- -w",
         "dev-puppeteer": "webpack -- -w & npm run puppeteer",
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -57,10 +56,11 @@
     },
     "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",

package/plopfile.js

@@ -1,6 +1,6 @@
-import components from "./.plop/generators/components";
+const components = require("./.plop/generators/components");
 
 
-export default function (plop) {
+module.exports = function (plop) {
     plop.setGenerator('components', components );
 };

package/src/constants/config.ts

@@ -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,96 @@ 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 handleBuild = async (prod: boolean): Promise<void> => {
-    logger.info("handleBuild", `Handling build with options: production=${prod}`);
+const handleInit = async (verbose: boolean): Promise<void> => {
+    if (verbose) logger.info("verbose", "Initializing new .env file");
+    
+    // Run npm init in the current working directory (where user ran atb init)
+    spawn("npm", ["init", "-y"], {
+        cwd: process.cwd(),
+        env: process.env,
+        shell: true,
+        stdio: "inherit",
+    });
+    
+    // Install @babel/runtime as dev dependency in the current directory
+    spawn("npm", ["install", "@babel/runtime", "-D"], {
+        cwd: process.cwd(),
+        env: process.env,
+        shell: true,
+        stdio: "inherit",
+    });
+    
+    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, 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,9 +1,8 @@
-import path from 'path';
-import fs from 'fs';
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
+const path = require('path');
+const fs = require('fs');
 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');
@@ -99,48 +98,29 @@ const plugins = [
         extensions: "js",
         outputReport: true,
         fix: true
+    }),
+    new WrapperPlugin({
+        test: /\.js$/,
+        header: function (_, args) {
+            //Handle target issue for reloading the styles.
+            let _uniqueTestId = `TargetBuild_${args.hash}`;
+            args._uniqueTestId = _uniqueTestId;
+            return `
+    (function(){
+        if(!window.${_uniqueTestId}){
+            //# sourceURL=${_uniqueTestId}.js
+        `;
+        },
+        footer: function (_, args) {
+            return `\n
+            window.${args._uniqueTestId} = true;
+        }
+    })();\n`
+        },
+        stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
     })
 ];
 
-// Modern replacement for WrapperPlugin using webpack's BannerPlugin and custom plugin
-plugins.push({
-    apply: (compiler) => {
-        compiler.hooks.compilation.tap('ModernWrapperPlugin', (compilation) => {
-            compilation.hooks.processAssets.tap(
-                {
-                    name: 'ModernWrapperPlugin',
-                    stage: compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE
-                },
-                async (assets) => {
-                    const crypto = await import('crypto');
-                    const webpackSources = await import('webpack-sources');
-                    
-                    for (const assetName of Object.keys(assets)) {
-                        if (assetName.endsWith('.js')) {
-                            const asset = assets[assetName];
-                            const source = asset.source();
-                            
-                            // Generate unique test ID
-                            const preFix = process.env.TRACK || 'TargetBuild';
-                            const hash = crypto.createHash('md5').update(assetName + source).digest('hex').substring(0, 8);
-                            const uniqueTestId = `${preFix}_${hash}`;
-                            
-                            const wrappedSource = `(function(){
-    if(!window.${uniqueTestId}){
-        //# sourceURL=${uniqueTestId}.js
-${source}
-        window.${uniqueTestId} = true;
-    }
-})();`;
-
-                            compilation.updateAsset(assetName, new webpackSources.RawSource(wrappedSource));
-                        }
-                    }
-                }
-            );
-        });
-    }
-});
 
 // Build Summary Plugin
 plugins.push({
@@ -219,7 +199,7 @@ if (isProdMode) {
 }
 
 // Webpack config object with dynamic entry points
-export default {
+module.exports = {
     devtool: false,
     // devtool: 'source-map', // generate source-map in build directory
     //...(environment !== PRODUCTION && { devtool: 'inline-source-map' }),
@@ -246,9 +226,6 @@ export default {
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
-                resolve: {
-                    fullySpecified: false
-                },
                 use: {
                     loader: 'babel-loader',
                     options: {