at-builder 1.1.9 → 1.2.0

package/.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run build:prod:*)"
+    ],
+    "deny": []
+  }
+}

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,11 @@ 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 = cli_color_1.default[color](text);
     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;
 };
 /**
@@ -69,9 +72,9 @@ For more information on a specific command, run \`atb <command> --help\`
 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 +86,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 +97,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 +117,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 +142,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/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,13 +1,14 @@
 {
     "name": "at-builder",
-    "version": "1.1.9",
+    "version": "1.2.0",
     "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",
@@ -62,6 +63,7 @@
         "@babel/runtime": "^7.26.7",
         "@eslint/js": "^9.20.0",
         "globals": "^15.15.0",
+        "kleur": "^4.1.5",
         "typescript-eslint": "^8.24.1"
     },
     "repository": {

package/plopfile.js

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

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

package/webpack.config.js

@@ -1,42 +1,27 @@
-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");
+import path from 'path';
+import fs from 'fs';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const dotenv = require('dotenv');
+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 ------")
-}
+let environment = process.env.NODE_ENV === PRODUCTION ? PRODUCTION : "development";
 
-// /**
-//  * commander
-//  */
-// commander
-//     .version("1.0.0", "-v, --version")
-//     .option("-p, --path <value>", "Overwriting value.", process.cwd())
-//     .parse(process.argv);
-
-// const options = commander.opts();
 
 /**
  * Update folder name here if wanted to skip while transpilation
@@ -74,7 +59,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 +73,9 @@ var traversePath = function (dir) {
     return results;
 }
 
-console.log("\x1b[33m%s\x1b[0m", `${process.env.ACTIVITY_FOLDER_NAME}`);
-
-const filepath = PWD;
+// console.log("\x1b[33m%s\x1b[0m", `${process.env.ACTIVITY_FOLDER_NAME}`);
 
-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 +83,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;
 
@@ -119,30 +99,110 @@ const plugins = [
         extensions: "js",
         outputReport: true,
         fix: true
-    }),
+    })
+];
 
-    new WrapperPlugin({
-        test: /\.js$/,
-        header: function (_, args) {
-            //Handle target issue for reloading the styles.
+// 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;
+    }
+})();`;
 
-            const preFix = process.env.TRACK ? process.env.TRACK : 'TargetBuild';
-            let _uniqueTestId = `${preFix}_${args.hash}`;
-            args._uniqueTestId = _uniqueTestId;
-            return `(function(){
-                if(!window.${_uniqueTestId}){
-                    //# sourceURL=${_uniqueTestId}.js    
-                `;
-        },
-        footer: function (_, args) {
-            return `\n
-                window.${args._uniqueTestId} = true;
+                            compilation.updateAsset(assetName, new webpackSources.RawSource(wrappedSource));
+                        }
+                    }
+                }
+            );
+        });
+    }
+});
+
+// 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`;
             }
-        })();`
-        },
-        afterOptimization: true,
-    })
-];
+            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({
@@ -150,7 +210,7 @@ if (isProdMode) {
         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>`;
@@ -159,8 +219,10 @@ if (isProdMode) {
 }
 
 // Webpack config object with dynamic entry points
-module.exports = {
-    ...(environment !== PRODUCTION && { devtool: 'inline-source-map' }),
+export default {
+    devtool: false,
+    // devtool: 'source-map', // generate source-map in build directory
+    //...(environment !== PRODUCTION && { devtool: 'inline-source-map' }),
     mode: environment,
     entry: {
         ...entries
@@ -184,6 +246,9 @@ module.exports = {
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
+                resolve: {
+                    fullySpecified: false
+                },
                 use: {
                     loader: 'babel-loader',
                     options: {
@@ -222,10 +287,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 +320,9 @@ module.exports = {
                     },
                     {
                         loader: "sass-loader",
+                        options: {
+                            api: 'modern'
+                        }
                     }
                 ]
 
@@ -271,7 +343,7 @@ module.exports = {
                             comments: /# sourceURL=/i
                         },
                         compress: {
-                            drop_console: isProdMode,
+                            drop_console: environment === PRODUCTION,
                         }
                     },
                     extractComments: false
@@ -280,10 +352,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}`;
+}